@charset "utf-8";

html,body{ height: 100%;}

#scan_layout{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}

#scan_layout .foot_logo{ width: 100%; height: 20px; background:url(../img/inc/logo@3x.png) no-repeat center center; background-size: auto 20px; text-indent: -9999px; margin-bottom: 40px; display: inline-block;}

#scan_layout .login{ padding: 0 20px; margin: 0 0 40px 0; display: flex; flex: 1; flex-direction: column; justify-content: center;}
#scan_layout .login .logo{ text-align: center; margin: 0 0 135px 0;}
#scan_layout .login .logo h1{ font-family: 'prtdd'; font-weight: 700; font-size: 24px; color: #000; line-height: 29px;}
#scan_layout .login .input{ height: 48px; position: relative;}
#scan_layout .login .input input{ width: 100%; height: 100%; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #333; line-height: 17px; padding: 0 12px; border: 1px solid rgb(216,216,216); border-radius: 4px; box-sizing: border-box;}
#scan_layout .login .input.pw{ margin-top: 20px;}
/* #scan_layout .login .input.pw input{ background: url(../img/inc/ico-20-20-passwordNo.png) no-repeat calc(100% - 12px) center; background-size: 20px auto;} */
#scan_layout .login .btn{ margin-top: 32px;}
#scan_layout .login .btn button{ width: 100%; height: 48px; background-color: rgb(2, 162, 201); font-family: 'prtdd'; font-weight: 600; font-size: 16px; color: #fff; text-align: center; line-height: 19px; border-radius: 4px;}

#scan_layout .menu{ padding: 0 20px; margin: 16px 0 0 0; display: flex; flex: 1; flex-direction: column;}
#scan_layout .menu .logout{ background-color: rgb(248, 248, 248); padding: 16px; display: flex; justify-content: space-between;}
#scan_layout .menu .logout .profile{ padding: 6px 0; display: flex; flex: 1;}
#scan_layout .menu .logout .profile dl{ display: flex; align-items: center;}
#scan_layout .menu .logout .profile dl + dl{ padding-left: 6px; margin-left: 8px; border-left: 1px solid rgb(187, 187, 187);}
#scan_layout .menu .logout .profile dt{ font-family: 'prtdd'; font-weight: 300; font-size: 13px; color: rgb(102, 102, 102); line-height: 14px;}
#scan_layout .menu .logout .profile dd{ font-family: 'prtdd'; font-weight: 700; font-size: 13px; color: #333; line-height: 14px; margin-left: 4px;}
#scan_layout .menu .logout button{ height: 28px; background-color: #fff; font-family: 'prtdd'; font-weight: 400; font-size: 13px; color: rgb(102, 102, 102); line-height: 16px; padding: 0 16px; display: flex; align-items: center; border: 1px solid rgb(216, 216, 216); border-radius: 4px;}
#scan_layout .menu .list{ margin: 0; display: flex; flex: 1; align-items: center;}
#scan_layout .menu .list ul{ width: 100%; display: flex; flex-direction: column;}
#scan_layout .menu .list li + li{ margin-top: 20px;}
#scan_layout .menu .list a{ height: 48px; background-color: #2f3b55; font-family: 'prtdd'; font-weight: 600; font-size: 16px; color: #fff; text-align: center; line-height: 19px; display: flex; align-items: center; justify-content: center; border-radius: 4px;}


#lp_layout{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999;}
#lp_layout .lp_wrap{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
#lp_layout .lp_head{ height: 56px; padding: 0 20px; display: flex; align-items: center;}
#lp_layout .lp_head h2{ font-family: 'prtdd'; font-weight: 600; font-size: 18px; color: #333; line-height: 22px;}
#lp_layout .lp_body{ padding: 25px 20px; flex: 1; overflow-y: auto;}
#lp_layout .lp_foot .foot_logo{ width: 100%; height: 20px; background:url(../img/inc/logo@3x.png) no-repeat center center; background-size: auto 20px; text-indent: -9999px; margin-bottom: 40px; display: inline-block;}
#lp_layout .lp_foot .btn_wrap{ padding: 0 20px; margin: 0 0 49px 0;}
#lp_layout .lp_close{ width: 24px; height: 24px; background: url(../img/inc/ico-24-24-close@3x.png) no-repeat center center; background-size: 24px auto; text-indent: -9999px; display: inline-block; position: absolute; top: 16px; right: 20px;}
#lp2_layout{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999;}
#lp2_layout::before{ width: 100%; height: 100%; background-color: #000; content: ''; opacity: 0.6; position: absolute; top: 0; left: 0; z-index: -1;}
#lp2_layout .lp2_wrap{ width: 304px; background-color: #fff; padding: 20px; display: flex; flex-direction: column; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);}
#lp2_layout .lp2_wrap p{ width: 100%; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #333; text-align: center; line-height: 20px; margin: 20px 0 0 0;}
#lp2_layout .lp2_wrap .btn.type2{ width: 100%; height: 48px; background-color: #02a2c9; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #fff; line-height: 20px; margin: 53px 0 0 0; display: flex; align-items: center; justify-content: center; border-radius: 4px;}

