svg#FirstLogo{ transition-duration:3s;}
svg#FirstLogo g.friends > path{ fill:#652d88; transition: transform 3s ease-out}


div#LoginDiv{ width: 100%; height: 100%; display: table; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.5);}
div#LoginDiv > div{ display: table-cell; text-align: center; vertical-align: middle;}
div#LoginDiv > div > form{ text-align: left; display: inline-block; background-color: #fff;}

div#IDPwFindDiv{ width: 100%; height: 100%; display: table; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.5);}
div#IDPwFindDiv > div{ display: table-cell; text-align: center; vertical-align: middle;}
div#IDPwFindDiv > div > form{ text-align: left; display: inline-block; background-color: #fff;}

form#IDPWFindForm.LoginIDFindClass > nav > a#IDFindFormBtn0{ font-weight: 700; }
form#IDPWFindForm.LoginIDFindClass > nav > a#IDFindFormBtn1{ font-weight: 100; }

form#IDPWFindForm.LoginPWFindClass > nav > a#IDFindFormBtn0{ font-weight: 100; }
form#IDPWFindForm.LoginPWFindClass > nav > a#IDFindFormBtn1{ font-weight: 700; }

#IDPWFindForm > fieldset > div > p{ width:100%; display:inline-block;}
#IDPWFindForm > fieldset > div > #IDFindFormBtn2{ width: 100%; display: inline-block; font-weight: 700; background-color: #652d88; border: 0; color: #fff; font-size: 14px; cursor: pointer; text-align:center; padding:8px 0;}
#IDPWFindForm > fieldset > div > #IDFindFormBtn2:hover{ background-color: blueviolet;}

#IDPWFindForm > fieldset > div > #IDPWFindFormBtn0{ width: 100%; display: inline-block; font-weight: 700; background-color: #652d88; border: 0; color: #fff; font-size: 14px; cursor: pointer; text-align:center; padding:8px 0;}
#IDPWFindForm > fieldset > div > #IDPWFindFormBtn0:hover{ background-color: blueviolet;}


#LoginForm{ width: 460px; border-radius: 0.4em; padding: 1em; position: relative; box-shadow: 1px 3px 12px gray;}
#LoginForm > a{ position: absolute; right: 1em; top: 0.8em; font-size: 2em; line-height: 1;}
#LoginForm > h2{ width: 100%; text-align: center; font-size: 2em; font-weight: 700;}
#LoginForm > fieldset{ border: 1px solid #ddd; border-radius: 0.5em; width: 420px; margin: 1em 0;}
#LoginForm > fieldset > ul{ width: 80%; display:inline-block; float: left;}
#LoginForm > fieldset > ul > li{ display: table; width: 100%;}
#LoginForm > fieldset > ul > li > label{ display:table-cell; font-size: 18px; font-weight: 700; color: #555; width: 80px; padding: 6px;}
#LoginForm > fieldset > ul > li > div{ display:table-cell; padding: 6px;}
#LoginForm > fieldset > ul > li > div > input[type=text]{ font-size: 16px; width: 90%; height: 30px; display: inline-block; padding: 3px; }
#LoginForm > fieldset > ul > li > div > input[type=password]{ font-size: 16px; width: 90%; height: 30px; display: inline-block; padding: 3px;}
#LoginForm > fieldset > div{ width: 20%; float: right; padding: 0.4em 0;}
#LoginForm > fieldset > div > #LoginBtn{ width: 100%; height: 28px; padding:30px 0; display: inline-block; font-weight: 700; background-color: #652d88; border: 0; color: #fff; font-size: 18px; cursor: pointer; text-align:center;}
#LoginForm > fieldset > div > #LoginBtn:hover{ background-color: blueviolet;}
#LoginForm > nav{ width: 100%; text-align: center}
#LoginForm > nav > a{ margin: 0.3em;}


