h1,h2,h3,h4{ text-align:center; line-height:1.8;}
header{ position:absolute; z-index:3; left:0; top:0;}
header > a > span{ color:#fff; }

body{ background-image:url(https://file.k-friends.kr/img/20210813/055702_0.png); background-size:100% auto; background-attachment: fixed; position:relative;}
section > div.main1{ width:100%; height:200px; background-position:center center; background-size:auto 100%;background-image:url(https://file.k-friends.kr/img/20210826/040921_0.png); background-size:cover}

section > div.main2{ width:90%; display:inline-block; margin-left:5%; margin-top:5em; margin-bottom:4em; box-shadow:1px 1px 12px 1px gray; padding:3em 0; border-radius:3em;  background-color:rgba(255,255,255,0.3)}

section > div.main2 > h2{ display:inline-block; width:100%; text-align:center; font-size:34px; font-weight:900; margin-top:1em; position:relative; margin-bottom:2em; }

section > div.main2 > form{ width:100%; text-align:center;}
section > div.main2 > form > ul{ display:inline-block; width:90%; text-align:left; }
section > div.main2 > form > ul > li{ display:inline-block; width:100%; margin-bottom:0.7em; border-radius:0; border:1px solid gray; background-color:#fff;}


section > div.main2 > form > ul > li > label{  display:inline-block; vertical-align:middle; text-align:center; padding:0.5em 0; width:100%; background-color:rgba(66,66,66,0.7); font-weight:900; font-size:20px; color:#fff;}
section > div.main2 > form > ul > li > div{ width:100%; display:inline-block; background-color:rgba(255,255,255,0.7); line-height:1.6; font-size:20px;flex-grow: 1; text-align:center;}

section > div.main2 > form > ul > li > div > select{ display:inline-block; padding:6px; width:23%; font-size:12px; margin:0.5em 0;}
section > div.main2 > form > ul > li > div > input[type=text]
,section > div.main2 > form > ul > li > div > input[type=password]{ font-size:19px; width:90%; display:inline-block; margin:0.5em 0;}

#ResultDiv > h3{ font-size:20px; text-align:center; width:100%; margin-top:3em;}
#ResultDiv > ul{ display:inline-block; width:90%; margin-top:1em; margin-bottom:4em;}
#ResultDiv > ul > li{ display:inline-block; width:100%; margin-bottom:0.5em;}

#ResultDiv > ul > li > ul{ display:inline-block; width:100%; border-top:1px solid #ddd; margin-top:3em; text-align:center;}
#ResultDiv > ul > li > ul > li{ display:flex; width:90%; margin-bottom:0.7em; border:2px solid #999; text-align:left; margin-left:5%;}
#ResultDiv > ul > li > ul > li > label{ display:flex; width:30%; background-color:#999; padding:8px 0; color:#fff; text-align:center; font-weight:900; font-size:14px;justify-content: center; align-items:center;}
#ResultDiv > ul > li > ul > li > div{ width:66%; display:inline-block; padding:8px 2%;background-color:#fff;flex-grow: 1; font-size:14px;}
#ResultDiv > ul > li > ul > li > div > p{ margin-left:20px; position:relative; color:#f00;}
#ResultDiv > ul > li > ul > li > div > p:before{ content:"※"; position:absolute; left:-20px; top:0;}
#ResultDiv > ul > li > nav{ margin-top:1em; margin-bottom:2em; width:100%; text-align:center;}
#ResultDiv > ul > li > nav > a{ background-color: #000cb4;box-shadow: 1px 1px 2px 1px #000cb4;color: #fff;padding: 0.5em 3em;font-size: 26px;display: inline-block;border-radius: 3em;;}
#ResultDiv > ul > li > p{margin-left:20px; position:relative; color:#f00;}
#ResultDiv > ul > li > p:before{ content:"※"; position:absolute; left:-20px; top:0;}

form > nav{ text-align:center; margin:3em 0;}

#AddCheckBtn{background-color: #000cb4;box-shadow: 1px 1px 2px 1px #000cb4;color: #fff;padding: 0.5em 3em;font-size: 24px;display: inline-block;border-radius: 3em;}

.tsizenone{ display:none;}
.tsizeview{ display:inline-block;}

section > div.main3{ width:90%; display:inline-block; margin-left:5%; margin-top:3em; margin-bottom:10em; box-shadow:1px 1px 16px 1px gray; padding:3em 0; border-radius:3em;  background-color:rgba(255,255,255,0.3)}

/*
.info8{ width:100%; display:inline-block; float:left; text-align:center;}
.info8 > div{ margin-top:2em; width:96%; text-align:left; display:inline-block;}
.info8 > div > h2{ text-align:left; position:relative; color:#ff9000; font-weight:900; font-size:30px; margin:1em 0; margin-bottom:1em;}
.info8 > div > div{ background-color:#f4f4f4; display:inline-block; margin-bottom:3em; background-repeat:no-repeat; width:96%; text-align:left;}
.info8 > div > div > ul{ margin:1em;}
.info8 > div > div > ul > li{ list-style:circle; margin-left:20px; }
.info8 > div > div > ul > li > ul > li{ list-style:outside; margin-left:20px; }
*/
.info8{ margin-top:1em; }
.info8 > div{ text-align:center;}

.info8 > div{ text-align:center;}
.info8 > div > h2{ display:inline-block; padding:0 2em; font-size:24px; font-weight:900; position:relative; margin-bottom:1em;}
/*
.info8 > div > h2:before{ content:""; width:280px; height:2px; display:inline-block; background-color:#000; position:absolute; right:100%; top:50%; margin-top:1px;}
.info8 > div > h2:after{ content:""; width:280px; height:2px; display:inline-block; background-color:#000; position:absolute; left:100%; top:50%; margin-top:1px;}
.info8 > div > h2 > span:nth-child(1):before{ content:"●"; font-size:6px; position:absolute; top:50%; right:100%; margin-right:-6em; margin-top:-5px;}
.info8 > div > h2 > span:nth-child(3):before{ content:"●"; font-size:6px; position:absolute; top:50%; left:100%; margin-left:-6em; margin-top:-5px;}
*/
.info8 > div > div{ margin:1em 2em; text-align:left;}
.info8 > div > div > ul{ }
.info8 > div > div > ul > li{ font-size:16px; color:#444; margin-left:30px; list-style:decimal;}

form > nav{ text-align:center;}

.tsizenone{ display:none;}
.tsizeview{ display:inline-block;}