﻿@charset "utf-8";*{margin:0 auto;padding:0;border:0;outline:0;vertical-align:top;box-sizing: border-box}
html,body{width:100%}
body{font-family: 'helvetica','S-CoreDream-4Regular','Apple SD Gothic Neo', 'Malgun Gothic','Nanum Gothic', 'Noto Sans','sans-serif';font-size:1em;color:#000;line-height:1;text-align:center;*word-break:break-all;-ms-word-break:break-all}
ul,ol,dl{list-style:none}
img,video{width:100%;border:0;margin:0;padding:0}a{text-decoration:none}
a,a:hover,a:visited,a:link,a:link{color:inherit}
table{border-spacing:0}
input,select{vertical-align:middle;font-size:1rem}
label,button{cursor:pointer}
.bline,legend,caption{display:block;overflow:hidden;position:absolute;top:0;left:-1000em}
i,em,address{font-style:normal;font-weight:400}
header,nav,section,article,aside,footer{display:block}
header{width:100%;max-width:600px;margin:0 auto}
header img{width:100%}
section{width:100%;max-width:600px;margin:0 auto}
body {background:#fff}
section {background:#fff}
article{}
article p{padding:20px 15px 0;letter-spacing:-1px;line-height:1.8;word-spacing:2px;text-align:justify;font-size:17px;color:#222}
article h3{letter-spacing:-.065em;font-weight:400}article h3 span{font-weight:700}
article .im{width:100%;box-sizing:border-box;padding:0 10px}
article .mg1 {margin-top: 95px;}
article p .p1{color:#fc3939}
article p .p2{color:#4795f7}
article p b{color:#000;font-weight:800}


.pc {display: block;}
.mo {display: none;}
/*
.f-box {display: block; margin:0 auto; width: 100%; position:fixed;z-index: 999; top:10px; right:20px}
.f-btn {width:130px; float: right; padding-right: 50px;}
*/


.fbt {position:fixed; left: 0; right:0; top:0; z-index:99; display:block; width:100%; max-width:1000px; margin:0 auto;background:#fff; padding: 10px 0;}
.fbt img {width:50%; max-width: 1000px;}
.f-bt {position:fixed; left:0; right:5px; top:7px; z-index:999; max-width: 1000px; width:100%; margin:0 auto}
.f-bt img {width:12%; max-width: 1000px;float: right; padding-right: 5px}

@keyframes fb{0%{bottom:5px}50%{bottom:15px}100%{bottom:5px}}

aside {position:relative; background: #fff;}
aside > #formrap {padding:10px 10px; position:relative;}
aside > #formrap .form {width:100%; text-align:left; padding:5px 20px;}
aside > #formrap .agree {font-size: 12px!important; text-align:right; line-height: 1; color:#000;} .agree span {color:#001ed2; font-weight:bold;}
aside > #formrap th { width:25%; min-width:80px; text-align:left;}
aside > #formrap th span { color:red;}
aside > #formrap td{ text-align:left; width:100%;}
aside > #formrap th { padding:1% 0 0; }
aside > #formrap td { padding:1% 0; }
aside > #formrap .agree { font-size: 0.65em; text-align:center;}
aside > #formrap input[type=text],aside > #formrap input[type=tel],select,aside > #formrap input[type=number] {
   box-sizing:border-box; border:1px solid #666; height:40px; padding:2.5%;background: #fff!important;}
aside > #formrap input[type=text],aside > #formrap input[type=number] { width:100%; background: #f5f5f5;border-radius: 5px;}
aside > #formrap select,aside > #formrap input[type=tel] { width:28%; background: #f5f5f5;border-radius: 5px; }
aside > #formrap .result { font-size: 0.85em; text-align:center; letter-spacing: -0.065em; margin-top:10px; background: #f3f3f3; padding: 10px 0}
aside > #formrap .result input:first-child { width:15%; height:18px; }
aside > #formrap .result input:nth-child(2) { width:25%; height:18px;}
aside .dbq {width:100%; margin-bottom:15px; border-bottom:1px dashed #eaeaea; margin-top:10px; font-size: 0.9em;}
aside .dbq th {text-align:left; } 
aside .dbq td {text-align:center!important; width:20%!important}  
aside .dbq input {display:none; opacity:0;}
aside .dbq label {display:block; width:90%; padding:7px 0; background: #eee; font-size: 0.9em; color: #666;}
aside .dbq input:checked + label {background: #4e84cc; color:#fff;}
aside button { width:140px;  display:block; margin:0 auto; font-size: 1em; padding:1% 0; font-weight: bold; background: #222; color:#fff; letter-spacing: -0.064em; animation:btn .9s cubic-bezier(.25,.46,.45,.94) infinite forwards; margin-bottom: 40px;border: none;}

.db_p {font-size: 48px; text-align:center; font-weight:bold; padding:0; line-height:1.2}
.db_p2 {font-size: 22px; text-align:center; font-weight:bold; padding:0; line-height:1.2}
.db_p3 {font-size: 26px; text-align:center; font-weight:bold; padding:0; line-height:1.2}
.bar {padding-left: 5px; vertical-align: middle;}
.box {height: 100px!important;}


div.ipForm {padding:3% 4%;border-top: none; background:#fff;}
div.ipForm dl	{width:100%;float:left;padding:0;text-align:left;margin:2% 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:90%;float:left;display:inline-block;}
div.ipForm dl dd ipForm {border:1px solid #ccc;width:30%;padding:5px 3px;}
div.ipForm dl dd input {display:inline-block;width:100%;height:27px;padding:2% 2%;border:1px solid #616161;color:#646464;-webkit-border-radius:0; font-size:1.125em;}
div.ipForm dl dd select {font-size:1.125em; height:25px; margin:2% 2%;}
div.ipForm dl dd .inputChk {width:0.750em;height:0.750em;color:#a0a0a0;padding:0;}

div.ipForm .Form_Q {width:100%; float:left; line-height:1.5; padding-bottom:2%; border-bottom:2px dashed #eee;}
div.ipForm .Form_Q th {font-size:1.125em; text-align:left; padding:2% 0;}

div.ipForm .bnr {width:100%;margin:0 auto;padding:0;}
div.ipForm .bnr button {width:100%;padding:3% 0;background:#1e4acd;color:#fff;border:0;font-weight:bold;font-size:1.500em;letter-spacing:-0.063em;}

.form2{ 
	width: 100%;
	position: relative;
	z-index: 50000;

}
.form2 form table{ /*DB폼 색상&라인변경*/
    line-height: 54px;
	background-color: #4c4c4c; /*DB창 백그라운드 색상*/
	position: relative;
	z-index: 50000;
	color: white;
}
.form2 form table tbody tr td table tbody tr th{ 
	width: 25%;
}
.form2 form table tbody tr td table tbody tr td input[type=text]{
	width: 90%;
	height: 42px;
	border: solid 1px #777;
}
.form2 form table tbody tr td table tbody tr td input[type=age]{
	width: 90%;
	height: 42px;
	border: solid 1px #777;
}
.form2 form table tbody tr td table tbody tr td input[type=tel]{
	width: 90%;
	height: 42px;
	border: solid 1px #777;
}
.form2 form table tbody tr td table tbody tr th input[type=checkbox]{
	width: 5%;
}
.form2 form table tbody tr td table tbody tr th label{
	font-size: 10pt;
	letter-spacing: -1px;
}
.form2 form table tbody tr td table tbody tr td select{
	width: 26%;
	height: 30px;
}

footer{background:#fff;text-align:center;margin-bottom:100px }
/*footer .footer-btn a{font-size:.6rem;color:#727d92;background:#fff;border:1px solid #d4d7de;padding:.85em 1em;margin:10px 1px 1px}*/
footer p{padding:20px .9375em; font-size:0.95em;line-height:1.3;letter-spacing:-.02em;color:#444;font-weight:600; letter-spacing:-0.08em;}
footer div {background:#000; padding:20px;}

@media screen and (max-width:768px){
    .pc {display: none;}
    .mo {display: block;}
    .f-bt img {width:13%;}
    .f-bt {top: 0}
    
    aside > #formrap .form {padding: 5px 10px;}
    aside > #formrap th {padding:6% 0 0; }
    aside > #formrap tr:first-child > th {padding-top:2%;} 
    aside > #formrap td {padding: 2% 0;}
    aside button {width: 140px;font-size: 1em;padding: 3% 0; margin-top: 10px;}
    .box {height: 70px!important;}
    article .mg1 {margin-top: 50px;}
	footer {margin-bottom:60px}
}

@keyframes dbbtn{0%{top:0;box-shadow:0 5px 5px rgba(0,0,0,.2)}50%{box-shadow:0 0 0 rgba(0,0,0,0);top:5px}0%{top:0;box-shadow:0 5px 5px rgba(0,0,0,.2)}} 

#sex-f, #sex-m {display:none;} 
#sex-f + label, #sex-m + label {padding:2.5% 5%; height:40px; border-radius: 3px; box-sizing: border-box; width:50%; text-align:center; background: #000; color:#fff;} 
#sex-f:checked + label, #sex-m:checked + label {background: #e60000; font-weight: 600; box-shadow: inset -5px 5px 7px rgba(0,0,0,.35);} 


section{max-width:1000px}
article p .p2{color:#36c;font-weight:600}

.btn {text-align:center;}

input[type=radio]:not(old) {height:13px; margin:5px 3px 3px 3px; padding:5px; }
table th span {color:red; font-size:0.8em; font-weight:400;}


.pt {color:#154ac4; font-size:1.1em; font-weight:600}




@media screen and (max-width:600px){header .top02{padding-left:10px; } .headerTxt {padding-bottom: 15px} .headerTxt i {font-size: 0.85em;  }.headerTxt p {font-size: 0.9em; } .im {padding: 0!important}}
@media screen and (max-width:445px){header .top02{padding-left:8px}.f-bt img {width:16%; }}
@media screen and (max-width:346px){header .top02{padding-left:5px;font-size:14px}} 

@keyframes result { 0% {background: #f5f5f5;} 50% {background: yellow;} 100% {background: #f5f5f5;} }