#IDPWFindForm{ width: 460px; border-radius: 0.4em; padding: 1em; position: relative; box-shadow: 1px 3px 12px gray;}
#IDPWFindForm > a{ position: absolute; right: 1em; top: 0.8em; font-size: 2em; line-height: 1;}
#IDPWFindForm > h2{ width: 100%; text-align: center; font-size: 2em; font-weight: 700;}
#IDPWFindForm > fieldset{ border: 1px solid #ddd; border-radius: 0.5em; width: 420px; margin: 1em 0;}
#IDPWFindForm > fieldset > ul{ width: 80%; display:inline-block;  float: left;}
#IDPWFindForm > fieldset > ul > li{ display: table; width: 100%;}
#IDPWFindForm > fieldset > ul > li > label{ display:table-cell; font-size: 18px; font-weight: 700; color: #555; width: 80px; padding: 6px;}
#IDPWFindForm > fieldset > ul > li > div{ display:table-cell; padding: 6px;}
#IDPWFindForm > fieldset > ul > li > div > input[type=text]{ font-size: 16px; width: 90%; height: 30px; display: inline-block; padding: 3px;}
#IDPWFindForm > fieldset > div{ width: 20%; float: right; padding: 0.4em 0;}
#IDPWFindForm > fieldset > div > input[type=submit]{ width: 100%; height: 38px; display: inline-block; font-weight: 700; background-color: #652d88; border: 0; color: #fff; font-size: 18px; cursor: pointer;}
#IDPWFindForm > fieldset > div > input[type=submit]:hover{ background-color: blueviolet;}
#IDPWFindForm > nav{ width: 100%; text-align: center; margin-top: 1em;}
#IDPWFindForm > nav > a{ margin: 0.3em;}
#TopMenuPointBtn.chargeActive{ background-color:#FF6;}

#IDPWFindForm > fieldset > ul.IDPWFindUL > li.fpw{ display:none;}
#IDPWFindForm.LoginPWFindClass > fieldset > ul.IDPWFindUL > li.fpw{ display:table;}

header{ float:left; width:100%; display:inline-block;}
header > div.headernavdiv{ display:none;}

.headerdiv0{ position:relative; width:100%;  display:inline-block;}
.headerdiv0 > ul{ display:table; width:1100px; margin:auto; table-layout:fixed; padding-bottom:1em;}

