@charset "utf-8";
/* *******************************************************
 * filename : style.css
 * producer : jason
 * date : 2020-06-22
******************************************************** */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@500&display=swap');
@font-face {font-family: 'Binggrae-Bold';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff');font-weight: normal;font-style: normal; }
@font-face{
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: normal;
  src: url('https://fonts.googleapis.com/earlyaccess/notosanskr.css'); 
}


/* reset css */
* {margin:0;padding:0;border:0;outline:0;vertical-align:top;}
html,body {width:100%;background:#fff;} body {font-family:"Noto Sans KR","나눔고딕","맑은고딕",'돋움',dotum,helvetica,sans-serif,verdana;font-size:18px;color:#333;line-height:1;text-align:center;}
ul, ol, dl {list-style:none;} img, video {width:100%;border:0;margin:0;padding:0;} a {text-decoration:none;} a:visited, a:link, a:link {color:#454545;} input,select {vertical-align:middle;} label,button {cursor:pointer;}
.bline, legend, hr, caption {display:block;overflow:hidden;position:absolute;top:0;left:-1000em;} i, em, address {font-style:normal;font-weight:normal;}
button *{position:relative;} p {display:block;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0px;-webkit-margin-end:0px;}
header,main,section,article,aside,footer {display:block; margin:0 auto; box-sizing: border-box;} 
.fixbt {position:fixed; right:10px; bottom:10px; z-index:9; display:none;}
.fixbt img {width:80px;}
header img {display:block; width:100%; max-width:700px; margin:0 auto;}
section article {width:100%; max-width:700px; margin:0 auto;}
section article p {font-size:1.05em; line-height:168%; text-align:left; padding:0 5%;font-weight:400;letter-spacing:-0.063em;margin:0;color:#616068;text-align:justify; word-break: break-all;}
section article h3 {font-size:1.6em;font-weight:800;line-height:1.3;letter-spacing:-0.065em;text-align:center;color:#4b4b4b;margin:10% 0 2% 0;}
section article h3 b {color:#f65036; line-height: 1.4; font-weight:600;}
section article b {font-weight:600;letter-spacing:-0.100em;color:#111;line-height:170%;}
mark {background-color:#ffdad5; padding:2px 5px; font-weight:bold; color:#333;}
strong {font-weight:600; font-size:1.025em;color:#323232;}

section aside {margin:50px auto 0; width:96%; max-width:700px; }
section aside img {width:100%; position:relative; z-index:999;}
.userCounter {height:150px; font-size: 1.2em; line-height: 1.3;  background: #eee; text-align: center; padding:0px 0px; letter-spacing: -0.05em; position:relative; z-index:999;}
.datebg { display: inline-block; color:#ffe829; font-weight: bold;}
.datebg2{ display: inline-block; color:#fff; font-weight: 400;}
.date2::after, .date4::after{content:':'; padding-left:7px;}
section aside #dbrap {
    width:100%;
    margin:0 auto;
    padding:0px 10px 5px;
    background:#fff;
    position:relative;
    z-index:999;
}
section aside #dbrap th {
    width:25%;
    min-width:80px;
    text-align:center;
}
section aside #dbrap th span {
    color:red;
}
section aside #dbrap td{
    text-align:left;
    width:100%;
}
section aside #dbrap th, section aside #dbrap td {
    padding:1.5% 0;
}
section aside #dbrap .agree {
    font-size: 0.65em;
    text-align:right;
}
section aside #dbrap input[type=text],section aside #dbrap input[type=tel],select,section aside #dbrap input[type=number] {
    box-sizing:border-box;
    border:1px solid #aaa;
    height:40px;
    padding:2.5%;
}
section aside #dbrap input[type=text],section aside #dbrap input[type=number] {
    width:86%;
}
section aside #dbrap select,section aside #dbrap input[type=tel] {
    width:28%;
}
section aside #dbrap .result {
    font-size: 0.85em;
    text-align:center;
    letter-spacing: -0.065em;
    margin-top:10px;
}
section aside #dbrap .result input:first-child {
    width:15%;
    height:18px;
}
section aside #dbrap .result input:nth-child(2) {
    width:25%;
    height:18px;
}
section aside #dbrap button {
    width:85%; 
    display:block;
    margin:0 auto;
    font-size: 1.3em;
    padding:3.5% 0;
    font-weight: bold;
    background: #ff2721;
    color:#fff;
    border-radius:10px;
    letter-spacing: -0.064em;
    animation:btn .9s cubic-bezier(.25,.46,.45,.94) infinite forwards
}