.form_wrap,
.form_wrap dl{ display: flex; flex-direction: column;}
.form_wrap dl + dl{ margin-top: 21px;}
.form_wrap dt{ font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #333; line-height: 16px; margin-bottom: 8px;}
.form_wrap .txt dd{ background-color: #f8f8f8; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #333; line-height: 18px; padding: 15px 16px; border-radius: 4px;}
input[type=text]{ width: 100%; height: 48px; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #666; padding: 15px 42px 15px 16px; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
input[type=text]::placeholder{ font-weight: 300; color: #bbb;}

.usps_wrap{ padding: 15px; border: 1px solid #e6e6e6; border-radius: 4px;}
.usps_wrap dl{ display: flex; flex-direction: row;}
.usps_wrap dl + dl{ margin-top: 8px;}
.usps_wrap dt{ width: 102px; height: 54px; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #666; line-height: 24px; margin: 0; display: flex; align-items: center;}
.usps_wrap dd{ height: 54px; font-family: 'prtdd'; font-weight: 600; font-size: 15px; color: #333; line-height: 24px; margin: 0; display: flex; flex: 1; align-items: center; justify-content: center;}
.usps_wrap .type1{ background-color: #fae5e5; font-size: 16px; color: #c41000; border-radius: 3px;}
.usps_wrap .type2{ font-size: 16px; color: #c41000;}

.datepickerUI input{ background: url(../img/inc/ico-22-20-date@3x.png) no-repeat calc(100% - 20px) center; background-size: 22px auto;}
.ui-datepicker-title span{ display: inline-block;}
.ui-widget-header .ui-icon{ background-image: url(../img/inc/ui-icons_444444_256x240.png);}

.selectUI{ width: 100%;}
.selectUI .ui-selectmenu-button.ui-button{ width: 100%; height: 46px; background-color: transparent; padding: 5px 15px; border: 1px solid #d8d8d8; box-sizing: border-box;}
.selectUI .ui-button .ui-icon{ width: 20px; height: 36px; background: url(../img/inc/ico-20-20-down@3x.png) no-repeat center center; background-size: 20px auto;}
.selectUI .ui-selectmenu-text{ height: 36px; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #666; line-height: 36px;}

.type_date_time .datepickerUI{ width: 55%; margin-right: 8px;}
.type_date_time .time{ display: flex; flex: 1; border: 1px solid #d8d8d8; border-radius: 4px;}
.type_date_time .time .selectUI + span{ height: 46px; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #666; line-height: 46px;}
.type_date_time .time .selectUI .ui-selectmenu-button.ui-button{ border: 0;}

.type_input_btn .input{ margin-right: 8px; flex: 1;}
.type_input_btn .btn{ width: 100px;}
.type_input_btn a.type1{ height: 48px; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #666; line-height: 19px; display: flex; flex: 1; justify-content: center; align-items: center; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
.type_input_btn a.type2{ height: 48px; background-color: #162340; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #fff; line-height: 19px; display: flex; flex: 1; justify-content: center; align-items: center; border: 1px solid #162340; border-radius: 4px; box-sizing: border-box;}

.tab_wrap{ display: flex;}
.tab_wrap a{ height: 46px; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #7f8095; line-height: 16px; display: flex; justify-content: center; align-items: center; flex: 1;}
.tab_wrap a:first-child{ border: 1px solid #e6e6e6; border-right: 0; border-radius: 4px 0 0 4px;}
.tab_wrap a:last-child{ border: 1px solid #e6e6e6; border-left: 0; border-radius: 0 4px 4px 0;}
.tab_wrap a.on{ background-color: #e5f6fa; font-weight: 700; color: #02a2c9; border-color: #e5f6fa;}

.tab_con{ margin: 16px 0 0 0;}
.tab_con .search{ margin-bottom: 16px; position: relative;}
.tab_con .search input{ width: 100%;}
.tab_con ul{ display: flex; flex-direction: column;}
.tab_con li + li{ margin: 16px 0 0 0;}
.tab_con a{ padding: 20px; display: flex; justify-content: space-between; border: 1px solid #e6e6e6; border-radius: 4px;}
.tab_con a .info{ margin-right: 20px; display: flex; flex-direction: column;}
.tab_con a .txt{ font-family: 'prtdd'; font-weight: 300; font-size: 13px; color: #898989; line-height: 15px; display: flex;}
.tab_con a .txt + .txt{ margin-top: 6px;}
.tab_con a .txt .tit{ width: 74px; color: #333;}
.tab_con a .thumb{ width: 72px; background-color: #e5f6fa; font-family: 'prtdd'; font-weight: 600; font-size: 14px; color: #02a2c9; line-height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 3px;}
.tab_con a .img{ width: 72px; background-color: #f8f8f8; display: flex; flex-direction: column; align-items: center; border-radius: 3px;}
.tab_con a .img .num{ width: 100%; font-family: 'prtdd'; font-weight: 600; font-size: 18px; color: #333; line-height: 22px; display: flex; flex: 1; align-items: center; justify-content: center;}
.tab_con a .img .add{ width: 100%; height: 46px; background-color: #fff; font-family: 'prtdd'; font-weight: 600; font-size: 18px; color: #999; line-height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid #d8d8d8;  border-radius: 2px;}

.grid-col{ display: flex; flex-direction: row;}
.grid-row{ display: flex; flex-direction: column;}
.grid-row > .row + .row{ margin-top: 8px;}

.util_wrap{ border-radius: 10px 10px 0 0; box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.08);}
.util_wrap ul{ padding: 10px 20px; display: flex; justify-content: space-between; box-sizing: border-box;}
.util_wrap li{ display: flex; align-items: center;}
.util_wrap li a{ width: 64px; height: 60px; background: no-repeat center 7px; background-size: 24px auto; font-family: 'prtdd'; font-weight: 300; font-size: 12px; color: #898989; text-align: center; line-height: 14px; padding: 35px 0 0 0; box-sizing: border-box;}
.util_wrap li.picture a{ background-image: url(../img/inc/ico-24-24-picture@3x.png);}
.util_wrap li.camera a{ background-image: url(../img/inc/ico-24-24-camera@3x.png);}
.util_wrap li.file a{ background-image: url(../img/inc/ico-24-24-file@3x.png);}

.info_wrap ul{ display: flex; flex-direction: column;}
.info_wrap li{ display: flex;}
.info_wrap li{ font-family: 'prtdd'; font-weight: 300; font-size: 13px; color: #898989; line-height: 15px;}
.info_wrap li + li{ margin-top: 4px;}
.info_wrap li strong{ width: 73px; font-family: 'prtdd'; font-weight: 300; font-size: 12px; color: #333; line-height: 15px;}
.info_wrap li .thumb{ width: 100px; height: 100px; background-color: #f8f8f8; display: inline-block; border: 1px solid #d8d8d8; border-radius: 4px; position: relative;}

.upload_wrap{ margin: 24px 0 0 0; display: flex; flex-direction: column;}
.upload_wrap .thumb{ width: 100%; height: 80vw; background-color: #f8f8f8; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
.upload_wrap .btn{ margin-top: 8px; position: relative;}
.upload_wrap .btn input{ position: absolute; top: 0; left: -9999px;}
.upload_wrap .btn label{ width: 100%; height: 48px; background-color: #162340; font-family: 'prtdd'; font-weight: 600; font-size: 16px; color: #fff; line-height: 19px; display: flex; align-items: center; justify-content: center; border-radius: 3px;}

.btn_wrap{ margin: 32px 0 0 0; display: flex; justify-content: center;}
.btn_wrap a{ height: 48px; font-family: 'prtdd'; font-weight: 400; font-size: 16px; color: #898989; line-height: 19px; display: flex; flex: 1; justify-content: center; align-items: center; border: 1px solid #ebebeb; border-radius: 3px; box-sizing: border-box;}
.btn_wrap a + a{ margin-left: 7px;}
.btn_wrap .type2{ background-color: #1aa2c9; color: #fff; border: 0;}

.state_wrap{ margin-top: 16px;}
.state_wrap .state{ display: flex; flex-direction: column;}
.state_wrap .state dt{ height: 54px; background-color: #f8f8f8; font-family: 'prtdd'; font-weight: 600; font-size: 18px; color: #333; line-height: 26px; text-align: center; display: flex; align-items: center; justify-content:  center; border-radius: 4px;}
.state_wrap .state dd{ margin: 26px 0 0 0;}
.state_wrap .state dd em{ font-size: 53px; line-height: 72px; color: #bf3c2b; text-transform: uppercase; }
.state_wrap .state dd span{ margin-top: 12px; padding: 4px 12px; background-color: #f8f8f8; color: #1aa2c9; border-radius: 4px;}
.state_wrap .type1{ width: 100%; height: calc(100vw - 40px); font-family: 'prtdd'; font-weight: 600; font-size: 24px; color: #333; line-height: 24px; text-align: center; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
.state_wrap .type1::before{ width: 120px; height: 120px; background: url(../img/inc/ico-120-120-state1@3x.png) no-repeat center center #fff; background-size: 120px auto; content: ''; margin: 0 0 14px 0; display: inline-block;}
.state_wrap .type2{ width: 100%; height: calc(100vw - 40px); font-family: 'prtdd'; font-weight: 600; font-size: 24px; color: #333; line-height: 24px; text-align: center; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
.state_wrap .type2::before{ width: 120px; height: 120px; background: url(../img/inc/ico-120-120-state2@3x.png) no-repeat center center #fff; background-size: 120px auto; content: ''; margin: 0 0 14px 0; display: inline-block;}
.state_wrap .type3{ width: 100%; height: calc(100vw - 40px); font-family: 'prtdd'; font-weight: 600; font-size: 24px; color: #333; line-height: 24px; text-align: center; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
.state_wrap .type3::before{ width: 120px; height: 120px; background: url(../img/inc/ico-120-120-state3@3x.png) no-repeat center center #fff; background-size: 120px auto; content: ''; margin: 0 0 14px 0; display: inline-block;}
.state_wrap .type4{ width: 100%; height: calc(100vw - 40px); font-family: 'prtdd'; font-weight: 600; font-size: 24px; color: #333; line-height: 24px; text-align: center; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d8d8d8; border-radius: 4px; box-sizing: border-box;}
.state_wrap .type4::before{ width: 120px; height: 120px; background: url(../img/inc/ico-120-120-state4@3x.png) no-repeat center center #fff; background-size: 120px auto; content: ''; margin: 0 0 14px 0; display: inline-block;}
.state_wrap .cs{width: 100%; margin: 16px 0 0 0; display: flex; border-top: 1px solid #666;}
.state_wrap .cs dt{ width: 50px; height: 36px; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #333; line-height: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid #e8e8e8; border-top: 0;}
.state_wrap .cs dd{ height: 36px; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #bf3c2b; line-height: 16px; padding: 0 0 0 26px; display: flex; align-items: center; flex: 1; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;}

.tbl_wrap{ width: 100%; margin: 40px 0 0 0; table-layout: fixed; border-top: 1px solid #666; border-bottom: 1px solid #666; border-left: 1px solid #e8e8e8;}
.tbl_wrap thead th{ height: 38px; font-family: 'prtdd'; font-weight: 300; font-size: 14px; color: #333; text-align: center; line-height: 16px; border-right: 1px solid #e8e8e8;}
.tbl_wrap tbody td{ height: 38px; font-family: 'prtdd'; font-weight: 400; font-size: 14px; color: #333; text-align: center; line-height: 16px; border-right: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;}

.tbl2_wrap{ width: 100%; margin: 0; table-layout: fixed; border-top: 1px solid #333; border-bottom: 1px solid #333;}
.tbl2_wrap tbody th{ height: 58px; font-family: 'prtdd'; font-weight: 400; font-size: 15px; color: #333; text-align: left; line-height: 16px; }
.tbl2_wrap tbody td{ height: 58px; font-family: 'prtdd'; font-weight: 300; font-size: 15px; color: #02a2c9; text-align: right; line-height: 16px; }
.tbl2_wrap tbody tr + tr th,
.tbl2_wrap tbody tr + tr td{ border-top: 1px solid #f2f2f2;}