.headerdiv0 > ul > li{ display:table-cell; vertical-align:middle;}
.headerdiv0 > ul > li:nth-child(1){ text-align:left; padding-left:12px;}
.headerdiv0 > ul > li > h4{ font-size:32px; text-align:left;}
.headerdiv0 > ul > li > h4 > span{ color:#652d88; max-width:240px; overflow: hidden; display:inherit;text-overflow: ellipsis;white-space: nowrap; height:44px; float:left;}
.headerdiv0 > ul > li > h4 > span > span{}
.headerdiv0 a.HeaderLogo{ display:inline-block; width:330px; text-align:center;padding:1em 0; vertical-align:middle; background-image:url(https://pcbang.k-friends.kr/file/img/2021/logo2.png); background-repeat:no-repeat;background-size:330px 49px; height:49px; background-position:center center;}


.headerdiv0 > div.menudiv1{ display:inline-block; vertical-align:middle; width:100%; background-color:#652d88;}

.headerdiv0 > div.menudiv1 > nav{ display:block; vertical-align:middle; width:1080px; margin:auto; text-align:right;}

.headerdiv0 > div.menudiv1 > nav > div{ display:inline-block; float:left;}
.headerdiv0 > div.menudiv1 > nav > div.basicmenu{ float:left;}
.headerdiv0 > div.menudiv1 > nav > div.commmenu{ float:right;}
.headerdiv0 > div.menudiv1 > nav > div.commmenu > a > span{ display:none;}
.headerdiv0 > div.menudiv1 > nav > div > a{ color:#fff; font-size:16px; display:inline-block; width:auto; float:left; padding:3px 0; margin:0.5em 0.6em;}
.headerdiv0 > div.menudiv1 > nav > div > a.toploginmenu{ color:#ffd515; font-weight:900;}
.headerdiv0 > div.menudiv1 > nav > div > a.TopMenuLogoutBtn{ color:#ffd515; font-weight:900;}
.headerdiv0 > div.menudiv1 > nav > a{ color:#fff; font-size:16px; display:inline-block; width:auto; float:left; padding:3px 0; margin:0.5em 1em;}
.headerdiv1{ position:relative; width:90%; display:inline-block; padding:0.8em 5%; padding-bottom:0; text-align:center; float:left;}
.headerdiv0 > div.menudiv1 > nav > a.bestboard{ display:none;}
.headerdiv1 > a{ width:100%; display:none; float:left; text-align:center;}

header > div.headermenu > div.headerdiv0 > div.menudiv1 > nav > div > a.TopMenuCommBtn{ display:none;}
header > div.headermenu > div.headerdiv0 > div.menudiv1 > nav > div > a.pointbtn{ display:none;}
header > div.headermenu > div.headerdiv0 > div.menudiv1 > nav > div > a.TopMenuMyInfo{ display:none;}
header > div.headermenu > div.headerdiv0 > div.menudiv1 > nav > div > a.TopMenuEventRollbtn{ display:none;}


.TopMyinfo{ width:400px; display:inline-block; float:right;}
div.HomeDdays{ width:88%; padding:0.2em 1%; margin:0 5%; margin-top:0.5em; background-color:#ffd515; border-radius:1em 1em 0 0; position:relative; border-bottom:2px solid #000; }
div.HomeDdays > ul{ display:table; width:100%;}
div.HomeDdays > ul > li{ display:table-cell; vertical-align:middle; padding:1% 0.5em;}
div.HomeDdays > ul > li.inoutcount{ text-align:center; padding:1% 0.5em; font-size:14px; font-weight:900;}
div.HomeDdays > ul > li > a{ color:#000; font-size:12px;}

div.HomeTimes{ width:88%; padding:0.2em 1%; margin:0 5%; margin-top:1px; background-color:#f0f0f0; border-radius:0 0 1em 1em; position:relative; border-top:1px solid #000;}
div.HomeTimes > ul{ display:table; width:100%;}
div.HomeTimes > ul > li{ display:table-row;}
div.HomeTimes > ul > li > div{ display:table-cell; font-size:16px; font-weight:900; text-align:center; padding:0.3em;}
div.HomeTimes > ul > li > div > a{ font-size:12px; width:56px; padding:0.5em 0; display:inline-block; text-align:center; border-radius:0.5em; color:#000;}
div.HomeTimes > ul > li > div > a.TopMenuMyInfo{ background-color:#c9cacc;}
div.HomeTimes > ul > li > div > a.TopMenuPointBtn{ background-color:#ffd515;}

#AdmMenu{ width:96%; display:inline-block; background-color:#e6f7eb; float:left; padding:1em 2%; margin-top:2em;}
#AdmMenu > a{ margin:3px; display:inline-block; font-size:12px;}

footer.FooterClass0{width:100%; display:inline-block; margin-top:2em; background-color:#555;}
footer.FooterClass0 > div{text-align:center; padding:1.5em 0; font-size:13px; color:#fff;}
footer.FooterClass0 > div > a{ color:#fff;}
footer.FooterClass0 > div > a.pr{ color:#fff; font-weight:bolder;}
footer.FooterClass0 > div > a.logo{ display:none;}
footer.FooterClass0 > div > a.bolder{background-color:#FF0; color:#000; padding:0.1em 10px; display:inline-block; font-size:11px; margin-left:3px;}

.LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse; max-width:96%;}
.LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #b49fde;text-align: right;}
.LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
.LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left; max-width:100%;}
.LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}