@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

* { 
	box-sizing: border-box; 
    outline:none;
    -webkit-tap-highlight-color : rgba(0,0,0,0);    
}
*:focus {
    outline: none;
    -webkit-tap-highlight-color : rgba(0,0,0,0);    
}
*, html, body {font-family: "Noto Sans KR", sans-serif;-webkit-text-size-adjust:none;}
html {height:100%; }
body {margin:0;padding:0;font-size:1em;font-weight: 400;height:100%; color:#000; }
html, body { width: 100%; }

/* html, body {
    position: absolute;
} */

html, body {
    position: relative;
    overflow: hidden;
}

body {
    /* position: absolute; */
    overflow: hidden;
}

body {
    /* position: absolute; */
    height: 100%;
    overflow: hidden;
    width: 100%;
}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-weight:700; font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button {cursor:pointer; background: 0 0; border: 0; border-radius: 0;}
input[type=button] {-webkit-appearance:none;}
input:focus { outline: none; }
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all;}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {font-size:1em;font-weight: 500;color:inherit;text-decoration:none;cursor: pointer;}
a:hover, a:focus, a:active {color:#000;text-decoration:none; -webkit-tap-highlight-color : rgba(0,0,0,0); outline:none;}

.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}


a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color : rgba(0,0,0,0); outline:none;
}

div, ul, li, p {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color : rgba(0,0,0,0); outline:none;
}

ul {padding:0; margin:0; list-style:none;}
li {padding:0; margin:0; list-style:none;}
ul:after{display:block;visibility:hidden;clear:both;content:""}
li:after{display:block;visibility:hidden;clear:both;content:""}


input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* IE10 �̻󿡼� input box �� �߰��� ����� ��ư ���� */
input::-ms-clear { display: none; }

/* input type number ���� ȭ��ǥ ���� */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* Select box ��Ÿ�� �ʱ�ȭ */ 
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* IE ���� Select box ȭ��ǥ ���� */ 
select::-ms-expand { display: none; }

