h1,h2,h3,h4{ text-align:center; line-height:1.8;}

body{ background-image:url(https://file.k-friends.kr/img/20210813/055702_0.png); background-size:100% auto; background-attachment: fixed; }


section > div.main1{ width:100%; height:300px; background-position:center center; background-size:auto 100%; background-repeat:no-repeat; background-repeat:no-repeat;background-image:url(https://file.k-friends.kr/img/20210826/040921_0.png);}

section > div.main2{ width:90%; margin-left:5%; margin:auto; margin-top:4em; margin-bottom:4em;}
section > div.main2 > ul{ width:100%; display:flex; border-right:0;}
section > div.main2 > ul > li{ display:inline-block; width:24%; margin-right:1%; text-align:center; margin-left:-1px; padding:0.5em 0; vertical-align:middle; background-color:rgba(255,255,255,0.5); border-radius:1.5em; font-size:16px; border:1px solid #999;;}
section > div.main2 > ul > li.on{ background-color:#000; color:#fff; border-left:0; border-right:0;}

section > div.main2 > h2{ margin-bottom:0.8em; font-size:34px;}

section > div.main2 > div > form{ width:100%;  margin:auto;}

section > div.main2 > div > form > ul{ display:inline-block; width:100%; margin-top:2em;}
section > div.main2 > div > form > ul > li{ display:flex; width:100%; margin-bottom:0.7em; border-radius:0; border:1px solid gray; background-color:#fff;}
section > div.main2 > div > form > ul > li:nth-child(1){ display:none;}
section > div.main2 > div > form > ul.PgChangeUl > li:nth-child(1){ display:flex;}
section > div.main2 > div > form > ul > li > label{ display:flex; vertical-align:middle; text-align:center; padding:8px 1%; width:23%; background-color:#999;; font-weight:900; font-size:16px; color:#fff;  table-layout:fixed;align-items:center;justify-content: center;}
section > div.main2 > div > form > ul > li > label:after{ content:" *"; color:#ff0;}
section > div.main2 > div > form > ul > li:nth-child(6) > label:after
,section > div.main2 > div > form > ul > li:nth-child(15) > label:after
,section > div.main2 > div > form > ul > li:nth-child(17) > label:after
{ content:""; color:#F63;}

section > div.main2 > div > form > ul > li > div{ display:inline-block; line-height:1.6; font-size:16px; padding:8px 1%; flex-grow: 1; flex-grow: 1; margin-bottom:2px;align-items:center; width:78%; }
input[name=regEmail1],input[name=regEmail2]{ width:40%;}





section > div.main2 > div > form > ul > li > div > textarea{ width:80%; margin-top:4px;}
section > div.main2 > div > form > ul > li > div > select{ font-size:16px; padding:6px;}
section > div.main2 > div > form > ul > li > div > a{ background-color:#000; color:#fff; display:inline-block; padding:0.5em 1.4em; font-size:18px;}

section > div.main2 > div > form > ul > li > div > p{ color:#00f; margin-top:0.5em; margin-bottom:0.5em; font-size:16px; }
section > div.main2 > div > form > ul > li > div > p > span{ display:inline-block;}

section > div.main2 > div > form > ul > li > div > label{ display:inline-block; table-layout:fixed; font-size:16px; margin-right:2%;}
#FormStep1 > label{ display:inline-block; table-layout:fixed; }

#FormStep1 > div{ position:relative; width:100%; text-align:right;}
#FormStep1 > div > a{ position:absolute; font-size:12px; border-radius:2em; border:1px solid #ddd; display:inline-block; padding:4px 0;; top:-38px; width:100px; text-align:center; right:0; background-color:#000cb4; color:#fff;}
.phone{ width:30%;}

.tabdiv{ display:none; visibility:hidden;}
.tabdiv.on{ display:block; visibility:visible; box-shadow:1px 1px 16px 1px gray; padding:3em; border-radius:3em; margin-top:2em; background-color:rgba(255,255,255,0.3); }
.worldlist{ display:none;}

.nextbtn, .prevbtn{ background-color: #000cb4; box-shadow: 1px 1px 2px 1px #000cb4; color: #fff; padding: 0.5em 3em; font-size: 16px; display: inline-block; border-radius: 3em; }
form > nav{ text-align:center; margin-top:3em; margin-bottom:10em;}
form > nav > a{ margin:0.5em;}


#FormStep1 > h3{ margin-top:1em; font-size:34px;}
#FormStep1 > h4{ margin-top:3em; margin-bottom:1em; font-size:21px;}
#FormStep1 > fieldset.preview{ font-size:15px; line-height:1.6; height:80px; display:inline-block; overflow-y:scroll; background-color:rgba(255,255,255,0.7); border:2px solid #999; padding:1em; margin-bottom:1em;}

#FormStep2 > h3{ margin-top:1em;margin-bottom:0.5em;  font-size:34px;}

#fdpay > h3{ margin-top:2em;margin-bottom:0.5em;  font-size:24px;}
#FormStep4 > h3{ margin-top:2em;margin-bottom:0.5em;  font-size:24px;}

.nationWrtie > ul{ display:flex; margin-top:0.5em;}
.nationWrtie > ul > li{ display:inline-block; border:1px solid #ddd;}
.nationWrtie > ul > li > label{ width:100%; display:inline-block; float:left; padding:0.5em 0; text-align:center; background-color:#f1f1ff}
.nationWrtie > ul > li > div{width:100%; display:inline-block; float:left; text-align:center;}
.nationWrtie > ul > li > div > input{ width:90%; border:0;}
.nationWrtie > ul > li > div > select{ width:90%; border:0;}

.taegeukgili > div > ul{ display:flex;}
.taegeukgili > div > ul > li{ padding:0.5em;}
.taegeukgili > div > ul > li > label{ text-align:center;}
.taegeukgili > div > ul > li > label > span{}
.taegeukgili > div > ul > li > label > span > img{ box-shadow:1px 1px 4px gray; height:80px; }

#FormStep2 input{ font-size:16px; padding:6px;}
#FormStep2 select{ font-size:16px; padding:6px; margin:0.5em 0; width:auto;}

/* LAYER POPUP STYLE START */
			.fdLayer {display:none; position: absolute; top: 50%; left: 50%; width: 566px; height:auto;  background-color:#fff; border: 5px solid rgb(0, 66, 101); z-index: 10;}	
			.fdLayer .fdContainer {padding: 3px;}
			.fdLayer .fdBtn {width: 100%; margin:10px 0 0; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;}
			a.closeBtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:rgb(0, 32, 61); font-size:13px; color:#fff; line-height:25px;}	
			a.closeBtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}
			#mask { position:absolute; left:0; top:0; z-index:9; background-color:#000; display:none;}
			/* LAYER POPUP STYLE END */


#MarathonResultDiv > div{background-image:url(/file/img/rr.png); background-size: auto 100%; background-position:center center; width:100%;}
#MarathonResultDiv > div > div.resultTitle{ width:86%; margin-left:7%; margin-top:3em; display:inline-block;}
#MarathonResultDiv > div > div.resultTitle > img{ float:left; width:66px; margin-right:2em; margin-left:2em;}
#MarathonResultDiv > div > div.resultTitle > svg{ float:left; width:66px; height:66px; margin-top:0.3em; margin-left:1em; margin-right:0.5em;}
#MarathonResultDiv > div > div.resultTitle > h4{ color:#fff; font-family:Arial;  text-align:left; font-size:24px;}
#MarathonResultDiv > div > div.resultTitle > h4 > span{ display:block;}
#MarathonResultDiv > div > div.resultText{ width:70%; margin-left:10%; margin-top:0.6em; margin-bottom:2em; display:inline-block; background-color:rgba(255,255,255,0.8); padding-left:5%; padding-right:5%;}
#MarathonResultDiv > div > div.resultText > h3{ text-align:left; margin-top:1.4em; margin-bottom:0.5em;}
#MarathonResultDiv > div > div.resultText > ul{}
#MarathonResultDiv > div > div.resultText > ul > li{ margin-left:20px; list-style-type:circle; margin-bottom:0.5em;}
#MarathonResultDiv > div > div.resultText > p{ margin-left:23px; position:relative;}
#MarathonResultDiv > div > div.resultText > p:before{ content:"*"; position:absolute; right:101%;}
#MarathonResultDiv > div > div.resultText > nav{ width:100%; display:inline-block; text-align:center; padding-top:0.5em; padding-bottom:1.5em;}
#MarathonResultDiv > div > div.resultText > nav > a{ display:inline-block; padding:0.5em 2em; margin:4px;}

#MarathonResultDiv > div > div.resultText > nav > a.homebtn{ background-color:#872b9a; color:#fff; border:1px solid #ddd;}
#MarathonResultDiv > div > div.resultText > nav > a.checkedbtn{ background-color:#fff; color:#000; border:1px solid #ddd;}
#MarathonResultDiv > div > div.resultText > nav > a.eventbtn{ background-color:#fff; color:#000; border:1px solid #ddd;}

			
div#AddressFindDiv{ width: 100%; height: 100%; display: table; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.5);}
div#AddressFindDiv > div{ display: table-cell; text-align: center; vertical-align: middle;}
div#AddressFindDiv > div > form{ text-align: left; display: inline-block; background-color: #fff; border:5px solid #00f; padding:8px;}

div#AddressFindDiv > div > form > div.searchdiv{ display:block; width:96%; margin:auto;}
div#AddressFindDiv > div > form > div.searchdiv > input{ width:60%; height:30px; float:left; margin-right:4px;}
div#AddressFindDiv > div > form > div.searchdiv > a{ display:inline-block; padding:6px 1.6em; background-color:#000; color:#fff;}
div#AddressFindDiv > div > form > p{ display:block; width:96%; margin:auto;color:#F63; margin-top:0.5em; margin-bottom:0.5em; font-size:12px;}
#AddressList{ min-height:350px; width:600px;}
#AddressList > table{ width:96%; margin:auto; border-top:2px solid #69F;}
#AddressList > table > tbody > tr > th{ margin:auto; border-bottom:1px solid #69F; padding:6px; font-size:12px; line-height:1.6; text-align:center;}
#AddressList > table > tbody > tr > td{ margin:auto; border-bottom:1px solid #69F; padding:6px; font-size:12px; line-height:1.6;}
#AddressList > table > tbody > tr > td:nth-child(1){ text-align:center}
#AddressList > nav{ text-align:center; width:100%; padding:1em 0;}
#AddressList > nav > span{ display:inline-block; padding:6px 1em; background-color:#555; color:#fff; border:1px solid #ddd; font-size:12px; margin:2px;}
#AddressList > nav > a{ margin:2px; display:inline-block; padding:6px 1em; background-color:#fff; border:1px solid #ddd; font-size:12px;}

.tsizenone table{ border-collapse:inherit; width:100%; border-spacing:3px;}
.tsizenone table thead th{ background-color:#c8c8c8; color:#444; text-align:center; width:20%; padding:0.4em 0; font-size:19px;}
.tsizenone table tbody td{ background-color:#f4f4f4; color:#444; text-align:center; width:20%; padding:0.3em 0; font-size:19px;}
.tsizenone table tbody > tr:hover > td{ color:#039; font-weight:900;  }
.tsizenone table tfoot td{ background-color:#f4f4f4; color:#444; text-align:center; padding:0.5em 0; font-size:17px; font-weight:900;}

#CouseSelectDiv > span{ display:none;}
#CouseSelectDiv.CouseRunningSelect > span.RunningSpan{ display:inline-block;}
#CouseSelectDiv.CouseCycleSelect > span.CycleSpan{ display:inline-block;}
#CouseSelectDiv.CouseHikingSelect > span.HikingSpan{ display:inline-block;}
#CouseSelectDiv.CouseSwimmingSelect > span.SwimmingSpan{ display:inline-block;}

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

.uvcaseDiv > span{ display:none;}
.uvcaseDiv[data-case='0'] > span.uvcase0Div{ display:inline-block;}
.uvcaseDiv[data-case='1'] > span.uvcase1Div{ display:inline-block;}
.uvcaseDiv[data-case='2'] > span.uvcase2Div{ display:inline-block;}

section > div.main2 > div > form > ul > li.brotherdiv{ display:none;}
section > div.main2 > div > form > ul > li.brotherdiv.show{ display:flex;}
.brotherdiv > div > ul{ display:flex; width:100%; margin-bottom:0.5em; float:left;}
.brotherdiv > div > ul > li{ display:inline-block; float:left; width:100%; padding:0.5em 0; margin-bottom:1en; background-color:rgba(225,225,225,0.7);}
.brotherdiv > div > ul > li > label{ width:100%; display:inline-block; padding:0.5em 0;float:left; border-bottom:1px solid #999; height:30px; background-color:#999; color:#fff; text-align:center;}
.brotherdiv > div > ul > li > div{ width:100%; display:inline-block; text-align:center; padding:0.3em 0;}
#FormStep2 .brotherdiv > div > ul > li > div > select{ padding-top:6px; height:40px; width:90%;}
#FormStep2 .brotherdiv > div > ul > li > div > input{ margin-top:7px; width:90%;}