#circle {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 80px;
    z-index: 1;
}

.teg {width:100%; margin:3% auto 3%; line-height: 1.8; text-align:left;} .teg li {display:inline-block; margin-right:4px; color:#616068;} .teg li:last-child {margin-right:0;} .teg li a {background:#f2f2f2; font-size: 14px; padding:1px 3px;}
.aside_btn {width:100%; position:relative; text-align:left; margin:0 auto 5%;} .aside_btn button{background:#fff; border:1px solid #e5e5e5; height:30px; line-height: 30px; padding:0 3%;}  .aside_btn .btn1 i{color:red;}
.aside_btn button i {margin-top:7px;} .aside_btn a:last-child {display:inline-block; border:1px solid #e5e5e5; border-radius:50%; width:30px; height:30px; text-align:center; position:absolute; right:0px;}.aside_btn a i {margin-top:7px;}
.reply {width:100%; border-top:1px solid #e5e5e5; text-align:left;}
.reply_container {width:100%; max-width:700px; margin:30px auto 0; box-sizing:border-box; }
.reply_top{padding:0px 15px;}
.reply .reply_container .reply_top span {color:#f14949;} .reply .reply_container .reply_top i {font-size: 12px; border:1px solid #e5e5e5; padding:4px; color:#7f7f7f;}
.reply .reply_container .re_input {width:100%; height:60px; position:relative; margin:15px 0;} 
.reply .reply_container .re_input textarea {width:80%; height:60px; padding:5px; box-sizing:border-box; border:1px solid #ccc; position:absolute; top:0; bottom:0; left:0;}
.reply .reply_container .re_input button {width:20%; border:none; background:#333; color:#fff; position:absolute; top:0; bottom:0; right:0; font-size: 1.05em;}
.reply .reply_container .re1 {position:relative;} .reply .reply_container .re1 ul li {display:inline-block; padding-right:7px;} .reply .reply_container .re1 ul li:first-child a{color:#000; font-weight: 500; border-bottom:1px solid #000; }.reply .reply_container .re1 > a {position:absolute; right:0; top:0; bottom:0;}
.reply .reply_container .re2 {box-sizing: border-box; letter-spacing: 0; margin-top:15px; padding:7px 15px 0px; border-top:1px solid #e5e5e5;}
.reply .reply_container .re2 b {padding-left:15px; font-weight:normal; font-size: 12px; color: #bfbfbf;}
.reply .reply_container .re2 img {width:22px; padding-top:7px;}  .reply .reply_container .re2 span {font-size: 14px; margin:0 5px; line-height: 30px;}
.reply .reply_container .re2 p {font-size: 14px; letter-spacing:-0.065em; margin-top:7px; line-height: 1.45; color:#616068;} .reply .reply_container .re2 p img {display:block; width:100%;}
.reply .reply_container .re2 p em {vertical-align:bottom; font-style: normal; font-size: 10px; background: #e04646; padding: 2px 8px; border-radius: 10px; color: #fff; letter-spacing: 0; }
.reply .reply_container .re3 {position:relative; height:30px; line-height:30px; }  .reply .reply_container .re3 span {position:absolute; left:15px; top:0; bottom:0; font-size: 12px; color: #bfbfbf;}
.reply .reply_container .re3 ul {position:absolute; right:15px; bottom:0; top:0; } .reply .reply_container .re3 ul li {display:inline-block; margin-top:7px;} 
.reply .reply_container .re3 ul li button {padding:0px 10px; height:25px; line-height: 25px; border:1px solid #e14747; border-radius:20px; background: #fff; color:#e14747; box-sizing:border-box;}
.reply .reply_container .re3 ul li button img {width:14px; padding-left:3px; margin-top:5px;}
.reply .reply_container .re4 {margin:2% 0; border-top:1px solid #e5e5e5; text-align:center; }
.reply .reply_container .re4 li {display:inline-block; padding:20px 15px 0 0; font-size: 12px; } .reply .reply_container .re4 li a {color:#999;}
.reply .reply_container .re4 li:first-child a {border:1px solid #e5e5e5; color:#4795f7; font-weight: bold; padding:4px 10px;} .reply .reply_container .re4 li:last-child {padding-right:0;}
footer {margin:50px 0 15px; text-align:center; font-size: 12px; color:#aaa;}

.w50{width:50%;}.w60{width:60%;}.w70{width:70%;}.w80{width:80%;}.w90{width:90%;} .w96{width:96%;} .ct {text-align:center;}
.pd0{padding-bottom:0px;}.pb1{padding-bottom:1%;}.pb2 {padding-bottom:2%;}.pb3 {padding-bottom:3%;}.pb4 {padding-bottom:4%;}.pb5 {padding-bottom:5%;}.pb6 {padding-bottom:6%;}.pb7 {padding-bottom:7%;}.pb8 {padding-bottom:8%;}.pb9 {padding-bottom:9%;}.pb10 {padding-bottom:10%;}
.pt0{padding-top:0px;}.pt1{padding-top:1%;}.pt2 {padding-top:2%;}.pt3 {padding-top:3%;}.pt4 {padding-top:4%;}.pt5 {padding-top:5%;}.tpt6{padding-top:6%;}.pt7 {padding-top:7%;}.pt8 {padding-top:8%;}.pt9 {padding-top:9%;}.pt10 {padding-top:10%;}
u {text-decoration:none; border-bottom:1.5px solid #959595;}

#menu1 {cursor: pointer; color:#4e84cc; font-weight: bold;} #prdPar_b01 {display:none; } #prdPar_b01 p {padding-top:20px; line-height: 1.5;}
#dbrap .dbq {width:100%; padding-bottom:10px; border-bottom:1px dashed #eaeaea; margin-top:10px; font-size: 0.9em;}
#dbrap .dbq th {text-align:left; } 
#dbrap .dbq td {text-align:center; width:20%}  
#dbrap .dbq input {display:none; opacity:0;}
#dbrap .dbq label {display:block; width:90%; padding:7px 0; background: #eee; font-size: 0.9em;}
#dbrap .dbq input:checked + label {background: #4e84cc; color:#fff;}
@-webkit-keyframes btn {
0%{-webkit-transform:translateZ(0) translateY(0);
  transform:translateZ(0) translateY(0);
  -webkit-box-shadow:0 0 0 0 transparent; box-shadow:0 0 0 0 transparent}
100%{-webkit-transform:translateZ(40px) translateY(12px);transform:translateZ(40px) translateY(12px);
  -webkit-box-shadow:0 -12px 20px -12px rgba(0,0,0,.35);box-shadow:0 -12px 20px -12px rgba(0,0,0,.35)}}
@keyframes btn{
0%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}
100%{-webkit-transform:translateZ(40px) translateY(12px);transform:translateZ(40px) translateY(12px);-webkit-box-shadow:0 -12px 20px -12px rgba(0,0,0,.35);box-shadow:0 -12px 20px -12px rgba(0,0,0,.35)}}

/*db form style*/
input, select { border: 1px solid #ccc; height: 30px; vertical-align: middle; border-radius:5px;}

div.ipForm dl	{width:100%;float:left;padding:0;text-align:left;margin:1% 0;}
div.ipForm dl dt {width:15%;float:left;display:inline-block;font-size:0.875em;letter-spacing:-0.063em;font-weight:normal;text-align:left;padding:3% 0 0 0;}
div.ipForm dl dd {width:80%;float:left;display:inline-block; margin: 0 0 0 3%; white-space:nowrap;}
div.ipForm dl dd label {width:42%;float:left;display:inline-block;}
div.ipForm dl dd ipForm {border:1px solid #ccc;width:30%;padding:5px 3px;}
div.ipForm dl dd .inputChk {width:0.750em;height:0.750em;color:#a0a0a0;padding:0;}

/* radio */
.container_wrap {width:80%; margin: 5px 0px; display:inline-block;}
.container {width:48%; border: 2px solid #ddd; color:#999; border-radius: 5px; padding:10px 0; text-align: center; display:inline-block;}
.container input{border: 1px solid #e2e2e2; width: 100%; height: 40px;  margin-top: 10px; font-size: 14px; background: #f3f3f3; font-weight: bold;}
.container input[type="radio"] {width: 0; height: 0; opacity:0;}
.check {background: #2646d2; color: #fff;}

/* check_box */
.checkbox_wrap{font-size:11px; color:#666; font-weight:bold; display:inline-block; margin:0 auto;}
	.checkbox{display:inline-block; margin-bottom:5px; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
		.checkbox:last-child{margin-bottom:0;}
		.checkbox input[type=checkbox]{opacity:0; display:inline-block; width:16px; height:16px; margin:0; vertical-align: middle;}
	.check_mark{border-radius:3px; position:absolute; top:5%; left:0; width:14px; height:14px; background:#fff; border:2px solid #ccc;}
		.check_mark:after{content:""; position:absolute; display:none;}
	.checkbox input:checked ~ .check_mark:after{display:block;}
	.checkbox .check_mark:after{left:3px; top:-3px; width:4px; height:9px; border:solid #666; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
	.checkbox input:checked ~ .check_mark{border:2px solid #666;} 

table.db_q { margin-top:2%; border-bottom:2px dashed #eee; }
table.db_q td{ height:25px;}

.btnbtn{width:100%; text-align:center; margin:5% 0%; padding:2% 0; font-size:1.500em; animation: cursor 1s linear infinite; border:0;}
.btnbtn p{margin:0 !important; font-weight:bold !important; letter-spacing:-1px !important; font-size:25px; animation: cursor 1s linear infinite;}
@keyframes cursor {
  0%{background:#e50c0c; color:#fff;} 
  30%{background:#e50c0c; color:#fff;} 
  31%{background:#ffd800; color:#000;} 
  70%{background:#ffd800; color:#000;} 
  71%{background:#e50c0c; color:#fff;} 
  100%{background:#e50c0c; color:#fff;} 
}

.foot_btn{margin-top:5%; background:#ff0000; border:0; color:#ffff00; border-radius:3px; height:70px; font-weight:bold; font-family:"Noto Sans KR", sans-serif; font-size:25px; width:90%; display:block; margin:5% auto; animation:button 1s infinite; transform: translateY(0px);}
	@keyframes button{
		0%{transform: translateY(0px);}
		50%{transform: translateY(-10px); background:#ff0000; color:#ffff; box-shadow:0px 5px 0px rgba(0,0,0,.5);}
	}

	.qna{background:#f5f5f5; border:1px solid #eee; text-align:center; padding:5px 0; width:90%; margin:0 auto;}
	.qna input{width:15%; height:20px; background:#fff8ac;}

	.cuser { position:absolute; bottom:10px; right:100px; width:35px; }
	.db_btn {font-size:1.3em;text-decoration: none}

@media (max-width:480px) {

	.db_btn {font-size:1em;text-decoration: none}
	.cuser { position:absolute; bottom:10px; right:15px; width:35px; }
}

@media screen and (min-width:767px) {
   .web {display:block;}
   .mob {display:none;}
   section aside, section article { max-width:100%; }
   header img {max-width:100%;}
   .reply_container {max-width:100%;}
}
@media screen and (min-width:768px) {
    .web {display:block;}
    .mob {display:none;}
    section aside, section article {max-width:640px; }
    header img {max-width:640px;}
    .reply_container {max-width:640px;}
}
@media screen and (max-width:700px) {
    .web {display:none;}
    .mob {display:block;}
 }
 

@media screen and (max-width:600px) {
  body {font-size: 16px;}
.userCounter { font-size: 0.9em;}
}

@media screen and (max-width:500px) {
	.userCounter {height:125px; font-size: 1.2em; line-height: 1.3;  background: #eee; text-align: center; padding:0px 0px; letter-spacing: -0.05em; position:relative; z-index:999;}
}

@media screen and (max-width:400px) {
  body {font-size: 15px;}
  .userCounter {height:120px; font-size: 1.2em; line-height: 1.3;  background: #eee; text-align: center; padding:0px 0px; letter-spacing: -0.05em; position:relative; z-index:999;}
}

@media screen and (max-width:340px) {
  body {font-size: 14px;}
  section aside #dbrap .result {font-size: 12px;}
  .userCounter {height:105px; font-size: 1.2em; line-height: 1.3;  background: #eee; text-align: center; padding:0px 0px; letter-spacing: -0.05em; position:relative; z-index:999;}
}