header,footer {width:100%;}
header {position:absolute;top: 0px;z-index:9999;height:50px;line-height:50px;text-align:center;background-color:#fff;border-bottom:1px solid #e8e8e8;}
header.non-border {border:0;}
header.invisible {background: transparent; border: 0;}
header.invisible > a > img { height: 60px; }
header .btn-back {position:absolute;top:0;left:0;height:50px;display:block;}
header .btn-back img {display:block;height:50px;}

header .btn-back2 {position:absolute;top:0;left:0;height:50px;display:block;}
header .btn-back2 img {display:block;height:50px;}

header .btn-close {position:absolute;top:0;right:0;width:50px;height:50px;display:block;font-weight:700;font-size:1.5em;line-height:45px;}
header .btn-pass {position: absolute; top: 0; right: 25px; height: 50px; display: block; font-size: 0.825em; color: #13b9de; text-decoration: underline;}
header .btn-search {position: absolute; top: 0; right: 0; width: 50px; height: 50px; display: block;}
header .btn-search img {display: block; height: 50px;}
header h1 {font-size:1.125em}
header .logo {display:inline-block;height:50px;}
header .logo > img {display:block;height:50px;padding:10px 0;}

header .logo2 {display:inline-block;height:70px;}
header .logo2 > img {display:block;height:70px;padding:10px 0;}


.scroll_view_new {}

body > div { height: 100%;}
#container {width:100%;height:100% !important; overflow-y: auto; -webkit-overflow-scrolling:touch;}
#container:after {content:"";display:block;clear:both;}
#container.has-header {padding-top:50px;}

.scroll_view_new {	position: relative; z-index: 1; width:100%; height:100% !important; overflow-y: auto; -webkit-overflow-scrolling:touch;  }



.content {width:100%;height:100%;padding:20px 18px;}
.content.non-side {padding:0;}
.content-title h2 {font-size:1em;font-weight:500}
.content-title p {font-size:1em;font-weight:500;}
.content-title p > small {font-size: 0.75em; font-weight: 400; color: #575757;}
.content-body {width:100%;height:100%;}
img {max-width:100%;width:auto;}
input,select,textarea{height:36px;line-height:34px;border:0;background-color:#fff;font-size:1em;padding:0 10px;}

.text-center {text-align: center;}
.text-right {text-align: right;}

.sync-container {padding: 60px 25px 0; text-align: center;}
.sync-container .sync-title {font-size: 1.375em; font-weight: bold; margin-bottom: 15px;}
.sync-container .sync-text {font-size: 0.825em;}

.term-title {position: relative; overflow: hidden; padding: 20px; font-size: 1.25em; font-weight: bold;}
.term-title > p.description {font-size: 0.625em; font-weight: 400; margin-top: 8px; padding: 0; border: 0;}
.term-title > p.checkbox {position: absolute; top: 20px; right: 20px;}
.term-title > p.checkbox > span {width: 32px; height: 32px;}
.term-container {position: relative; overflow: hidden; border: 1px solid #000; padding: 30px; margin: 0 20px;}
.term-container > p.checkbox {display: block; width: 100%; font-size: 0.825em; margin-bottom: 30px;}
.term-container > p.checkbox:LAST-CHILD {margin: 0;}
.term-container > p.checkbox > .btn {float: right;}

.login-container {position: relative; overflow: hidden;}
.login-container .login-header {padding: 80px 0; text-align: center;}
.login-container .login-header h1 {width: 60%; margin: 0 auto;}
.login-container .login-header h2 {letter-spacing: 1px;}
.login-container .login-body {padding: 0 20px;}
.login-container .login-body div {position: relative; overflow: hidden; margin-bottom: 8px;}
.login-container .login-body div .login-icon {position: absolute; z-index: 2; width: 12px; left: 15px; top: 50%; transform: translateY(-50%);}
.login-container .login-body div .login-icon img {display: block;}
.login-container .login-body div input {width: 100%; padding-left: 40px; border-bottom: 1px solid #000;}
.login-container .login-body .login-btn {margin-top: 40px;}
.login-container .login-body .btn-login {display: block; width: 100%; background: #1b1e53; color: #fff; padding:  10px 0; text-align: center;}
.login-container .login-body .btn-signup {display: block; width: 100%; background: #dadada; color: #000; padding:  10px 0; text-align: center; margin-top: 8px;}
.login-container .login-body .login-help-btn {margin-top: 20px; text-align: center;}
.login-container .login-body .login-help-btn a {font-size: 0.825em; font-weight: 300; color: #13b9de;}
.login-container .login-body .login-help-btn span {font-size: 0.825em; font-weight: 300; color: #13b9de; margin: 0 8px;}

.form-area {padding:20px 0;position:relative; overflow: hidden;}
.form-area .common-input {padding: 10px 16px;width:-webkit-fill-available;border-bottom:1px solid #000;}
.form-area .common-input.w50p {width: calc(50% - 20px); float: left; margin: 0 10px;}
.form-area .search-input {padding: 10px 26px 10px 40px;width:-webkit-fill-available;border-bottom:1px solid #000;}
.form-area .phone-input {padding: 10px 16px 10px 100px;width:-webkit-fill-available;border-bottom:1px solid #000;}
.form-area .input-box {position:relative;overflow:hidden;}
.form-area .auth-input {
	width:130px;float:left;padding:0;margin-right:8px;font-size:2em;text-align:left; letter-spacing: 12px;
	padding-left: 10px; background-image: url('../images/auth_bg.png'); background-position: left 6px bottom; background-repeat: no-repeat;
	height: 50px;
}
.form-area .auth-input:LAST-CHILD {margin:0;}

.form-area span.clear-input {position: absolute; top: 50%; margin-top: -15px; right: 16px; display: none; cursor: pointer;}


.icon-flag {position:absolute;z-index:2;width:32px;left:0;text-align:center;padding:6px 0;margin-top:-2px;}
.icon-search {position:absolute;z-index:2;width:20px;left:0;text-align:center;padding:6px 0;margin-top:-2px;}
.country-num {position:absolute;z-index:2;left:40px;text-align:center;padding:0px 0 12px;top: 5px;}
.country-num2 {position:absolute;z-index:2;left:40px;text-align:center;padding:0px 0 12px;top: 25px;}

.content .btn-submit {position: absolute;bottom: 20px;z-index: 999;display: block;width: -webkit-fill-available;margin: 0 20px;padding: 10px 0;background-color: #1b1e53;color: #fff;font-size:1.25em;font-weight:500;text-align:center;letter-spacing:2px;}
.content .btn-cancel {position: absolute;bottom: 20px;z-index: 999;display: block;width: -webkit-fill-available;margin: 0 20px;padding: 10px 0;background-color: #bfbfbf;color: #000;font-size:1.25em;font-weight:500;text-align:center;letter-spacing:2px;}
.content .btn-request {position: absolute;bottom: 20px;z-index: 999;display: block;width: -webkit-fill-available;margin: 0 20px;padding: 10px 0;background-color: #455b94; color: #000;font-size:1.25em;font-weight:500;text-align:center;letter-spacing:2px;}
.form-area .btn-submit {position: relative; display: block; width: 100%; margin: 20px 0 0; padding: 10px 0; bottom: 0; background-color:#1b1e53;color:#fff;font-size:1.25em;font-weight:500;text-align:center;letter-spacing:2px;}
.btn-next {
	display: inline-block; width: 50px; height: 50px; background-image: url("../images/arr_next.png"); background-size: cover; background-repeat: no-repeat;
	position: fixed; bottom: 20px; right: 10px;
}
.btn-next:hover{transform: scale(1.05);}
.btn-next.absolute-bottom {bottom: 20px; right: 20px;}

.margin-top-5 {margin-top: 5px !important;}
.margin-top-20 {margin-top: 20px !important;}
.margin-top-30 {margin-top: 30px !important;}
.margin-top-100 {margin-top: 100px !important;}
.margin-bottom-15 {margin-bottom: 15px !important;}

#splash_logo {position:absolute;top:50%;left:0;right:0;padding:0 25%;transform:translate(0, -100%);text-align:center;}
#splash_copy {position: absolute;left:0;right:0;bottom:5%;font-size:0.625em;text-align:center;color:#878787;}

.page_01 .container-header {position:relative;height:60%;background-color:#efefef;}
.page_01 .container-header.main{height:30% !important;;background-color:#fff !important;;}
.page_01 .container-header h1 {position:absolute;top:50%;left:0;right:0;padding: 0 25%;transform:translate(0, -60%);text-align:center;}
.page_01 .content {position:relative;height:40%;background-color:#fff;}
.page_01 .content .content-header {padding-top:9%;padding-bottom:5%;}
.page_01 .content .content-header h2 {font-size:1.125em;text-align:center;}
.page_01 .content .form-area {padding:4% 9%;border-bottom:1px solid #e8e8e8;}
.page_01 .content .form-area form {position:relative;}
.page_01 .content .form-area .country-num {margin-top:0;}
.page_01 .content .form-area .phone-input {border:0;}
.page_01 .content .content-box {padding:9% 9% 0;}
.page_01 .content .content-box p {margin-bottom: 5px;}
.page_01 .content .content-box p a {color: #1e2155;}
.page_01 .content .sel-country img {height:1em;}

/* new */
.content-box .btn-area {position: relative;}
.content-box .btn-area .btn-submit {position: relative; margin: 0 auto 10px; bottom: unset; font-size: 1em; font-weight: 400;}
.content-box .btn-area .btn-cancel {position: relative; margin: 0 auto 20px; bottom: unset; font-size: 1em; font-weight: 400;}
/* --- */

.safe-btn {position: relative; overflow: hidden; padding: 15px 20px;}
.safe-btn > a {color: #13b9de;}
.safe-btn > a > span {display: inline-block; float: left; width: 20px; height: 20px; line-height: 20px; margin: 3px 8px 0 0; background: #13b9de; color: #fff; text-align: center; border-radius: 100%;}
.safe-form {padding: 0 20px;}
.safe-form > div {margin-top: 20px;}
.safe-form > div > span {display: block; margin-bottom: 5px;}
.safe-form > div input {width: 100%; border: 1px solid #bfbfbf;}
.person-asterisk {position: relative;}
.person-asterisk:BEFORE {content:"******"; position: absolute; top: 5px;}

.country-item {border-top:1px solid #e8e8e8; padding:10px 8px;}
.country-item:LAST-CHILD {border-bottom:1px solid #e8e8e8;}
.country-item.selected {color:#18badf;}
.country-item.no-item {border:0;text-align:center;color:#18badf;}
.country-item > p.radio {width: 100%; height: 36px; line-height: 34px;}
.icon-selected {display:inline-block;width:20px;float:right;}
.country-flag {height:36px;float:left;margin-right:12px;}
.list-box {margin-top:20px;}
.list-box:FIRST-CHILD {margin:0;}
.list-title {margin-bottom:8px;}

.auth-error {width:100%;padding:10px 0;background-color:#ebebeb;text-align:center;margin-top:16px;color:#f16379;}
.auth-timer {width:100%;margin-top:25px;color:#575757;}
a.password-link {color: #85adf7; padding-top: 10px;}
p.password-error {color: #ee8f84; padding-top: 10px;}

.map-area {width:100%;height:100%;}
.delivery-btn {position:absolute;z-index:999;top:70px;width:100%;padding:0 20px;}
.delivery-btn a {display:inline-block;width:100%;background-color:#fff;border-radius:50px;padding:0 10px;line-height:48px; font-size: 13px;}
.btn-map {height:30px;margin-top:-5px;}

.selectLocation-area {position:absolute;top:50px;z-index:999;width:100%;padding:10px 20px;background-color:#fff;}
.icon-selectLocation {position:absolute;padding:10px;width:35px;left:0;}
.selectLocation-area .form-area {padding:0 0 0 35px;}
.selectLocation-area .form-area div {position:relative;padding-left:52px;}
.selectLocation-area .form-area div label {position:absolute;top:6px;left:0;}
.selectLocation-area .form-area .input-div:FIRST-CHILD {margin-bottom: 22px;}
.selectLocation-area .form-area div input {width:100%;border:1px solid #bfbfbf;}

.voice-area {margin-top:100px;text-align:center;}
.voice-area p {font-size:2em;font-weight:700;}
.voice-area img {width:60%;margin-top:30px;}

.voice-result-area {padding-top:180px;text-align:center;}
.voice-result-area p {font-size:2em;font-weight:700;}
.voice-result-area .btn-area {position:absolute;bottom:30px;width:100%;}
.voice-result-area .btn-area .btn-submit {position: relative; margin-bottom: 20px; bottom: unset;}
.voice-result-area .btn-area .btn-submit:LAST-CHILD {margin-bottom:0;}

.delivery-item-area {padding:15px 20px;border-bottom:1px solid #e8e8e8; overflow: hidden; position: relative;}
.delivery-item-area.btn-full {padding: 0;}
.delivery-item-area.btn-full > a {display: block; padding: 15px 20px; font-weight: 400;}
.icon-calendar,
.icon-goods,
.icon-map,
.icon-credit,
.icon-list {display:inline-block;width:25px;margin-right:20px;}
.delivery-item-area.title {background-color:#f6f6f6;}
.delivery-item-area.history {color:#565656;}
.delivery-item-area.card {color: #575757; position: relative; overflow: hidden;}
.delivery-item-area.card.selected {background: #f6f6f6;}
.delivery-item-area.checkbox > p.checkbox {display: block; float: none;}
.delivery-item-area.card > div.card-input-group:FIRST-CHILD {width: 70%; float: left;}
.delivery-item-area.card > div.card-input-group:LAST-CHILD {width: 30%; float: left;}
.delivery-item-area.card input,
.delivery-item-area.card select {width: 100%;}


.delivery-item-area.submit {border:0;}
.delivery-item-area.submit .btn-submit {position:relative;bottom:unset;}
.delivery-item-area span {display:block;margin-top:8px;color:#565656;}
.delivery-item-area.card span {margin: 0;}
.delivery-item-area .btn-toggle {display: inline-block; width: 20px; float: right; margin-top: -2px;}

.delivery-voice-area {padding: 0 0 0 70px;}
.delivery-voice-area .icon-selectLocation {width: 70px; height: 100%; padding: 20px 20px; text-align: center;}
.delivery-voice-area .icon-selectLocation img {height: 76%;}
.delivery-voice-area .delivery-item-area {padding: 15px 20px 15px 0;}
.delivery-voice-area .delivery-item-area:LAST-CHILD {border: 0;}
.delivery-voice-area .delivery-item-area input { width: calc(100% - 25px); height: auto; line-height: normal;}
.delivery-voice-area .btn-voice {float:right; width: 25px;}

.goods-title {padding:15px 0;text-align:center;border-bottom:1px solid #e8e8e8;font-size:0.825em;font-weight:500}
.goods-title span {color:#13b9de;}
.goods-item {position: relative; overflow:hidden; display: block; padding:15px 20px;}
.goods-item .title {display: block; margin-bottom: 10px;}
.goods-item .title small {font-size:0.75em;}
.goods-item input {width:100%;padding:3px;border-bottom:1px solid #000;}
.goods-item a.btn {display: block; width: 100%; padding: 10px 0; color: #fff; text-align: center; background-color: #bfbfbf;}
.goods-item a.btn-disable {background: #dadada;}
.goods-item a.btn-submit {position: relative; bottom: 0; margin: 0;}
.goods-item .goods-file {position: relative; display: inline-block; float: left; width: 60px; height: 60px; margin-right: 5px;}
.goods-item .goods-file:LAST-CHILD {margin: 0;}
.goods-item .btn-fileup {display: inline-block; width: 60px; height: 60px; line-height: 58px; text-align: center; font-size: 2.5em; font-weight: 300; color: #bfbfbf; border: 1px solid #bfbfbf;}
.goods-item .frm-fileup {display: none;}
.goods-item .goods-file .goods-img {position: absolute; top: 0; left: 0; width: 60px; height: 60px; z-index: -1}
.goods-item .goods-file .goods-remove {position: absolute; top: 0; right: 0; width: 20px; height: 20px; z-index: 2;}
.goods-item textarea {width: 100%; height: 150px; border: 1px solid #bfbfbf; padding: 10px;}

#delivery-date {padding: 20px 0; border-bottom: 1px solid #e8e8e8;}

.ui-datepicker {position: absolute; width: calc(100% - 60px); left: 30px !important; transform: translateX(0%) !important;}
.ui-datepicker-div {left:50% !important;transform: translateX(-50%) !important;}
.ui-widget.ui-widget-content {border: 0;  text-align: center;}
.ui-widget-header {background: #fff; border: 0; display: inline-block;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {position: relative; display: inline-block; overflow: hidden; top: 0; }
.ui-datepicker .ui-datepicker-prev {float: left;}
.ui-datepicker .ui-datepicker-next {float: right;}
.ui-datepicker .ui-datepicker-prev span {background-image: url("../images/icon_prev.png"); background-position: left; background-size: contain;}
.ui-datepicker .ui-datepicker-next span {background-image: url("../images/icon_next.png"); background-position: right; background-size: contain;}
.ui-datepicker table {border-top: 1px solid #000;}
.ui-datepicker th {padding: .3em;}
.ui-datepicker th.ui-datepicker-week-end:first-child {color: #fc5d5d;}
.ui-datepicker th.ui-datepicker-week-end:last-child {color: #318af7;}
.ui-datepicker td span, .ui-datepicker td a {position: relative; text-align: center; margin: .4em;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	background: #fff; border: 0; color: #000; border-radius: 0% !important; 
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background: #ff5252; border: 0; color: #fff;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {background: #c4edf7; color: #052e38;}
.ui-datepicker td.ui-datepicker-week-end:first-child a { color: #fc5d5d; }
.ui-datepicker td.ui-datepicker-week-end:last-child a { color: #318af7; }
.ui-datepicker td.date-request a:before {content: ''; display: block; width: 3px; height: 3px; position: absolute; top: 0; left: 50%; margin-left: -1.5px; border-radius: 100%; background: #00a5ee;}

.ui-datepicker td.date-reser a {
	
	color: #fff !important;
	font-weight: bold;
	background: transparent;
	
}
.ui-datepicker td.date-reser a:before {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: calc(50% - 12.5px);
    left: calc(50% - 12.5px);
    border-radius: 100%;
    background: red;
	z-index: -1;
	margin-top: 1px;
}

.ui-datepicker td.date-range-start{background: #006b80;border-radius: 50% 0 0 50%}  
.ui-datepicker td.date-range-start a{background: #006b80;}
.ui-datepicker td.date-range-end{background: #006b80;border-radius: 0 50% 50% 0;}
.ui-datepicker td.date-range-end a{background: #006b80; color: #000;}
.ui-datepicker td.date-range {background: #006b80; opacity: 1;}
.ui-datepicker td.date-range a{background: #006b80; color: #000;}

p.checkbox {display:inline-block;vertical-align:middle;margin-top:-2px;float:right; cursor: pointer;}
p.checkbox.pull-left {float: left; margin-right: 8px;}
p.checkbox.trans-middle {transform: translateY(50%);}
p.checkbox .btn {display:inline-block;width:20px;height:20px;}
p.checkbox .switch {display: inline-block; width: 40px; height: 26px;}
p.checkbox .switch img {width: auto;}
p.checkbox .switch.alarm {display: inline-block; width: 47px; height: auto; color: #000;}
p.checkbox.pull-left .switch.alarm {position: relative; top: auto; right: auto; transform: unset;}
p.checkbox .switch.alarm img {width: 18px; margin-left: 3px;}

p.radiobox {display: block; margin-top: -2px; cursor: pointer;}
p.radiobox .btn {display: inline-block; width: 20px; height: 20px; float: right;}
p.radiobox input {position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; display: none;}

p.checkbox input {position:absolute;top:0;left:0;z-index:-1;opacity:0;display: none;}



p.checkbox_no {display:inline-block;vertical-align:middle;margin-top:-2px;float:right; cursor: pointer;}
p.checkbox_no.pull-left {float: left; margin-right: 8px;}
p.checkbox_no.trans-middle {transform: translateY(50%);}
p.checkbox_no .btn {display:inline-block;width:20px;height:20px;}
p.checkbox_no .switch {display: inline-block; width: 40px; height: 26px;}
p.checkbox_no .switch img {width: auto;}
p.checkbox_no .switch.alarm {display: inline-block; width: 47px; height: auto; color: #000;}
p.checkbox_no.pull-left .switch.alarm {position: relative; top: auto; right: auto; transform: unset;}
p.checkbox_no .switch.alarm img {width: 18px; margin-left: 3px;}

p.checkbox_no input {position:absolute;top:0;left:0;z-index:-1;opacity:0;display: none;}



.rangeCalculation-area {position: absolute; width: 100%; bottom: 0; padding: 20px; background: #fff; z-index: 10;}
.rangeCalculation-area .rangeCalculation-box {position: relative; display: block; border: 1px solid #bfbfbf; padding: 20px 0; text-align: center; font-weight: 500;}
.rangeCalculation-area .rangeCalculation-box strong {font-size: 1.5em;}
.rangeCalculation-area .rangeCalculation-box > div:NTH-CHILD(2) {position: relative; padding-right: 32px;}
.rangeCalculation-area .rangeCalculation-box .btn-plus {position: absolute; display: inline-block; width: 32px; height: 32px; top: 2px; margin-left: 6px; transition: all .3s;}
.rangeCalculation-area .rangeCalculation-box .btn-plus.active {transform:rotate(45deg);}
.rangeCalculation-area .rangeCalculation-box a.btn-plus > img {display: block;}
.rangeCalculation-area .rangeCalculation-box > .control-area {position: relative; text-align: center; margin-top: 10px; display: none;}
.rangeCalculation-area .rangeCalculation-box > .control-area > div {display: inline-block; overflow: hidden; height: 36px; line-height: 36px;}
.rangeCalculation-area .rangeCalculation-box > .control-area > div.control-box {border: 1px solid #000; height: 38px; line-height: normal;}
.rangeCalculation-area .rangeCalculation-box > .control-area > div > input.count {width: 80px; text-align: center;}
.rangeCalculation-area .rangeCalculation-box > .control-area > div > input.btn-control {font-size: 2em; font-weight: 600; width: 36px; height: 36px;}
.rangeCalculation-area .rangeCalculation-box > .control-area > div > input.btn-control:FIRST-CHILD {margin-top: -8px;}
.rangeCalculation-area .btn-submit {position: relative; display: block; width: 100%; margin: 20px 0 0; padding: 10px 0; bottom: 0; background-color:#1b1e53;color:#fff;font-size:1.25em;font-weight:500;text-align:center;letter-spacing:2px;}

.matching-area {padding-top: 30px; text-align: center; }
.matching-area p {font-size: 1.25em;font-weight: 700;}
.matching-area img.matching-loading {width: 60%; margin-top: 30px; animation: circle 1s linear infinite;}
@keyframes circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.matching-area > div.player-area {background: #f6f6f6; padding: 30px 0; margin: 30px 0; overflow: hidden;}
.user-icon {width: 80px; height: 80px; border-radius: 50%; background-color: #bfbfbf; background-image: url("../images/icon_user.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.user-icon-mod {width: 80px; height: 80px; border-radius: 50%; background-color: #bfbfbf; background-image: url("../images/icon_user_mod.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.matching-area .user-icon {margin: 0 auto 5px;}
.matching-area .player-name {font-size: 1.25em; font-weight: 600;}
.matching-area .player-info-box {position: relative; width: 50%; float: left;}
.matching-area .player-info-box:FIRST-CHILD:AFTER {content:""; position: absolute; top: 0; right: 0; height: calc(100% - 20px); margin: 10px 0; border-right: 1px solid #000;}
.matching-area .player-info-icon {display: inline-block; width: 24px;}
.matching-area .player-info-score {font-weight: 600;}
.matching-area .btn-area {position: relative; margin-top: 100px;}
.matching-area .btn-area .btn-submit {position: relative; margin-bottom: 20px; bottom: unset;}
.matching-area .btn-area .btn-submit:LAST-CHILD {margin-bottom:0;}
.matching-area .btn-area .btn-cancel {position: relative; bottom: unset;}
#timer {font-size: 2em; margin-top: 20px;}

.player-container {}
.player-container > div {padding: 15px 20px; border-bottom: 1px solid #e8e8e8;}
.player-container > div:LAST-CHILD {border: 0;}
.player-container > div > span {display: block; color: #1e2155; font-weight: 500;}
.player-container .player-area {background: #1e2155; padding: 30px 0; overflow: hidden; color: #fff; text-align: center; display: table; width: 100%;}
.player-container .player-area > div {display: table-cell; vertical-align: middle;}
.player-container .player-area > div:FIRST-CHILD {width: 40%;}
.player-container .player-area > div > .user-icon {display: inline-block; width: 60px; height: 60px;}
.player-container .player-area > div.player-info {position: relative; overflow: hidden;}
.player-container .player-area > div.player-info > div.player-info-box {position: relative; width: 50%; float: left;}
.player-container .player-area > div.player-info > div.player-info-box:FIRST-CHILD:AFTER {content:""; position: absolute; top: 0; right: 0; height: calc(100% - 20px); margin: 10px 0; border-right: 1px solid #fff;}
.player-container .player-area > div.player-info > div.player-info-box > .player-info-icon {display: inline-block; width: 24px;}
.player-container .player-area > div.player-info > div.player-info-box > .player-info-score {font-weight: 600;}
.player-container .btn-area {position: relative;}
.player-container .btn-area .btn-submit {position: relative; margin: 0 auto 20px; bottom: unset; font-size: 1em; font-weight: 400;}
.player-container .btn-area .btn-cancel {position: relative; margin: 0 auto 20px; bottom: unset; font-size: 1em; font-weight: 400;}

.rating-container {}
.rating-container .player-area {background: #1e2155; padding: 30px 0; overflow: hidden; color: #fff; text-align: center; display: table; width: 100%;}
.rating-container .player-area > div > .user-icon {margin: 0 auto; width: 60px; height: 60px;}
.rating-container .player-area > div > .description {font-size: 0.75em; padding: 10px 0;}
.rating-container .player-area > div.player-info {position: relative; overflow: hidden;}
.rating-container .player-area > div.player-info > div.player-info-box {position: relative; width: 33.3%; float: left; font-size: 0.825em;}
.rating-container .player-area > div.player-info > div.player-info-box:AFTER {content:""; position: absolute; top: 0; right: 0; height: calc(100% - 20px); margin: 10px 0; border-right: 1px solid #8d8fa9;}
.rating-container .player-area > div.player-info > div.player-info-box:LAST-CHILD:AFTER {display: none;}
.rating-container .player-area > div.player-info > div.player-info-box > div.player-info-title {font-weight: 400;}
.rating-container .player-area > div.player-info > div.player-info-box > div.player-info-score {font-weight: 500;}
.rating-content {text-align: center;}
.rating-content .description {padding: 30px; font-size: 0.825em;}
.rating-content  .rating-btn-area {position: relative; overflow: hidden; text-align: center; margin-bottom: 30px;}
.rating-content .btn-area {position: relative;}
.rating-content .btn-area .btn-submit {position: relative; bottom: unset; font-size: 1em; font-weight: 400;}

.content.has-footer {height: auto; margin-bottom: 50px;}

.player-search .form-area {padding:0 0 10px 0;}
.player-search .form-area label {left: 10px}
.player-search .form-area input {border: 1px solid #bfbfbf;}
.player-search .player-list {}
.player-search .player-list > p {margin-bottom: 6px;}
.player-search .player-list > p > span {color: #13b9de; }
.player-search .player-list > div {border: 1px solid #bfbfbf; position: relative; overflow: hidden; margin-bottom: 10px;}
.player-search .player-list > div:LAST-CHILD {margin: 0;}
.player-search .player-list > div > {display: table; width: 100%;}
.player-search .player-list > div > div { float: left; vertical-align: middle; position: relative; font-weight: 400; min-height: 110px;}
.player-search .player-list > div > div:FIRST-CHILD { position: absolute; left: 0px; top: calc(50% - 50px); height: 100%; width: 30%; text-align: center; }
.player-search .player-list > div > div:LAST-CHILD {width: calc(100% - 128px); margin-left: 128px; padding: 10px 15px;}
.player-search .player-list > div > div:LAST-CHILD:before {
	content:""; position: absolute; top: 0; left: 0; height: calc(100% - 20px); margin: 10px 0; border-left: 4px dotted #d8d8d8;
}
.player-search .player-list > div > div > div.user-icon {width: 60px; height: 60px; display: inline-block;}
.player-search .player-list > div > div > div > span {color: #666; width: 90px; display: inline-block;}
.player-search .player-list > div > div > div > span.range {color: #000; float: right; width: auto;}

.player-search-container {position: relative; width: 100%; overflow: hidden; background: rgba(0,0,0,.3); min-height: 150px;}
.player-search-container .block {padding: 0 0 20px 0;}
.player-search-container .block-header {background: transparent; overflow: hidden; padding: 5px 10px;}
.player-search-container .block-option {float: right;}
.player-search-container .block-option .btn {
	display: inline-block; border-radius: 15px; width: 40px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; font-weight: bold;
}
.player-search-container .block-option .btn-close {background: #fff; color: #1b1e53;}
.player-search-container .player-list {}
.player-search-container .player-list .player-block {width: 90%; border: 1px solid #bfbfbf; background: #fff; min-height: 220px; }
.player-search-container .player-list .player-block > div {position: relative; overflow: hidden; display: table; width: 100%; background: #fff; min-height: 164px;}
.player-search-container .player-list .player-block > div > div {display: table-cell; vertical-align: middle; position: relative; }
.player-search-container .player-list .player-block > div > div:FIRST-CHILD {width: 30%; text-align: center;}
.player-search-container .player-list .player-block > div > div:FIRST-CHILD:AFTER {content:""; position: absolute; top: 0; right: 0; height: calc(100% - 20px); margin: 10px 0; border-right: 4px dotted #d8d8d8;}
.player-search-container .player-list .player-block > div > div:LAST-CHILD {width: 70%; padding: 10px 10px 10px 15px;  }
.player-search-container .player-list .player-block > div > div:LAST-CHILD > div { padding-left: 90px;}
.player-search-container .player-list .player-block > div > div:LAST-CHILD > div:first-child { padding-left: 0px;}
.player-search-container .player-list .player-block > div > div > div.user-icon {width: 60px; height: 60px; display: inline-block;}
.player-search-container .player-list .player-block > div > div > div > span {
	color: #bfbfbf; width: 90px; display: inline-block; position: absolute; left: 13px;
}
.player-search-container .player-list .player-block > div > div > div > span.range {position: relative; left: 0px; color: #000; float: right; width: auto;}
.player-search-container .player-list .player-block > a.btn-submit {position: relative; margin: 0 10px 10px; bottom: 0; font-size: 1em; letter-spacing: normal;}

.player-search-container .player-list .request-content {width: 90%; margin: 0; border: 1px solid #bfbfbf; background: #fff;}
.player-search-container .player-list .request-content > a.btn-submit {position: relative; margin: 0 10px 10px; bottom: 0; font-size: 1em; letter-spacing: normal;}

.theme-bg {background: #1b1e53; color: #fff;}
.title-bg {background: #f6f6f6;}
.theme-color {color: #1b1e53;}
.color575757 {color: #575757;}
.color13b9de {color: #13b9de;}
.no-boarder {border: 0 !important;}

.range-scale {position: relative; padding-bottom: 30px;}
.range-scale > p {margin-bottom: 10px;}
.range-scale .ui-widget.ui-widget-content {position: relative; height: 10px; border-left: 1px solid #000; border-right: 1px solid #000; border-radius: 0;}
.range-scale .ui-widget.ui-widget-content:AFTER {content:""; position: absolute; display: block; width: 100%; top: 50%; border-top: 1px solid #000;}
.range-scale .ui-widget.ui-widget-content .custom-handle {width: auto; height: auto; background: transparent; top: 50%; margin: 10px 0 0; transform: translate(-50%, -50%);}

.range-scale .ui-widget.ui-widget-content .ui-state-focus {border: 0;}
.range-scale > div { position: relative; }
.range-scale .scale-left {display: inline-block; float: left; margin-top: 10px; transform: translateX(-50%);}
.range-scale .scale-left1 {position: absolute; left: calc(10% - 9px); top: 20px; }
.range-scale .scale-left2 {position: absolute; left: calc(20% - 4px); top: 20px; }
.range-scale .scale-left3 {position: absolute; left: calc(30% - 9px); top: 20px; }
.range-scale .scale-left4 {position: absolute; left: calc(40% - 4px); top: 20px; }
.range-scale .scale-left5 {position: absolute; left: calc(50% - 9px); top: 20px; }
.range-scale .scale-left6 {position: absolute; left: calc(60% - 4px); top: 20px; }
.range-scale .scale-left7 {position: absolute; left: calc(70% - 9px); top: 20px; }
.range-scale .scale-left8 {position: absolute; left: calc(80% - 4px); top: 20px; }
.range-scale .scale-left9 {position: absolute; left: calc(90% - 9px); top: 20px; }
.range-scale .scale-right {position: absolute; right: -12px; top: 20px; }

.range-scale .scale2-left1 {position: absolute; left: calc(10% - 9px); top: 20px; }
.range-scale .scale2-left2 {position: absolute; left: calc(20% - 4px); top: 20px; }
.range-scale .scale2-left3 {position: absolute; left: calc(30% - 9px); top: 20px; }
.range-scale .scale2-left4 {position: absolute; left: calc(40% - 4px); top: 20px; }
.range-scale .scale2-left5 {position: absolute; left: calc(50% - 9px); top: 20px; }
.range-scale .scale2-left6 {position: absolute; left: calc(60% - 4px); top: 20px; }
.range-scale .scale2-left7 {position: absolute; left: calc(70% - 9px); top: 20px; }
.range-scale .scale2-left8 {position: absolute; left: calc(80% - 4px); top: 20px; }
.range-scale .scale2-left9 {position: absolute; left: calc(90% - 9px); top: 20px; }



.player-profile {display: table; width: 100%; padding: 15px 20px; position: relative; overflow: hidden;}
.player-profile > div {display: table-cell; vertical-align: middle;}
.player-profile .user-icon {display: inline-block; width: 60px; height: 60px;}
.player-profile > .profile-file {position: relative; display: block; width: 70px; height: 70px; margin: 10px auto;}
.player-profile > .profile-file > .user-icon-mod {display: block; width: 70px; height: 70px;}
.player-profile > .profile-file > img.profile-img {position: absolute; top: 0; left: 0; width: 70px; height: 70px; border-radius: 50%; z-index: -1;}
.player-profile > .profile-file > input {display: none;}
.player-profile > div > div {line-height: 1;}
.player-profile > div > div.player-name {font-weight: 500;}
.player-profile > div > div.player-phone,
.player-profile > div > div.player-email {font-weight: 300;}
.player-profile > div > span {position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
.player-profile > div > span > a > img {width: 13px;}
.profile-bg {background: #f0f0f0;}
.profile-title {color: #575757; margin-bottom: 6px;}


.list-item {padding: 15px 20px; font-size: 0.835em; border-bottom: 1px solid #e8e8e8; position: relative; overflow: hidden;}
/* .list-item:HOVER {background: #f6f6f6; color: #000;} */
.list-item.btn-full {padding: 0;}
.list-item.btn-full > a {display: block; padding: 15px 20px;}
.list-item.selected {background: #1b1e53; color: #fff;}
.list-item a {font-weight: 400; /* color: #13b9de; */}
/* .list-item a.defualt {font-weight: 400; color: #000;} */
.list-item a.schedule-btn {display: inline-block; float: right; padding: 5px 20px; background: #455b94; color: #fff;}
.list-item a.stay-btn {display: inline-block; float: right; padding: 5px 20px; background: #455b94; color: #fff;}
.list-item .write-date {font-size: 0.75em; color: #6f6f6f;}
.list-item .write-date.horizon {display: inline-block;}
.list-item span {position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
.list-item span.name {position: relative; top: unset; transform: unset; right: unset; color: #13b9de;}
.list-item span.pull-left {position: unset; float: left; margin-right: 8px; transform: none;}
.list-item span img {width: 13px;}
.list-item span.icon-lg > img {display:block; width: 24px;}
.list-item.description {border: 0;}
p.description {padding: 0 20px 15px; color: #525252; font-size: 0.75em; line-height: 1.3; border-bottom: 1px solid #e8e8e8;}
.list-item.input {padding: 0 20px; cursor: auto;}
.list-item.input input,
.list-item.input select {padding: 15px 0; width: 100%; height: 50px;}
.list-item.input input:FOCUS {border-bottom: 1px solid #000;}
.list-item.input .card-input-group:FIRST-CHILD {width: 70%; float: left;}
.list-item.input .card-input-group:LAST-CHILD {width: 30%; float: left;}
.list-item.select {overflow: visible;}
.list-item.select > select {padding: 15px 0; width: 100%; height: 50px;}
.list-item.player-input {border: 0;}
.list-item.player-input > div {letter-spacing: -1px;}
.list-item.player-input input {width: 100%; border-bottom: 1px solid #000;}
.list-item.player-input .player-checkbox {position: relative; overflow: hidden; margin: 10px -1px;}
.list-item.player-input input[type="checkbox"] {display: none;}
.list-item.player-input label {display: block; width: calc(33.3% - 4px); float: left; background: #dadada; padding: 5px 0; margin: 2px; text-align: center;}
.list-item.player-input label.checked {background: #1b1e53; color: #fff;}
.list-item.card {padding: 0 20px; cursor: auto;}
.list-item.card span {margin-right: 30px;}
.list-item.card > div {padding: 15px 0; width: 100%; height: 50px; border-bottom: 1px solid #000;}
.list-item.password input {width: 100%; border: 1px solid #bfbfbf; margin-top: 5px; height: 30px; line-height: 28px;}
.list-item.password .description {font-size: 0.825em; margin-top: 5px; color: #575757;}
.list-item.place {padding-left: 40px;}
.list-item.message .user-icon {display: inline-block; float: left; width: 38px; height: 38px; margin-right: 10px;}
.list-item.level > a > div {display: table; width: calc(100% - 20px);}
.list-item.level > a > div > div {display: table-cell; width: 33.3%;}
.list-item.history {padding: 7px 20px;}
.list-item.history > span > a {margin-left: 8px;}
.list-item.btn {border: 0; padding-top: 50px;}
.list-item .btn-submit,
.list-item .btn-cancel,
.list-item .btn-request {position: relative;  bottom: 0; margin: 0 auto; color: #fff;}
.list-item .btn-cancel {background: #393939;}
.list-item.btn.confirm {margin: 0 -5px;}
.list-item.btn.confirm > a {width: calc(50% - 10px); margin: 0 5px; float: left; font-size: 1em; letter-spacing: normal;}
.list-item > div.alarm-div {display: inline-block;}
.list-item .bank {float:left;width:30%}
.list-item .account {float:right; width:70%;}

.delivery-history {padding: 15px 20px;}
.delivery-history .delivery-history-header {position: relative; overflow: hidden; font-weight: 500;}
.delivery-history .delivery-history-header span {display: inline-block; margin-right: 8px;}
.delivery-history .delivery-history-header span img {width: 13px; margin-top: -4px;}
.delivery-history .delivery-history-calculation {width: 80%; margin: 30px 0 30px 20%;}
.delivery-history .delivery-history-calculation > p {font-size: 0.835em; text-align: right; line-height: 1.6;}
.delivery-history .delivery-history-calculation > p:NTH-CHILD(3) {border-top: 1px solid #e8e8e8; margin-top: 5px; padding-top: 5px;}
.delivery-history .delivery-history-calculation > p:LAST-CHILD {border-top: 1px solid #000; font-size: 1em; font-weight: 400; margin-top: 5px; padding-top: 5px;}
.delivery-history .delivery-history-calculation > p > span {float: left; margin-left: 20px; color: #575757;}
.history-place {position: relative; overflow: hidden; border-bottom: 1px solid #e8e8e8; padding: 0 0 0 30px;}
.history-place > span {position: absolute; top: 0; left: 0; width: 50px; height: 100%; padding: 18px 10px 15px 10px; text-align: center;}
.history-place > span > img {height: 100%;}
.history-place > div > div > span {float: left; padding: 15px 10px; font-size: 0.835em;}
.history-place > div > div:LAST-CHILD > div.list-item {border: 0;}

.level-container {position: relative; padding: 30px; overflow: hidden; text-align: center;}
.level-container .level-text {font-weight: 500; line-height: 1.3;}
.level-container .level-text p {font-weight: 400; font-size: 0.75em;}
.level-container .level-content {padding: 10px;}
.level-container .level-content p {font-size: 1.25em; font-weight: bold; line-height: 1.1;}
.level-container .level-detail {font-size: 0.75em; font-weight: 400;}
.level-container .level-detail img {width: 11px; margin-top: -2px; margin-left: 5px;}
.level-container .level-history {position: relative; overflow: hidden; margin-top: 30px;}
.level-container .level-history > div {width: calc(33% - 10px); height: 73px; float: left; margin: 0 5px; padding: 5px; background: #f0f0f0;}
.level-container .level-history > div > p {font-size: 0.75em; color: #000;}
.level-container .level-history > div > p:first-child {letter-spacing: -1px;}
.level-container .level-history > div > p.score {font-size: 1.5em; font-weight: bolder;}
.level-container .level-history > div > p.people {color: #575757;}

.history-calculation {padding: 15px 20px;}
.history-calculation > p {font-size: .835em; text-align: right; font-weight: 300;}
.history-calculation > p > span {float: left;}
.history-calculation > p:LAST-CHILD {border-top: 1px solid #000; font-size: 1em; font-weight: 400; margin-top: 5px; padding-top: 5px;}

.schedule-btn {position: relative; overflow: hidden; width: 50%; float: left; padding: 10px; border: 1px solid #bfbfbf; text-align: center;}
.schedule-btn:FIRST-CHILD {border-right: 0;}
.stay-btn {position: relative; overflow: hidden; width: 50%; float: left; padding: 10px; border: 1px solid #bfbfbf; text-align: center;}
.stay-btn:FIRST-CHILD {border-right: 0;}


.schedule-destination {position: relative;}
.schedule-destination input {width: calc(100% - 35px); padding: 0; border-bottom: 1px solid #000;}
.schedule-destination span {position: relative; top: 0; right: 0; transform: unset;}
.schedule-destination span img {width: 32px; height: 32px;}

.coupon-container {position:relative; width: 100%; height: 100%; overflow: hidden; background: #e8e8e8;}
.coupon-container .block {padding: 10px 20px;}
.coupon-container .block-header {padding-bottom: 10px; font-size: 0.825em; text-align: center;}
.coupon-container .coupon-list {}
.coupon-container .coupon-list .coupon-block {width: 100%; background: #fff; border: 1px solid #bfbfbf; padding: 15px 0; text-align: center; font-weight: bold; margin-bottom: 15px;}
.coupon-container .coupon-list .coupon-block .coupon-date {font-size: 0.75em; font-weight: 400; color: #6e6e6e;}
.mt-30 {margin-top: 30px;}

p.radio {display: inline-block; position: relative; vertical-align: middle;}
p.radio > input {position: absolute; top: 0; left: 0; z-index: -1; display: none; opacity: 0;}
p.radio > span.icon {display: inline-block; width: 40px; height: 40px; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: cover;}
p.radio > label {display: block; color: #c0bdbd;}
p.radio.check > span.icon {width: 20px; height: 20px; background-size: contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
p.radio.check.checked > span.icon {background-image: url("../images/icon-selected.png");}
p.radio.icon-rating-01 > span.icon {background-image: url("../images/icon_rating_01_off.png");}
p.radio.icon-rating-01.checked > span.icon {background-image: url("../images/icon_rating_01_on.png");}
p.radio.icon-rating-01.checked > label {color: #ff3816;}
p.radio.icon-rating-02 > span.icon {background-image: url("../images/icon_rating_02_off.png");}
p.radio.icon-rating-02.checked > span.icon {background-image: url("../images/icon_rating_02_on.png");}
p.radio.icon-rating-02.checked > label {color: #ff7b1a;}
p.radio.icon-rating-03 > span.icon {background-image: url("../images/icon_rating_03_off.png");}
p.radio.icon-rating-03.checked > span.icon {background-image: url("../images/icon_rating_03_on.png");}
p.radio.icon-rating-03.checked > label {color: #ffd31d;}
p.radio.icon-rating-04 > span.icon {background-image: url("../images/icon_rating_04_off.png");}
p.radio.icon-rating-04.checked > span.icon {background-image: url("../images/icon_rating_04_on.png");}
p.radio.icon-rating-04.checked > label {color: #a0dd39;}
p.radio.icon-rating-05 > span.icon {background-image: url("../images/icon_rating_05_off.png");}
p.radio.icon-rating-05.checked > span.icon {background-image: url("../images/icon_rating_05_on.png");}
p.radio.icon-rating-05.checked > label {color: #22b525;}

.price-area {position: relative; overflow: hidden; display: block; padding: 15px 20px;}
.price-area > div {text-align: right;}
.price-area > div.price-line {margin: 3px 0; border-top: 1px solid #000;}
.price-area > div:LAST-CHILD {font-size: 1.125em; font-weight: 500;}
.price-area > div > span {float: left;}
.price-matcing-txt {text-decoration: underline; text-align: center; padding: 15px 0;}
.price-matcing-txt > img {display: block; margin: 0 auto; padding-bottom: 15px; width: 3px;}

.delivery-completed {text-align: center; padding-top: 50%;}
.delivery-completed strong {font-size: 1.125em; margin-bottom: 10px; display: block;}
.delivery-completed p {font-size: 0.825em; margin-bottom: 10px;}
.delivery-completed p:LAST-CHILD {margin: 0;}

.find-text {text-align: center;}
.find-input-group {display: table; width: 80%; margin: 40px auto 0; border-bottom: 1px solid #000; position: relative; overflow: hidden;}
.find-input-group > * {display: table-cell;}
.find-input-group > input {width: 100%; text-align: center; font-size: 1.25em;}
.find-input-group2 {display: table; width: 50%; margin: 40px auto 0; border-bottom: 1px solid #000; position: relative; overflow: hidden;}
.find-input-group2 > div {display: table-cell;}
.find-input-group2 > div.auth-timer {width: auto; font-size: 0.75em;}
.find-input-group2 > div > input {width: 100%; text-align: lefet; font-size: 1.25em;}

.find-result {width: fit-content; margin: 0 auto; padding: 0 15px 5px; border-bottom: 1px solid #000;}

.find-btn {text-align: center; margin: 15px 0 0;}
a.btn-help {color: #13b9de; text-decoration: underline;}

ul.tab-nav {
	width:100%; 
	overflow: hidden; 
	display: flex;
	align-items: center;
	justify-content: space-between;
}
ul.tab-nav > li {
	width: 50%; 
	border-bottom: 1px solid #e8e8e8; 
	background: #fff; 
	color: #575757; 
	padding: 15px 0; 
	text-align: center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
ul.tab-nav > li.on {
	border-bottom: 2px solid #1b1e52; 
	color: #1b1e52; 
	font-weight: bold;
}
ul.tab-nav > li.on > a {
	color: #1b1e52; 
	font-weight: bold;
}
ul.tab-nav > li > span {
	width: 25px;
	height: 25px;
	padding-bottom: 1.5px;
	background-color: red;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
	display: none;
}
ul.tab-nav > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
}
ul.tab-nav > li > a > span {
	width: 25px;
	height: 25px;
	padding-bottom: 1.5px;
	background-color: red;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
	display: none;
}

div.tab-content {position: relative; overflow: hidden; font-size: 0.825em;}
div.history-content {background: #fff; padding: 20px;}
div.history-content.no-data {text-align: center; padding: 50% 0;}
div.history-date-area {position: relative; overflow: hidden; padding:10px 10px 10px 46px; border: 1px solid #bfbfbf;}
div.history-date-area > i.icon-calendar {position: absolute; top: 0; left: 0; width: auto; height: 100%; padding: 15px; margin: 0;}
div.history-date-area > i.icon-calendar > img {max-width: unset; height: 100%;}
div.history-date-area > div {height: 36px;}
div.history-date-area > div > input {width: calc(50% - 10px); padding: 0 5px; text-align: center;}
div.history-content-area {border: 1px solid #bfbfbf; margin-top: 20px;}
div.history-content-area > div.history-content-title {position: relative; padding: 10px 10px 10px 68px; background: #dadada; overflow: hidden; cursor: pointer;}
div.history-content-area > div.history-content-title.type02 {background: #e6e6ec;}
div.history-content-area > div.history-content-title > i.icon-list {
	position: absolute; top: 20px; left: 20px; width: auto; height: 50px; padding: 0px; margin: 0;
}
div.history-content-area > div.history-content-title > i.icon-list > img { width: 35px; }
div.history-content-area > div.type02 > i.icon-list > img { width: 25px; }
div.history-content-area > div.history-content-title > span.btn-toggle {
	position: absolute; top: -5px; right:0; padding: 10px; width: 35px; height: 100%; line-height: 38px; transition: all 0.7s; transform: rotate(180deg);
}
div.history-content-area > div.history-content-title.open > span.btn-toggle {transform: rotate(0deg);}
div.history-content-area > div.history-content-title > div {width: calc(100% - 20px); float: left;}
div.history-content-area > div.history-content-title > div > p.goods-name {font-weight: 500;}
div.history-content-area > div.history-content-title.type02 > div > p.goods-name {color: #1b1e53;}
div.history-content-area > div.history-content-body {position: relative; background: #fff;}
div.history-content-area > div.history-content-body > div {border-bottom: 1px solid #bfbfbf; padding: 10px;}
div.history-content-area > div.history-content-body > div:NTH-CHILD(3) {font-weight: bold;}
div.history-content-area > div.history-content-body > div:LAST-CHILD {border: 0; padding: 0;}
div.history-content-area > div.history-content-body > div > p > img {width: 13px; margin-top: -2px; margin-right: 5px;}
div.history-content-area > div.history-content-body > div > p > img.icon-circle {width: 7px; margin: -2px 5px 0;}
div.history-content-area > div.history-content-body > div:FIRST-CHILD > p:NTH-CHILD(2) {padding-left: 20px;}
div.history-content-area > div.history-content-body > div > ul {position: relative; overflow: hidden;}
div.history-content-area > div.history-content-body > div > ul > li {float: left; width: 25%; padding: 10px; background: #ececec; border-right: 1px solid #bfbfbf; text-align: center; cursor: pointer;}
div.history-content-area > div.history-content-body > div > ul > li:LAST-CHILD {border: 0;}
div.history-content-area > div.history-content-body > div > ul > li.on {background: #1b1e53; color: #fff;}
div.history-content-area > div.history-content-body > div > ul > li.on > a { color: #fff; }

.request-content {margin: 0 20px 15px; border: 1px solid #bfbfbf;}
.request-content .request-header {position: relative; padding: 10px 15px; background: #f0f0f0; overflow: hidden; font-weight: bold;}
.request-content .request-header span {display: inline-block; margin-right: 8px;}
.request-content .request-header span.range {float: right; font-weight: 400;}
.request-content .request-header span img {width: 13px; margin-top: -4px;}
.request-content .request-delivery-content {display: table; width: 100%; position: relative; overflow: hidden; padding: 20px;}
.request-content .request-delivery-content > div {display: table-cell; width: 40%; text-align: center; vertical-align: top; font-weight: bold; line-height: 1.3;}
.request-content .request-delivery-content > div.date {width:20%; font-weight: 400; color: #5e5e5e;}
.request-content .request-delivery-content > div.date img {display: block; width: 20px; margin: 0 auto;}
.request-content .request-delivery-content > div > span {display: block; font-weight: 400;}
.request-content .request-delivery-calculation {border-top: 1px solid #bfbfbf; padding: 10px 15px;}
.request-content .request-delivery-calculation > span {float: right;}

header .header-search {position: absolute; top: 0; width: 100%; height: 50px; background: #fff; overflow: hidden; display: none;}
header .header-search .icon-search {padding: 0; margin-left: 40px;}
header .header-search .search-input {display: inline-block; float: left; width: calc(100% - 75px); margin: 7px 0 7px 30px; padding-left: 40px; border: 1px solid #000; border-radius: 20px;}
header .header-search .btn-search-close {position: absolute; top: 0; left: 8px; width: 15px; margin-top: -2px;}

header .chat-username {display: inline-block; width: calc(100% - 50px); float: right; text-align: left; font-weight: bold;}
header .chat-username > .user-icon {display: inline-block; width: 30px; height: 30px; float: left; margin: 10px;}
.chat-container {background: #f5f5f5; height: 100%;}
.chat-talk {height: calc(100% - 50px); padding: 10px;}
.chat-talk .chat-talk-msg {position: relative; padding: 10px 10px 0 70px;}
.chat-talk .chat-talk-msg .user-icon {position: absolute; width: 50px; height: 50px; top: 10px; left: 10px;}
.chat-talk .chat-talk-msg .chat-talk-txt div:FIRST-CHILD {font-size: 0.75em; color: #575757; margin-bottom: 7px;}
.chat-talk .chat-talk-msg .chat-talk-txt div:FIRST-CHILD span {font-size: 1.25em; font-weight: bold; margin-right: 7px; color: #000;}
.chat-talk .chat-talk-msg .chat-talk-txt div:NTH-CHILD(2) {border: 1px solid #e8e8e8; border-radius: 5px; background: #fff; color: #575757; display: inline-block; width: 80%; padding: 10px; text-align: left;}
.chat-talk .chat-talk-msg.send {text-align: right;}
.chat-talk .chat-talk-msg.send .chat-talk-txt div:NTH-CHILD(2) {border-color: #707070; background: #707070; color: #fff;}
.chat-input {height: 50px; border-top: 1px solid #e8e8e8; position: relative; background: #fff;}
.chat-input input {border: 1px solid #bfbfbf; width: calc(100% - 80px); margin: 7px 0 7px 20px; border-radius: 20px;}
.chat-input .btn-send {float: right; width: 50px; height: 50px; line-height: 44px; padding-right: 20px;}

.content-container {position: relative; overflow: hidden; width: 100%; background: #fff;}
.fixed-bottom {position: absolute; bottom: 0; z-index: 10;}
.block {position: relative; overflow: hidden; padding: 20px;}
.content-container .btn-submit {position: relative; display: block; width: 100%; margin: 0; padding: 10px 0; bottom: 0; background-color:#1b1e53;color:#fff;font-size:1.25em;font-weight:500;text-align:center;letter-spacing:2px;}

#delivery-progress > div.block > span {float: right;}
#delivery-progress > div.progress {display: table; width: 100%;}
#delivery-progress > div.progress > div {display: table-cell; font-size: 0.825em; text-align: center;}
#delivery-progress > div.progress > div:BEFORE {content: ""; display:block; border-top: 5px dotted #bfbfbf; float: left; width: 20px; margin-top: 5px;}
#delivery-progress > div.progress > div:FIRST-CHILD:BEFORE {display: none;}
#delivery-progress > div.progress > div.active:BEFORE {border-color: #000;}
#delivery-progress > div.progress > div > p {position: relative; overflow: hidden; color: #bfbfbf; font-weight: 500;}
#delivery-progress > div.progress > div > p:BEFORE {content: ""; display: block; width: 12px; height: 12px; background: #bfbfbf; border-radius: 100%; margin: 0 auto 5px;}
#delivery-progress > div.progress > div.active > p {color: #1b1e53;}
#delivery-progress > div.progress > div.active > p:BEFORE {background: #1b1e53;}

@media all and (max-width: 360px){
	#delivery-progress > div.progress > div { letter-spacing: -1.5px; }
}

@media all and (max-width: 360px){
	.guide_contents > div > ul { width: 320px; margin:auto; }
	.guide_contents > div > ul > li > span { position: absolute; left: 15px; top: 6px; z-index: 1000; font-size: 11px; }
}


footer {position:absolute;bottom:0;z-index:9999;background-color:#fff;}
/* footer .btn-currentLocation {position:fixed;right:20px;bottom:70px;width:40px;height:40px;} */
footer .btn-currentLocation {position:absolute;right:15px;bottom:15px;width:40px;height:40px;}
footer .app-btn-area {}
footer .app-btn-area li {position:relative;width:20%;float:left;text-align: center; }
footer .app-btn-area li > a > img {height: 38px;}
footer .app-btn-area li > p { font-size: 12px; font-weight: 700; color: #1b1e53; padding-bottom: 5px; }

#popup-container {position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,.7);z-index:99999; overflow: auto;}
#popup-container.non-bg {background: transparent;}
#popup-container.push {background: #fff;}
#popup-container .popup-content {position: absolute; width: calc(100% - 60px); border: 1px solid #1b1e54; overflow: hidden; }
#popup-container .popup-header {width:100%;padding:8px 10px;background-color:#3b325b;color:#fff;}
#popup-container .popup-header .popup-close {float:right;font-weight:700;font-size:1.5em;line-height:100%;margin-top:-2px;}
#popup-container .popup-swiper {position:relative;overflow:hidden;}
#popup-container .popup-link {position:absolute;bottom:36px;width:100%;}
#popup-container .popup-link a {display:block;margin:0 30px;padding:10px 0;text-align:center;background-color:#fff;color:#1b1e53;font-weight:bold;}
.swiper-pagination-bullet {background:#d8bebc !important}
.swiper-pagination-bullet-active {background:#fff !important;}
#popup-container .massage .popup-header {background-color:#fff;overflow:hidden;}
#popup-container .massage .popup-header .popup-close {color:#1b1e53;}
#popup-container .massage .popup-body {background-color:#fff;text-align:center;padding:30px 0;}
#popup-container .massage .popup-body > p.description {color: #5a5a5a;}
#popup-container .massage .popup-body > p.txt {color: #5a5a5a;}
#popup-container .massage .popup-footer {background-color: #fff; padding: 10px; overflow: hidden;}
#popup-container .massage .popup-footer .popup-submit {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #1b1e53; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container .massage .popup-footer .popup-cancel {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #393939; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container .massage .popup-footer.confirm {margin: 0 -5px;}
#popup-container .massage .popup-footer.confirm > a {width: calc(50% - 10px); margin: 0 5px; float: left; font-size: 1em; letter-spacing: normal;}
#popup-container .goods .popup-header {background-color: #fff; overflow: hidden; color: #1b1e53;}
#popup-container .goods .popup-header .popup-title {padding: 10px 0; text-align: center; font-size: 1em; font-weight: bold; border-bottom: 1px solid #1b1e53;}
#popup-container .goods .popup-header .popup-close {color:#1b1e53;}
#popup-container .goods .popup-body {background-color: #fff; padding: 10px 20px;}
#popup-container .goods .popup-body > p {font-size: 0.9em; text-align: center;}
#popup-container .goods .popup-body > div.marketing-switch {position: relative; overflow: hidden; margin-top: 20px;}
#popup-container .goods .popup-body > div.marketing-switch > p.checkbox {width: 33.3%; float: left; text-align: center;}
#popup-container .goods .popup-body > div.marketing-switch > p.checkbox > label {display: block; font-size: 0.9em;}
#popup-container .goods .popup-body li {font-size: 0.825em; padding: 10px 0;}
#popup-container .goods .popup-body li > p.radiobox {display: block; text-align: center; float: none;}
#popup-container .goods .popup-body li > p.radiobox > span.btn {float: none;}
#popup-container .goods .popup-footer {background-color: #fff; padding: 10px; overflow: hidden;}
#popup-container .goods .popup-footer .popup-submit {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #1b1e53; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container .push .popup-header {background: #fff; overflow: hidden; width: auto; margin: 0 8px; padding: 0; border-bottom: 1px solid #1b1e53;}
#popup-container .push .popup-header .logo {height: 50px; padding: 10px 0;}
#popup-container .push .popup-body {background-color: #fff; display: table; width: 100%; min-height: 180px; padding: 20px 0;}
#popup-container .push .popup-body > div {display: table-cell; vertical-align: middle; text-align: center;}
#popup-container .push .popup-body > div > p {margin-bottom: 3px;}
#popup-container .push .popup-body > div > p span {color: #13b9de;}
#popup-container .push .popup-body > div > div.push-delivery-box {background: #eeeeee; margin: 15px 8px 0; padding: 3px 0;}
#popup-container .safe {font-size: 0.825em; word-break: keep-all;}
#popup-container .push .popup-footer {background-color: #fff; padding: 10px; overflow: hidden;}
#popup-container .push .popup-footer .popup-submit {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #1b1e53; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container .push .popup-footer .popup-cancel {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #393939; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container .push .popup-footer.confirm {margin: 0 -5px;}
#popup-container .push .popup-footer.confirm > a {width: calc(50% - 10px); margin: 0 5px; float: left; font-size: 1em; letter-spacing: normal;}





#popup-container2 {position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,.7);z-index:99999; overflow: auto;}
#popup-container2.non-bg {background: transparent;}
#popup-container2.push {background: #fff;}
#popup-container2 .popup-content {position: absolute; width: calc(100% - 60px); border: 1px solid #1b1e54; overflow: hidden; }
#popup-container2 .popup-header {width:100%;padding:8px 10px;background-color:#3b325b;color:#fff;}
#popup-container2 .popup-header .popup-close {float:right;font-weight:700;font-size:1.5em;line-height:100%;margin-top:-2px;}
#popup-container2 .popup-swiper {position:relative;overflow:hidden;}
#popup-container2 .popup-link {position:absolute;bottom:36px;width:100%;}
#popup-container2 .popup-link a {display:block;margin:0 30px;padding:10px 0;text-align:center;background-color:#fff;color:#1b1e53;font-weight:bold;}
.swiper-pagination-bullet {background:#d8bebc !important}
.swiper-pagination-bullet-active {background:#fff !important;}
#popup-container2 .massage .popup-header {background-color:#fff;overflow:hidden;}
#popup-container2 .massage .popup-header .popup-close {color:#1b1e53;}
#popup-container2 .massage .popup-body {background-color:#fff;text-align:center;padding:30px 0;}
#popup-container2 .massage .popup-body > p.description {color: #5a5a5a;}
#popup-container2 .massage .popup-body > p.txt {color: #5a5a5a;}
#popup-container2 .massage .popup-footer {background-color: #fff; padding: 10px; overflow: hidden;}
#popup-container2 .massage .popup-footer .popup-submit {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #1b1e53; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container2 .massage .popup-footer .popup-cancel {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #393939; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container2 .massage .popup-footer.confirm {margin: 0 -5px;}
#popup-container2 .massage .popup-footer.confirm > a {width: calc(50% - 10px); margin: 0 5px; float: left; font-size: 1em; letter-spacing: normal;}
#popup-container2 .goods .popup-header {background-color: #fff; overflow: hidden; color: #1b1e53;}
#popup-container2 .goods .popup-header .popup-title {padding: 10px 0; text-align: center; font-size: 1em; font-weight: bold; border-bottom: 1px solid #1b1e53;}
#popup-container2 .goods .popup-header .popup-close {color:#1b1e53;}
#popup-container2 .goods .popup-body {background-color: #fff; padding: 10px 20px;}
#popup-container2 .goods .popup-body > p {font-size: 0.9em; text-align: center;}
#popup-container2 .goods .popup-body > div.marketing-switch {position: relative; overflow: hidden; margin-top: 20px;}
#popup-container2 .goods .popup-body > div.marketing-switch > p.checkbox {width: 33.3%; float: left; text-align: center;}
#popup-container2 .goods .popup-body > div.marketing-switch > p.checkbox > label {display: block; font-size: 0.9em;}
#popup-container2 .goods .popup-body li {font-size: 0.825em; padding: 10px 0;}
#popup-container2 .goods .popup-body li > p.radiobox {display: block; text-align: center; float: none;}
#popup-container2 .goods .popup-body li > p.radiobox > span.btn {float: none;}
#popup-container2 .goods .popup-footer {background-color: #fff; padding: 10px; overflow: hidden;}
#popup-container2 .goods .popup-footer .popup-submit {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #1b1e53; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container2 .push .popup-header {background: #fff; overflow: hidden; width: auto; margin: 0 8px; padding: 0; border-bottom: 1px solid #1b1e53;}
#popup-container2 .push .popup-header .logo {height: 50px; padding: 10px 0;}
#popup-container2 .push .popup-body {background-color: #fff; display: table; width: 100%; min-height: 180px; padding: 20px 0;}
#popup-container2 .push .popup-body > div {display: table-cell; vertical-align: middle; text-align: center;}
#popup-container2 .push .popup-body > div > p {margin-bottom: 3px;}
#popup-container2 .push .popup-body > div > p span {color: #13b9de;}
#popup-container2 .push .popup-body > div > div.push-delivery-box {background: #eeeeee; margin: 15px 8px 0; padding: 3px 0;}
#popup-container2 .safe {font-size: 0.825em; word-break: keep-all;}
#popup-container2 .push .popup-footer {background-color: #fff; padding: 10px; overflow: hidden;}
#popup-container2 .push .popup-footer .popup-submit {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #1b1e53; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container2 .push .popup-footer .popup-cancel {display: block; width: -webkit-fill-available; padding: 10px 0; background-color: #393939; color: #fff; font-size:1.25em; font-weight:500; text-align:center; letter-spacing:2px;}
#popup-container2 .push .popup-footer.confirm {margin: 0 -5px;}
#popup-container2 .push .popup-footer.confirm > a {width: calc(50% - 10px); margin: 0 5px; float: left; font-size: 1em; letter-spacing: normal;}


.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

  /*this will hide the bus-icon*/
  img[src="https://maps.gstatic.com/mapfiles/transit/iw2/6/bus.png"]{
    width:0 !important;
  }

  /*use a custom icon as background for the span which follows the icon*/
  img[src="https://maps.gstatic.com/mapfiles/transit/iw2/6/bus.png"]+span{
    background:url(http://i.stack.imgur.com/8lcVw.png?s=32&g=1) no-repeat;
    background-size: 16px 16px;
    padding-left:18px;
  }

.fixed_button_area { height: calc(100% - 200px) !important; }
.fixed_button_area .fixed_button { position: absolute; right: 0px; bottom: 0px;}


.gm-style-iw {
    background-color: rgb(0, 0, 0) !important;
    border-radius: 0px  !important;
    color: rgb(255, 255, 255) !important;
    font-family: gothambook;
    text-align: left;
	padding-right: 10px !important; 
	padding-bottom: 10px !important;
}
.gm-style-iw-d {
    background-color: rgb(0, 0, 0) !important;
	overflow: hidden !important;
}
.gm-style-iw-t:after {
    background-color: rgb(0, 0, 0) !important;
}
.gm-style-iw-t::after {
    background-color: rgb(0, 0, 0) !important;
	background: linear-gradient(45deg,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0) 100%) !important;
    box-shadow: -2px 2px 2px 0 rgba(178,178,178,.4);
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%,-50%) rotate(-45deg);
    width: 15px;
}

.mobile_radius { position: absolute !important; left: 0px; top: -13px !important; background: none; z-index: 1000;}
input[type=range] { 
  -webkit-appearance: none;
   width:100%;
  background: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb { 
  -webkit-appearance: none;
  background: #0055ad;
  cursor: pointer;
  height: 11px; width: 11px;   
  border-radius: 50%;
}


.flag_popup { display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: #fff; padding: 0px; z-index: 10000;}
.flag_popup > div.title_txt { text-align: right; padding-right: 10px; padding-bottom: 8px; }
.flag_popup > div.title_txt > a { font-size: 30px; cursor: pointer; }

.flag_popup > div.flag_array { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling:touch; border-top: 1px solid #ededed;  }
.flag_popup > div.flag_array > ul { cursor: pointer; border-bottom: 1px solid #ededed;  }
.flag_popup > div.flag_array > ul > li { float: left; line-height: 50px; }
.flag_popup > div.flag_array > ul > li:first-child { width: 50px; text-align: center;  }
.flag_popup > div.flag_array > ul > li:first-child > img { width: 30px; border: 1px solid #ededed;}
.flag_popup > div.flag_array > ul > li:nth-child(2) { width: auto; text-align: left; margin-right: 10px; }

.phone_cker_ok { color: #1b1e53; border: 1px solid #1b1e53; font-size: 11px; padding: 0px 5px; }

.placeholder::placeholder { color: #000; }
.placeholder2::placeholder { color: #eb667c; }

.star-rating { width:70px; height: 13px; margin-top: 5px; }
.star-rating { 
	position: relative; display:inline-block; background:url('../images/star_off.png'); background-repeat: no-repeat; background-size: 100%; 
}
.star-rating span{ 
	left: 0px; top: 0px; position: absolute;  display: inline-block; height: 20px;
	background:url('../images/star_on2.png'); background-repeat: no-repeat; background-size: 70px 13px;
}


.loading_proc { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(255,255,255,1); z-index: 1000000; display: ; }
.loading_proc > div { display: table; width: 100%; height: 100%; vertical-align: middle; }
.loading_proc > div > div { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; }
.loading_proc > div > div > p:last-child { margin-top: 10px; }

.loading_proc2 {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1000000;
	background: rgba(255,255,255,0.7);
}

@keyframes spinner {
  from {transform: rotate(0deg); }
  to {transform: rotate(360deg);}
}

.loading_proc2 .spinner {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top-color: #f16379;
  border-bottom-color: #f16379;
  animation: spinner .8s ease infinite;
  z-index: 1000001;
}

.msg_content > p {
	width: calc(100% - 80px); 
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space:nowrap;
	display: block;
}

.msg_content > span {
	width: 25px;
	height: 25px;
	border-radius: 100%;
	background-color: red;
	color: #fff;
	display: flex;
	align-items: center;
    justify-content: center;
	font-size: 10px;
	font-weight: bold;
}


.appleLoginButton { background: #000; text-align: center; position: relative; border-radius: 5px; margin-bottom: 0px; margin-top: 20px; }
.appleLoginButton > a { color: #fff; display: inline-block; width: 100%; height: 40px; line-height: 37px; }
.appleLoginButton > a > img { height: 40px; position: absolute; left: 0px; }