@charset "UTF-8";
@import url('base.css');
/**************************************************/
/* ================================= base set */
*{ font-size: 14px;}

/**************************************************/
/* ================================= layout */
/* === fnb === */
.fnb{
    position: fixed; top: calc(100% - 70px); z-index: 999;
    display: flex; align-items: center;
    width: 100%; height: 70px; padding: 0 20px;
    background: #fff;
    box-shadow: 0 -3px 12px 3px #2222220d;
}
.fnb > a{
    flex: 1; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 4px 0;
    height: 100%; padding: 10px 0 8px; background: #fff;
}
.fnb > a:before{
    display: block;
    width: 24px; height: 24px;
    background-repeat: no-repeat; background-position: top left; background-size: 24px 48px;
    content: '';
}
.fnb > a.active{ color: var(--primary); font-weight: 600;}
.fnb > a.active:before{ background-position: bottom left;}

.fnb > a:nth-of-type(1):before{ background-image: url(../img/user/fnb_ico_home.webp); }
.fnb > a:nth-of-type(2):before{ background-image: url(../img/user/fnb_ico_table.webp); }
.fnb > a:nth-of-type(3):before{ background-image: url(../img/user/fnb_ico_chat.webp); }
.fnb > a:nth-of-type(4):before{ background-image: url(../img/user/fnb_ico_news.webp); }
.fnb > a:nth-of-type(5):before{ background-image: url(../img/user/fnb_ico_info.webp); }

/* === main === */
main{ padding-left: 30px !important; padding-right: 30px !important; padding-bottom: 100px !important; background-color: #fff;}

/* --- text */
main h2{
    position: relative; left: -30px;
    width: calc(100% + 60px); padding: 30px 30px 5px;
    border-bottom: 2px solid #F2F2F2;
    font-size: 1.28rem;
}
span.t_red{ display: inline;}

/* --- table */
.tb_main tr > *{ border: 1px solid #DDD;  text-align: center; font-size: 0.875rem;  }
.tb_main thead{height: 60px; }
.tb_main th{ background: #2BA8B9; color: #fff; }
.tb_main td{ height: 36px; }

/* --- box */
/* bx_paginate */
.bx_paginate{
    display: flex; align-items: center; justify-content: center;
}
.bx_paginate .wrap{
    display: flex; align-items: center; justify-content: center;
    padding: 2.5px 5px;
    background: #FFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.bx_paginate button{
    width: 20px; height: 20px; margin: 0 2.5px;
    background-color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    color: #737373; font-size: 10px
}
.bx_paginate button.active{ background-color: var(--point); color: #fff; }

.bx_paginate button:is([class*="btn_"]){
    background: url(../img/common/ico_paginatestep.svg) no-repeat center top 48%/35%;
}
.bx_paginate .btn_next{ transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); }

/* bx_btnBottom */
.bx_btnBottom{
    display: flex; justify-content: space-around; align-items: center; width: calc(100% - 30px); margin: 0 auto;
}
.bx_btnBottom button{
    height: 56px;
    border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
    -ms-border-radius: 5px; -o-border-radius: 5px;
    font-size: 1.14rem; letter-spacing: -0.325px;
}
.bx_btnBottom .btn_confirm{ width: calc(100% - 86px - 12px)}
.bx_btnBottom .btn_cancel{ width: 86px;}
/* --- button */
.btn_submit{
    display: block; width: 100%; height: 56px; margin: 0 auto;
    border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
    -ms-border-radius: 5px; -o-border-radius: 5px;
    font-size: 1.14rem; letter-spacing: -0.325px;
}

/* --- label */
/* lb_chk */
.lb_chk{ display: inline-flex; align-items: center; color: #222; cursor: pointer; }
.lb_chk:hover{ filter: brightness(95%); -webkit-filter: brightness(95%); }
.lb_chk input{ margin-right: 6px;}

/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    *{ font-size: 14px; }
    html, body{ zoom: 1; }
    .fnb, main{
        left: 50%; transform:translateX(-50%); max-width: 560px; border-color: #ddd; border-style: solid; border-width: 0 1px;
    }

    /* === bg_body === */
    .bg_body{
        position: fixed; top: 0; left: 0; z-index: 1;
        display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: center;
        width: 100%; height: 100%; padding-left: calc(50% + 35px); padding-bottom: 70px;
        background-color: var(--secondary);
    }
    .bg_body img{width: 76px; }
    .bg_body .wrap{ width: 100%; display:none;}
    .bg_body .logo_text{position: absolute; top: 35px; right: 35px; width: auto;}
    .bg_body .wrap_img{display: flex; justify-content: flex-end; align-items: center; gap: 0 20px; margin-bottom: 45px; margin-right: 35px;}
    .bg_body p{ font-size: 26px; }
    .bg_body b{ font-size: 34px; }
    .bg_body ul{ display: flex; flex-flow: row wrap; margin-top: 72px;}
    .bg_body li{ color: #777; font-size: 20px; line-height: 1.7; }
    .bg_body li:nth-of-type(2){ width: 66.66%;}
    .bg_body span{
        position: absolute; left:0; bottom: 0;
        width: 100%; height: 70px; padding-left: calc(50% + 35px);
        line-height: 70px; font-size: 1.14rem; display:none;
    }

    /* === main === */
    main{ position: relative; z-index: 100; min-height: 100vh; }
}
@media screen and (max-width: 1440px){
    html, body{ zoom: 0.9}
    .fnb, main{ left: 11.0989% }

    /* === bg_body === */
    .bg_body, .bg_body span{ padding-left: calc( 11.0989% + 560px + 35px); padding-right: 35px;}

    /* === main === */
    main{ min-height: 123.525vh; }
}
@media screen and (max-width: 1176px){
    .fnb, main{ left: 0;  }

    /* === bg_body === */
    .bg_body, .bg_body span{ padding-left: calc(560px + 35px); }
    .bg_body span{ font-size: 15px;}
}
@media screen and (max-width: 1024px){
    *{ font-size: 12px; }
    html, body{ zoom: 1; }
    .fnb, main{ left: 0; }

    /* === main === */
    main{ min-height: 100vh; }
}

@media (max-width: 768px) { 
    .col-price-business {
        width: 100px; 
    }
}
@media screen and (max-width: 360px){

    

    /* === fnb === */
    .fnb{ padding: 0 15px; }
    .fnb > a{ font-size: 8px;}

    /* === main === */
    /* main{ padding-left: 15px !important; padding-right: 15px !important; } */

    /* --- text */
    main h2{ left: -15px; width: calc(100% + 30px);}
}