@charset="utf-8";
 
/*  customer  */
.customer { overflow: hidden; width:100%;  margin:0 auto 5%;}
.customer section { width: 100% !important; display: flex; flex-wrap:wrap; }


/* list */
.list_wrap { flex-direction: column; border-top:3px solid #222; }
.list_wrap a { padding:2% 10px; position:relative; border-bottom:1px solid #ddd; transition: all .3s; }
.list_wrap ul {  }

.list_wrap a:hover { background-color: #f5f8fa; transition: all .3s;}
.list_wrap a:hover .btn_r  { right:2%; transition: all .3s;}
.list_wrap a:hover .btn_d  { padding-bottom:6.8%; transition: all .3s;}
.list_wrap ul li { float:none; cursor: pointer; transition: all .3s; } 
.list_wrap ul li:nth-child(1)  { font-weight:500; }
.list_wrap ul li:nth-child(1) span { margin-right:5px; color: #222; }
.list_wrap ul li:nth-child(2) { font-size:.9em; margin-top:10px; }
.list_wrap ul .btn_r { position:absolute; right:2.5%; top:45%;  width:15px; height:15px; border:solid; border-width:1px 1px 0 0;  display: block; border-color:#aeaeae; position: absolute;  transform: rotate(45deg); }
.list_wrap ul .btn_d { position:absolute; right:2.5%; top:18%;  max-width:32px; width:10%; padding-bottom:6%; background-size: contain;  background-image: url('../../images/pdf.png'); transition: all .3s; }
.list_wrap ul .btn_down { position:absolute; right:2.5%; top:18%;  max-width:32px; width:10%; padding-bottom:6%; background-size: contain;  background-image: url('../../images/down.png'); transition: all .3s; }


/* page */
.page_wrap { justify-content: center; margin-top:3%;}
.page_wrap a { flex:1;  padding:8px; flex-basis:10%; max-width:40px; max-height:40px; border:1px solid #ddd; border-right:0px; position: relative; text-align:center; } 
.page_wrap a:hover { background-color: #eee; transition: all .3s; }
.page_wrap a.on { background-color: #222; color:#fff; transition: all .3s; border:1px solid #222; }
.page_wrap a:first-child span { width:10px; height:10px; border:solid; border-width:1px 1px 0 0;  display: block; border-color:#aeaeae; position: absolute;  transform: rotate( -135deg) translate(30%, 10%); position:absolute; left:50%; top:50%; } 
.page_wrap a:last-child { border-right:1px solid #ddd; }
.page_wrap a:last-child span { width:10px; height:10px; border:solid; border-width:1px 1px 0 0;  display: block; border-color:#aeaeae; position: absolute;  transform: rotate(45deg)  translate(-20%, -30%);  position:absolute; right:50%; top:50%; }



/* add_page */
.log_wrap { justify-content: flex-end; }
.log_wrap a {  min-width:70px; flex-basis:6%; background-image: url('../../images/logo_l.png'); background-size: contain; padding-bottom:5%; transition: all .2s;  } 
.log_wrap a:hover {  background-image: url('../../images/logo_b.png'); transition: all .2s;} 
.log_wrap a.on_login { background-image: url('../../images/logo_b.png'); }



/* view_wrap */
.view_wrap { flex-direction: column; border-top:3px solid #222; }
.view_wrap ul { padding:2%; border-bottom:1px solid #222; } 
.view_wrap ul li { float:none; }
.view_wrap ul li span { margin-right:5px; }

.view_wrap ul:first-child { text-align: center; background-color: #f5f8fa;  }
.view_wrap ul:first-child li:first-child { font-weight:500; font-size:1.1em;} 
.view_wrap ul:first-child li:nth-child(2) { font-size:.95em; margin-top:10px; }

.view_wrap ul:nth-child(2) { font-size:.95em;  } 

.view_wrap ul:last-child li { font-size:.9em; font-weight:400; }


/* back to list */
.back_wrap { justify-content: center; margin-top:4%;  }
.back_wrap a { justify-content: center; flex:1;  flex-basis:20%; max-width:100px; border:1px solid #222; padding:1%; text-align: center; } 
.back_wrap a:hover { background-color: #1d449a; color:#fff; transition: all .3s; }



/* modify + delet  */
.modify_wrap { justify-content: center; margin-top:4%;  }
.modify_wrap a { justify-content: center; flex:1;  flex-basis:20%; max-width:100px; border:1px solid #222; padding:1%; transition: all .3s; text-align: center; }
.modify_wrap a:hover { background-color: #1d449a; color:#fff; transition: all .3s; }




/* form */
form { margin-top:50px;}

form label { width:100%; }
form input { width:100%;}

fieldset { border: 0; margin-bottom:15px; }
fieldset > p { float:right; font-size:.95em; margin-right:5%; }
fieldset div { float:left;}
fieldset div:first-child { width:30%; }
fieldset div:last-child { width:69%; } 
textarea { width:100%; }
select { width:300px; padding-right:10px;}
input[type=text] ,input[type=password] ,input[type=file], input[type=radio], textarea, select{
    padding:10px; margin:5px;
    border-radius: 5px;
    border: 1px solid #777;
    outline:0px; 
}
input[type=text]:focus {  
    border: 1px solid #777;
    background-color: #f5f8fa;
}

input[type=submit] { 
     padding:10px; margin:20px auto; cursor: pointer;
    border:1px solid #222; background-color: #222; color:#fff;
    max-width:300px; margin:5% auto; display: block;  transition: all .3s;
}
input[type=submit]:hover { 
    background-color: #1d449a; transition: all .3s;
}

input[type=button] { 
     padding:10px; margin:20px auto; cursor: pointer;
    border:1px solid #222; background-color: #222; color:#fff;
    max-width:300px; margin:5% auto; display: block;  transition: all .3s;
}
input[type=button]:hover { 
    background-color: #1d449a; transition: all .3s;
}

input[type=radio] { 
    width:40px!important;  margin-left:5%; 
    cursor: pointer;
}
input[type=radio]:first-child { margin-left:0px; }
.radio_box { padding:0 0 20px 0; margin:0 0 15px 0; }

.hash_span { color: #1d56d1; font-weight:500; } 
.whole { width:95%; }
.half { width:50%; float:left; padding:10px 0;}




.half_mail label { display: block;}
.half_mail input[type=text] { width: 30% !important; display: inline;}
.half_mail select { width: 22% !important; display: inline!important;}



/* log in+out */
.login_wrap { flex-direction: column; margin-top:4%; }
.login_wrap > div { min-width:120px; flex-basis:10%; background-image: url('../../images/logo_b.png'); background-size: contain; padding-bottom:5%;  } 
.login_wrap form { max-width:360px; width:100%; margin:30px auto;}






/* write_wrap */
.write_wrap { justify-content: center; margin-top:4%; }
.write_wrap form {  width:100%; margin:30px auto;}
.write_wrap form input[type=password] { border: 1px solid #96a6ca; background-color:#f5f8fa; } 
.write_wrap fieldset div:first-child { width:15%; }
.write_wrap fieldset div:last-child { width:84.6%; }





/* inquiry_wrap */
.inquiry_wrap { display: block!important;  } 
.inquiry_wrap fieldset div:first-child { width:100%; }
.inquiry_wrap fieldset div:last-child { width:100%; }
.inquiry_box { background-color: #f5f8fa; padding:3%; border-top:3px solid #222;}
.inquiry_box p { border:1px solid #555;  width:98%; margin:0 auto; height:200px; overflow-y: scroll; font-size:.8em; padding:2%;   line-height:1.6em; background-color: #fff; background-image: url('../../images/bi.png'); background-position: center center; background-size: 360px; margin-top:30px; }
.inquiry_box span { text-align: center; display: block; font-weight:500;  font-size:1.1em;  }

.field_box { width:100%; margin:0 auto; max-width:90%;}
.field_box select { display: block; padding:10px;}
.field_box input { margin-top:10px; display: block; width:90%;}




/* spam */ 
.spams label { display: block;}
.spams input  { width:10%; min-width:170px; display: inline }


 /* agree_check */
.agree_check { padding:20px 0 0; }
.agree_check input { display:block; float:left; width:20px; margin:8px 5px 5px 20px;}
.agree_check label { display: block;}

@media only screen  and (max-width:680px){    
    .whole { width:100%; }
    .half { width:100%; float:none; padding:5px 0;}
}