@import url('common.css');
@charset "utf-8";


#wrap {position: relative;margin: 0 auto;}

#wrap {height: 100%;}
#content {height: 100%;padding-top: 3.333rem;}
#content .card {border-radius: 0.5rem;border-width: 0.1rem;}
#content.con2{padding-top: 10.307rem; /* title+state */}
#content.con3{padding-top: 10.822rem; /* gnb+title */}
#content.con4{padding-top: 14.615rem; /* gnb+title+state */}
#content .fixed2{position: fixed;z-index: 2; margin-top: -3.846rem;/* state */ background: #f7f7ef}
#content .fixed3{position: fixed;z-index: 3; margin-top: -3.208rem;/* title */ background: #f7f7ef}
#content .fixed{position: fixed;z-index: 3; margin-top: -7.076rem;/* title+state */ background: #f7f7ef}
#content .fixed4{position: fixed;z-index: 3; margin-top: -7.538rem;/* gnb+title */ background: #f7f7ef}
#content .fixed5{position: fixed;z-index: 3; margin-top: -11.361rem;/* gnb+title+state */ background: #f7f7ef}

/* HEADER */
header {padding: 0 1rem;background: #403a3a;height: 3.307rem;line-height: 3.333rem;background: #385868;text-align: right;color: #fff;position: absolute;width: 100%;top: 0; font-size: 0;z-index: 991;}
header.fixed {position: fixed;top: 0;left: 0;right: 0;}
header h1 {font-size: 0;line-height: 3.333rem;float: left;}
header img {max-height: 1.667rem;}
header .btn {font-size: 0.8333rem;vertical-align: middle;}
/* header span {font-size: 1.083rem;vertical-align: middle;margin-left: .5em;font-weight: bold} */
header span {font-size: 1.083rem;vertical-align: middle;margin-left: .5em;font-weight: bold;display:-webkit-inline-box;word-wrap:break-word;line-height:16px}

/* FOOTER */
/* INDEX */

/* SUB */
#gnb {background: #fff;height: 4.307rem; border-bottom: 1px solid #ddd; width: 100%; background: #fff}
#gnb ul {overflow: hidden;}
#gnb li {padding: 0.8em 0 0.5em 0;border-bottom: 0.3em solid transparent;background: #fff;font-size: 0.8333rem;text-align: center;line-height: 1;color: #385868;}
#gnb li img {display: block;margin: 0 auto 0.5em;max-height: 1.792rem;}
#gnb li.active {border-bottom-color: #64b5f6;color: #3a99e5; background:#f4f4f4; border-top:0px solid #f4f4f4; -webkit-box-shadow:1px 1px 10px 5px rgba(0, 0, 0, 0.05) inset; box-shadow:1px 1px 10px 5px rgba(0, 0, 0, 0.05) inset;}
.title-area {height: 3.208rem;border-bottom: 0.1em solid rgba(0, 0, 0, 0.1);position: relative;background: #f7f7ef;display: -webkit-box;display: -ms-flexbox;display: flex; width: 100%}
.title-area.bg-blue {background: #30afff;color:#fff;}
.title-area.bg-blue h2 {color:#fff;}
.title-area h2 {margin-left: 3.1rem;font-size: 1.25rem;line-height: 3.2rem;color: #385868;font-weight: bold;}
.title-area h3 {margin-left: 1rem;font-size: 1.25rem;line-height: 3.2rem;color: #385868;font-weight: bold;}
.title-area .go-back img {max-height: 1rem}
.title-area .go-back {display: block;position: absolute;left: 1rem;top: 0;font-size: 0;line-height: 3.208rem;text-align: left;z-index: 2;}
.title-area .r-name {font-size: 1.25rem;padding-left: 1rem;color: #385868;font-weight: bold;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex; z-index:99}
.title-area .r-name>ul {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.title-area .r-name>ul>li {position: relative;line-height: 1.1}
.title-area .r-name>ul>li+li {padding-left: 0.5rem;margin-left: 0.5rem;border-left: 1px solid #ddd;}
.title-area .r-name>ul>li>a {display: inline-block;}
.title-area .r-name>ul>li>b {margin-right: 0.5rem;}
.title-area .r-name>ul>li>b+a {font-size: 1rem;font-weight: normal;}
.title-area .r-name span {display: inline-block;vertical-align: top;font-size: 1em; width: 1em;height: 1em;border-radius: 50%;text-align: center;background: #385868;line-height: 0.9em;right: 0; position: relative;color: #fff;}
.title-area .dropdown {display: none;position: absolute;top: 100%;left: 0;min-width: 10rem;margin-top: 0.96rem;font-weight: normal;}
.title-area .dropdown ul {-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.21);box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.21)}
.title-area .dropdown li {position: relative;background: #fff;}
.title-area .dropdown li>a {display: block;padding: 0.5em 1em;font-size: 1rem;}
/*.title-area .dropdown li:hover>a {color: #385868;background: #e8f0f3;font-weight: bold;text-decoration: none;}*/
.title-area .dropdown li ul {display: none;position: absolute;left: 100%;top: 0;min-width: 114%;padding-left: 2px;}
/*.title-area .dropdown li:hover ul, .title-area .dropdown li.active ul {display: block;}*/
.title-area .dropdown li.active>a {color: #385868;background: #e8f0f3;font-weight: bold}
.title-area .sort-nav {height: 100%;margin-right: 6.5rem;padding: 0 1rem;-webkit-box-align: center;-ms-flex-align: center;align-items: center;;display: -webkit-box;;display: -ms-flexbox;;display: flex;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;margin-left: auto;}
.title-area .sort-nav:last-child {margin-right: 0;margin-left: auto;}
.title-area .sort-nav ul {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; display: -webkit-box;display: -ms-flexbox;display: flex;height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.title-area .sort-nav li {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;text-align: center;}
.title-area .sort-nav li a {display: block;border-radius: 1rem;padding: 0.25rem 0;line-height: 1.4;}
.title-area .sort-nav li.active a {color: #fff;background: #ff9f9f}
.title-area .sort-nav li.text-right.active a {color: #41a4f5;background: none;font-weight: bold;}
.title-area .sort-nav p {-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: 0.9167rem}
.title-area .btn {position: absolute;right: 1rem;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);min-width: 5.5rem;; background: #a8a89a;color: #fff;}
.title-area .btn.green {background: #49d38a;}
.title-area .btn img {max-height: 1em;margin: 0; margin-top: -2px;vertical-align: middle;}
.title-area .profile {font-size: 1.25rem;padding-left: 1rem;line-height: 3.2rem;position: relative;}
.title-area .profile .nick {color: #41a4f5;margin-bottom: 0;}
.title-area .profile span {font-size: 0.9167rem;color: #666;margin: 0 0.5rem;;}
.help-block {color: #666;}
.guide-text {color:#385868}
.guide-text strong {margin-top: 2rem;display: block;margin-bottom: .5rem;padding-bottom: .5rem;border-bottom:1px solid #385868; }
.guide-slider {position: fixed;left:0;top:0;width:100%;height:100%;z-index: 9999;}
.guide-slider .flexslider, .guide-slider .flex-viewport,
.guide-slider .flexslider .slides, .guide-slider .flexslider .slides>li {height:100%;}
.guide-slider .flexslider .slides img {width:auto;}
.guide-slider .flexslider .slides>li {position: relative;}
.guide-slider .flexslider .slides>li span {display: block;height:100%;position: relative;}
.guide-slider .flexslider .slides>li span.cbk{background:rgba(0,0,0,0.7)}
.guide-slider .flexslider .slides>li span img {position: absolute;left:50%;top:50%;height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.guide-slider .control-btns a {display: block;position: absolute;right:1rem;bottom:1rem;max-width:3.5rem;z-index: 5;}
.guide-slider .control-btns ._close {display: none;}
.guide-slider .flex-control-nav {bottom: 1.5rem}
.guide-slider .flex-control-paging li a {width:0.8rem;height:0.8rem;-webkit-box-shadow:none;box-shadow:none;background: #000;}
.guide-slider .flex-control-paging li a.flex-active {background: #c2e4fe;}

.guide-exp-wr{padding:1.3rem 1rem 5.3rem 1rem;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}
.guide-exp{background:#fff;border-radius:5px 5px;position:relative;height:100%;padding:1rem;overflow:auto;}
.guide-exp-scr{}
.guide-exp p.title{padding-bottom:0.6rem;border-bottom:1px solid #e5e5e5;margin-bottom:0.4rem;font-size:1.4rem;font-weight:bold;}
.list-guide-wr{padding:0.7rem 0}
.list-guide-wr li{color:#385868;position:relative;padding-left:1.7rem;}
.list-guide-wr li:before{width:1.3rem;height:1.3rem;content:"";display:block;background:#385868;border-radius:50% 50%;position:absolute;top:0.1em;;left:0;color:#fff;font-size:0.8rem;text-align:center;line-height:1.3rem;}
.list-guide-wr li.num1:before{content:"1";}
.list-guide-wr li.num2:before{content:"2";}
.list-guide-wr li.num3:before{content:"3";}
.list-guide-wr li.num4:before{content:"4";}

.box-guide-wr{}
.box-guide-wr span{display:block;padding-bottom:4px;font-weight:bold;color:#385868;}
.box-guide-wr > li{padding:1rem;margin-bottom:0.8rem;background:#efefef;}
.box-guide-wr li ul li{position:relative;padding-left:10px;}
.box-guide-wr li ul li:before{width:4px;height:2px;background:#ccc;position:absolute;top:8px;left:0;content:"";display:block;}



/* 약관동의 */
.terms-txt {height:100%;}
.terms-txt .pre {height:98%; overflow:auto; white-space: pre-line;color: #777;font-size: 1rem}
.terms-txt p {color: #385868;font-size: 1.083rem}
.terms-txt p span {color: #41a4f5}
.terms-txt dt img {width:18px; margin-right:5px;}
.terms-txt dd {margin-bottom:10px;}
.terms-title {color: #666;margin: 1rem 0;padding: 0 0.5em}
.terms-title li {overflow: hidden}
.terms-title li + li {margin-top: 0.25em;}
.terms-title [class^=checkbox] {float: left;}
.terms-title label span {border-bottom: 0.1rem solid #666}
.terms-title li a {float: right;border-bottom: 0.1rem solid #a0a0a0;color: #a0a0a0;}
.join-form .card * {font-size: 1.25rem;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.join-form .card .btn {border-radius: 0.5rem;height: calc(2.25rem + 2px);padding: 0 0.25rem;}
.join-form .card [class^='radio'] {vertical-align: middle;}
.join-form .form-group: last-child {margin-bottom: 0;}
.join-form .form-text {font-size: 1rem;color: #888}
.profile-area {text-align: center;}
.profile-area .pic {margin: 0 auto;width: 10.17rem;position: relative;line-height: normal;}
.profile-area .thumb {display: block;border: 0.1em solid #c7c7be;border-radius: 50%;overflow: hidden;padding-top: 100%;background: #deded4 url(../img/bg_noImg.png) no-repeat 50% 50%;background-size: 50%;z-index: 1;position: relative;}
.profile-area .thumb img {position: absolute;left: 50%;top: 50%;min-width: 100%;min-height: 100%;max-width: 150%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%)}
.profile-area .ico {position: absolute;right: 0.5em;bottom: 0;width: 2.792rem;z-index: 2;}

/* 채팅 */
.chat.intro {margin-left: 3.333rem;margin-right: 3.333rem;padding-bottom: 2rem;}
.chat.intro .intro-img {text-align: center;padding-top: 4.5rem;margin-bottom: 3.5rem;}
.chat.intro .chat-opt-select {margin-top: 3.5rem;}
.chat.intro .chat-opt-select .form-control {background: #fff url(../img/custom_select.png) no-repeat right 0.75rem center;background-size: 0.5833rem 1.25rem;}
.chat.intro .chat-opt-select input + input {margin-top: 0.5em;}
.chat.intro .intro-img img {max-height: 12.71em}
.chat.intro .intro-img1 {text-align: center;padding-top:6.5rem;}
.chat.intro .intro-img1 img {max-height: 28em}
.chat.intro .btn {}
.chat.intro .btn img {vertical-align: top;}
.state-info .state-txt {white-space: nowrap;padding-right: 0.5em;line-height: 1rem;}
.state-info .state-txt b {font-size: 1.083rem;color: #41a4f5}
.state-info p {color: #666;font-size: 0.7083rem;line-height: 1rem;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; margin-left:10px;}
.area-list {min-height: 200px;max-height: 420px;overflow-y: auto}
.area-list li {padding: 0.8rem 0;font-size: 0.9167rem; line-height: 1rem;}
.area-list li + li {border-top: 0.1rem solid #ddd}
.area-list b.ver {display:inline-block; width:0.6rem !important; text-align:center;}
.area-list [class^='radio'] label {padding-left: 0;padding-right: 1.7rem;display: block;}
.area-list [class^='radio'] label span {color: #41a4f5;display: inline-block;position: absolute;right: 1.7rem;line-height: 1rem; width:58%; font-size: 0.8333rem; text-align:right;}
.area-list [class^='radio'] label span b {display:inline-block; font-weight:normal; width:2.7rem;}
.area-list [class^='radio'] label:before {right: 0;left: auto}
.area-list [class^='radio'] input[type="radio"]: checked + label::after {left: auto;right: calc(0.4em/2)}

.chat.list {position:relative;}
.chat.list .no-list {background: #fff;text-align: center;border-bottom: 1px solid #ddd; color: #666;}
.chat.list .state-info {width:100%; padding: 1rem;height: 3.846rem; display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center}
.chat.list>ul {background: #fff}
.chat.list>ul>li {display: -webkit-box;display: -ms-flexbox;display: flex;padding: 1rem;border-bottom: 0.1rem solid #ddd;-webkit-box-align: center;-ms-flex-align: center;align-items: center}
.chat.list>ul>li>div {}
.chat.list>ul>li .thumb {padding-right: 1rem;min-width: 3.125rem;-ms-flex-negative: 0;flex-shrink: 0;}
.chat.list>ul>li .thumb img {width: 3.125rem;height: 3.125rem;}
.chat.list>ul>li .location {/* font-size: 0.75rem; */color: orange;margin-left: auto;padding-right: 1rem;text-align: right;}
.chat.list>ul>li>.state { font-size: 0.8333rem; display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.chat.list>ul>li>.state:nth-child(3):last-child {margin-left: auto;}
.chat.list>ul>li>.state .btn {display: inline-block;border-radius: 0.25rem;font-size: 0.8333rem;width: 3.125rem;height: 3.125rem;line-height: 1.125rem; padding: 0.5em 0;text-align: center;color: #fff;}
.chat.list>ul>li>.state .btn+.btn {margin-left: 0.25rem;}
.chat.list>ul>li>.state .btn.red {background: #dc001a;}
.chat.list>ul>li>.state a {color:#888; margin-right:0.5rem;}
.chat.list>ul>li>.state a.blue {color:#41a4f5;}
.chat.list>ul>li>.state i {display: block;text-align: center;-webkit-transform: rotate(-100deg);transform: rotate(-100deg);font-size: 1rem}
.chat.list>ul>li>.state i:before {}
.chat.list>ul>li>.state .btn.disable {background: #9da4a8;}
.chat.list>ul>li .info {width:180px;}
.chat.list>ul>li .info .nick {color: #41a4f5;}
.chat.list>ul>li .info .nick.pink {color: #ff44a5}
.chat.list>ul>li .info p {font-size: 0.9167rem;color: #777}
.chat.list.talk .thumb {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;margin-left: auto;padding-right: 0;padding-left: 1rem;}
.chat.list.talk>ul>li>.state {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;margin-left: auto;}
.chat.list.talk>ul>li>.state:nth-child(3):last-child {margin-left: 0.25rem;}
.chat.list.talk .info {font-size: 0.9167rem;color: #666}
.chat.list.talk .info b {font-weight: normal;}
.chat.list.talk .info p {color: inherit;}
.chat.list.talk .info ul {-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-top: 5px;}
.chat.list.talk .info li {}
.chat.list.talk .info li+li {margin-left: 0.5em;}
.chat.list.talk .info li:nth-child(n+2)~* {color: #aaa;font-size: 0.75rem}
.chat.list.video .info .nick {display: inline-block;}
.chat.list.video .info .fav {margin-left: 0.25rem;color: #f12e24;font-size: 0.8333rem;}
.chat.list.paper>ul {background: none;}
.chat.list.paper>ul>li .info {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;background: #fff;padding: 0.5em;border-radius: 0.25rem; /* height: 3.75rem; */border: 1px solid #ddd;position: relative}
.chat.list.paper>ul>li .info:before {content: "";display: block;border: 1em solid transparent;border-right-color: #fff;position: absolute;left: -1.5em;top: 50%;margin-top: -1em;}
.chat.list.paper>ul>li .info:after {content: "";display: block;border: 1em solid transparent;border-right-color: #ddd;position: absolute;left: -1.55559em;top: 50%;margin-top: -1em;z-index: -1}
.chat.list.paper>ul>li .thumb img {width: 3.75rem;height: 3.75rem}
.chat.list.paper>ul>li .info p {font-size: 0.8333rem}
.chat.list.paper>ul>li .info ul {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.chat.list.paper>ul>li .info ul li:nth-child(n+2) {color: #aaa;;font-size: 0.75rem}
.chat.list.paper>ul>li .info ul li+li {margin-left: 0.5em;}
.chat.list.paper>ul>li .info .state {display:inline-block; width:30px;}
.chat.list.paper>ul>li .info .state.friend {color: #ff3da2}
.chat.list.paper>ul>li .info .state.block {color: #f12e24}
.chat.list.paper>ul>li .info .time {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;margin-left: auto}
.chat.list.paper>ul>li .info .time .ver {display:inline-block; margin:0 3px;}
.chat.list .alert {display: none;position: absolute;border-radius: 0; left: 2.5rem;right: 2.5rem;bottom: calc(4.167rem + 2.5rem);margin: 0; background: rgba(0, 0, 0, 0.6);color: #fff;text-align: center;}
.chat.list .alert span {margin: 0 2%;}

.popup .help-text {color: #777; font-size: 0.9167rem;}
.popup .help-text.lead {font-size:1rem;font-weight: normal}
.popup .help-text em {font-size: 1.4rem}
.popup .help-text b {color: #3a99e5}
.popup .btn-box {margin: 1rem 0 0;padding: 0;}
.popup .btn-box .btn {padding: 0.5rem 1rem;font-size: 1.167rem;display: block;width: 100%;}
.popup-body .voice-chat {padding: 0;}
.popup-body .nick {font-size: 1.25rem;color: #111;}
.popup-body .nick b {color: inherit;}
.popup-body .point-charge dd li {padding: 0.5rem 0}

.write-form {}
.write-form .writer {font-size: 1.417rem;display: block;color: #ff3da2;margin-bottom: 1rem;}
.write-form .form-control {resize: none;font-size: 1.083rem;}
.write-form .text-length {text-align: right;display: block;font-size: 0.8333rem;color:#666;margin-top: 5px;}
.write-form .file-upload {background: #fff;color: #385868;display: -webkit-box;display: -ms-flexbox;display: flex;;}
.write-form .file-upload >* {-ms-flex-item-align: center;align-self: center;}
.write-form .file-upload span {margin-right: auto;letter-spacing: -1.5px;}
.write-form .file-upload .btn {-ms-flex-item-align: center;align-self: center;margin-left: 5px;border-radius: 0.25rem;padding-left: 0.25rem;padding-right: 0.25rem;}
.write-form .help-block {color: #666;}

.profile-info {max-height: 430px;overflow-y: auto}
.profile-info .thumb {margin-bottom: 1rem;}
.profile-info {font-size: 1.083rem;color: #666;text-align: center;}
.profile-info b {font-size: 1.667rem;color: #41a4f5}

.profile {display: -webkit-box;display: -ms-flexbox;display: flex;}
.profile .thumb {margin-right: 1em;}
.profile .thumb img {max-width: 6.875rem}
.profile .info {color: #666;-ms-flex-item-align: center;align-self: center;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}
.profile .info p {margin-top: 0.8rem;}
.profile .nick {color: #111;font-size: 1.25rem; display: block;margin-bottom: 0.8rem;}
.profile .nick b {font-size: 1.25rem;}

.voice-chat {padding: 0.5rem;}
.voice-chat p.blue {color:#41a4f5; margin-bottom:1rem;}
.voice-chat .chat-msg {margin: 2rem 0 0;text-align: center;}
.voice-chat .chat-msg p {color: #385868;font-size: 0.8333rem;}
.voice-chat .chat-msg p b {display: block;font-weight: bold;font-size: 1.8rem; color: #333;line-height: 1.6}
.voice-chat .time-info {color: #41a4f5;margin: 1.1rem 0 1rem}
.voice-chat .time-info span {font-size: 1.25rem;line-height: 1.4; font-weight: bold;}
.voice-chat .time-info b {display: block;font-size: 1.667rem;font-weight: bold;}
.voice-chat .help-block {font-size: 0.8333rem;text-align: center;line-height: 1.8;}
.voice-chat .btn-action {margin-top: 5%;}
.voice-chat .btn-action .btn {width: 5rem;height: 5rem;border-radius: 50%;margin: 0 5%;}
.voice-chat .btn-action .btn img {margin: 0 auto;display: block;max-height: 2rem;vertical-align: top;}
.voice-chat .btn-action .btn i {font-size: 2rem;display: block;}
.voice-chat .btn-action .btn i.la-phone-square {-webkit-transform: rotate(15deg);transform: rotate(15deg)}
.voice-chat .btn-action .btn.gray {background: #c0c0c0;}
.voice-chat.full {padding: 2rem 1.8rem;}
.voice-chat.full .thumb img {max-width: 8.8rem;}
.voice-chat.full .info {font-size: 1.1rem;}
.voice-chat.full .nick {font-size: 1.5rem}
.voice-chat.full .nick b {font-size: 1em;}
.voice-chat.full .help-block {max-width: 80%;margin: 0 auto;}
.voice-chat.full .chat-msg .time {display: block;font-weight: bold;font-size: 2rem; color: #333;line-height: 1;}
.voice-chat.full .chat-msg .time.wait {opacity: 0.5}
.voice-chat.full .btn-action .btn:not(.red) {border: 0;height: auto;background: transparent;padding: 0;color: #666;margin: 0 4%;}
.voice-chat.full .btn-action .btn img {max-height: 5rem;display: block;margin-bottom: 0.5em;}
.voice-chat.full .btn-action .btn.red {margin-top: 10%;height: 5.833rem;width: 5.833rem;}
.voice-chat.full .btn-action .btn.red i {-webkit-transform: rotate(135deg);transform: rotate(135deg);font-size: 2.5rem;}


.video-chat {height: 100%;}
.video-chat .my-video-area {height: 100%;width: 100%;overflow: hidden;}
.video-chat .chatting-area {position: fixed;width: 100%;left: 0;right: 0;background: rgba(0, 0, 0, 0.4); bottom: 4.167rem;height: 40%;}
.video-chat .chatting-area .inner {height: 100%;padding-bottom: 3.75rem;}
.video-chat .chatting-area .message-container {height: 100%; overflow-y: auto;}
.video-chat .chatting-area .send-message {position: absolute;}
.video-chat .chatting-area .message-balloon {min-width: 50%; max-width: 80%;padding-bottom: 1.5em;background: rgba(255, 255, 255, 0.8);}
.video-chat .chatting-area .time {color: #666;left: auto; right: 0.5em;}
.video-chat .chatting-area .reverse .time {right: 0.5em;margin-right: 0;}
.video-chat .chatting-area .message-balloon:after {border-right-color: rgba(255, 255, 255, 0.8)}
.video-chat .chatting-area .reverse .message-balloon {background: rgba(255, 248, 82, 0.8);}
.video-chat .chatting-area .reverse .message-balloon:after {border-left-color: rgba(255, 248, 82, 0.8)}
.video-control-btns {position: fixed;bottom: 0;width: 100%;left: 0;right: 0;height: 4.167rem; background: rgba(0, 0, 0, 0.4);z-index: 2;}
.video-control-btns>ul {-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 100%;}
.video-control-btns>ul li {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;text-align: center;padding: 5px 0;}
.video-control-btns>ul li+li {border-left: 1px solid rgba(255, 255, 255, 0.2)}
.video-control-btns button {background: transparent;border: 0;;}
.video-control-btns button img {max-height: 2.792rem;}
.video-control-btns .alert {display: none;position: absolute;border-radius: 0; left: 2.5rem;right: 2.5rem;bottom: calc(4.167rem + 2.5rem);margin: 0; background: rgba(0, 0, 0, 0.6);color: #fff;text-align: center;}
.video-control-btns .alert span {margin: 0 2%;}
.video-chat .top-info-area {position: fixed;top: 0;width: 100%;left: 0;right: 0;padding: 0 1rem;line-height: 2.167rem;;background: rgba(0, 0, 0, 0.4);z-index: 2;color: rgba(255, 255, 255, 0.6);font-size: 1.167rem}
.video-chat .top-info-area img {height: 1.375rem}
.video-chat .top-info-area .point i {border: 2px solid rgba(255, 255, 255, 0.6);border-radius: 50%;width: 1.375rem;height: 1.375rem;line-height: 1.3rem;font-size: 0.8rem;text-align: center;}
.video-chat .top-info-area li:last-child:not(:first-child) {margin-left: auto}
.video-chat .top-info-area li.active {color: #dc001a}
.video-chat .top-info-area i {margin-right: 5px;}
.video-chat .other-video-area {position: absolute;width: 6.458rem;height: 6.458rem;right: 1rem;top: calc(2.167rem + 1rem);}
.point-tooltip {display: none;position: absolute;left: 5px;bottom: calc(4.167rem + 10px);font-size: 1.333rem;min-width: 18%; color: #fff;text-align: left;z-index: 33}
.point-tooltip ul {background: rgba(0, 0, 0, 0.6);border-radius: 5px;padding: 1rem;position: relative;}
.point-tooltip ul:before {content: "";border: 8px solid transparent;border-top-color: rgba(0, 0, 0, 0.6);position: absolute;left: 13px;bottom: -16px;}
.point-tooltip li {padding-left: 1.8rem;position: relative;font-weight: bold;}
.point-tooltip li:before {content: "\f231";font:normal normal normal 14px/1 FontAwesome;color: #c9151c; display: block;;border: 2px solid #c9151c;border-radius: 50%;width: 1.375rem;height: 1.375rem;line-height: 1.3rem;font-size: 0.8rem;text-align: center;position: absolute;left: 0;top: 50%;margin-top: calc(1.375rem / 2 * -1);}

.chat.room {padding-bottom: 3.75rem;background: #b0deed;}
.chatting-area .top-txt {color: #fff;background: #9b9b88;text-align: center;padding: 0.5em;}
.chatting-area .top-txt p {font-size: 0.8333rem;}
.chatting-area {}
.chatting-area .message-container {padding: 0 1rem}
.chatting-area .date {text-align: center;}
.chatting-area .date span {background: rgba(255, 255, 255, 0.34);padding: 0.4em 1em;font-size: 0.9rem;border-radius: 1em;/* border: 1px solid #ccc; */display: block;margin: 0 12%;}
.chatting-area li {margin: 1rem 0;overflow: hidden;}
.chatting-area .message-row {position: relative;}
.chatting-area .thumb {position: absolute;left: 0;max-width: 2.917rem}
.chatting-area .message-balloon {margin-left: 4rem;float: left;min-width: 45%; max-width: 60%; background: #fff;position: relative;border-radius: 0.5rem;min-height: 3rem; border-top-left-radius: 0; padding: 0.5em;-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1)}
.chatting-area .message-balloon:after {content: "";border: 5px solid transparent;border-right-color: #fff;position: absolute;left: -10px;top: 5px;}
.chatting-area .time {position: absolute;left: 100%;bottom: 2px;font-size: 0.8rem;white-space: nowrap;margin-left: 1em;color: #888}
.chatting-area .reverse .thumb {left: auto;right: 0;display: none;}
.chatting-area .reverse .message-balloon {background: #fff852;margin-right: 1rem;margin-left: 0;float: right;border-top-left-radius: 0.5rem;border-top-right-radius: 0;}
.chatting-area .reverse .time {margin-right: 1rem;margin-left: 0;left: auto;right: 100%;}
.chatting-area .reverse .message-balloon:after {border-left-color: #fff852;border-right-color: transparent;right: -10px;left: auto;}

.chat-setting {}
.chat-setting ul {}
.chat-setting li {color: #385868;font-size: 0.9583rem; padding-left: 3rem;border-bottom: 1px solid #e5e5e5;overflow: hidden;position: relative;line-height: 2.917rem;letter-spacing: -1.5px;}
.chat-setting li i {margin-left: -3rem;display: inline-block;font-size: 0;vertical-align: top; width: 3rem;text-align: center;}
.chat-setting li img {max-height: 2.292rem;}
.chat-setting li:last-child {border-bottom: 0;}
.chat-setting span {color: #41a4f5;font-size: 0.8333rem;width: 50%; position: absolute;right: 0;top: 50%;-webkit-transform: translate(0,-50%);transform: translate(0,-50%);line-height: 1.3rem;vertical-align: middle;display: inline-block;}
.chat-setting .checkbox-toggle {margin-left: -3rem;display: inline-block;vertical-align: top;}
.chat-setting .checkbox-toggle label {padding-right: 0;padding-left: 3rem;display: inline-block;line-height: inherit;}
.chat-setting .checkbox-toggle label::before {padding-left: 1.3rem;left: 2px;right: auto;width: 2.8rem;padding-right: 2px;font-size: 0.75rem}
.chat-setting .checkbox-toggle label::after {left: 4px;}
.chat-setting .checkbox-toggle input[type="checkbox"]:checked + label::before {padding-left: 2px;padding-right: 1.3rem;text-align: left;;}
.chat-setting .checkbox-toggle input[type="checkbox"]:checked + label::after {left: calc(1.6rem - 0px)}

.send-message {position: fixed;bottom: 0;width: 100%;height: 3.75rem;padding: 0.8em 1em;background: #fff;}
.send-message .btn img {max-height: 1.417rem}
.send-message .form {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}
.send-message .form-control {border: 0;border-radius: 0;}
.send-message .btn:not(.icon) {font-size: 1.083rem;height: 100%;padding: 0;width: 22%;}

/* 고객센터 */
.customer-chat {padding-bottom: 3.75rem;background: #d0e4e3;}
.customer-chat .chatting-area .date span {background: #f2e2d2;border:1px solid rgba(153, 153, 153, 0.6);}
.banner-group {text-align: center;}
.banner-group li+li {margin-top: 0.5em;}
.cs-menu {background: #fff;margin-top: 0.5rem;font-size: 0.8333rem;}
.cs-menu ul {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;border-top: 0.08333rem solid #ddd;border-bottom: 0.08333rem solid #ddd;}
.cs-menu li {width: 25%;text-align: center;overflow: hidden;display: -webkit-box;display: -ms-flexbox;display: flex;}
.cs-menu a {display: block;border: 1px solid #eee;margin-left: -1px;margin-top: -1px;margin-top: -1px;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding: .5rem 0;}
.cs-menu li span {color:#e4b600}
.cs-menu img {display: block;margin: 0 auto;max-height: 2.083rem;}
.customer-main {color: #666}
.customer-main .checkbox-toggle+.checkbox-toggle {margin-top: 0.8rem;}
.customer-main .checkbox-toggle label{line-height:2rem;font-size:1.15rem;}
.customer-main h3 {font-size: 1.25rem;color: #385868;font-weight: bold;margin-top: 1em;margin-bottom: 0.5em;}
.customer-main h3:first-child {margin-top: 0;}
.customer-etc {height:100%;}
.customer-etc .card ul {-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between}
.customer-etc .card li {min-width: 50%;padding: 5px;}
.customer-etc .card li .btn {font-size: 1.167rem;padding-left: 0;padding-right: 0; width: 100%;border-radius: 0.25em; -webkit-box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.04), inset 0 2px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.04), inset 0 2px 0 rgba(255, 255, 255, 0.2); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(0, 0, 0, 0.1))); background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));letter-spacing: -1px;}
.customer-etc .card li .btn.lightgray {color: #333}
.customer-etc .pre {height:60%; overflow:auto; white-space: pre-line;color: #666;}
.customer-etc .pre b {color: #111;}
.customer-etc .pre .lead {font-weight: bold;font-size: 1.167rem;}
.point-charge {}
.point-charge h3 {font-size: 1.25rem;color: #385868;font-weight: bold;margin-top: 1em;margin-bottom: 0.5em;}
.point-charge h3:first-child {margin-top: 0;}
.point-charge .card {color: #666;}
.point-charge .btn-box .btn {font-size: 1.25rem;min-width: 25%;}
.point-charge .table {font-size: 0.75rem; text-align: center; border: 1px solid #ccc;background: #fff;}
.point-charge .table thead {background: #e4e4e4;}
.point-charge .table th, .point-charge .table td {border-color: #ccc}
.point-charge .table td {color: #666}
.point-charge .table td .btn {border-radius: 0;}
.point-charge .table td .btn+.btn {margin-left: 5px;}
.point-charge .table td .row+div {margin-top: 5px;}
.point-charge .table tbody th {color: #263b45}
.point-charge .table .form-group {margin-bottom: 0.5rem;}
.point-charge .table .form-group:last-child {margin-bottom: 0;}
.point-charge .table .form-group input:first-child {margin-right: 5px;}
.point-charge .table .form-group input:last-child {margin-left: 5px;}
.point-charge .table .form-group span {-ms-flex-item-align: center;align-self: center}
.point-charge .search-form .table {font-size: 1rem;text-align: left}
.point-charge .search-form .table td {font-size: 0.8333rem;}
.point-charge .search-form .table th {padding-right: 0;}
.point-charge .card.no-rounded {border-radius: 0 !important;}
.point-charge .card li {font-size: 1.083rem;}
.point-charge .card li b {min-width: 31%;color: #385868; display: inline-block;}
.point-charge .card li+li {margin-top: 5px;}
.point-charge .my-point {background: #fff;;}
.point-charge .my-point li {font-size: 1.25rem;}
.point-charge .my-point b {display: block;line-height: 1; font-size: 1.75rem; color: #41a4f5; padding-left: 2rem;background: url(../img/ico_point.png) no-repeat 0 50%;background-size: 1em}
.point-charge dt {background: #263b45;color: #fff;text-align: center;padding: 0.5em 0;font-weight: normal;margin-bottom: 0.7083rem;}
.point-charge dd {background: #fff;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5}
.point-charge dd ul {-ms-flex-wrap: wrap;flex-wrap: wrap;}
.point-charge dd li {min-width: 33.3333%;text-align: center;padding: 1em 0;font-size: 1.083rem;border-right: 1px solid #eee;border-bottom: 1px solid #eee}
.point-charge dd li:before {content: "\f17b";display: block;font: normal normal normal 1.2em/1 LineAwesome;font-weight: 800;color: #00cf6b; -webkit-text-stroke: 3px #00cf6b; text-stroke: 3px 00cf6b;}
.point-charge dd li:nth-child(3n+3)~* {border-bottom: 0;}
.point-charge dd li.active {border-bottom: 3px solid #41a4f5;-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);background: #f8f8f8}
.point-charge dd li b {color: #41a4f5;font-size: 1.25rem;display: block;}
.point-charge .btn{font-weight:700;}

.payment-info {}
.payment-info .payment-detail {border-bottom: 1px solid #e5e5e5}
.payment-info .payment-detail ul {background: #f4f4f4;padding: 1rem;border: 1px solid #ddd;color: #666;font-size: 1.083rem}
.payment-info .payment-detail li+li {margin-top: 5px;}
.payment-info .payment-detail b {color: #385868;margin-right: 10px;}
.payment-info .payment-way {}
.payment-info .payment-way .btn {font-size: 1.167rem;padding-left: 0;padding-right: 0; width: 100%;border-radius: 0.25em; -webkit-box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.04), inset 0 2px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.04), inset 0 2px 0 rgba(255, 255, 255, 0.2); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(0, 0, 0, 0.1))); background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));letter-spacing: -1px;}
.payment-info .payment-way dt {font-size: 1.25rem;color: #385868;font-weight: normal;margin-bottom: 5px;}
.payment-info .payment-way dd {margin: 0 -5px}
.payment-info .payment-way dd ul {-ms-flex-wrap: wrap;flex-wrap: wrap}
.payment-info .payment-way dd li {width: 50%;padding: 5px}

/* 게시판 */
.board-list {}
.board-list li {font-size: 1rem;padding: 1rem;border-bottom: 0.1rem solid #ddd;color: #666;position: relative}
.board-list li:after {content: "\f112";font-family: 'LineAwesome';font-size: 1.2rem;color: #ccc;position: absolute;right: 1rem;top: 50%;-webkit-transform: translate(0,-50%);transform: translate(0,-50%)}
.board-list li a {display: block;margin-right: 1rem;}
.board-view {}
.board-view dl {}
.board-view dt {padding: 1rem;font-size: 1.083rem}
.board-view small {display: block;margin-top: 0.2em;color: #888}
.board-view dd {padding: 1rem;border-top: 0.1rem solid #ddd}
.board-list p {padding:1rem;}

@media all and (max-width: 360px) {
    html {font-size: 81.3%;}
    .join-form .card * {font-size: 1rem}
}
@media all and (min-width: 480px) {
    html {font-size: 150.0%;}
}