@import url(common.css);
html, body {height:100%}
body {color:#3b4159}
body:has(.emotList) .chat::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #00000080; z-index: 100} 

input {border:1px solid #c9d2d7; color:#292d3f; border-radius:10px; background:#fff}
select {border:1px solid #c9d2d7; color:#292d3f; border-radius:10px; background:#fff}

.btnArea {padding-top: 4px; text-align: center}
.btnArea input {width: 144px; height: 36px; color:#111; border:1px solid #c9d2d7; background-color:#fff}
.btnArea input:nth-child(1) {border: none; color:#fff; background-color:#e94769}
header {position:relative; height:50px;}
header .back { display:none; width: 40px; height: 40px; margin-left: -10px; border: none; background-color: transparent}
header .top {position:relative; height:50px; margin: 0 20px; display: flex; align-items: center; justify-content: space-between; background-color:transparent; z-index:10}
header h1 { width: 150px; height:30px; text-indent:-9000px; background-image:url(../images/logo.png); background-repeat: no-repeat; background-size:auto 60px;}
header h2 { line-height:36px; padding-left:40px; color:#fff; font-size:16px}

button.ico {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; text-indent: -9000px; background-color: transparent; }
button.ico::before {content: ''; width: 30px; height: 30px; background-image: url("../images/ico_chat.png"); background-size: auto 90px}
button.sch::before {background-position: 0 0}
button.set::before {background-position: -30px 0}
button.alm.on::before {background-position: -60px 0; opacity: 1}
button.alm::before {background-position: -60px -30px; opacity: .5}
button.lst::before {background-position: 0 -30px}

header .topBtn {display: flex; column-gap: 10px}
header .pcTop { display:none; }

nav {position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; border-top: 1px solid #dcdcdd; background: #f2f2f3}
nav .navi {display: flex; align-items: center; justify-content: space-around; height: inherit; margin: 0 5px;}
nav button {display: flex; align-items: center; flex-direction: column; width: 60px; border: none; font-size:.6875em; background-color: transparent; opacity: .5}
nav button::before {content: ''; width: 30px; height: 30px; background-image: url("../images/nav.png"); background-size: auto 60px;}
nav button.home::before {background-position: 0 -30px}
nav button.free::before {background-position: -30px -30px}
nav button.paid::before {background-position: -60px -30px}
nav button.mypg::before {background-position: -90px -30px}
nav button.more::before {background-position: -120px -30px}
nav button.on {opacity: 1}
nav button.on.home::before {background-position: 0 0}
nav button.on.free::before {background-position: -30px 0}
nav button.on.paid::before {background-position: -60px 0}
nav button.on.mypg::before {background-position: -90px 0}
nav button.on.more::before {background-position: -120px 0}
nav .pop { display: none; position:absolute; bottom: 60px; right: 10px; width: 200px; min-height: 300px; min-height: 180px; padding: 10px; border: 1px solid #919298; border-radius: 5px; background: #fff; overflow-y: auto; z-index: 500}
nav .pop ul {padding: 5px}
nav .pop li { line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer}
nav .pop li[name='xpt_list']:before {content: 'ㆍ'; color:#7d7f87}
nav .pop dl {padding: 5px; background: #f5f5f5}
nav .pop dl dt {display: flex; column-gap: 10px}
nav .pop dl dt label {color: #e94769}
nav .pop dl p {font-size: .75em; color: #808080;}

.sub header .back {display: flex; justify-content: center; align-items: center; text-indent: -9000px;}
.sub header .back::after {content: ''; width: 30px; height: 30px; transform: rotate(-90deg); border: none; background: url(../images/ico.png) no-repeat -30px 0; background-size: auto 30px; overflow: hidden}
.sub header .logo {display: none}
.pcOnly {display:none}
.mtopBtn {display:block; position:absolute; left: 5px; top: 5px; z-index: 10}
.mtopBtn input {width:30px; height:30px; font-size:2em; line-height:1; background-color:transparent}
.sTop {position:absolute; top: 20px; left: 0; width: 50%; height: 50px}
.sTop ul {position: relative; width: 100%; height: 50px; display: flex; align-items: center; justify-content: flex-start}
.best:before {content: ''; display: block; position: absolute; top: 0; left: -10px; width: 40px; height: 40px; background: url("../images/ico_room.png") no-repeat 0 0; background-size:auto 70px; z-index: 10}
.hot:before {content: ''; display: block; position: absolute; top: 0; left: -10px; width: 40px; height: 40px; background: url("../images/ico_room.png") no-repeat -35px 0; background-size:auto 70px; z-index: 10}
.new:before {content: ''; display: block; position: absolute; top: 0; left: -10px; width: 40px; height: 40px; background: url("../images/ico_room.png") no-repeat 0 -35px; background-size:auto 70px; z-index: 10}

.bottom {position:fixed; left:2px; bottom:2px; width:100%; height:50px; padding-top: 5px; text-align:center; background: #f2f3f4; z-index: 50}
.bottom .btnArea {padding-top: 1px}
.bottom .btnArea input {width: 150px; height: 36px; color:#111; border:1px solid #c9d2d7; background-color:#fff}
.bottom .btnArea input:nth-child(1) {border: none; color:#fff; background-color:#e94769}


/* main */
#main header h1 {display:block;}
#main header .logBtn {display:block}
#main section {height:calc(100vh - 110px); padding:0 10px; overflow-y: auto }
#main section > h2 {height: 30px; font-size: 1.125em; padding-top: 10px; font-weight: 600}
#main article {width: 100%; height:auto; padding-top:10px; border-radius: 10px; background: #fff}
#main .roomBox {position:relative; display: flex; column-gap: 10px; align-items: center; min-height: 60px; margin-bottom: 20px}
#main .roomBox figure {width:50px; height:50px; border-radius:30%; background-color:#f1f2f3; background-position:center; background-size:cover; cursor: pointer}
#main .roomBox ul { width: calc(100% - 60px); padding-right: 70px; cursor: pointer}
#main .roomBox ul h2 {max-width: calc(100% - 20px); color:#1b2132; font-size:1em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#main .roomBox ul li {color:#7d7f87; word-break: keep-all; line-height: 1.5em}
#main .roomBox p {position:absolute; top:0; right:10px; color:#7d7f87}
#main .roomBox p:after {content:'N'; display:inline-block; width:18px; height:18px; line-height:18px; margin-left:5px; font-size:12px; font-weight:600; text-align:center; border-radius:50%; color:#fff; background-color:#f9414e}
#main .roomBox button.alm::before {width: 20px; height: 20px; background-size: auto 60px; background-position: -40px -20px; opacity: .5}
#main .roomBox button.alm.on::before {background-position: -40px 0px; opacity: 1}
#main .roomBox .btnArea {display: flex; align-items: center; justify-content: flex-start}
#main .roomBox .btnArea input {flex:initial; width:80px; height: 24px; margin-right: 5px; border: none; color: #111; font-size:12px; background-color:#f2f3f4}
#main .roomBox .btnArea input.free {color:#131211; background-color:#fbe760} 
#main .roomBox .roomTitle {display: flex; align-items: center; justify-content: flex-start;}
#main .roomBox .roomTitle::before {content: ''; width: 25px; height: 25px; margin-right: 3px}
#main .roomBox .lastChat {max-height: 2.5em;  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2em; word-break: keep-all; font-size: 0.9375em}
#main .roomBox.fav h2 {max-width: calc(100% - 50px)}
#main .roomBox.fav .roomTitle::after { content: ''; width: 20px; height: 20px; background: url(../images/ico_chat.png) -60px -20px / auto 60px;}
#main .roomBox.paid .roomTitle::before {background: url(../images/ico_chat.png) -100px -25px / auto 75px;}
#main .roomBox.free .roomTitle::before {background: url(../images/ico_chat.png) -100px 0px / auto 75px;}
#main .banner {width: 100%; height: 50px; border-radius: 10px; overflow: hidden; display: none}
#main .banner img {width: 100%; height: 100%; object-fit: cover}
#main .time {position: absolute; top: 0; right: 5px; height: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; row-gap: 5px; font-size: .875em}
#main .time label { padding: 0 10px; border-radius: 20px; text-align: center; color: #fff; background: #e94769}

.homePop {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; align-items: center; z-index: 1000; background: #00000080; display:none}
.homePop ul {width: calc(100% - 20px); margin: 0 auto; border: 1px solid #c9d2d7; background: #fff; z-index: 1000}
.homePop .con {min-height: 56vh; overflow-y: auto}
.homePop .con img {max-width: 100%; vertical-align: top}
.homePop .bot {display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 40px; background: #f4f4f4}
.homePop .bot span {display: flex; align-items: center}
.homePop .bot span input {margin-right: 5px}
.homePop .bot span button {height: 24px; border: none; border-radius: 12px; padding: 0 10px; color: #fff; background: #7a8da6}


/* chat */
.chat {background-image: linear-gradient(0deg, #afd7d1 50%, #abd5cf)}
.chat header h1 {display: none; }
.chat nav input[type='button'] {display: none}
.chat .chatTop {position: relative; height: 60px; padding-left: 35px; background-color: rgba(255,255,255,.1)}
.chat .chatTop .title {width: calc(100% - 100px); height: inherit; display: flex; align-items: center; column-gap: 5px}
.chat .chatTop .title li:last-child {width: 100%}
.chat .chatTop .title h2 {width: calc(100% - 1px); font-size: 1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
.chat .chatTop .title figure {display: none; width:40px; height:40px; border-radius:30%; background-color:#f1f2f3; background-repeat:no-repeat; background-position:center; background-size:cover}
.chat .chatTop .title .cnt {display: flex; align-items: center}
.chat .chatTop .title .cnt:before {content: ''; width: 20px; height: 20px; background: url("../images/ico_chat.png") no-repeat 0 -40px; background-size:auto 60px; opacity: .5}
.tabMenu ul {position: relative; display: flex; height: 35px}
.tabMenu ul::after { content: ''; position: absolute; left: 50%; width: 1px; height: 100%; background: #83b4ac}
.tabMenu li {width: 50%; text-align: center; padding: 6px 0; color: #818a8d; background-color: rgba(255,255,255,.1); cursor: pointer; border-top: 1px solid #90c2b9; border-bottom: 1px solid #83b4ac;}
.tabMenu li.on {border-top: 1px solid #83b4ac; border-bottom: 1px solid #92c9c0; color: #121213; background-color: transparent}

.chat .topIcon {position:absolute; top:10px; right: 10px; z-index:10}
.chat .topIcon li {display: flex; column-gap: 5px}
.chat .ntc { position: absolute; width: calc(100% - 20px); height: 40px; top: 0; left: 10px; border-radius: 10px; background-color: rgba(255,255,255,.9); z-index: 100; overflow: hidden}
.chat .ntc .ntc-top {display: none; position: absolute; top:5px; right: 5px; width: 35px; height: 35px; z-index: 100}
.chat .ntc .ntc-top::after {content: ''; width: 30px; height: 30px; background: url("../images/ico.png") no-repeat -90px 0; background-size:auto 30px; opacity: .5}
.chat .ntc .ntc-body {position: relative; padding: 5px 40px; font-size: 1em}
.chat .ntc .ntc-body:before {content: ''; display: block; position: absolute; top: 5px; left: 5px; width: 30px; height: 30px; background: url("../images/ico_chat.png") no-repeat -30px -30px; background-size:auto 90px}
.chat .ntc .ntc-body:after {content: ''; display: block; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url("../images/ico.png") no-repeat -40px 0; background-size: auto 20px;  z-index: -1; opacity: .5}
.chat .ntc.max {top: 2px; height:calc(100vh - 200px); background-color:#fff}
.chat .ntc.max .ntc-top {display: flex; justify-content: center; align-items: center}
.chat .ntc.max .ntc-body {padding-top: 15px; height:calc(100% - 10px); overflow-y: auto;}
.chat .ntc.max .ntc-body li {height: auto; white-space:pre-line; word-break: keep-all; pointer-events: none; }
.chat .ntc.max .ntc-body:before {top:15px;}
.chat .ntc.max .ntc-body:after {display: none}
.chat .ntc.max .ntc-bot {display: none}
.chat .ntc.on {height: auto}
.chat .ntc.on .ntc-body:after {transform:rotate(180deg); opacity: .5;}
.chat .ntc .ntc-body li {height: 30px; padding-top: 3px; font-size: .9375em; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; pointer-events: none;}
.chat .ntc.on .ntc-body li {height:50px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space:normal; line-height: 1.5; pointer-events: auto;}

.chat .ntc .ntc-bot {border-top: 1px solid #e2e4e8}
.chat .ntc .ntc-bot li {float: left; width: 50%; border-right: 1px solid #e2e4e8; line-height: 30px; text-align: center; font-size: .875em; color: #7a8da6}
.chat .ntc .ntc-bot li:last-child {border-right:none}
.chatArea { height:calc(100vh - 132px); padding:10px 0; overflow-y:scroll}
.chatArea > div {position:relative; margin:0 15px 10px; padding-left: 50px; display: flex; flex-direction: column}
.chatArea > div:after {content:''; display:block; width:100%; height:1px; clear:both}
.chatArea > div figure {display: flex; justify-content: center; align-items: center; font-size: 1.25em; color: #fff; position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; overflow:hidden}
.chatArea > div figure img{width:100%; height:100%; object-fit: cover}
.chatArea > div label {display:block; color:#3b4159; margin-bottom:10px }
.chatArea > div ul {clear:both}
.chatArea > div ul li {position:relative; display:inline-block; max-width:80%; margin-bottom:20px; padding:10px; border-radius:0 10px 10px 10px; color:#111; text-align:left; word-break:keep-all; white-space:pre-line; font-size: 1em; line-height:1.2; word-wrap: break-word; box-shadow: 0 1px 2px #00000033; background:#fff; }
.chatArea > div ul li.file {padding-left: 35px}
.chatArea > div ul li.file::before {position: absolute; top: 2px; left: 5px; content: ''; display: block; width: 30px; height: 30px; vertical-align: middle; background: url(../images/ico_chat.png) no-repeat -180px -60px; background-size: auto 90px;}
.chatArea > div ul li a {text-decoration:underline; color:#09bbe8}
.chatArea > div ul li:has(img), .chatArea > div.myChat ul li:has(img) {padding:0; border-radius: 0; background: none; box-shadow: none;}
.chatArea > div ul li.mp3 {padding-left: 35px}
.chatArea > div ul li.mp3::before {position: absolute; top: 2px; left: 5px; content: ''; display: block; width: 30px; height: 30px; vertical-align: middle; background: url(../images/ico_chat.png) no-repeat -210px -60px; background-size: auto 90px;}


.chatArea > div ul li img {width: 100%; height: auto;}

.chatArea > div ul li h2 { display: inline-block; font-size: 1em; color: #fff; background: #000000cc}
.chatArea > div ul li em {display: inline-block; width: 30px; height: 30px; vertical-align:middle; background-image: url("../images/econ.png"); background-repeat: no-repeat; background-size:auto 180px}
.chatArea > div ul li.P:before {content:'[1]'; display:inline-block; margin-right:5px; color:#3CF}
.chatArea > div ul li.M:before {content:'[m]'; display:inline-block; margin-right:5px; color:#3CF}
.chatArea > div ul li.X:before {content:'[x]'; display:inline-block; margin-right:5px; color:#3CF}
.chatArea.sm > div ul li, .sample.sm {font-size: .75em}
.chatArea.md > div ul li, .sample.md {font-size: .875em}
.chatArea.lg > div ul li, .sample.lg {font-size: 1em}
.chatArea.xl > div ul li, .sample.xl {font-size: 1.125em}
.chatArea > div ul.pick li {width:calc(100% - 40px); max-width:100%; color:#3f434d; padding-bottom:40px; border-radius:10px; background:#fff}
.chatArea > div ul.pick li span {right:10px; bottom:8px}
.chatArea > div ul span {display:block; position:absolute; right:-80px; bottom:5px; width:80px; text-align:center; color:#777; font-size: 12px}
.chatArea > div ul .reply {display: flex; justify-content: center; align-items: center; position:absolute; right:-75px; bottom:5px; width:70px; height: 30px; border-radius: 5px; background: #ebf5f3; z-index: 100}
.chatArea > div ul .reply button {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-indent: -80px; border: none; background-color: transparent; overflow: hidden}
.chatArea > div ul .reply button::after {content: ''; width: 20px; height: 20px; background-image: url("../images/emot.png"); background-size: auto 40px}
.chatArea > div ul .reply button.rew::after {background-position:  0 -20px}
.chatArea > div ul .reply button.rem::after {background-position: -20px -20px}
.chatArea > div ul .emot {display: flex; justify-content: center; align-items: center; position:absolute; right:-75px; bottom: -30px; width:90px; height: 30px; border-radius: 5px; background: #ebf5f3; box-shadow: 0 1px 2px #00000033; z-index: 100}
.chatArea > div ul .emot button {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-indent: -80px; border: none; background-color: transparent; overflow: hidden}
.chatArea > div ul .emot button::after {content: ''; width: 20px; height: 20px; background-image: url("../images/emot.png"); background-size: auto 40px}
.chatArea > div ul .emot button.btn_gd::after {background-position: -20px 0}
.chatArea > div ul .emot button.btn_ok::after {background-position: -40px 0}
.chatArea > div .emotBox {display: flex; justify-content: flex-start; align-items: center; column-gap: 5px; margin-top: -10px}
.chatArea > div .emotBox dd {display: flex; align-items: center; justify-content: center; width: 30px; height: 21px; border-radius: 5px; font-size: .875em; background: #ebf5f3}
.chatArea > div .emotBox dd::before {content: ''; width: 15px; height: 15px; background-image: url("../images/emot.png"); background-size: auto 30px}
.chatArea > div .emotBox dd.emt_gd::before {background-position: -15px 0}
.chatArea > div .emotBox dd.emt_ok::before {background-position: -30px 0}
.chatArea > div .emotBox dd.emt_lt::before {display: none}
.chatArea > div .emotBox dd.emt_lt button {display: flex; justify-content: center; align-items: center; width: 20px;  height: 20px; border: none; background-color: transparent}
.chatArea > div .emotBox dd.emt_lt button::after {content: ''; width: 15px; height: 15px; background-image: url("../images/emot.png"); background-position: -30px -15px; background-size: auto 30px}

.emotList {width: 200px; height: 240px; background: #fff; box-shadow: 0 1px 2px #00000033; overflow-y: auto; z-index: 100}
.emotList dl {display: flex}
.emotList .emohdr {position: sticky; top: 0; width: 100%; height: 30px; justify-content: flex-start; align-items: center; border-bottom: 1px solid #ccc; background: #fff; z-index: 1}
.emotList .emohdr dt {padding-left: 10px; font-size: 13px; font-weight: bold;}
.emotList .emoBdy {width: 100%; height: auto;flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 5px; padding: 5px}
.emotList .emoBdy dd {display: flex; align-items: center; justify-content:space-between; width: 100%; height: 30px; padding: 0 5px 0 35px; font-size: .875em; position: relative}
.emotList .emoBdy dd figure {top: 1px; left: 2px; width: 28px; height: 28px; font-size: 12px}
.emotList figure {display: flex; justify-content: center; align-items: center; font-size: 1.25em; color: #fff; position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; overflow:hidden}
.emotList figure img{width:100%; height:100%; object-fit: cover}
.emotList .emoBdy dd::after {content: ''; width: 20px; height: 20px; background-image: url("../images/emot.png"); background-size: auto 40px}
.emotList .emoBdy dd.emt_gd::after {background-position: -20px 0}
.emotList .emoBdy dd.emt_ok::after {background-position: -40px 0}

.chatArea > div.myChat ul li {float:right; border-radius:10px 0 10px 10px; color: #262626; background:#ffeb33}
.chatArea > div.myChat ul a {color: #46f2ff}
.chatArea > div.myChat ul span  {right:auto; left:-80px}
.chatArea > div.myChat ul img  {width: 100%}
.chatArea > div.myChat ul .reply {right:auto; left:-75px}
.chatArea > div.myChat ul .emot {right:auto; left:-75px}
.chatArea > div.myChat .emotBox {justify-content: flex-end}
.chatArea > div.stock ul li {width:calc(100% - 40px); padding-top: 50px; position: relative; border-radius:10px; color: #333; background: #fff}
.chatArea > div.stock ul li:before {content: '종목추천'; position: absolute; top: 0; left: 0; width: calc(100% - 12px); height: 40px; line-height: 40px; padding-left: 12px; border-radius:10px 10px 0 0; color: #fff; font-size: 16px; background: #e94769}
.chatArea > div.day ul li {width:calc(100% - 40px); padding-top: 50px; position: relative; border-radius:10px; color: #333; background: #fff}
.chatArea > div.day ul li:before {content: '금일시황'; position: absolute; top: 0; left: 0; width: calc(100% - 12px); height: 40px; line-height: 40px; padding-left: 12px; border-radius:10px 10px 0 0; color: #fff; font-size: 16px; background: #e94769}
.chatArea > div.noti ul li {width:calc(100% - 40px); padding-top: 50px; position: relative; border-radius:10px; color: #333; background: #fff}
.chatArea > div.noti ul li:before {content: '공지사항'; position: absolute; top: 0; left: 0; width: calc(100% - 12px); height: 40px; line-height: 40px; padding-left: 12px; border-radius:10px 10px 0 0; color: #fff; font-size: 16px; background: #e94769}
.chatArea > p {color:#444; text-align:center; font-size: .875em; margin: 0 10% 10px; border-radius: 10px; padding: 2px 0; background: #81aaa480}
.chatArea > p span {text-decoration: underline}
.chatArea div ul li.answer {white-space:normal}
.answer dl {height: auto; padding-bottom: 5px; border-bottom: 1px solid #ccc; font-size: 16px; margin-bottom: 5px}
.chatArea div.myChat ul li.answer dl {border-bottom: 1px solid #ccbc29; }
.answer dl dt {text-align: left; font-size: .75em; font-weight: 400; letter-spacing: -.05em; margin-bottom: 5px}
.answer dl dd {text-align: left; font-size: .8175em; white-space: nowrap; text-overflow: ellipsis; color: #888; width: 99%; overflow: hidden}
.answer dl button {position: absolute; top: 5px; right: 10px; width: 30px; height: 30px; border: none; text-indent: -9000px; background: url("../images/ico_chat.png") no-repeat -150px 0 / auto 90px; opacity: .5}

/* 기본 스타일 */
.scroll {
  overflow-y: scroll; /* 수직 스크롤 활성화 */
  -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤링 */
  padding-right: 10px; /* 스크롤바로 인해 내용이 잘리는 것을 방지 */
}

/* 스크롤바 스타일링 */
.scroll::-webkit-scrollbar {
  width: 8px; /* 스크롤바 너비 조정 */
}

.scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* 스크롤바 색상 */
  border-radius: 4px; /* 스크롤바 끝 부분 둥글게 */
}

.scroll::-webkit-scrollbar-track {
  background-color: transparent; /* 스크롤바 트랙 색상 */
}

.chat .bottom {position:fixed; left: 0; bottom: 0; width:100%; height:70px; padding-top: 0; background:#fff}
.chat .bottom .inputBox li { float:left; width:calc(100% - 70px)}
.chat .bottom .inputBox li:last-child {width:70px; text-align:center; padding-top:5px}
.chat .bottom .inputBox li:last-child input {width:60px; line-height:30px}
.chat .bottom textarea {width:100%; height:68px; padding: 5px; color:#111; border:none; background-color:transparent}

.chat .bottom .picture {position: fixed; right: 35px; bottom: 0}
.chat .bottom .picture input {width: 30px; height: 30px; text-indent: -9000px; border: none; border-radius: 50%; background: url("../images/ico_chat.png") no-repeat -60px -60px; background-size: auto 90px; opacity: .5 }
.chat .bottom .emoticon li {position: fixed; right: 5px; bottom: 0}
.chat .bottom .emoticon li input {width: 30px; height: 30px; text-indent: -9000px; border: none; border-radius: 50%; background: url("../images/ico_chat.png") no-repeat -90px -60px; background-size: auto 90px; opacity: .5 }
.chat .bottom .emoticon div {position: fixed; bottom: 70px; right: 0; width:100%; height: 180px; border: 1px solid #ccc; background: #fff;}
.chat .bottom .emoticon div dl {display: block; height: inherit; overflow-y: auto}
.chat .bottom .emoticon div dt {position: sticky; top: 0; height: 25px; background: #f8f8f8}
.chat .bottom .emoticon div dt input {padding: 0 10px}
.chat .bottom .emoticon div dt input.on {color: #fff; background: #3d9bf9}
.chat .bottom .emoticon div dd {display: flex; justify-content:flex-start; align-items:flex-start; flex-wrap: wrap}
.chat .bottom .emoticon div dd button {display: block; border: none; margin: 5px; background-color: transparent; background-repeat: no-repeat}

.chat .bottom .emoticon .emta button {width: 30px; height: 30px; background-image: url("../images/econ.png"); background-size: auto 180px}
.chat .bottom .emoticon .emtb button {width: 75px; height: 75px; background-image: url("../images/econ2.png"); background-size: auto 375px;}

.chat .bottom ul {position:relative;}
.chat .bottom.answer {position: relative}
.chat .bottom dl {display: none}
.chat .bottom.answer dl {display: block; position: absolute; top: -50px; width: 100%; height: 50px; padding: 5px 10px; background: #fff}
.chat .bottom.answer dl dt {color: #1451a2}
.chat .bottom.answer .inputBox {position: relative}
.chat .bottom.answer .inputBox::before {content: ''; position: absolute; width: 25px; height: 25px; left: 5px; top: 0; background: url("../images/ico_chat.png") no-repeat -125px -25px / auto 75px; opacity: .5}
.chat .bottom.answer .inputBox textarea {padding-left: 30px}

.chat .bottom .admMenu {position: absolute; top: 0; left: 0; z-index: 10;}
.chat .bottom .admMenu input[type="checkbox"] {display: none;}
.chat .bottom .admMenu input[type="checkbox"]:checked +  label{background: url("../images/ico_chat.png") no-repeat -180px -30px / auto 90px; opacity: 1}
.chat .bottom .admMenu label {display: block; width: 30px; height: 30px; text-indent: -9000px; background: url("../images/ico_chat.png") no-repeat -180px 0 / auto 90px; opacity: .25; cursor: pointer;}
.chat .bottom .admMenu[style*="display: block;"] + .inputBox textarea {padding-left: 30px}
.chat .bottom.answer .admMenu {left: -100px}
.chat .bottom.answer dl:has(img) {display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; column-gap: 10px}
.chat .bottom.answer dd:has(img) {width: 30px; height: 30px}
.chat .bottom.answer dd img {width: 100%; height: 100%; object-fit: cover}

.emta .emt01, .emta.emt01 {background-position: 0 0}
.emta .emt02, .emta.emt02 {background-position: -30px 0}
.emta .emt03, .emta.emt03 {background-position: -60px 0}
.emta .emt04, .emta.emt04 {background-position: -90px 0}
.emta .emt05, .emta.emt05 {background-position: -120px 0}
.emta .emt06, .emta.emt06 {background-position: 0 -30px}
.emta .emt07, .emta.emt07 {background-position: -30px -30px}
.emta .emt08, .emta.emt08 {background-position: -60px -30px}
.emta .emt09, .emta.emt09 {background-position: -90px -30px}
.emta .emt10, .emta.emt10 {background-position: -120px -30px}
.emta .emt11, .emta.emt11 {background-position: 0 -60px}
.emta .emt12, .emta.emt12 {background-position: -30px -60px}
.emta .emt13, .emta.emt13 {background-position: -60px -60px}
.emta .emt14, .emta.emt14 {background-position: -90px -60px}
.emta .emt15, .emta.emt15 {background-position: -120px -60px}
.emta .emt16, .emta.emt16 {background-position: 0 -90px}
.emta .emt17, .emta.emt17 {background-position: -30px -90px}
.emta .emt18, .emta.emt18 {background-position: -60px -90px}
.emta .emt19, .emta.emt19 {background-position: -90px -90px}
.emta .emt20, .emta.emt20 {background-position: -120px -90px}
.emta .emt21, .emta.emt21 {background-position: 0 -120px}
.emta .emt22, .emta.emt22 {background-position: -30px -120px}
.emta .emt23, .emta.emt23 {background-position: -60px -120px}
.emta .emt24, .emta.emt24 {background-position: -90px -120px}
.emta .emt25, .emta.emt25 {background-position: -120px -120px}
.emta .emt26, .emta.emt26 {background-position: 0 -150px}
.emta .emt27, .emta.emt27 {background-position: -30px -150px}
.emta .emt28, .emta.emt28 {background-position: -60px -150px}
.emta .emt29, .emta.emt29 {background-position: -90px -150px}
.emta .emt30, .emta.emt30 {background-position: -120px -150px}

.chatArea > div ul li em.emtb {width: 75px; height: 75px; background-image:url("../images/econ2.png"); background-size: 225px auto}
.emtb .emt01, .emtb.emt01 {background-position: 0 0}
.emtb .emt02, .emtb.emt02 {background-position: 0 -75px}
.emtb .emt03, .emtb.emt03 {background-position: 0 -150px}
.emtb .emt04, .emtb.emt04 {background-position: 0 -225px}
.emtb .emt05, .emtb.emt05 {background-position: 0 -300px}
.emtb .emt06, .emtb.emt06 {background-position: -75px 0}
.emtb .emt07, .emtb.emt07 {background-position: -75px -75px}
.emtb .emt08, .emtb.emt08 {background-position: -75px -150px}
.emtb .emt09, .emtb.emt09 {background-position: -75px -225px}
.emtb .emt10, .emtb.emt10 {background-position: -75px -300px}
.emtb .emt11, .emtb.emt11 {background-position: -150px 0}
.emtb .emt12, .emtb.emt12 {background-position: -150px -75px}
.emtb .emt13, .emtb.emt13 {background-position: -150px -150px}
.emtb .emt14, .emtb.emt14 {background-position: -150px -225px}
.emtb .emt15, .emtb.emt15 {background-position: -150px -300px}

.pop.submenu ul {display: flex; flex-direction: column; row-gap: 5px; position: fixed; top: 10px; left: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background: #fff; z-index: 100}
.pop.submenu ul li {border-radius: 5px; font-size: .875em; padding: 0 5px}
.pop.submenu ul li:hover {background: #f5f5f5; cursor: pointer}
.pop.submenu ul hr {height: 1px; background-color: #dcdcdc; border: none;}

.goDown button {display: flex; align-items: center; justify-content: center; opacity: .8}
.goDown button::before {content: ''; width: 20px; height: 20px; background: url("../images/ico.png") no-repeat -40px 2px / auto 20px; opacity: .75}

.chatArea .last_read {position: relative; display: flex; justify-content: center; margin-bottom: 20px; clear: both}
.chatArea .last_read::after {content: '여기까지 읽으셨습니다.'; height: auto; margin-left: -30px; padding: 0 10px; border-radius: 15px; background: #202a3e1a}

/* login */
/* login */
#login header {display: none}
#login section { display: flex; align-items: center; justify-content: center; height: 100vh}
#login nav input[type='button'] {display: none}
.loginBox {margin-top: -50px; color:#7d7f87}
.loginBox h2 {width:180px; height: 40px; margin:0 auto 7%; text-indent:-9000px; background:url(../images/logo.png) no-repeat left top; background-size: 100% auto}
.loginBox h3 {font-family:'KIMM_Bold'; text-align: center; margin-bottom: 30px}
.loginBox > ul {border:none; border-radius:20px; background:#373b46; overflow:hidden}
.loginBox .inputForm {width:80%; margin:0 auto; border:none; z-index:10}
.loginBox .inputForm ul {margin-bottom:10px; color:#79797a}
.loginBox .inputForm li {min-height:30px; clear:both}
.loginBox .inputForm li:nth-child(2) {margin-bottom: 10px}
.loginBox .inputForm input:not([type=checkbox]) {width:100%; height:40px; line-height:40px; padding-left:10px; margin-bottom:10px}
.loginBox .inputForm li > p {float:left; width:50%; line-height:30px}
.loginBox .inputForm .btn {display:block; width:100%; height:45px; margin:0 auto; text-align:center; line-height:45px; border-radius: 10px; font-weight:600; font-size:18px; border:none}  
.loginBox .inputBot {width:80%; margin:0 auto; text-align:center}
.loginBox .idLost {margin-bottom: 50px}
.loginBox .idLost li {display: inline-block; width:30%}
.loginBox .idLost li:nth-child(2) { position:relative; width:40%}
.loginBox .idLost li:nth-child(2):before { position:absolute; left:0; top:8px; content:''; display:block; width:1px; height:13px; background:#c9d2d7;}
.loginBox .idLost + ul li { margin-bottom: 20px}
.loginBox .inputBot button {height:30px; margin:0; padding:0 5px; border:none; font-size:14px; text-align:center; background-color:transparent}
.loginBox .inputBot button.btn {display:block; width:100%; height:45px; margin:0 auto; text-align:center; line-height:45px; color:#e94769; border: 1px solid #e94769; border-radius: 10px; font-weight:600; font-size:18px; background:#fff}

.lostPop {display:none}

#login .bottom {position:fixed; left: 0; bottom:0; height: 60px; padding: 0; color:#7d7f87}
#login .bottom ul {display: flex; justify-content: center; align-items: center; column-gap: 20px; height: inherit;}
#login .bottom button {border: none; background-color: transparent}

/* set */
.sub .title {position: absolute; top:5px; left:50px; width: calc(100% - 60px); text-align: left; font-size: 1.25em; line-height: 35px; background: #fff; z-index: 10}
#set header .logBtn {display: block}
#set section {margin: 0 10px}
#set article {width: 100%; height: calc(100vh - 210px); padding-top:20px; border-radius: 10px; background: #fff; overflow: hidden; overflow-y: auto} 
#set article dl {margin:0 2% 30px; padding:0 2%}
#set article dl dt {font-size:16px; margin-bottom:10px; font-weight:600}
#set article dl dd {position:relative; font-size:14px; text-align:right; margin-bottom:5px; line-height:30px}
#set article dl dd.fontSize {font-size: 16px}
#set article dl dd label {position:absolute; top:0; left:0}
#set article dl dd button {position:relative; width:50px; height:24px; border:none; border-radius:12px; padding:3px; text-align:left; background:#b5b7bf}
#set article dl dd button:after {display:inline-block; content:''; width:18px; height:18px; border:none; border-radius:50%; background:#fff; box-shadow:0 0 5px rgba(10,0,0,.3)}
#set article dl dd button.on {text-align:right; background:#e94769}
#set article dl dd input {line-height:24px; padding:0 5px; background:#fff}
#set article dl dd input[type=button] {padding:0 10px; color:#fff; border: none; background:#7a8da6}
#set .keyList ul {max-height: 120px; padding:0 2%; border-radius: 10px; border: 1px solid #c9d2d7; background: #fff; overflow-y: auto}
#set .keyList ul li {text-align: right}
#set .keyList ul li label { float: left; text-align: left; line-height: 24px}
#set .keyList ul li input {width: 24px; height: 24px; border: none; text-indent: -9000px; background: url("../images/ico.png") no-repeat -72px 0; background-size: auto 24px; opacity: .5}
#set .keyList p {font-size: .8em}
#set .timeList ul { float: left; width: 45%}
#set .timeList ul:first-child {position: relative; margin-right: 10%}
#set .timeList ul:first-child:after {content: '-'; display: block; position: absolute; bottom: 0; right: -20%; width: 20%; text-align: center}
#set .timeList ul label {font-size: .8em}
#set .timeList ul input {width: 100%; text-align: center; color:#7d7f87 }
#set .timeList:after {content: ''; display: block; clear: both}
#set .timeList ul input {font-size:1.4em}
#set .tab {display: flex; border: 1px solid #dcdcdc; border-radius: 15px; font-size: .875em; padding: 1px; margin-bottom: 5px}
#set .tab span {width: calc(100% / 4); text-align: center; border-radius: 15px}
#set .tab span.on {width: calc(100% / 4); text-align: center; color: #fff; background: #e94769}
#set .sample {text-align: left; padding: 5px; border-radius: 10px 0 10px 10px; background: #f8f8f8}
#set .sample.s125 {font-size: 1.25em}
#set .sample.s15 {font-size: 1.5em}
.ajs-input {font-size:1.4em; padding: 5px 10px;}
.ajs-button {border: none; border-radius: 10px; color: #fff; background: #b5b7bf}
.ajs-button.ajs-ok {background:#7a8da6}

/*join*/
#join section {height: calc(100vh - 50px); padding: 30px 5%; overflow-y: auto}
#join section h3 {margin-bottom: 5px; font-size: 1.2em}
#join article {margin-bottom: 30px}
#join .joinArea li {position: relative; height: 30px; margin-bottom: 5px; padding-left: 90px}
#join .joinArea label {display:block; position: absolute; top: 0; left: 0; width: 90px; line-height: 30px}
#join .joinArea input:not([type=radio]) { display: inline-block; width: 100%; line-height: 30px; padding-left: 5px; border-radius: 5px}
#join .joinArea button {position: absolute; top: 2px; right: 2px; border: none; color: #fff; line-height: 28px; padding: 0 5px; border-radius: 5px; background-color: #7a8da6}
#join .terms dl {margin-bottom: 20px}
#join .terms dt {position: relative; text-align: right; margin-bottom: 5px}
#join .terms dt h4 {position: absolute; top: 0; left: 0}
#join .terms dd {height: 180px; border:  1px solid #c9d2d7; border-radius: 5px; background: #fff; overflow-y: auto}

/*terms*/
#terms article.terms {padding: 0 10px}
#terms section {height:calc(100vh - 50px); overflow-x: auto}

/*myPage*/
.pc #myPage header .pcTop input{background-image: url(../images/btn_win_pcw.png); opacity: .7}
.pc #myPage header .pcTop input:hover {background-color: rgba(0,0,0,0.2);}
#myPage header { position: absolute; top: 0; left: 0; width: 100%; background: #ffffff1a; z-index: 200}
#myPage header h1 {display: block; background-position: center 0}
#myPage header nav input {background-position: 0 -40px}
#myPage header .logBtn {display: block}
#myPage header .logBtn input { background-position: -35px -70px}
.myTop {position:relative; height: 100px; display: flex; align-items: center; justify-content: center; column-gap: 10px; border-radius: 15px; background-color: #f8f8f8}
.myTop dl {width: 80px; margin: 0}
.myTop dl dd {position:relative }
.myTop dl dd figure {width: 60px; height: 60px; border-radius: 50%; background-position: center; background-size: cover; background-color: #eeeeee; z-index: 10}
.myTop dl dd input {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.myTop dl dd input + label {position:absolute; right: 5px; bottom: 0; width: 30px; height: 30px; border:1px solid #ddd; border-radius: 50%; background: url("../images/pic.png") no-repeat #fff center; background-size:90%; z-index: 50}
.myTop ul {display: flex; justify-content: center; flex-direction: column; row-gap:10px; width: calc(100% - 150px)}
.myTop ul li {width: 100%}
.myTop ul li label {display: inline-block; font-size: .875em; opacity: .75}
.myTop ul li p {display: inline-block; margin-right: 10px}
.myTop ul li button {width: 50px; height: 25px; border: none; border-radius: 10px; background: #fff; vertical-align: top; opacity: .9}
#myPage section {position: fixed; top: 240px; left: 0; bottom: 0; width: 100%; padding-top: 50px; border-radius: 30px 30px 0 0; background: #f2f3f4; z-index: 100}
#myPage section article {width: 90%; margin: 0 auto}
#myPage section article h2 {font-size: 1.4em; font-weight: 600; margin-bottom: 20px; padding-left: 10px}
#myPage section article > div { height: calc(50vh); overflow-y: auto}
#myPage section article table {width: 100%; }
#myPage section article table th {border-bottom: 1px solid #c9cdd7; line-height: 30px; position: sticky; top: 0; background: #eee}
#myPage section article table td {text-align: center; line-height: 60px; color: #7d7f87; border-bottom: 1px solid #ccc}
#myPage section article table td:nth-child(1) {width: 35%; line-height: 1.2; word-break: keep-all; padding:0 10px}
#myPage section article table td:nth-child(1) span {padding: 0 5px; background: #fff; display: none}
#myPage section article table td:nth-child(2) {width: 25%}
#myPage section article table td:nth-child(3) {width: 25%}
#myPage section article table td:nth-child(4) {width: 15%}

/* myRoom */
.myRoom .sTop {position: static; width: 100%; margin: 0 auto; border-radius: 10px; background: #f5f5f5}
.myRoom .sTop ul {justify-content: center}
.myRoom .sign { display: block}
.myRoom .welcome {font-size: 1.125em}
.myRoom .welcome span {color: #e94769}


/*xpt*/
.pc #xpt header .pcTop input {background-image: url(../images/btn_win_pcw.png); opacity: .7}
.pc #xpt header .pcTop input:hover {background-color: rgba(0,0,0,0.2);}
.pc #xpt header .pcTop button::after {background-color: transparent; filter: invert(0)}
.pc #xpt header .pcTop button:hover {opacity: 1; border-radius:0; background-color: #f2f4f810}
#xpt header { position: absolute; top: 0; left: 0; width: 100%; z-index: 200}
#xpt.vu .xptTop {height: 120px; padding-top: 10%; transition:ease .5s}
#xpt.vu .xptTop > dl {display: none}
#xpt.vu section {height: calc(100vh - 120px); transition:ease .5s}
#xpt header h1 {display: none}
#xpt header .back {display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; text-indent: -9000px}
#xpt header .back::after {content: ''; width: 30px; height: 30px; background: url(../images/ico.png) no-repeat 0 0; background-size: auto 30px; filter: invert(100%)}
#xpt header .topBtn {display: none}
#xpt header .logBtn {display: block}

.xptTop {position:relative; height: 90vw; max-height: 400px; border-radius: 0 0 2% 2%; background-repeat: no-repeat; background-size: cover; background-position: center; transition:ease .5s}
.xptTop:after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height:100%; background-color: rgba(0,0,0,0.5)}
.xptTop dl {position: absolute; top: 70px; left: 5%; width: 90%; z-index: 100}
.xptTop dt {position: relative; min-height: 105px; color: #fff; margin-bottom: 10px; padding-left: 105px}
.xptTop dt figure {position: absolute; top: 0; left: 0; width: 90px; height: 90px; border-radius: 50%; background-position: center; background-size: cover; background-color: #f1f2f3; z-index: 10}
.xptTop dt h3 {font-size: 1.125em; margin-bottom: 5px}
.xptTop dd {position:relative; width: 100%; min-height: 80px; padding: 10px; border-radius: 10px; font-size: .875em; background-color: #fff} 
.xptTop dd .profile {width: calc(100% - 50px); white-space: pre-line; line-height: 1.5em; word-break: keep-all; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.xptTop dd .profile p{line-height: 24px;}
.xptTop dd .profile p:before {content: 'ㆍ'; color: blueviolet}
.xptTop dd .like {position: absolute; top: 5px; right: 10px; width: 50px}
.xptTop dd .like label {display: block; width: 100%; text-align: center}
.xptTop dd .like label:before { content: ''; display: block; width: 50px; height: 30px; background-image: url("../images/ico_like.png"); background-repeat: no-repeat; background-position: center top; background-size: 30px auto}
.xptTop dd .like input { width: 100%; border: none; text-align: center; color: #7d7f87; background-color: transparent}
.xptTop dd .like label.on {color: #e94769; }
.xptTop dd .like label.on:before {background-position: center top -30px}
.xptTop ul {position: absolute; bottom: 10px; left: 5%; width: 90%; height: 50px; z-index: 50}
.xptTop ul.btnArea {}
.xptTop ul.btnArea input {float: left; width: 49%; height: 40px; border:none; color:#e94769; font-weight: 600; background-color:#fff}
.xptTop ul.btnArea input.free {border: none; margin-right: 2%; color:#131211; font-weight: 400; background-color:#fbe760}

#xpt section {position: relative; height: calc(100vh - 100vw); min-height: calc(100vh - 400px); padding-top: 30px; overflow-y: auto; transition:ease .5s}
#xpt section h2 {width: 90%; margin: 0 auto; font-size: 1.4em; font-weight: 600; margin-bottom: 20px}
#xpt section article {position: relative; width: 90%; margin: 0 auto}
#xpt section article dl {margin-bottom: 10px; padding: 15px 0; border-bottom: 1px solid #bbb}
#xpt section article dt h3 {font-size: 1em}
#xpt section article dt p {font-size: .875em; color: #777}
#xpt section article dd {border-top: 1px dashed #ddd; margin-top: 10px; padding-top: 10px; font-size: .875em; display: none}
#xpt section .xpt_write {position: absolute; top: 30px; right: 20px}
.xpt_tab {display: flex; text-align: center; column-gap: 5px; justify-content: center}
.xpt_tab input {width: 40%}

/* bbs */
#noti header h1 {display: none}
#noti header .logBtn {display: block}
#noti .subTop {position: relative}

#noti section {margin:0 10px; }
#noti article {width: 100%; height: calc(100vh - 70px); padding-top:20px; border-radius: 10px; background: #fff; overflow: hidden; overflow-y: auto} 

.bbs dl {border-bottom:1px solid #c8d2d7; color:#322c48; font-size:16px}
.bbs dl.on dd {display:block; word-break:keep-all; white-space:pre-line; padding:20px 10px}
.bbs dt { position:relative; height: 50px; padding-top: 5px; padding-left:10px; line-height:20px; cursor:pointer}
.bbs dt h2 {width:calc(100% - 10px); font-size:1em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.bbs dt p {font-size: .8em; color: #7a8da6}
.bbs dd {display:none; width:calc(100% - 10px); color: #585c6c; padding-left: 10px; padding-bottom: 30px; background: #fff}


/*admin*/
.mbr_top .admBtn {position: absolute; top: 5px; right: 5px; display: flex}
.admBtn .count {padding-left:24px;; text-align:right; background:url(../images/ico_adm.png) no-repeat;}
.admBtn input[type="checkbox"] { display:none;}
.admBtn input[type="checkbox"] + label {width: 30px; height:30px; text-indent: -9000px; background:url("../images/ico_adm.png") -30px 0 / auto 60px; }
.admBtn input[type="checkbox"]:checked + label {background:url("../images/ico_adm.png") -30px -30px / auto 60px; opacity: .5}
.admBtn input[type="button"] {width: 30px; height:30px; border:none; text-indent: -9000px; background:url("../images/ico_adm.png") 0 0 / auto 60px}

#adm_word {display:none; position:fixed; bottom:80px; right: 10px; width:240px; height: calc(100vh - 190px); padding:5px; border:1px solid #c9d2d7; border-radius:5px; background:#fff; z-index:120}
#adm_word dl {height:30px; margin-bottom:5px}
#adm_word dt input { display:block; float:left; line-height:30px; width:75%; padding:0 10px}
#adm_word dt input[type=button] { width:calc(25% - 5px); margin-left:5px; color: #fff; background:#3a9ce0}
#adm_word ul { width:100%; min-height:180px; max-height:300px; overflow-y:auto}
#adm_word li {position: relative; min-height:24px; line-height:1.2em; padding:0 30px 0 5px; margin-bottom: 6px; font-size: .875em}
#adm_word li input {position: absolute; top: 0; right: 0; width:24px; height:24px; text-indent: -100px; background: url("../images/ico_adm.png") #eee 1px -19px / auto 40px; overflow: hidden}

#win_adm, #win_mbr {position:fixed; width:120px; height:auto; border:1px solid #404756; border-radius:5px; background:#404756; display:none; transform: translate(0, -50%); z-index:201}
#win_adm ul,#win_mbr ul {padding:5px;}
#win_adm ul li, #win_mbr ul li {margin-bottom:3px}
#win_adm button, #win_mbr button {width:100%; color:white; border:none; line-height:20px; text-align:left; padding-left:10px; background-color:transparent}
#win_adm button:hover, #win_mbr button:hover {color:#fff; background:#c9d2d733}
#win_mbr hr {opacity: .5}

#mbr_list {display:none; width:240px; height: calc(100vh - 100px); position:fixed; top:70px; right:10px; border:1px solid #c9d2d7; border-radius:5px; background:#fff; z-index: 100}
#mbr_list .mbr_top {height: 160px; padding: 8px 0; padding-left:15px; border-bottom: 1px solid #c9d2d7}
#mbr_list .mbr_top h3 {font-size: 1em; padding-left: 5px}
#mbr_list .mbr_top button {width: auto; height:30px; text-indent: 5px}
#mbr_list .mbr_top button.notice::before {width: 25px; height: 25px; background-position: -25px -50px; background-size: auto 75px}
#mbr_list .mbr_top button.history::before {width: 25px; height: 25px; background-position: -100px -50px; background-size: auto 75px}
#mbr_list .mbr_top button.file::before {width: 25px; height: 25px; background-position: -125px -50px; background-size: auto 75px}
#mbr_list .mbr_top button.push::before {width: 25px; height: 25px; background-position: -150px 0px; background-size: auto 75px; }
#mbr_list .mbr_top dt {display: flex; align-items: center; justify-content: flex-start; margin-bottom: 5px}
#mbr_list .mbr_top dd {display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column}
#mbr_list .mbr_top dd p {margin-right: 10px}
#mbr_list .mbr_top dd p.count:before {content:''; display:inline-block; width: 30px; height: 30px; background:url(../images/ico_chat.png) no-repeat -120px -30px; background-size: auto 90px }
#mbr_list .mbr_top dd p.like:before {content:''; display:inline-block; width: 30px; height: 30px; background:url(../images/ico_chat.png) no-repeat -120px 0; background-size: auto 90px }
#mbr_list .mbr_top dd p span {display: inline-block; line-height: 30px; vertical-align: top; color: #7a8da6}
#mbr_list .mbr_bdy {padding-top: 10px; height: calc(100% - 200px); overflow-y: auto}
#mbr_list .mbr_bdy li {position: relative; padding-left: 35px; line-height: 30px; margin: 0 15px 10px; font-size: .875em;}
#mbr_list .mbr_bdy li label {display: inline-block; width: 18px; height: 18px; line-height: 18px; border-radius: 5px; text-align: center; font-size: .875em; background-color: #b1bbce; opacity: .8}
#mbr_list .mbr_bdy li figure {display: flex; justify-content: center; align-items: center; position:absolute; top:1px; left:0px; width: 30px; height: 30px; border-radius: 50%; color: #fff; overflow: hidden}
#mbr_list .mbr_bdy li figure img {width: 100%; height: 100%; object-fit: cover}
#mbr_list .mbr_bdy li figure.c1, .chatArea > div figure.c1, .emotList .emoBdy dd figure.c1 {background: #e75675}
#mbr_list .mbr_bdy li figure.c2, .chatArea > div figure.c2, .emotList .emoBdy dd figure.c2 {background: #f87440}
#mbr_list .mbr_bdy li figure.c3, .chatArea > div figure.c3, .emotList .emoBdy dd figure.c3 {background: #f9a400}
#mbr_list .mbr_bdy li figure.c4, .chatArea > div figure.c4, .emotList .emoBdy dd figure.c4 {background: #ba9b3e}
#mbr_list .mbr_bdy li figure.c5, .chatArea > div figure.c5, .emotList .emoBdy dd figure.c5 {background: #4cb635}
#mbr_list .mbr_bdy li figure.c6, .chatArea > div figure.c6, .emotList .emoBdy dd figure.c6 {background: #00c1c6}
#mbr_list .mbr_bdy li figure.c7, .chatArea > div figure.c7, .emotList .emoBdy dd figure.c7 {background: #3d9bf9}
#mbr_list .mbr_bdy li figure.c8, .chatArea > div figure.c8, .emotList .emoBdy dd figure.c8 {background: #637fd3}
#mbr_list .mbr_bdy li figure.c9, .chatArea > div figure.c9, .emotList .emoBdy dd figure.c9 {background: #776fd6}
#mbr_list .mbr_bdy li figure.c0, .chatArea > div figure.c0, .emotList .emoBdy dd figure.c0 {background: #b35cd1}
#mbr_list .mbr_bot {padding-top: 5px; }
#mbr_list .mbr_bot li {position: relative; padding-left: 30px; height: 30px; border-top: 1px solid #c9d2d7}
#mbr_list .mbr_bot li:before {content:''; display:block; position: absolute; top: 0; left: 0; width: 30px;height: 30px; background:url(../images/ico_chat.png) no-repeat -90px 0; background-size: auto 90px; opacity: .8}
#mbr_list .mbr_bot li button {height: 30px; border: none; background: none}
label.reply { float: right; margin-right: 10px; font-size: .75em }

.admMenu {display: none;}
.admMenu ul {display: flex}

.alertify .ajs-header {border-bottom: 1px solid #eee}
.alertify .ajs-.bottom {background-color:transparent}
.alertify .ajs-.bottom .ajs-buttons .ajs-button {border:none; border-radius:5px}

/* common */
.grd1 {color:#fff; background:#e94769}
.grd1:hover {background:linear-gradient(125deg, #ff513f 0%, #e94769 100%); transition:ease .5s}
.btn2 {width:100%; line-height:46px; border:1px solid #ff6700; font-size:16px; font-weight:500; text-align:center; color:#ff6700; background-color:transparent}

.pc > div.notiPop {position: relative; border: 1px solid #c9d2d7}
.notiPop figure {position:absolute; top:12px; left:10px; width:44px; height:44px; border-radius:40%; background-color:#f1f2f3; background-repeat:no-repeat; background-position:center; background-size:cover}
.notiPop ul {position:absolute; top:12px; left:63px; width:calc(100% - 70px); height: 60px; overflow-y: auto}
.notiPop ul h2 {margin-bottom: 5px; font-size: .9em; font-weight: 600}
.notiPop ul li {width: 90%; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notiPop button {position: absolute; top: 0; right: 5px; width: 30px; height: 30px; border: none; font-size: 24px; background-color: transparent; z-index: 10; opacity: .5}

.topPop {position: relative}
#search {position: absolute; top: 0; width: 100%; height: 40px; background-color: #90c7bf; border-bottom: 1px solid #83b5ad; display: none; z-index: 200}
#search ul { position: relative; padding: 5px 20px}
#search li { float: left; width: 40px; text-align: center}
#search li:first-child {width: calc(100% - 40px);}
#search li.move {position: absolute; top: 5px; right: 60px; width: 60px; height: 24px; display:none}
#search li.move input[type=button] {width: 20px; height: 20px; text-indent: -9000px; border: none; background-image: url("../images/ico.png"); background-size: auto 20px; background-color: transparent; opacity: .5}
#search li.move input[value=up] {background-position:-20px 0} 
#search li.move input[value=dn] {background-position:-40px 0}
#search input:not([type=button]) {width: calc(100% - 10px); height: 30px; border: 1px solid #c9d2d7; color: #111; border-radius: 5px; padding: 0 5px; background: #fff}
#search button {display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 5px; border: none; background-color: #c8ccd3}
#search button::after {content: '';  width: 20px; height: 20px; background-image: url("../images/ico.png"); background-size: auto 20px}
#search button.cls::after { background-position:-60px 0}
#search .crt-msg {display:none; position: fixed; bottom: 80px; right: 20px}
#searchbox {display: none; padding: 0 5px}
#searchbox.on {display: block}
#searchbox.on + .sch::before {background-position: -150px 0}

.bottom .btn {opacity: 0.5; color: #fff; background: #1d2128}
.bottom .btn.on { opacity: 1; color: #fff; border: none; background: #e94769}

.m_emot {display: flex; justify-content: space-around}
.m_emot button {display: flex; justify-content: center; align-items: center; width: 30px !important; height: 30px; padding: 0 !important; text-indent: -60px; overflow: hidden;}
.m_emot button::before {content: ''; width: 20px; height: 20px; background-image: url(../images/emot.png); background-size: auto 40px;}
.m_emot button.btn_gd::before {background-position: -20px 0}
.m_emot button.btn_ok::before {background-position: -40px 0}


/* PC */
.pc {padding-left: 65px; min-width: 375px; overflow: hidden;}
.pc header {height:70px; padding-top: 30px;}
.pc header .top {height: 40px;}
.pc header .pcTop {display: block; position: relative}
.pc header .pcTop .trans {position: fixed; left: 0; top: -50px; display: flex; justify-content: center; align-items: center; width: 100px; height: 30px; z-index: 10}
.pc header .pcTop .trans li {position: relative; width: 60px; height: 2px;}
.pc header .pcTop .trans span {width: .6em; height: .6em}
.pc header .pcTop .winBtn {position: fixed; right: 0; top: 0; z-index: 10}
.pc header .pcTop .winBtn button {width:40px; height:30px; border:none; background-color: transparent; opacity: .75}
.pc header .pcTop .winBtn button:hover {opacity: 1; border-radius:0; background-color: #f2f4f833}
.pc header .pcTop .winBtn button::after {content: ''; display: block; width: 30px; height: 30px; margin: 0 auto; background-image: url(../images/btn_win.png); background-repeat:no-repeat; background-color:transparent; background-size: 20px auto; filter: invert(100%);}
.pc header .pcTop .winBtn button.win_min::after { background-position:center 0}
.pc header .pcTop .winBtn button.win_max::after { background-position:center -30px}
.pc header .pcTop .winBtn button.win_res::after { background-position:center -60px}
.pc header .pcTop .winBtn button.win_cls::after { background-position:center -90px}
.pc header .pcTop .winBtn button.win_rel::after { background-position:center -120px}

.pc header .caption {position: absolute; top:0; left: 0;  width: 100%; height:30px; z-index: 1}
.pc header nav input {top: 0;}

.pc .sub .title {top: 30px; line-height: 40px; left: 10px }
.pc .sub header .back {display: none}
.pc .sub header .topBtn {display: none}
.pc .sub .chatArea {height: calc(100vh - 70px)}

.pc nav {position: relative; position: fixed; left: 0; top: 0; flex-direction: column; width: 65px; height: 100vh; border-top: none; border-right: 1px solid #dcdcdd}
.pc nav .navi{ flex-direction: column; width: 65px; margin: 0}
.pc nav .pop { width: 300px; right: auto; left: 60px; min-height: 300px}
.pc nav .navi {height: 210px; padding-top: 20px}
.pc nav .navi button.home {position: absolute; bottom: 90px;}
.pc nav .navi button.more {position: absolute; bottom: 30px;}

.pc #noti .title {top: 30px}
.pc #noti article {height: calc(100vh - 90px); }
.pc #main article {min-width: 280px; height:auto; }
.pc #main .roomBox figure {left: 0; width: 45px; height: 45px}
.pc #main .roomBox ul {width: calc(100% - 55px); padding-right: 60px}
.pc #main .time {right: 0}
.pc #main .banner {max-width: 270px; margin: 0 auto; }
.pc #main section {height: calc(100vh - 70px)}
.pc section {font-size: 12px;}
.pc .chat .chatTop .title figure {display: block}
.pc .chat .chatTop .title li:last-child {width: calc(100% - 40px)}

.pc .mtopBtn {display:none}
.pc #login header {display: block; height: 30px; background-color: transparent}
.pc #login header .top {display: none}
.pc #login section {height: calc(100vh - 30px); }
.pc #myRoom .sTop {top: 30px; height: 40px}
.pc #myRoom .sTop ul {height: 40px}
.pc #mbr_list .mbr_bdy {font-size: 14px;}
.pc #set article {height: calc(100vh - 180px)}

.pc #terms section {height: calc(100vh - 80px)}

.pc .chat header {height: 30px; overflow: hidden; background-color: rgba(255,255,255,.1)}
.pc .chat .chatTop {padding-left: 10px}
.pc .chatArea {height: calc(100vh - 160px)}

.pc .pcOnly {display: block}


/* resize */
.pc .resize-l {position:fixed; top:0; left:0; width:5px; height:100%; background:url(../images/trans.png); z-index:100; cursor:e-resize}
.pc .resize-r {position:fixed; top:0; right:0; width:5px; height:100%; background:url(../images/trans.png); z-index:100; cursor:e-resize}
.pc .resize-t {position:fixed; top:0; left:0; width:100%; height:5px; background:url(../images/trans.png); z-index:100; cursor:s-resize}
.pc .resize-b {position:fixed; bottom:0; left:0; width:100%; height:5px; background:url(../images/trans.png); z-index:100; cursor:s-resize}
.pc .resize-se {position:fixed; bottom:0; right:0; width:16px; height:16px; background:url(../images/resize.png); z-index:200; cursor:se-resize}

.pc .pcLine li {position: fixed; background: #d8dbe2; z-index: 100}
.pc .pcLine li.lineTop {top: 0; left: 0; width: 100%; height: 1px}
.pc .pcLine li.lineLeft {top: 0; left: 0; width: 1px; height: 100%}
.pc .pcLine li.lineRight {top: 0; right: 0; width: 1px; height: 100%}
.pc .pcLine li.lineBottom {bottom: 0; left: 0; width: 100%; height: 1px}
.pc:focus .pcLine li {background: #7d7f87}

.bottom::after {position: fixed; left: calc(50% - 120px); bottom: -50px; width: 240px; text-align: center; font-size: .875em; color: #fff; border-radius: 5px; background: #00000080; padding: 5px 10px; z-index: 100;}
.bottom.xpt::after {content: '전문가 채팅으로 변경되었습니다.'; bottom: 80px; animation: fadeOut 2s ease forwards;}
.bottom.user::after {content: '회원 채팅으로 변경되었습니다.'; bottom: 80px; animation: fadeIn 2s ease forwards;}
@keyframes fadeOut {
    0% {opacity: 0; bottom: 80px;}
    5% {opacity: 1;}
    75% {opacity: 1;}
    95% {opacity: 0; bottom: 80px;}
    100% {opacity: 0; bottom: -50px;}
}
@keyframes fadeIn {
    0% {opacity: 0; bottom: 80px;}
    5% {opacity: 1;}
    75% {opacity: 1;}
    95% {opacity: 0; bottom: 80px;}
    100% {opacity: 0; bottom: -50px;}
}

bottom {height: 30px}

/* droid */
.droid nav .pop {width: 75%; font-size: 1em}
.droid nav .pop li {margin-bottom: 10px}
.droid #main header {height: 50px}
.droid #main header h1 {display:block;}
.droid #myRoom .mtopBtn {right: auto; left: 5px; top: 12px}
.droid .chat header {display: none}
.droid .chat .mtopBtn {right: auto; left: 5px; top: 12px}
.droid .mtopBtn input {text-indent: -9000px; transform: rotate(-90deg); border: none; background: url("../images/ico.png") no-repeat -30px 0; background-size: auto 30px}
.droid #mbr_list {top: 47px}
.droid .bbs dt {height: 70px; line-height: 25px; padding-top: 10px}
.droid .bbs dt h2 {font-size:1.1em;}
.droid .bbs dt p {font-size: .9em}
.droid .chat .bottom textarea {font-size: 1em}
.droid #main .roomBox button.ico {width: 40px; height: 40px}
.droid #main .roomBox button.alm::before {width: 25px; height: 25px; background-size: auto 75px; background-position: -50px -25px; opacity: .5;}
.droid #main .roomBox button.alm.on::before {background-position: -50px 0px; opacity: 1}
.droid #main .roomBox.fav .roomTitle::after {content: ''; width: 25px; height: 25px; background: url(../images/ico_chat.png) -75px -25px / auto 75px;}
.droid .emotList {top: auto !important; left: 0 !important; width: 100% !important; bottom: 0}
.droid .chatArea > div ul .reply {display: none}

/* ios */
.ios nav .pop {width: 70%; font-size: 1.125em}
.ios nav .pop li {margin-bottom: 10px}
.ios #main header {height: 50px}
.ios #main header h1 {display:block}
.ios #myRoom .sTop {top: 0; width: calc(100% - 80px)}
.ios #myRoom .sTop ul {padding-left: 35px}
.ios #myRoom .mtopBtn {right: auto; left: 5px; top: 12px}
.ios .chat header {display: none}
.ios .chat .topIcon {top:10px}
.ios .chat .mtopBtn {right: auto; left: 5px; top: 12px}
.ios .mtopBtn input {text-indent: -9000px; transform: rotate(-90deg); border: none; background: url("../images/ico.png") no-repeat -30px 0; background-size: auto 30px}
.ios #mbr_list {top: 47px}
.ios .bbs dt {height: 70px; line-height: 25px; padding-top: 10px}
.ios .bbs dt h2 {font-size:1.1em;}
.ios .bbs dt p {font-size: .9em}
.ios .chat .bottom textarea {font-size: 1em}
.ios #main .roomBox button.ico {width: 40px; height: 40px}
.ios #main .roomBox button.alm::before {width: 25px; height: 25px; background-size: auto 75px; background-position: -50px -25px; opacity: .5;}
.ios #main .roomBox button.alm.on::before {background-position: -50px 0px; opacity: 1;}
.ios #main .roomBox.fav .roomTitle::after {content: ''; width: 25px; height: 25px; background: url(../images/ico_chat.png) -75px -25px / auto 75px;}
.ios .emotList {top: auto !important; left: 0 !important; width: 100% !important; bottom: 0}
.ios .chatArea > div ul .reply {display: none}

/* 특정 클래스에 대해 텍스트 선택 방지 */
.ios .roomBox ul, .ios .chatArea > div ul li {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
}

@media only screen and (max-width:360px) {
    #main article {zoom:.8}
}

.skeleton {
  background: #e0e0e0;
  height: 20px;
  width: 100%;
  border-radius: 4px;
  animation: pulse 1.0s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #c0c0c0;
  }
  100% {
    background-color: #e0e0e0;
  }
}