@charset "UTF-8";
*{margin: 0; padding: 0; box-sizing: border-box; font-size: 16px; color:#121212; font-family: 'Poppins', sans-serif; font-weight: 500;}
a{text-decoration: none;}
ul, li{list-style: none;}
table{text-align: left;}
input:focus, select:focus{outline: none;}

:root {
    --gradient: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%);
}

.container{width:100%; height: 100vh; background: #f1f1f5;}
.header_mobile_btn_area{display: none;}
.mobile_close_btn{display: none;}

.header{width:320px; height: 100%; position: absolute; top:0; left: 0; background: #2a3827; border-radius: 0 70px 0 0;}
.header .header_wrap{padding: 40px;}
.header .header_wrap .header_top{border-bottom: 1px solid #616f60; padding-bottom: 20px; margin-bottom: 30px;}
.header .header_wrap .header_top .header_logo{width:100%; text-align: center;}
.header .header_wrap .header_top .header_infobtn{display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20px;}
.header .header_wrap .header_top .header_infobtn>a{width:calc(50% - 5px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background: #364333; border-radius: 5px; padding: 7px 0;}
.header .header_wrap .header_top .header_infobtn>a:first-child{margin-right: 10px;}
.header .header_wrap .header_top .header_infobtn>a>span{color:#868e85; font-size: 12px; font-weight: 700; margin-left: 5px;}
.header .header_wrap .header_menu>ul>li{margin-bottom: 20px;}
.header .header_wrap .header_menu>ul>li>a{color:#868e85;}
.header .header_wrap .header_menu>ul>li.on>a{color:#fff; font-weight: 700;}
.header .header_wrap .header_menu>ul>li.on .header_menu_sub{display: block;}
.header .header_wrap .header_menu>ul>li .header_menu_sub{margin-top: 10px; padding-left: 18px; }
.header .header_wrap .header_menu>ul>li .header_menu_sub>li{list-style: disc; margin-bottom: 5px;}
.header .header_wrap .header_menu>ul>li .header_menu_sub>li:last-child{margin-bottom: 0;}
.header .header_wrap .header_menu>ul>li .header_menu_sub>li>a{color:#868e85;}
.header .header_wrap .header_menu>ul>li .header_menu_sub>li.sub_on{color:#fff;}
.header .header_wrap .header_menu>ul>li .header_menu_sub>li.sub_on>a{color:#fff; font-weight: bold;}

.section{padding-left: 320px; height: 100%; overflow-y: auto;}
.section .section_wrap{padding: 6%; min-width: 750px;}
.section .section_wrap .page_title{margin-bottom: 30px;}
.section .section_wrap .page_title>h1{font-size: 26px; font-weight: bold;}
.content_area{background: #fff; border-radius: 10px;}
.content_area .content_wrap{padding: 30px;}
.content_area .content_wrap .content_title_area{margin-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap;}
.content_area .content_wrap .content_title_area>h1{color:#50b847; font-size: 20px; font-weight: bold;}
.content_area .content_wrap .content_title_area .content_search{margin-left: auto; height: 37px; display: flex; flex-direction: row; flex-wrap: wrap; width:240px; border: 1px solid #ccc; border-radius: 5px;}
.content_area .content_wrap .content_title_area .content_search>input{height: 100%; font-size: 12px; padding: 0 10px; width:calc(100% - 37px); border: 0; background: none;}
.content_area .content_wrap .content_title_area .content_search>a{background: none; height: 100%; width:37px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; border-left: 1px solid #ccc;}
.content_area .content_wrap .content_title_area .content_search>a>img{width:80%;}

.content_area .content_wrap .content_table{width:100%;}
.content_area .content_wrap .content_table>table{width:100%;}
.content_area .content_wrap .content_table>table .txt_center{text-align: center;}
.content_area .content_wrap .content_table>table>tbody>tr>td{padding-bottom: 10px; font-weight: 400;}
.content_area .content_wrap .content_table>table>tbody>tr>td>a{color:#50b847; font-weight: bold; text-decoration: underline;}
.content_area .content_wrap .content_table>table>tbody>tr>th{padding-bottom: 10px; font-weight: bold;}
.content_area .content_wrap .content_table>table>tbody>tr>th>sup{font-size: 10px; margin-left: 2px; font-weight: bold;}
.content_area .content_wrap .content_table>table>tbody>tr>td>input{width:100%; border: 1px solid #ededed; border-radius: 5px; padding: 7px 15px;}
.content_area .content_wrap .content_table>table>tbody>tr>td>textarea{width:100%; border: 1px solid #ededed; border-radius: 5px; padding: 7px 15px;}
.content_area .content_wrap .content_table>table>tbody>tr>td>select{width:100%; border: 1px solid #ededed; border-radius: 5px; padding: 7px 15px; background: url('../img/down_icon.png')98% center no-repeat; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.content_area .content_wrap .content_button{display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 30px; justify-content: center;}
.content_area .content_wrap .content_button>button{border:none;font-weight: 700; padding: 10px 0; width:200px; background: #50b847; border-radius: 5px; color:#fff; margin-right: 10px; cursor:pointer;}
.content_area .content_wrap .content_button>button:last-child{margin-right: 0;}
.content_area .content_wrap .content_button>button.bc_gray{background: #ddd;}
.content_area .content_wrap .content_alert{font-size: 20px; line-height: 1.6; text-align: center;}
.content_area .content_wrap .content_alert>a{font-size: 20px; color:#50b847; text-decoration: underline;}
.content_area .content_wrap .content_alert>img{max-width: 400px; width:100%; display: block; margin: 0 auto;}

.content_area .content_wrap .content_table.bor_bot>table>tbody>tr>td, .content_area .content_wrap .content_table.bor_bot>table>tbody>tr>th{border-bottom: 1px solid #ededed; padding-top: 10px;}
.content_area .content_wrap .content_table.bor_bot>table>tbody>tr>th>b{color:red;}

.auth_area{background: url('/assets/img/auth_bg.png')top center no-repeat; background-size: 100%; width:100%; height: 100%;}
.auth_area .auth_wrap{width:700px; height: 100%; margin: 0 auto; position: relative;}
.auth_area .auth_wrap .auth_login{width:100%; border-radius: 10px; overflow: hidden; position: absolute; top:50%; left:0; transform: translate(0,-50%); box-shadow: 0px 0px 20px 15px rgb(0 0 0 / 10%);}
.auth_area .auth_wrap .auth_login .auth_login_logo{background: #172116; text-align: center; padding: 20px 0;}
.auth_area .auth_wrap .auth_login .auth_login_content{background: #fff; padding: 40px 60px 60px 60px;}
.auth_area .auth_wrap .auth_login .auth_login_content>h1{font-size: 36px; font-weight: bold; text-align: center; margin-bottom: 20px;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_inputarea{max-width: 500px; margin: 0 auto;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_inputarea>input{width:100%; margin-bottom: 10px; padding: 15px 20px; border-radius: 10px; border: 1px solid #ededed;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_inputarea .btn_submit{display: block; border:none; text-align: center; width:100%; border-radius: 10px; color:#fff; background: #50b847; padding: 15px 0; font-weight: bold; margin-top: 10px;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_inputarea>p{text-align: center; border: 1px solid #ededed; padding: 15px 0; border-radius: 10px;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info{text-align: center; margin-top: 30px;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>p{font-size: 14px; color:#898989; font-weight: bold; margin-bottom: 5px;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>ul{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>ul>li::after{content: '|'; font-size: 10px; margin: 0 20px;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>ul>li:last-child::after{display: none;}
.auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>ul>li>a{color:#898989; font-size: 14px;}

.section .section_wrap.main .page_title{margin-bottom: 50px;}
.section .section_wrap.main .page_title>h1{font-size: 37px; text-align: center; color:#fff; opacity:0.7;}
.main_cat_area .main_cat_area_wrap{width:100%; max-width: 1130px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap;}
.main_cat_area .main_cat_area_wrap .main_cat_btn{display: block; width: calc(33.33333% - 70px); margin-right: 105px; text-align: center; }
.main_cat_area .main_cat_area_wrap .main_cat_btn:last-child{margin-right: 0;}
.main_cat_area .main_cat_area_wrap .main_cat_btn .main_cat_btn_icon>img{width:100%; margin-bottom: 10px;}
.main_cat_area .main_cat_area_wrap .main_cat_btn .main_cat_btn_txt{font-weight: bold; font-size: 20px;}
.main_cat_area .main_cat_area_wrap .main_cat_btn.notyet{pointer-events: none;}
.main_cat_area .main_cat_area_wrap .main_cat_btn.notyet .main_cat_btn_txt{color:#898989;}
.btn_wrap{margin:0 1.5% 5%;}
.main_cat_area .main_cat_area_wrap .main_app_btn{
    -webkit-box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25);
    padding: 15px;
    background:#fff;
    cursor: pointer;
    -webkit-transition: 200ms ease !important;;
    -o-transition: 200ms ease !important;;
    transition: 200ms ease !important;;
    border-radius: 10px;
    position:relative;
    display: block;
}

.main_cat_area .main_cat_area_wrap .main_app_btn:hover{
    -webkit-transform: scale(1.04) !important;
    -ms-transform: scale(1.04) !important;;
    transform: scale(1.04) !important;;
    color: #222831;
    -webkit-box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2)
}



.main_cat_area .main_cat_area_wrap .main_app_btn.ready{opacity:0.3 !important;}
.app_imgarea{text-align: center; max-width: 200px; margin:0 auto;}
.app_imgarea img{width:100%;}
.app_text{color:#000; font-size:21px; padding:13px 0 0 0; font-weight: 800; letter-spacing: -0.03em; text-align: center; width: 100%; display: inline-block;}

.colorant_table{width:100%;}

.attached_file{display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 5px;}
.file_delete.coa{background: #cfcfcf; cursor: pointer; width:20px; height:20px; display: block; text-align: center; border-radius: 50%; font-size: 11px; line-height: 20px; margin-left: 5px;}

.content_area .content_wrap .content_table>table>tbody>tr>td>a.coa_btn{text-decoration: none; display: flex; align-items: center; justify-content: center;}
.content_area .content_wrap .content_table>table>tbody>tr>td>a.coa_btn>i{font-size: 18px;}
.content_area .content_wrap .content_table>table>tbody>tr>td>a.coa_btn:hover>i{color:#50b847;}


@media screen and (max-width: 1240px){
    .header{width: 240px;}
    .header .header_wrap{padding: 40px 30px;}
    .header .header_wrap .header_top .header_infobtn>a>img{height:15px;}
    .header .header_wrap .header_menu>ul>li>a{font-size: 14px;}

    .section{padding-left: 240px;}
    .section .section_wrap{padding: 60px;}
    .section .section_wrap .page_title{margin-bottom: 20px;}
    .section .section_wrap .page_title>h1{font-size: 24px;}
    .content_area .content_wrap .content_title_area>h1{font-size: 16px; width: 100%;}

    .content_area .content_wrap .content_table>table>tbody>tr>th{font-size: 14px;}
    .content_area .content_wrap .content_table>table>tbody>tr>td{font-size: 14px; padding-right: 10px;}
    .content_area .content_wrap .content_table>table>tbody>tr>td>a{font-size: 14px;}
    .content_area .content_wrap .content_table>table>tbody>tr>td>input{font-size: 14px;}
    .content_area .content_wrap .content_table>table>tbody>tr>td>select{font-size: 14px;}
    .content_area .content_wrap .content_button>a{font-size: 14px; width:150px;}
    .content_area .content_wrap .content_alert>img{max-width: 300px;}
    .content_area .content_wrap .content_title_area .content_search{margin-left: 0; margin-top: 10px;}

    .auth_area{background-size: 300%;}
    .auth_area .auth_wrap{width:90%; max-width: 500px;}
    .auth_area .auth_wrap .auth_login .auth_login_logo{padding: 15px 0;}
    .auth_area .auth_wrap .auth_login .auth_login_content{padding: 20px;}
    .auth_area .auth_wrap .auth_login .auth_login_content>h1{font-size: 16px; margin-bottom: 10px;}
    .auth_area .auth_wrap .auth_login .auth_login_content .auth_login_inputarea>input{padding: 10px 15px; font-size: 14px;}
    .auth_area .auth_wrap .auth_login .auth_login_content .auth_login_inputarea>a{font-size: 14px; padding: 10px 0;}
    .auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info{margin-top: 15px;}
    .auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>p{font-size: 12px;}
    .auth_area .auth_wrap .auth_login .auth_login_content .auth_login_info>ul>li>a{font-size: 12px;}

    .section .section_wrap.main .page_title{margin-bottom: 40px;}
    .section .section_wrap.main .page_title>h1{font-size: 32px;}
    .main_cat_area .main_cat_area_wrap .main_cat_btn{width:calc(33.33333% - 10px); margin-right: 15px;}
    .main_cat_area .main_cat_area_wrap .main_cat_btn .main_cat_btn_icon>img{margin-bottom: 5px;}
    .main_cat_area .main_cat_area_wrap .main_cat_btn .main_cat_btn_txt{font-size: 16px;}
}

@media screen and (max-width: 768px){
    .container{padding:0 !important;}
    .section{padding-left: 0;}
    .header{left: -100%; width:80%; transition: all 0.2s; z-index: 99;}
    .header.on{left: 0;}

    .header_mobile_btn_area{display: block; position: fixed; top:20px; left: 5%; background: #2a3827; padding: 10px; border-radius: 10px; z-index: 98;}
    .header_mobile_btn{display:block; width:25px; cursor: pointer;}
    .header_mobile_btn>span{display: block; width:100%; height: 3px; background: #fff; margin-bottom: 5px;}
    .header_mobile_btn>span:nth-child(2){width:80%;}
    .header_mobile_btn>span:last-child{margin-bottom: 0;}
    .mobile_close_btn{position: absolute; top:20px; right:-50px; background: #2a3827; display: flex; align-items: center; justify-content: center; width:40px; height: 40px; border-radius: 50%; cursor: pointer;}
    .mobile_close_btn>span{color:#fff; font-size: 20px;}

    .section .section_wrap{min-width: auto; padding: 80px 5% 40px;}
    .section .section_wrap .page_title>h1{font-size: 20px;}

    .content_area .content_wrap{overflow: auto; padding: 30px 20px;}
    .content_area .content_wrap .content_table{overflow:auto;}
    .content_area .content_wrap .content_table>table{min-width: 700px;}

    .content_area .content_wrap .content_table.min_non>table{min-width: auto;}

    .content_area .content_wrap .content_table.search>table{min-width: auto; display: flex; flex-direction: row; flex-wrap: wrap;}
    .content_area .content_wrap .content_table.search>table>tbody>tr{display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; margin-bottom: 20px;}
    .content_area .content_wrap .content_table.search>table>tbody>tr:last-child{margin-bottom: 0;}
    .content_area .content_wrap .content_table.search>table>tbody>tr>th{width:100%; padding-bottom: 5px;}
    .content_area .content_wrap .content_table.search>table>tbody>tr>td{width:100%; padding-right: 0; padding-bottom: 0;}

    .content_area .content_wrap .content_table.register>table{display: flex; flex-direction: row; flex-wrap: wrap; min-width: auto;}
    .content_area .content_wrap .content_table.register.bor_bot>table>tbody>tr{display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid #ededed; padding-bottom: 20px;}
    .content_area .content_wrap .content_table.register.bor_bot>table>tbody>tr>td, .content_area .content_wrap .content_table.register.bor_bot>table>tbody>tr>th{width:100%; border-bottom: 0; padding: 0;}
    .content_area .content_wrap .content_table.register.bor_bot>table>tbody>tr{margin-bottom: 20px;}
    .content_area .content_wrap .content_table.register.bor_bot>table>tbody>tr:last-child{margin-bottom: 0;}
    .content_area .content_wrap .content_table.register.bor_bot>table>tbody>tr>th{margin-bottom: 5px;}

}




.plupload_uploaded_files{border: 1px #999 solid;background-color: #eee; padding:10px;}
.uploaded_files .file_line{margin-top:2px;}
.plupload_file_name_wrapper{font-size:10px;}
.plupload_file_size{font-size:10px;}
.plupload_button.plupload_add{display: inline-block;
    text-decoration: none !important;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    border: solid 1px #757575;
    background: #757575;
    border-radius: 0;
    color: #fff !important;
    min-width: 100px;
    text-align: center;
    font-weight: bold !important;}
.plupload_button.plupload_add.ui-state-hover{background: #ddd;}

    .plupload_button.plupload_start{display: inline-block;
    text-decoration: none !important;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    border: solid 1px #757575;
    background: #757575;
    border-radius: 0;
    color: #fff !important;
    min-width: 100px;
    text-align: center;
    font-weight: bold !important;}
    
    
    
    
@media print {
    html, body { -webkit-print-color-adjust:exact; width: 210mm; height: 297mm; }
    table { page-break-inside:auto; }
    tr    { page-break-inside:avoid; page-break-after:auto; }
    thead { display:table-header-group; }
    tfoot { display:table-footer-group; }
    
    a:after {
        content: "" !important;
    }
}