@charset "utf-8";

.area1 .login_wrap{width: 300px; padding: 40px 10px; margin: 0 auto;}
.area1 .login_wrap p{margin: 20px 0;}

.area1, .area2 p, .area2{word-break: keep-all;}
.area1 .box.bg3{height: 200px; overflow-y: scroll;}
.area1 .box.bg2{margin-top: 5px;}
.area1 ul.square li:before { top: 8px;}

.area2 .help{color:#666; margin-top: 5px;}
.g_txt1{font-size: 16px; font-size: 1.6rem;  font-weight: 400;}

.btn_vms{display: inline-block; vertical-align: middle; width: 240px; padding: 10px 20px; background: #ddd; font-size: 13px; border-radius: 5px; line-height: 1.8; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
.btn_vms:hover, .btn_vms:focus{background: #f5f5f5; box-shadow: 1px 2px 3px rgba(0,0,0,0.3); border-radius: 0;}

span.error{position: absolute; top:-30px; left:100px; padding: 2px 5px; background: #fff; border: 1px solid #efefef; box-shadow: 0px 1px 3px rgba(0,0,0,0.1);}

.agree_wrap{position: relative;}
.agree_wrap .error{top:35px; left:auto;}
.btn_detail{ border: 1px solid #ccc; padding: 2px 5px; background: #eee;}
.btn_detail:hover, .btn_detail:focus{ border-color: #aaa; background: #ddd;}
.help{display: inline-block; vertical-align: middle; width: 100%;}
.psbl_day_wrap .psbl_txt_wrap{height: 0; overflow: hidden; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
.psbl_day_wrap.active .psbl_txt_wrap{height: auto;}

.form .astar{display: inline-block; vertical-align: middle; width: 20px; text-align: center; color:#0066b1; margin-top: 5px;}
.f_wrap{position: relative; padding-bottom: 10px;}
.f_wrap.line{border-bottom: 1px solid #eee;}
.form .f_wrap .label{font-size: 13px; font-size: 1.3rem; width: 100%; line-height: 1.2; margin-top: 10px;}
.f_wrap .field{position: relative; font-size: 12px; font-size: 1.2rem;}
.f_wrap .field label{ padding-left: 5px; margin-right: 10px;}
.f_wrap .field p{font-size: 12px; font-size: 1.2rem;}
.f_wrap .field textarea{width: 100%; height: 76px;}
.f_wrap .field .input{}
.f_wrap .field .input.full{width: 100%;}
.f_wrap .field .input.short {width: auto;}
.radioBox input{margin-right: 5px;}
.checkBox input{margin-right: 5px;}

.ui-datepicker-trigger{
    appearance: none; background-color: #333; border: 0;
    border-radius: 5px; box-sizing: border-box; color: #FFFFFF;
    cursor: pointer; display: inline-block; letter-spacing: 1px;
    font-size: 16px; line-height: normal; outline: none;
    text-align: center; text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation; will-change: transform;
    display: inline-block; vertical-align: middle;
    padding: 4px 2px; margin-left: 5px; width: 50px;
}
#ui-datepicker-div {width: 200px; font-size: 14px;}


@media all and (min-width:400px){
    .f_wrap{padding-bottom: 5px; padding-top: 5px;}
    .form .f_wrap .label{width: 150px; position: absolute; left:0; top:0;}
    .f_wrap .field{margin-left: 120px;}
    .br3{display: inline-block; vertical-align: middle; width: 100%;}
    span.error{left:-100px; top:20px;}

    .psbl_day_wrap {height: 65px;}
    .psbl_day_wrap .field{margin-top: 8px;}
    .psbl_day_wrap.active {height: auto;}
    .psbl_day_wrap.active .field{margin-top: 0px;}
    .label_br{display: inline-block; vertical-align: middle; margin-left: 16px;}
}

@media all and (min-width:600px){
    .area1, .area2{margin-left: 10px; margin-right: 10px;}
    .g_txt1{font-size: 17px; font-size: 1.7rem;  font-weight: 400;}
    .g_txt2{font-size: 14px; font-size: 1.4rem;}

    .f_wrap{padding-bottom: 8px; padding-top: 8px;}
    .area2 .form .f_wrap .label{width: 150px; vertical-align: top;}
    .area2 .form .f_wrap .label .astar{vertical-align: top;}
    .area2 .form .f_wrap .field{display: inline-block; vertical-align: middle; width: 60%; }

    .area2 .box{line-height: 1.7;}
}
@media all and (min-width:768px) {
    .area1 .login_wrap{width: 500px; padding: 40px 10px; margin: 20px auto 0;}
    .area1 .login_wrap p{margin: 20px 0 30px;}
    .area1 .login_wrap a.btn{width:150px; height: 50px; line-height: 50px; font-size: 16px;}

    .area1 ul.square li:before { top: 11px;}
    .f_wrap{padding-bottom: 10px; padding-top: 10px;}
    .form .f_wrap .label{font-size: 14px; font-size: 1.4rem; left:80px; top:3px;}

    .area1 .box.bg3{height: 250px;}

    .area2 .form .f_wrap .label{width: 200px;}
    .f_wrap .field {width: 60%; font-size: 13px; font-size: 1.3rem; margin-left: 230px;}
    .f_wrap .field textarea{width: 100%; height: 104px;}
    span.error{left:-120px; top:20px;}

    .area2 .help{margin-top: 10px;}

    .btn_vms{font-size: 14px; width: 300px;}
}
@media all and (min-width: 1000px) {
    .area1 .login_wrap{width: 800px; padding: 40px 10px; margin: 150px auto 0;}
    .area1 .login_wrap a.btn{width:200px; height: 60px; line-height: 60px; font-size: 18px;}

    .area1 ul.square li:before { top: 12px;}

    .form .f_wrap .label{font-size: 16px; font-size: 1.6rem; left:80px; top:5px;}
    .f_wrap .field {width: 60%; font-size: 13px; font-size: 1.3rem; margin-left: 240px;}
    .area1 .box.bg3{height: 300px;}

    .psbl_day_wrap {height: 70px;}
    .psbl_day_wrap .field{margin-top: 10px;}

}