@charset "UTF-8";
@import url(base.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

body{
  background-color: #ebebeb;
  width:100%;
  height:100%;
  margin:0 auto;
  padding:30px;
}
.consent-check{
  display:flex;
  gap:10px;
  align-items: center;
  flex-wrap: wrap;
}
.consent-check label{width:100%;}

.btn-unit{
  cursor: pointer;
  line-height: 1.3;
  background: #999999;
  color: #fff;
  padding: 5px 5px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
}
/*팝업*/
.popup-style1{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  padding: 30px;
  background-color: #fff;
  z-index: 10;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border:5px solid #d8d8d8;
}
.Conf-popup-con{
  margin-top:10px;  
}
.Conf-popup-con p{padding-left:15px; font-size: 14px;}
.Conf-popup-con p strong{font-weight: 500; font-size: 18px; color:#0775DB;}
.Conf-popup-con p::before{
  content: "-";
  display: inline-block;
  margin-left: -15px;
  margin-right: 5px;
}
.btn-werp{
  display:flex;
  justify-content: space-around;
  gap:10px;
  margin-top:30px;
}
.btn-werp a{
  bordeR:1px solid #ddd;
  padding:2px 10px;
  text-align: center;
}

.survay-warp{
  display:flex; 
  gap:30px;
}
.survay-warp .survay-left{
  max-width:270px;
}
.survay-warp .survay-right{
  border-left:1px solid #d8d8d8;
  padding-left:30px;
  height: 100%;
  width:100%;
    overflow-y: auto;
}



/*공통*/
.wrap{position:relative;  padding:30px; margin:0 auto; width:100%;  box-sizing: border-box; background-color: #fff;  z-index: 1; max-width: 1000px;    border-radius: 20px;    box-shadow: 0 0 11px 1px rgba(0, 0, 0, 0.05);}
.wrap h1{  text-align:center; margin-bottom:30px; padding-bottom:15px; border-bottom:2px solid #333; }
.wrap h1 strong img{width:auto;}

.wrap h1 span{display:block; font-size:20px; }
.wrap h1 strong{display:block; font-size:25px; }
.wrap h3 {margin:15px 0px 5px 0px; font-weight:600;}

.tip{font-size:12px; line-height:2em; padding-bottom:30px;}
.point{color:#0083e1; font-size:10px; line-height:1.5em;}
.suv-img-small{width:150px; padding-top:30px;}
.suv-img-small img{width:100%;}

select{border:1px solid #dfdfdf; padding:5px 15px;}
input[type=text],
input[type=number]{ padding:5px; margin-right:5px; font-size:80%;	font-family: 'Noto Sans KR', sans-serif; bordeR:1px solid #dfdfdf;}
input[type=number]{text-align: right;}
button { }
.wrap h2{font-size:1.3em; position:relative; display:flex; align-items: center; background:#0775DB; padding:5px 10px; color:#fff;  border-radius: 7px; }
.wrap h2.bg-title{
  background:url(/img/bg-title.png) no-repeat;
  background-size: cover;
  width:100%;
  height:50px;
}
.s-title{padding:5px 10px;}
.w-100{width:auto;}
.w-50{width:50px;}
.mb-30{margin-bottom:30px;}
a{text-decoration:none;}
.indert_button, 
.view_button{padding:5px 10px;  border-radius: 5px; margin:0 px; color:#fff;	font-family: 'Noto Sans KR', sans-serif; font-size:12px; }
.indert_button {background:#848484;}
.view_button {background:#2f87c1;}
.serch-box{margin-bottom:20px; display:flex;     gap: 10px;}
.font-s{font-size:12px; padding-left:15px;}
.serch-box input[type=submit],
.serch-box input[type=button]{width:50px; display:block; border-radius: 5px;}

.pannal{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  padding:15px; 
}
.agree-check{
  displaY:flex; 
  flex-direction: column;
}
.agree-check label{display:block; align-items: center;  width:100%; cursor: pointer;}
.agree-check label input{margin-right:10px; width:20px; height:20px;}

/*pagin*/
.paging{width:400px; margin:10px auto; display:flex;justify-content: center;  }
.paging a{padding-right:10px; padding-left:10px; position:relative; }
.paging a:before{content:""; width:1px; height:10px; background:#dfdfdf; position:absolute; right:0px; top:6px;}
.paging a:last-child:before{content:initial;}
/*p-text*/

.text-style1{font-size:18px; line-height:1.5em;  text-align: left;}
.text-style2{font-size:14px; line-height:1.5em;  text-align: left; margin-top:30px; margin-bottom:30px;}
h2 + .text-style1{margin-top:30px;}
.text-style1 p{margin-bottom:25px;}
.text-style1 p strong{font-weight: 500; color:#0775DB;}

/*button-next*/
.button-next{margin-top:30px; position:relative; text-align:right;display:flex; align-items: center;  gap:10px; justify-content: center;}
.btn-group{
  margin-bottom:10px;
  display: flex;
  justify-content: flex-end;
}
.button-next a, .button-next button, a.btn-button, .btn-group button, button.btn-button { cursor:pointer; line-height:1.3; background:#0775DB; color:#fff; padding:5px 15px; text-decoration:none; border-radius: 4px;}
.button-next a:hover, .button-next button:hover { background:#0775DB; }
.btn-group button+button{margin-left:10px;}
.utillbtn-group button{font-size:12px; background-color:#848484; padding:5px; border-radius: 5px; color:#fff}
.utillbtn-group button:active,
.utillbtn-group button:hover{
  background-color:#0083e1
}

.p-admin a{color:#000;}
.login-page{
  border:2px solid #0083e1;
  border-radius: 7px;
  padding:30px;
  width:500px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.admin-main{
  position:relative;
  width:100%;
  min-width: 1200px;
  height:100vh;
  background-image: url(/img/vb1.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: left 10% bottom 50%;
}

/*table-style1-data*/
.table-style1-data{margin-bottom:10px; overflow-x: auto; position: relative;max-width:1900px; }
.table-style1-data table{width:100%; border:2px solid #0775DB; border-collapse: collapse;  background-color: #fff;}
.table-style1-data table tr{}

.table-style1-data table tr td,
.table-style1-data table tr th{padding:5px 10px;box-sizing: border-box;  vertical-align:middle; text-align:left;}
.table-style1-data table tr td,
.table-style1-data table tr th{border-bottom:1px solid #0775DB; border-left:1px solid #0775DB;}
.table-style1-data table tr td.left,
.table-style1-data table tr th.left{text-align:left;}
.table-style1-data table tr td.center,
.table-style1-data table tr th.center{text-align:center;}
.table-style1-data table tr td{text-align:center;}
.table-style1-data table tr td:frist-child,
.table-style1-data table tr th:frist-child{border-left:0px;}
.table-style1-data table tr:last-child td{border-bottom:0px;}
.table-style1-data table tr th{border-bottom:1px solid #0775DB; background:#f1f9fe;}
.table-style1-data table thead{}
.table-style1-data table thead.center th{text-align:center;}
.table-style1-data table tbody.left td{text-align:left;}
.table-style1-data table tbody.f-ss{font-size:14px;}
.table-style1-data table tbody{}
.table-style1-data table tbody.th-center th{text-align:center;}
.table-style1-data table tbody.felx-td td label{display: flex;align-items: center;}
.table-style1-data table tbody.t-w-s input[type=text]{width:100%; box-sizing: border-box; margin-right:0px; text-align:center;}
.table-style1-data table tbody.t-w-s textarea{width:100%; box-sizing: border-box; margin-right:0px; text-align:center;}
.table-style1-data table tbody.block td label{display:block; }
.table-style1-data table tbody th.f-sn{font-size:16px;}
.table-style1-data table tbody td input[type=checkbox] { }
.table-style1-data table tbody td input[type=checkbox] + label{display: inline-block;  cursor: pointer;  position: relative;  }

.table-style1-data table tbody td input[type=checkbox]+ label:before {     

    content: "";  
    display: inline-block;  
    width: 20px;  
    height: 20px;  
    bottom: 1px;  
    background-color: #ccc;  
    border-radius: 2px; 
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}
.table-style1-data table tbody td input[type=checkbox]:checked + label:before { 

    content: "\2713";  /* 체크모양 */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 18px; 
    font-weight:800; 
    color: #fff;  
    background:#2f87c1;
    text-align: center;  
    line-height: 18px;  

} 



/*space-between*/
.space-between{display:flex; position:relative;    justify-content:space-between; }
.table-w-50{width:49%;}



/*list-style1*/
.list-style1{padding-left:20px; margin-top:30px;}
.list-style1 ul{}
.list-style1 ul li{}
.list-style1 ul li p{display:flex;}
.list-style1 ul li p strong{font-weight: bold;display:inline;}
.list-style1 ul li p span{display:block; padding:0 10px;}
.list-style1 ul li p span:frist-child{width:100px;}

.list-style1.mar li+li{margin-top:30px;}
.list-style1.mar li p{display:block;}
.list-style1.mar li p.btn{background-color:#0083e1; padding:5px; color:#fff; border-radius: 5px; width:fit-content; margin-top:10px;}
.list-style1.mar li p.btn a{color:#fff;}

/*list-style2- 숫자*/
.list-style2{padding-left:20px; margin-top:30px;}
.list-style2 ol{counter-reset: section; list-style-type: none;}
.list-style2 ol li {line-height:1.5em;  display: flex; line-height:1.5;}
.list-style2 ol li::before{  counter-increment: section;  content:".";  margin-right:10px;}
.list-style2 ol.o-color li{color:#e4200a;}


/*survey-style1=ul*/
.survey-style1{padding-left:0px; margin-top:30px; margin-bottom:30px;}
.survey-style1 ul{}
.survey-style1 ul li{margin-bottom:20px;border-bottom:1px solid #dfdfdf;  padding-bottom:20px; list-style-type:none;}
.survey-style1 ul li div.survey-list-box{margin-top:30px;}
.survey-style1 ul li p.survey-title{font-size:18px;  padding:5px; padding-bottom:10px; font-weight:500;}

/*survey-style1-ol*/
.survey-style1 ol{counter-reset: section; list-style-type: none;  }
.survey-style1 ol li{margin-bottom:20px;border-bottom:1px solid #dfdfdf;  padding-bottom:20px; font-weight:500;  }
.survey-style1 ol li ol.survey-on{border-top:1px dashed #dfdfdf;  padding-top:2rem; padding-bottom:2rem; margin-top:2rem; background-color:#ededed; padding-left: 1rem;padding-right: 1rem;}
.survey-style1 ol li ol.survey-on li{border-bottom:1px dashed #dfdfdf; }
.survey-style1 ol li ol.survey-on li:last-child,
.survey-style1 ol li:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0;}
.survey-style1 ol li ol.survey-on li h3{font-size: 20px; color:#2a5ab1; padding-top:10px; padding-bottom: 10px; margin-bottom:10px; border-bottom:2px solid #2a5ab1;}
.survey-style1 ol li ol.survey-on li p.sub-title{margin-bottom: 10px;color: #c00;}
.ssub-title{margin-bottom: 10px;color:#2a5ab1;}
.survey-style1 ol li ol.survey-on li ol{margin-top:30px;}
.survey-style1 ol li ol.survey-on li .survey-on{
  background-color:#ffcc7b;
  padding:1rem;
}
.survey-style1 ol li::before{ display: inline; counter-increment: section;  content: counters(section, "-") ". ";  }
.survey-style1 ol li .survey-q{ display: inline;}
.survey-style1 ol li div.survey-list-box{margin-top:30px;}

.survey-style1 ol li ol.survey-list-box{margin-top:30px; padding-left:0px;     list-style-type: none;}
.survey-style1 ol li ol.survey-list-box li{position:relative; border-bottom:none;  padding-bottom:0px; margin-bottom:0px; font-weight:400;}


.survey-style1 ol li p.survey-title{display: inline;font-size:18px;  padding:5px; padding-bottom:10px; font-weight:600;}
.survey-style1 ol li p.survey-q{font-size:18px;  padding:5px; padding-bottom:10px; font-weight:600;}
.survey-style1 ol li p.survey-q strong{color:#c00}
.survey-style1 ol li p.info-text{font-size:12px;}

/*survey-style2-ol*/
.survey-style2{position:relative;padding-left:20px; margin-top:30px;}
.survey-style2 ol{}
.survey-style2 ol li{position:relative; margin-bottom:20px;border-bottom:1px solid #dfdfdf;  padding-bottom:20px; font-weight:600;}
.survey-style2 ol li .img-box{position:relative; display:flex; }
.survey-style2 ol li .img-box img{display:block;}
.survey-style2 ol li .q-box{padding-left:20px;}
.survey-style2 ol li p.survey-q{font-size:18px;  padding:5px; padding-bottom:10px; font-weight:600;}
.survey-style2 ol li div.survey-a{margin-top:0px;display:flex;}
.survey-style2 ol li div.survey-a 
.survey-style2 ol li div.survey-a label{font-size:18px; font-weight:400; line-height:18px;}
.survey-style2 ol li p.info-text{font-size:12px;}

.survey-list-box label{
  position: relative;
  margin-bottom:10px;
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  height: 55px;
  box-sizing: content-box;
}
.survey-list-box label span{
  display: block;
  border: 2px solid #e8ebed;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 15px 15px 15px 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  color: #555;
  background-color: #fff;
  
}
.survey-list-box label:hover span{ 
  border: 2px solid #0775DB !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color:#0775DB;
}
.survey-list-box label input[type=radio]:checked + span,
.survey-list-box label input[type=radio]:focus  + span {
  border: 2px solid #0775DB !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 5px;
  color:#0775DB;
}
/*
#additionalQuestionsContainer .survey-list-box{  display: flex;  gap: 5px;}
#additionalQuestionsContainer .survey-list-box label{height:75px;}
#additionalQuestionsContainer .survey-list-box label input[type=radio]:checked + span, 
#additionalQuestionsContainer .survey-list-box label input[type=radio]:focus + span{padding: 10px;     display: flex;align-items: center;}
*/


.survey-list-box2 label{
  position: relative;
  margin-bottom:10px;
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  height: 55px;
  box-sizing: content-box;
}
.survey-list-box2 label span{
  display: block;
  border: 2px solid #e8ebed;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 15px 15px 15px 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  color: #555;
  background-color: #fff;
  
}
.survey-list-box2 label:hover span{ 
  border: 2px solid #0775DB !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color:#0775DB;
}
.survey-list-box2 label input[type=radio]:checked + span,
.survey-list-box2 label input[type=radio]:focus  + span {
  border: 2px solid #0775DB !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 5px;
  color:#0775DB;
}



.f-box{display: flex; align-items: center;}
.input-style1 span{displaY:block;}
.input-style1 input{displaY:block;}

/*도장
em.pic1,
em.pic2{position:relative; }
em.pic1:before,
em.pic2:before{content:"";background-repeat:no-repeat; position:absolute; top:-30px; right:0px;   background-size: 73px;display:inline-block; width:150px; height:150px;}
em.pic1:before{background-image: url('/img/sim.png'); }
em.pic2:before{background-image: url('/img/song.png');}
*/

/*info-style1*/

.info-style1{padding-left:0px; margin-top:30px;}
.info-style1 ul{}
.info-style1 ul li {line-height:0.8em; border-bottom:none; padding-bottom:0px; font-size:0.8em;font-weight: 400; list-style-type:none;}
.info-style1 ul.o-color li{color:#e4200a;}

/*sine*/
.sine{text-align:right;}
.sine p{margin-bottom:10px;}
/*sing-day*/
.signature-day{width: 100%;margin: 0 auto;}
.signature-box{ display:flex;    flex-wrap: wrap;  justify-content: center; margin:20px auto;}
.signature-box .button-next{text-align: center;}
.signature-box .si-title{font-size:20px;}
.wrapper {
  position: relative;
  height: 220px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
 
}
.signature-pad {
  position: relative;
  left: 0;
  top: 0;
  bordeR:2px solid #e4200a;
}



.li_table_style1 ul{displaY:grid;width:100%;list-style-type: none; border: 1px solid #333;   box-sizing: border-box;}
.li_table_style1 ul li{displaY:flex; flex:1; border: 1px solid #333;     box-sizing: border-box;}
.li_table_style1 ul li ul,
.li_table_style1 ul li ul li{border:none;}
.li_table_style1 ul li dl{displaY:table-cell; flex:1; }
.li_table_style1 ul li dl dt{ background: #f1f9fe; padding:10px;}
.li_table_style1 ul li dl dd{padding:10px; background-color: #ddeef9;}
.under-line{border-bottom: 1px solid #000;}
@media print {
body{margin:0px; padding:0px; }
.wrap{padding:10px;}
  /*프린트*/
.print{width:100%; height:100%; padding:0px;  page-break-before:always;}
.wprint{width:100%; height:100%; padding:0px; }
.signature-day{display:none;}
td,
th{font-size:0.7em;padding: 5px 4px;}
.p-admin{display:none;}
.wrap h1{    margin-bottom: 10px; font-size:18px;}
.wrap h1 strong{ font-size:18px;}
.button-next{display:none;}
}
@page {
    size: A4 portrait;
    margin:2mm
    
}
@page {
    size: A4 landscape;
    margin:2mm
}



@media screen and (max-width: 767px) {
  body{
    padding:10px;
  }
  .wrap{
    padding:10px;
    border-radius: 5px;
  }
  .wrap h1 strong img{width:100%;}

  .list-style2 ol li a{display:inline;}
  .wrap h2.bg-title{
    height:65px;
  }
  .inline-box{
    display: inline;
  }
}