header{ display:none;}
section{ width:100%; min-height:100vh; display:inline-block;}
.infohead{ position:relative; width:100%; padding:0.5em 0; float:left; background-color:#652d88; text-align:center; display:inline-block;}
.infohead > h2{ margin:0; color:#fff;}
.infohead > a{ position:absolute; left:1em; top:10px;}
.infohead > a > img{ width:35px; border-radius:5px;}
.infobody1{ position:relative; width:100%; display:inline-block; background-image:url(https://www.k-friends.kr/file/img/sc5.jpg); background-repeat:no-repeat; background-size:cover; background-position:center;}
.infobody1 > div{ background-color:rgba(101,45,136,0.8); padding:3em 0; width:100%; display:inline-block;}
.infobody1 > div > h3{ width:80%; margin:auto; color:#fff; font-size:30px; margin-bottom:1.5em;}
.infobody1 > div > h3 > span{ display:inline-block;}
.infobody1 > div > h3 > span > b{ color:#fdd31c;}
.infobody1 > div > ul{ width:80%; margin-left:10%; color:#fff; display:inline-block; background-color:rgba(255,255,255,0.3); padding:10px 0; border-radius:1em 1em 0 0; float:left;}
.infobody1 > div > ul > li{ display:table; text-align:center; width:49%; float:left;}
.infobody1 > div > ul > li:nth-child(2){ border-left:1px solid #fff;}

.infobody1 > div > p{ width:80%; margin-left:10%; color:#fff; display:inline-block; background-color:rgba(255,255,255,0.3); padding:10px 0; border-radius:0 0 1em 1em; text-align:center; border-top:1px solid #fff;}

.infobody2 > ul{ display:table; width:80%; margin:auto; margin-top:2em; margin-bottom:2em; border:1px solid #c2c2c2; border-collapse:collapse;}
.infobody2 > ul > li{ display:table-row;}
.infobody2 > ul > li > label{ display:table-cell; padding:6px; text-align:right; border-bottom:1px solid #c2c2c2;}
.infobody2 > ul > li > div{ display:table-cell; padding:6px; border-bottom:1px solid #c2c2c2;}
.MemberInfoNav0{ background-color:#652d88; display:table; width:100%; position:fixed; bottom:0; left:0; overflow:hidden;}
.MemberInfoNav0 > a{ color:#fff;display:table-cell; text-align:center; padding:1em 0; vertical-align:bottom; font-size:12px;}
.MemberInfoNav0 > a > img{ height:30px; }

.pointhead{ position:relative; width:100%; padding:0.5em 0; float:left; background-color:#652d88; text-align:center; display:inline-block;}
.pointhead > h2{ margin:0; color:#fff;}
.pointhead > a{ position:absolute; left:1em; top:10px;}
.pointhead > a > img{ width:35px;}

.pointbody1{ position:relative; width:100%; display:inline-block; background-image:url(https://www.k-friends.kr/file/img/sc5.jpg); background-repeat:no-repeat; background-size:cover; background-position:center;}
.pointbody1 > div{ background-color:rgba(101,45,136,0.8); padding:3em 0; width:100%; display:inline-block; float:left;}
.pointbody1 > div > h3{ width:80%; margin:auto; color:#fff; font-size:30px; margin-bottom:1.5em;}
.pointbody1 > div > h3 > span{ display:inline-block;}
.pointbody1 > div > h3 > span > b{ color:#fdd31c;}
.pointbody1 > div > ul{ width:80%; margin-left:10%; color:#fff; display:inline-block; background-color:rgba(255,255,255,0.3); padding:10px 0; border-radius:1em; float:left; margin-top:0.5em;}
.pointbody1 > div > ul > li{ display:table; text-align:center; width:33%; float:left;}
.pointbody1 > div > ul > li:nth-child(2){ border-left:1px solid #fff;}
.pointbody1 > div > ul > li:nth-child(3){ border-left:1px solid #fff;}
.pointbody1 > div > p{ width:80%; margin-left:10%; color:#fff; display:inline-block; background-color:rgba(255,255,255,0.3); padding:10px 0; border-radius:1em; text-align:center;}


.pointbody2{ text-align:center; width:100%; display:inline-block;}
.pointbody2 > form > div{ padding:1em 0;}
.pointbody2 > form > div > input[type=text]{ width:80px; height:30px; vertical-align:middle; text-align:center;}
.pointbody2 > form > div > .submitbtn{ background-color:#652d88; color:#fff; font-size:16px; padding:9px 1em; font-weight:900;}

.pointbody3{ margin:2em 0;}
.pointbody3 > ul > li{ display:table-row;}
.pointbody3 > ul > li > label{ display:table-cell; padding:6px; text-align:right; border-bottom:1px solid #c2c2c2;}
.pointbody3 > ul > li > div{ display:table-cell; padding:6px; border-bottom:1px solid #c2c2c2;}


.pointbody3 > ul{ display:table; width:90%; margin:auto; border:1px solid #c2c2c2; border-collapse:collapse;}
.pointbody3 > ul > li{ border-bottom:1px solid #c2c2c2;}
.pointbody3 > ul > li > ins{ display:table-cell; width:10%; padding: 8px; text-align: center; font-size:12px; text-decoration:none;}
.pointbody3 > ul > li > time{ display:table-cell; padding: 8px; text-align: center; font-size:12px;}
.pointbody3 > ul > li > strong{ display:table-cell; width:20%; padding: 8px; text-align: center; font-size:12px;}
.pointbody3 > ul > li > strong:after{ content: ""}
.pointbody3 > ul > li > p{ display:table-cell; width:20%; padding: 8px; text-align: center; font-size:12px;}
.pointbody3 > ul > li > p:after{ content: ""}

.pointbody3 > ul > li:nth-child(1){ background-color: #f1f1ff;}
.pointbody3 > ul > li:nth-child(1) > ins{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody3 > ul > li:nth-child(1) > time{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody3 > ul > li:nth-child(1) > strong{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody3 > ul > li:nth-child(1) > strong:after{ content: ""}
.pointbody3 > ul > li:nth-child(1) > p{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody3 > ul > li:nth-child(1) > p:after{ content: ""}


.pointbody4{ margin:auto; margin-top:2em; margin-bottom:2em; width:100%;  table-layout:fixed;}
.pointbody4 > ul{ display:table;  border:1px solid #c2c2c2; border-collapse:collapse; width:90%; margin:auto;}
.pointbody4 > ul > li{ border-bottom:1px solid #c2c2c2; width:100%; display:table-row;}
.pointbody4 > ul > li > ins{ display:table-cell; padding: 8px; text-align: center; font-size:12px; text-decoration:none; vertical-align:middle;}
.pointbody4 > ul > li > time{ display:table-cell; padding: 8px; text-align: center; font-size:12px; vertical-align:middle;}
.pointbody4 > ul > li > strong{ display:table-cell; width:20%; padding: 8px; text-align: center; font-size:12px; vertical-align:middle;}
.pointbody4 > ul > li > strong:after{ content: ""}
.pointbody4 > ul > li > p{ display:table-cell; padding: 8px; text-align: center; font-size:12px; vertical-align:middle;}
.pointbody4 > ul > li > p:after{ content: ""}

.pointbody4 > ul > li:nth-child(1){ background-color: #f1f1ff;}
.pointbody4 > ul > li:nth-child(1) > ins{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody4 > ul > li:nth-child(1) > time{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody4 > ul > li:nth-child(1) > strong{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody4 > ul > li:nth-child(1) > strong:after{ content: ""}
.pointbody4 > ul > li:nth-child(1) > p{ padding: 8px; text-align: center; font-weight: 700;}
.pointbody4 > ul > li:nth-child(1) > p:after{ content: ""}


.mreghead{ position:relative; width:100%; padding:0.5em 0; float:left; background-color:#652d88; text-align:center; display:inline-block;}
.mreghead > h2{ margin:0; color:#fff;}
.mreghead > a{ position:absolute; left:1em; top:10px;}
.mreghead > a > img{ width:35px;}


.mregbody1{ width:100%; display:inline-block; float:left; margin-top:10px; position:relative;}
.mregbody1:before{ content:""; width:25%; height:8px; background-color:#652d88; top:0; left:0; float:left; position:absolute;}
.mregbody1:after{ content:""; width:75%; height:8px; background-color:#cccccc; top:0; right:0; float:left; position:absolute;}
.mregbody1 > h3{ width:90%; margin-left:5%; margin-top:2.2em; margin-bottom:2em;}
.mregbody1 > h3 > span{ display:inline-block;  font-size:26px;}
.mregbody1 > h3 > span > span{ display:inline-block;  font-size:26px;}
.mregbody1 > h3 b{ color:#652d88;}

.mregbody2{ width:100%; display:inline-block; float:left; text-align:center;}
.mregbody2 > h3{ font-size:33px; margin:1em 0;}

.mregbody3 ul{ display:table; width:90%; margin:auto; margin-top:2em;}
.mregbody3 ul > li{ display:inherit; position:relative; width:100%;}
.mregbody3 ul > li:before{ content:""; width:80%; height:1px; background-color:#cccccc; bottom:0; left:0; display:inline-block; position:absolute;}
.mregbody3 ul > li > label{ display:table-cell; font-size:18px; font-weight:900; line-height:1.6;padding: 6px 0; color:#555;}
.mregbody3 ul > li > a{ display:table-cell; width:20%; text-align:center;}


.mregbody3 > form > nav{ width:100%; display:inline-block; float:left;}
.mregbody3 > form > nav > a{ position:fixed; left:0; bottom:0; width:100%; background-color:#652d88; padding:0.5em 0; color:#fff; font-weight:900; font-size:24px; text-align:center;}
.Agreements fieldset{ display:none;}

.mreg1body1{ width:100%; display:inline-block; float:left; margin-top:10px; position:relative;}
.mreg1body1:before{ content:""; width:50%; height:8px; background-color:#652d88; top:0; left:0; float:left; position:absolute;}
.mreg1body1:after{ content:""; width:50%; height:8px; background-color:#cccccc; top:0; right:0; float:left; position:absolute;}
.mreg1body1 > h3{ width:90%; margin-left:5%; margin-top:2.2em; margin-bottom:2em;}
.mreg1body1 > h3 > span{ display:inline-block;  font-size:26px;}
.mreg1body1 > h3 > span > span{ display:inline-block;  font-size:26px;}
.mreg1body1 > h3 b{ color:#652d88;}

.mreg1body2 form > ul > li > label{ display:none;}
.mreg1body2 form > ul > li > div{ display:inline-block; width:90%; margin-left:5%; margin-right:5%; padding-bottom:16px; position:relative;}
.mreg1body2 form > ul > li > div > input[type=text]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}
.mreg1body2 form > ul > li > div > p{ color:#f00; display:inline-block; width:100%; font-size:12px;}

.mreg1body2 form > ul > li > div > input[type=password]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}


.mreg1body2 form > ul > li > div > input[type=number]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}

.mreg1body2 form > ul > li > div > select{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}


.mreg1body2 form > ul > li > div #MemberRegStep1Btn0{ position:absolute; right:10px; top:10px; color:#652d88; background-color:#fff; border:1px solid #652d88; border-radius:0.4em; display:inline-block; padding:2px 12px;}


.mreg1body2 form > ul > li > div #MemberRegStep1Btn5{ position:absolute; right:10px; top:124px; color:#652d88; background-color:#fff; border:1px solid #652d88; border-radius:0.4em; display:inline-block; padding:2px 12px;}
.mreg1body2 form > ul > li > div #MemberRegStep1AccChkBtn{ position:absolute; right:10px; top:124px; color:#652d88; background-color:#fff; border:1px solid #652d88; border-radius:0.4em; display:inline-block; padding:2px 12px;}
.mreg1body2 form > ul > li > div #MemberRegStep1RrnBtn{  color:#652d88; background-color:#fff; border:1px solid #652d88; border-radius:0.4em; display:inline-block; padding:2px 12px;}


#MemberRegStep1Btn2{ display:none;}

.mreg1body2 form #MemberRegStep1Btn1{  position:fixed; left:0; bottom:0; width:100%; background-color:#652d88; padding:0.5em 0; color:#fff; font-weight:900; font-size:24px; text-align:center; }

.mreg1body2 form #MemberRegStep1Btn3{  position:fixed; left:0; bottom:0; width:100%; background-color:#652d88; padding:0.5em 0; color:#fff; font-weight:900; font-size:24px; text-align:center; }


.mreg2body1{ width:100%; display:inline-block; float:left; margin-top:10px; position:relative;}
.mreg2body1:before{ content:""; width:75%; height:8px; background-color:#652d88; top:0; left:0; float:left; position:absolute;}
.mreg2body1:after{ content:""; width:25%; height:8px; background-color:#cccccc; top:0; right:0; float:left; position:absolute;}
.mreg2body1 > h3{ width:90%; margin-left:5%; margin-top:2.2em; margin-bottom:2em;}
.mreg2body1 > h3 > span{ display:inline-block;  font-size:26px;}
.mreg2body1 > h3 > span > span{ display:inline-block;  font-size:26px;}
.mreg2body1 > h3 b{ color:#652d88;}

.tabhide{ display:none;}

#PWLevel > span{ background-color:#999; width:70px; height:12px; display:inline-block; margin-right:2px; transition-duration:0.3s;}
#PWLevel.pwlevel1 > span:nth-child(1){ background-color:#F30;}
#PWLevel.pwlevel2 > span:nth-child(1)
,#PWLevel.pwlevel2 > span:nth-child(2){ background-color:#FF9;}
#PWLevel.pwlevel3 > span{ background-color:#0C0;}

.mreg3body1{ width:100%; display:inline-block; float:left; margin-top:10px; position:relative; padding:4em 0; text-align:center; }
.mreg3body1:before{ content:""; width:100%; height:8px; background-color:#652d88; top:0; left:0; float:left; position:absolute;}
.mreg3body1:after{ content:""; width:0%; height:8px; background-color:#cccccc; top:0; right:0; float:left; position:absolute;}

.mreg3body2{ width:100%; display:inline-block; float:left; margin-top:10px; position:relative;text-align:center;}
.mreg3body2 > h3{ margin-bottom:1em; font-size:50px; width:100%; display:inline-block; float:left;}
.mreg3body2 > p{ margin:1em 0; font-size:20px; width:100%; display:inline-block; float:left;}
.mreg3body2 > p > span > span{ display:inline-block; color:#652d88; font-weight:900;}

.mreg3body3{ display:none;}
.mreg3body4{ display:none;}
.mreg3body5{ display:none;}

.infoedithead{ position:relative; width:100%; padding:0.5em 0; float:left; background-color:#652d88; text-align:center; display:inline-block;}
.infoedithead > h2{ margin:0; color:#fff;}
.infoedithead > a{ position:absolute; left:1em; top:10px;}
.infoedithead > a > img{ width:35px;}
.infoeditbody1{ position:relative; width:100%; display:inline-block; background-image:url(https://www.k-friends.kr/file/img/sc5.jpg); background-repeat:no-repeat; background-size:cover; background-position:center;}
.infoeditbody1 > div{ background-color:rgba(101,45,136,0.8); padding:3em 0; width:100%; display:inline-block;}
.infoeditbody1 > div > h3{ width:80%; margin:auto; color:#fff; font-size:30px; }
.infoeditbody1 > div > h3 > span{ display:inline-block;}
.infoeditbody1 > div > h3 > span > b{ color:#fdd31c;}

.infoeditbody2 > form > ul{ display:inline-block; width:80%; margin-left:10%; margin-top:2em; margin-bottom:2em; }
.infoeditbody2 > form > ul > li{ display:inline-block; width:100%;}
.infoeditbody2 > form > ul > li > label{ display:inline-block; width:100%; font-weight:900; padding:6px 0;}
.infoeditbody2 > form > ul > li > div{ display:inline-block; width:100%; padding:6px 0;}
.infoeditbody2 > form > ul > li > div > input[type=text]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}
.infoeditbody2 > form > ul > li > div > input[type=password]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}

.infoeditbody2 > form > ul > li > div > input[type=number]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}

.infoeditbody2 > form > ul > li > div > input[type=date]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}

.infoeditbody2 > form > ul > li > div > p{ color:#f00; font-size:12px;}

#editMemberForm > ul > li.enitNewPw{ display: none;}
#editMemberForm > ul > li.enitNewPw.active{ display:table-row;}

#editMemberForm > div > nav > a#MemberInfoEditBtn0{ position:fixed; left:0; bottom:0; width:100%; background-color:#652d88; padding:0.5em 0; color:#fff; font-weight:900; font-size:24px; text-align:center;}

#MemberRegStep3Btn0{ position:fixed; left:0; bottom:0; width:100%; background-color:#652d88; padding:0.5em 0; color:#fff; font-weight:900; font-size:24px; text-align:center; }


.msechead{ position:relative; width:100%; padding:0.5em 0; float:left; background-color:#652d88; text-align:center; display:inline-block;}
.msechead > h2{ margin:0; color:#fff;}
.msechead > a{ position:absolute; left:1em; top:10px;}
.msechead > a > img{ width:35px;}

.msecbody1{ position:relative; width:100%; display:inline-block; background-repeat:no-repeat; background-size:cover; background-position:center;  background-image:url(/file/img/2021/firewall.jpg);}

.msecbody1 > div{ background-color:rgba(101,45,136,0.8); padding:2em 0; width:100%; display:inline-block; float:left;}

.msecbody1 > div > h3{ width:80%; margin:auto; color:#fff; font-size:20px; margin-bottom:1.5em;}
.msecbody1 > div > h3 > span{ display:inline-block;}
.msecbody1 > div > h3 > span > b{ color:#fdd31c;}


.msecbody2 > form > ul{ display:inline-block; width:80%; margin-left:10%; margin-top:2em; margin-bottom:2em; }
.msecbody2 > form > ul > li{ display:inline-block; width:100%;}
.msecbody2 > form > ul > li > label{ display:none;}
.msecbody2 > form > ul > li > div{ display:inline-block; width:100%; padding:6px 0;}
.msecbody2 > form > ul > li > div > select{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}

.msecbody2 > form > ul > li > div > input[type=text]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}
.msecbody2 > form > ul > li > div > input[type=password]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}

.msecbody2 > form > ul > li > div > input[type=number]{ width:94%; border:0; padding:12px 3%; margin:0;  border:1px solid #808080; font-size:16px; border-radius:0.4em; margin-bottom:8px;}
.msecbody2 > form > ul > li > div > p{ color:#f00; font-size:12px;}

.msecbody2 > form > div > nav > a{ position:fixed; left:0; bottom:0; width:100%; background-color:#652d88; padding:0.5em 0; color:#fff; font-weight:900; font-size:24px; text-align:center;}


.FooterClass0 > div{ margin-bottom:100px;}