@import "styles.css";
/* transition:all .3s cubic-bezier(.23,.97,.83,.67); */
html {background-color:#eee;}
#app {min-height:100vh; width:100%; max-width:500px; margin:0 auto; background-color:#fff;}
.header {width:100%; max-width:500px;

    position:absolute; left:50%; transform:translateX(-50%); z-index:10;
}
.header.type01 {display:flex; width:100%;  align-items: center; justify-content: space-between;
    padding:14px 17px;
}
.header.type01 img {display:block; cursor:pointer;}
.header.type02 {content:""; width:100%; height:17px; background-color:#fe5f1d;}

.header.type03 {position:static; padding-top:55px; transform:none;

}
.header.type03 .right {
    cursor:pointer;
}
.header.type03 .center {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.header.type03 .header-inner {
    display:flex; align-items: center; justify-content: space-between;
    width:100%; max-width:500px; height:55px;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    background-color:#fff;
    z-index:100;
    border-bottom:1px solid #f3f3f3;

}
.header.type03 .wrap {
    display:flex; align-items: center; justify-content: space-between;
    width:100%;
}
.header.type03 .left {display:flex; align-items: center;}
.header.type03 .page-title {
    margin-left:16px;
    font-weight:bold; font-size:16px;
}
.header.type03 .page-title > .title {
    font-weight:bold !important; color:#000 !important;
}
.header.type03 .page-title .m-timer {
    margin-left:6px;
    position:relative; top:-2px;
    font-size:13px; font-weight:bold; color:#d61f21;
}
.m-timer.type01 {
    font-size:13px; font-weight:bold; color:#d61f21;
    white-space:nowrap;
}

.header.type04 {
    position:static; padding-top:100px; transform:none;

}
.header.type04.active .header-pop {
    display:block;
}
.header.type04 .header-pop .m-input-select.type01 select {
    padding-right:30px;
}
.header.type04.active:after {
    content:""; width:100%; height:100%;
    position:fixed; top:0; left:0;
    background-color:rgba(0,0,0,0.5);
    z-index:20;
}
.header.type04 .center {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.header.type04 .header-wrapper {
    width:100%; max-width:500px;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    z-index:21;
}

.header.type04 .header-inner {
    display:flex; align-items: center; justify-content: space-between;
    height:55px;
    position:relative;
    background-color:#fff;
    border-bottom:1px solid #f3f3f3;
}
.header.type04 .header-inner .wrap {
    display:flex; align-items: center; justify-content: space-between;
    width:100%;
}
.header.type04 .header-bottom {
    padding:12px 0;
    background-color:#f5f5f5;
}
.header.type04 .header-bottom .title {
    font-size:12px; color:#7e7e7e;
}
.header.type04 .header-bottom .btn-toggle {}
.header.type04 .header-bottom .btn-toggle .active {display:none;}
.header.type04.active .header-bottom .btn-toggle .active {display:block;}
.header.type04.active .header-bottom .btn-toggle .active img {position:relative; top:1px;}
.header.type04.active .header-bottom .btn-toggle .inactive {display:none;}
.header.type04 .header-bottom .btn-toggle > div {
    display:flex; align-items: center; justify-content: flex-end;
    font-size:12px; color:#7e7e7e;
}
.header.type04 .header-bottom .btn-toggle img {
    margin-right:6px;
}

.header.type04 .header-bottom .wrap {
    display:flex; align-items: center; justify-content: space-between;
    width:100%;
}
.header.type04 .left {display:flex; align-items: center;}
.header.type04 .page-title {margin-left:24px;font-weight:bold;}
.header.type04 .header-pop {
    display:none;
    padding:12px 0 30px 0px;
    background-color:#fff;
}
.header.type04 .header-pop .m-inputs {
    display:flex; align-items: center;
}
.header.type04 .header-pop .m-input-dates .deco {
    margin:0 10px;
    font-size:12px; color:#999;
}
.header.type04 .header-pop .m-input-date {
    flex:1;
}
.header.type04 .header-pop .m-input-text {

}
.header.type04 .header-pop .m-input-wrap {
    flex:1;
}
.header.type04 .header-pop .m-input-wrap:first-of-type {
    flex:0 0 auto;
    width:105px; margin-right:4px;
}
.header.type04 .header-pop .m-input-wrap .title {
    margin-bottom:6px;
    font-size:12px; color:#7e7e7e;
}
.m-tags.type01 {
    display:flex; flex-wrap: wrap;
    margin:-4px;
}
.m-tags.type01 .m-tag-wrap {
    margin:4px;
}
.m-tags.type01 .m-tag {
    padding:6px 12px;
    background-color:#ff5000; color:#fff;
    border-radius:15px;
}

.m-tabs-content {display:none;}
.m-tabs-content.active {display:block;}
.m-tabs.type01 {
    display:flex;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}
.m-tabs.type01::-webkit-scrollbar { display:none; }
.m-tabs.type01::-webkit-scrollbar-track { display:none; } /* 바 배경 색상 */
.m-tabs.type01::-webkit-scrollbar-thumb { display:none;  } /* 위치 바 색상 */
.m-tabs.type01::-webkit-scrollbar-button { display: none; }

/*
.m-tabs.type01 .m-tab {
    flex:1; padding:13px 12px; padding-bottom:13px; font-size:16px; font-weight:700; text-align: center; color:#4d4d4d; cursor:pointer;
    border-bottom:4px solid #fff;
}
.m-tabs.type01 .m-tab:first-of-type {
    padding-left:20px;
}
.m-tabs.type01 .m-tab.active {font-weight:800; color:#fe5f1d; position:relative;}
.m-tabs.type01 .m-tab.active:after {content:""; width:100%; height:4px; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); background-color:#fe5f1d;}
*/

.m-tabs.type01 .m-tab {
    flex:1;
    padding:10px;
    font-size:16px; font-weight:700; text-align: center; color:#4d4d4d; cursor:pointer;
    opacity:0.5;
}
.m-tabs.type01 .m-tab:first-of-type {
}
.m-tabs.type01 .m-tab-wrap {
}
.m-tabs.type01 .m-tab.active {
    position:relative; opacity:1;
}
.m-tabs.type01 .m-tab.active:after {
    content:""; width:100%; height:2px; position:absolute; bottom:0;
    left:50%; transform:translateX(-50%); background-color:#fe5f1d;
}


.m-user.type01 {
    margin-top: 12px;
    margin-right: 16px;
    margin-left: 16px;
}

.m-user.type01 .number-wrap {
    flex: 1;
}
.m-user.type01 .numbers {
    display:flex;
    margin-left: 100px;
    justify-content: space-around;
    margin-bottom:22px;
    margin-right: -16px;
}
.m-user.type01 .number {
    text-align: center;
}
.m-user.type01 .number .title {
    font-weight:bold;
    font-size: 13px;
    margin-bottom: 2px;
}
.m-user.type01 .number .title .primary {
    position:relative; top:-1px;
    font-size:11px; font-weight:bold;
}
.m-user.type01 .number .body {
    font-size:13px;
    font-weight: normal;
    color: #777777;
}
.m-user.type01 .btns {
    display:flex;
    margin:-3px;
    margin-top: 12px;
}
.m-user.type01 .btns .btn-wrap {
    flex:1;
    padding:3px;
}
.m-user.type01 .btns .btn-wrap .btn {
    display:flex;
    align-items: center; justify-content: center;
    width:100%;
    height:30px;
    font-weight:600;
    border-radius:5px;
    background-color:#f0f0f0;
    font-size: 14px;
}
.m-user.type01 .btns .btn-wrap .btn.follow {
    background-color:#fe5f1d;
    color:#fff;
}
.m-user.type01 .btns .btn-wrap .btn.following {
    background-color:#fff;
    border:1px solid #fe5f1d;
    color:#fe5f1d;
}
.m-user.type01 .btns .btn-wrap.point {
    flex:0 0 auto;
    width:36px;
}
.m-user.type01 .btns .btn-wrap.point .btn {
    background-color:#ff5000;
}
.m-user.type01 .btns .btn-wrap.point .btn img {
    display:block; margin:0 auto;
}
.m-user.type01 .top {
    display:flex; align-items: flex-end; justify-content: space-between; margin-bottom:2px;
}
.m-user.type01 .top .point img {margin-right:4px; position:relative; top:-3px;}
.m-user.type01 .top .point {display:flex; align-items:center; font-size:14px; font-weight:800; color:#fe5f1d;}
.m-user.type01 .top .name {display:flex; align-items:center; font-size:14px; font-weight:bold;}
.m-user.type01 .top .name img {display:block; margin-left:8px; position:relative; top:-2px;}
.m-user.type01 .top .title {display:flex; align-items: flex-end; font-size:20px; font-weight:800;}
.m-user.type01 .top .sub {margin-left:4px; position:relative; bottom:2px; font-size:17px; font-weight:400; color:#4d4d4d;}
.m-user.type01 > .body {
    margin-top:8px;
    margin-bottom:8px;
    font-size:14px;
    white-space: pre-line;
    font-weight: normal;
}
.m-user.type01 a.link {
    font-size:14px;
    color:#0397ff;
    font-weight: normal;
}
.m-user.type01 .tags {display:flex;}
.m-user.type01 .tag {
    display:flex; align-items: center; justify-content: center;
    padding:2px 10px; padding-top:3px; font-size:13px; color:#fff; border-radius:15px;
    background-color:#fe5f1d;
}
.m-user.type01 .tag.active {
    background-color:#fff; border:1px solid #fe5f1d; color:#fe5f1d;
}
.m-user.type01 .bottom {display:flex; align-items: center; justify-content: space-between;}
.m-user.type01 .bottom .left {display:flex;}
.m-user.type01 .bottom .left .value {margin-right:10px;}
.m-user.type01 .bottom .left .value .count {font-size:13px; font-weight:800;}
.m-user.type01 .bottom .left .value .title {font-size:13px; font-weight:400;}

.m-user.type02 {
    display:flex; align-items: center;
    margin-bottom:10px; padding:10px 17px;
}
.m-user.type02 .thumbnail {
    width:40px;
    margin-left:10px;
}
.m-user.type02:last-of-type {margin-bottom:0;}
.m-user.type02 .body-more {
    display:flex; align-items: center;
    margin-top:8px;
    font-size:12px; color:#53616d;
}
.m-user.type02 .body-more img {
    margin-right:8px;
}
.m-user.type02 .alert {display:flex; align-items: center; font-size:12px; color:#808080;}
.m-user.type02 .alert img {display:block; margin-right:4px; position:relative; top:-1px;}
.m-user.type02 .top-more {
    display:flex; align-items: center;
    margin-bottom:10px;
    position:relative; top:3px;
    font-size:10px; color:#818181;
}
.m-user.type02 .top-more img {display:block; margin-right:4px;}
.m-user.type02 .top {display:flex; align-items: center; justify-content: space-between; margin-top:4px; margin-bottom:5px;}
.m-user.type02 .top img {position:relative; top:2px;}

.m-user.type02 .right {
    max-width:calc(100% - 145px);
    margin-left:10px; flex:auto

}
.m-user.type02 .right .info .name {display:flex; align-items: center; font-size:16px; font-weight:800;}
.m-user.type02 .right .info .name .sub {
    margin-left:4px; position:relative;
    font-size:15px; font-weight:400; color:#53616d;
}
.m-user.type02 .right .info .time {font-size:14px; color:#53616d; font-weight:400;}
.m-user.type02 .right .body {
    width:100%;
    white-space: nowrap; font-size:15px; font-weight:500; text-overflow: ellipsis; overflow:hidden;
}
.m-user.type02 .btn {
    display:flex; align-items: center; justify-content: center;
    width:86px; height:28px;
    margin-left:auto;
    font-size:14px; font-weight:400;
    color:#fe5f1d; border:1px solid #fe5f1d; border-radius:15px;
}
.m-user.type02 .btn.active {
    color:#fff; background-color:#fe5f1d;
}

.mt-70 {margin-top:70px;}
.mt-60 {margin-top:60px;}
.mt-50 {margin-top:50px;}
.mt-40 {margin-top:40px;}
.mt-30 {margin-top:30px;}
.mt-20 {margin-top:20px;}
.mt-12 {margin-top:12px;}
.mt-10 {margin-top:10px;}
.mt-8 {margin-top:8px;}
.mt-4 {margin-top:4px;}

.pd-50 {padding-top:50px;}
.pd-40 {padding-top:40px;}
.pd-30 {padding-top:30px;}
.pd-20 {padding-top:20px;}
.pd-10 {padding-top:10px;}

.m-title.type01 {
    font-size:24px; font-weight:600;
}
.m-title.type02 {
    font-size:20px; font-weight:bold;
}
.m-body.type01 {
    font-size:14px;
}
.m-body.type02 {
    font-size:14px; color:#54616d;
}
.m-body.type03 {
    font-size:12px; color:#54616d;
}

.flex {display:flex;}
.flex.center {justify-content: center;}

.m-input-img.type01 {
    width:70px; height:70px;
    position:relative;
}
.m-input-img.type01 input {
    display:none;
}
.m-input-img.type01 label {
    display:block; height:100%;
    overflow:hidden;
    border-radius:100%; border:1px solid #e1e1e1;
    background-size:cover; background-repeat:no-repeat;
}
.m-input-img.type01 label .m-ratioBox-wrap {
    width:100%; padding-top:100%; border-radius:100%;
}
.m-input-img.type01 .deco {
    position:absolute; bottom:-8px; right:0; z-index:1;
}
.m-input-withImg.type01 {
    display:flex;
}
.m-input-withImg.type01 .inputs {
    display:flex; flex-direction: column; justify-content: space-between; flex:auto;
    margin-left:12px;
}

.m-input-date.type01 {display:inline-block; max-width:260px;}
.m-input-date.type01 input::-webkit-inner-spin-button {display: none;}
.m-input-date.type01 input::-webkit-calendar-picker-indicator {opacity: 0;}
.m-input-date.type01  input {
    width:100%; height:30px; padding:0 10px;
    font-size:12px;
    background:#fff url('../img/calendar.png')  calc(100% - 10px) 50% no-repeat; border:1px solid #e1e1e1; border-radius:5px;
    background-size:15px;
}

.m-input-text input {display:block; width:100%;}
.m-input-text.type01 {position:relative;}
.m-input-text.type01 input {width:100%; height:37px; padding:0px 13px; font-size:14px; border:1px solid #e1e1e1; border-radius:5px; background-color:#fafafa;}
.m-input-text.type01 input[type="date"] {height:auto; padding:0px 13px; background-color:#fff !important;}
.m-input-text.type01 .m-input-text-deco {position:absolute; right:20px; top:50%; transform:translateY(-50%); color:#979797; font-size:14px;}

.m-input-text.type02 {position:relative;}
.m-input-text.type02 input {
    width:100%; height:27px; padding:4pxpx 0px; font-size:14px;
    border-bottom:1px solid #e1e1e1;
}
.m-input-text.type02 .m-input-text-deco {position:absolute; right:0px; top:50%; transform:translateY(-50%); color:#979797; font-size:14px;}

.m-input-text.type03 {position:relative;}
.m-input-text.type03 input {
    width:100%; height:35px; padding:4px 15px; font-size:14px;
    border-radius:20px;
    background-color:#f5f5f5;
}
.m-input-text.type03 .m-input-text-deco {
    position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#979797; font-size:14px;
}
.m-input-text.type04 input {
    padding:14px;
    border:6px solid #fe5f1d;
    text-align: center;
}

.m-input-text.type05 {
    position:relative;
}
.m-input-text.type05 .text-limit {
    position:absolute; top:50%; right:13px; transform:translateY(-50%);
    font-size:13px; color:#53616d; font-weight:300;
}
.m-input-text.type05 input {
    width:100%; height:30px;
    padding:0px 13px; padding-right:66px;
    font-size:15px; border:1px solid #dbdbdb; border-radius:30px;
}
.m-input-text.type05 input[type="date"] {height:auto; padding:0px 13px; background-color:#fff !important;}
.m-input-text.type05 .m-input-text-deco {position:absolute; right:20px; top:50%; transform:translateY(-50%); color:#979797; font-size:14px;}

.m-input-select.type01  {
    cursor:pointer;
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    position:relative;
}
.m-input-select.type01::-ms-expand { display: none; }

.m-input-select.type01 {position:relative;}
.m-input-select.type01 select {width:100%; height:30px; padding:0px 10px; padding-right:60px; border:1px solid #e1e1e1;  background-color:#fff;
    cursor:pointer;
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    border-radius:5px;
    font-size:12px;
}
.m-input-select.type01:after {content:""; width:7px; height:5px; position:absolute; right:10px; top:50%;
    transform:translateY(-50%); background:url("../img/triDown-black.png") no-repeat; background-size:7px auto;}
.m-input-select.type01 select::-ms-expand { display: none; }


.m-input-select.type02  {
    cursor:pointer;
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    position:relative;
}
.m-input-select.type02::-ms-expand { display: none; }

.m-input-select.type02 {position:relative;}
.m-input-select.type02 select {
    width:100%; height:27px; padding-right:60px; border-bottom:1px solid #e1e1e1;  background-color:#fff;
    cursor:pointer;
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
}

.m-input-select.type02:after {content:""; width:16px; height:9px; position:absolute; right:4px; top:50%;
    transform:translateY(-50%); background:url("../img/arrowDown-gray.png") no-repeat; background-size:cover;}
.m-input-select.type02 select::-ms-expand { display: none; }
.m-input-select.type02 .count {
    width:20px; height:20px;position:absolute; top:-10px; right:-7px;
    font-size:12px; border-radius:100%; text-align: center;
    color:#fff; background-color:#fe5f1d;
}

.m-input-select.type03  {
    cursor:pointer;
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    position:relative;
}
.m-input-select.type03::-ms-expand { display: none; }

.m-input-select.type03 {position:relative;}
.m-input-select.type03 select {width:100%; height:30px; padding:0px 10px; padding-right:60px;
    border:1px solid #e1e1e1;  background-color:#fff;
    cursor:pointer;
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    border-radius:15px;
    font-size:15px; font-weight:500;
}
.m-input-select.type03:after {content:""; width:7px; height:5px; position:absolute; right:10px; top:50%;
    transform:translateY(-50%); background:url("../img/triDown-black.png") no-repeat; background-size:7px auto;}
.m-input-select.type03 select::-ms-expand { display: none; }

.m-input-select.type04  {
    cursor:pointer;
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    position:relative;
}
.m-input-select.type04::-ms-expand { display: none; }

.m-input-select.type04 {position:relative;}
.m-input-select.type04 select {width:100%; padding-right:17px;
    background-color:#fff;
    cursor:pointer;
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none;
    font-size:14px; font-weight:500;
}
.m-input-select.type04:after {content:""; width:10px; height:7px; position:absolute; right:0px; top:50%;
    transform:translateY(-50%); background:url("../img/arrowDown-gray.png") no-repeat; background-size:10px auto;}
.m-input-select.type04 select::-ms-expand { display: none; }

.m-filter.type01 {
    display:none; align-items: center; justify-content: space-between;
    padding:10px 20px; padding-bottom:0;
}
.m-filter.type01 .btns {
    display:flex;
    border:1px solid #ff781e; border-radius:3px;
}
.m-filter.type01 .btns .btn {
    display:flex; align-items: center; justify-content: center;
    width:50px; height:20px;
    font-size:14px; color:#ff781e;
}
.m-filter.type01 .btns .btn.active {
    background-color:#ff781e; color:#fff;
}

.m-input-message.type01 {display:flex; position:relative;}
.m-input-message.type01 .m-thumbnail {margin-right:8px;}
.m-input-message.type01 .img {width:28px; margin-right:8px;}
.m-input-message.type01 .m-input-text {flex:auto;}
.m-input-message.type01 .m-input-text.target-comment form {
    display:flex; align-items: center;
}
.m-input-message.type01 .m-input-text .mention {
    margin-right:4px;
    white-space: nowrap;
    color:#1a4a98;
}
.m-input-message.type01 .m-input-text {
    width:100%; height:35px;  padding:0px 13px; padding-right:80px;
    border:1px solid #e1e1e1; border-radius:20px;  background-color:#fafafa;
}
.m-input-message.type01 .m-input-text input {
    line-height:33px;
    font-size:14px;
    background-color:#fafafa;
}

.m-input-message.type01 .utils {display:flex; align-items:center; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#979797; font-size:14px;}
.m-input-message.type01 .utils img {display:block; margin-left:8px;}
.m-input-message.type01 .util {margin-left:6px;}
.m-input-withBtn.type01 {display:flex;}
.m-input-withBtn.type01 .m-input {flex:auto;}
.m-input-withBtn.type01 .m-input-btn {display:flex; align-items:center; justify-content:center; margin-left:12px; white-space: nowrap;}

.m-input-withBtn.type02 {display:flex;}
.m-input-withBtn.type02 .m-input input {flex:auto;}
.m-input-withBtn.type02 .m-input select {flex:auto;}
.m-input-withBtn.type02 .m-input-btn {margin-left:12px; padding:0 25px; white-space: nowrap; background-color:#333333; color:#fff; border-radius:3px;}

.m-input-password .active {display:none;}
.m-input-password.active .active {display:block;}
.m-input-password.active .inactive {display:none;}

.m-pop.type01 {
    content:"";
    display:flex; align-items: center; justify-content: center;
    width:100%; height:100%;
    position:fixed; top:0; left:0;
    background-color:rgba(0,0,0,0.5);
    z-index:1000;
}
.m-pop.type01 .m-pop-inner {
    width:260px;
    background-color:#fff;
    border-radius:15px;
}
.m-pop.type01 .m-pop-contents {
    padding: 30px 20px 20px 20px;
}
.m-pop.type01 .m-body {word-break: keep-all;}
.m-pop.type01 .m-pop-btn {
    display:block; width:100%;
    padding: 12px 0;
    text-align: center; font-size:15px; font-weight:bold;
    border-top:1px solid #e1e1e1;
}
.m-pop.type01 .m-pop-btn + .m-pop-btn {
    border-left:1px solid #e1e1e1;
}
.m-pop.type01 .m-pop-btns {
    display:flex;
}

.m-pop.type02 {
    content:"";
    display:flex; align-items: center; justify-content: center;
    width:100%; height:100%;
    position:fixed; top:0; left:0;
    background-color:rgba(0,0,0,0.5);
    z-index:20;
}
.m-pop.type02 .m-pop-inner {
    width:300px;
    padding:20px;
    background-color:#fff;
    border-radius:15px;
}
.m-pop.type02 .m-pop-header {
    display:flex; align-items: center; justify-content: space-between;
    margin-bottom:20px;
}
.m-pop.type02 .m-pop-header .title {
    font-size:14px; font-weight:bold;
}
.m-pop.type02 .m-pop-contents {

}
.m-pop.type02 .m-body {word-break: keep-all;}

.m-pop.type03 {
    content:"";
    display:flex; align-items: center; justify-content: center;
    width:100%; height:100%;
    position:fixed; top:0; left:0;
    z-index:1000;
}
.m-pop.type03 .btn-close {
    display:block;
    margin-left:auto;
}
.m-pop.type03 .m-pop-base {
    width:100%; height:100%;
    position:absolute; top:0; left:0;
    background-color:rgba(0,0,0,0.5);
}
.m-pop.type03 .m-pop-inner {
    width:231px;
    padding:20px;
    position:relative;
    background-color:#fff;
    border-radius:15px;
    z-index:1;
}
.m-pop.type03 .m-pop-header {
    display:flex; align-items: center; justify-content: space-between;
    margin-bottom:20px;
}
.m-pop.type03 .m-pop-header .title {
    font-size:14px; font-weight:bold;
}
.m-pop.type03 .content {
    text-align: center;
}
.m-pop.type03 .content img {
    margin-bottom:10px;
}
.m-pop.type03 .content .body {
    margin-bottom:16px;
}
.m-pop.type03 .btns {
    display:flex; justify-content: center;
    text-align: center;
}
.m-pop.type03 .btn {
    display:flex; align-items: center; justify-content: center;
    width:112px; height:37px;
    background-color:#ff5000; color:#fff; border-radius:20px;
}

.m-pop-freeCoin .title {
    display:flex; align-items: center; justify-content: center;
    width:100%; margin-bottom:10px;
    font-weight:bold;
}
.m-pop-freeCoin .title img {
    margin-right:8px; position:relative; top:3px;
}
.m-pop-freeCoin .body {
    font-weight:bold;
}

.m-btns.type01 {
    display:flex; align-items: center; margin:-2px;
    margin-top:20px;
}
.m-btns.type01 .btn-wrap {padding:2px;}
.m-btns.type01 .btn-wrap.sub {
    width: 75px;
}
.m-btns.type01 .btn-wrap.sub .btn {
    background-color:#f6f6f6;
}
.m-btns.type01 .btn-wrap.sub + .btn-wrap {
    flex:auto;
}
.m-btns.type01 .btn-wrap .btn {
    display:block; width:100%;
    padding: 12px 0;
    text-align: center; font-size:14px;
    border-radius:10px;
}

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

.m-comment.type01 {
    padding-bottom:14px;
    border-bottom: 1px solid #e1e6e9;
}
.m-comment.type01.secret {
    background-color:#f8f9fb;
}
.m-comment.type01 .head {
    display:flex; align-items: flex-start; padding:10px 20px;

}
.m-comment.type01 .body-more {
    display:flex; align-items: center;
    margin-top:8px;
    font-size:12px; color:#53616d;
}
.m-comment.type01 .body-more img {
    margin-right:8px;
}
.m-comment.type01 .m-editor.type01 {padding:0;}
.m-comment.type01 .m-editor .content {
    padding-left:20px;
    padding-right:20px;
    padding-top:22px;
    padding-bottom:8px;
    position:static;
    white-space: pre-line;
    word-break: keep-all;
    word-wrap: break-word;
    font-weight:400;
}
.m-comment.type01 .img {
    display:block; width:100%; margin-bottom:10px;
}

.m-comment.type01 .alert {display:flex; align-items: center; font-size:12px; color:#808080;}
.m-comment.type01 .alert img {display:block; margin-right:4px; position:relative; top:-1px;}
.m-comment.type01 .top-more {
    display:flex; align-items: center;
    padding:10px 20px;
    margin-bottom:-10px;
    position:relative; top:3px;
    font-size:13px; color:#53616d;
}
.m-comment.type01 .top-more img {display:block; margin-right:4px; }
.m-comment.type01 .top {
    display:flex; align-items: flex-start; justify-content: space-between;
    margin-top:6px; margin-bottom:5px;
}
.m-comment.type01 .top img {position:relative; top:2px; cursor:pointer;}
.m-comment.type01 .right {margin-left:6px; flex:auto;}
.m-comment.type01 .right img {
    max-width:90px;
}
.m-comment.type01 .right .replies {display:none;}
.m-comment.type01 .right .replies.active {display:block;}
.m-comment.type01 .right .info {}
.m-comment.type01 .right .info .more {
    margin-bottom:6px;
    font-size:10px; color:#54616d;
}
.m-comment.type01 .right .info .more * {
    font-size:10px; color:#ff7d26;
}
.m-comment.type01 .right .info .name {
    font-size:15px; font-weight:800;
}
.m-comment.type01 .right .info .name * {
    display:block;
    margin-top:1px;
    position:relative;
    font-size:13px; font-weight:400; color:#53616d;
}
.m-comment.type01 .right .info .name .badge {
    display:inline-block; width:15px;
}
.m-comment.type01 .right .info .name .sub {
    display:flex;
}
.m-comment.type01 .right .info .name .sub .btn-translate {
    margin-left:8px;
}
.m-comment.type01 .right .info .name .btn {
    display:inline-block;
    margin-left:10px;
}
.m-comment.type01 .right .info .time {font-size:14px; color:#53616d; font-weight:400;}
.m-comment.type01 .right .body {white-space: pre-line; font-size:15px; font-weight:500;}

.m-comment.type01.type-reply {margin:20px; margin-top:14px; padding:12px 10px; border:1px solid #e1e1e1; border-radius:10px;}
.m-comment.type01.type-reply .head {
    padding:0;
}
.m-comment.type01.type-reply .m-editor .content {
    padding:0; padding-top:10px;
}
.m-comment.type01 .utils {
    display:flex; align-items: center; justify-content: space-between;
    margin-top:10px; padding:0 20px;
}
.m-comment.type01 .util {display:flex; align-items: center; cursor:pointer;}
.m-comment.type01 .util .text {
    margin-left:6px; margin-top:2px;
    font-size:13px; white-space: nowrap; color:#53616d;
}
.m-comment.type01 .util img {
    display:block;
    position:relative; top:1px;
}

.m-comment.type01.stop {
    padding-bottom:0;
}
.m-comment.type01.reservation {
    padding-bottom:0;
}
.m-comment.type01.reservation .box-guide {
    background-color:#fe6d1d;
}
.m-comment.type01 .box-guide {
    content:"";
    display:flex; align-items: center; justify-content: center;
    width:100%; height:200px;
    position:relative;
    background-color:#53616d;
}
.m-comment.type01 .box-guide .text {
    padding:0 20px;
    font-size:16px; text-align: center;
    color:#fff;
    word-break: keep-all;
}
.m-comment.type01 .box-guide .deco {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}
.m-comment.type02 {
    font-size:24px; font-weight:bold; text-align: center;
}
.m-comment.type02 * {
    font-size:24px; font-weight:bold;
}

.m-comment.type03 > .top {display:flex; align-items: flex-start; padding:10px 17px; border-bottom:1px solid #e1e1e1;}
.m-comment.type03 .alert {display:flex; align-items: center; font-size:12px; color:#808080;}
.m-comment.type03 .alert img {display:block; margin-right:4px; position:relative; top:-1px;}
.m-comment.type03 .info .top {display:flex; align-items: center; justify-content: space-between; margin-top:4px; margin-bottom:5px;}
.m-comment.type03 .info .top img {position:relative; top:2px;}
.m-comment.type03 .left img {width:40px;}
.m-comment.type03 .right {margin-left:10px; flex:auto;}
.m-comment.type03 .right .info {}
.m-comment.type03 .right .info .more {
    margin-bottom:6px;
    font-size:10px; color:#54616d;
}
.m-comment.type03 .right .info .more * {
    font-size:10px; color:#ff7d26;
}
.m-comment.type03 .right .info .name {display:flex; align-items: center; font-size:16px; font-weight:800;}
.m-comment.type03 .right .info .name .sub {margin-left:4px; position:relative; font-size:15px; font-weight:400; color:#53616d;}
.m-comment.type03 .right .info .time {font-size:14px; color:#53616d; font-weight:400;}
.m-comment.type03 .right .body {white-space: pre-line; font-size:15px; font-weight:500;}
.m-comment.type03.type-reply {margin-top:14px; padding:12px 10px; border:1px solid #e1e1e1; border-radius:10px;}
.m-comment.type03.type-reply .left img {width:30px;}

.m-comment.type03 .utils {padding:0 3px;}
.m-comment.type03 .util {display:flex; align-items: center; justify-content: center; padding:6px 17px; }
.m-comment.type03 .util .text {font-size:13px; white-space: nowrap; color:#53616d;}
.m-comment.type03 .util img {margin-right:6px; position:relative; top:1px;}
.m-comment.type03 .btns {
    display:flex; justify-content: flex-end;
    margin:6px 0;
}
.m-comment.type03 .btn-util {
    font-size:12px; color:#ff7d26;
}
.m-comment.type03 .utils-more {
    margin-bottom:16px;
}
.m-comment.type03 .utils-more + .utils {
    border-bottom:none;
}
.m-comment.type03 .utils-more .wrap {
    display:flex; align-items: center; justify-content: flex-start;

}
.m-comment.type03 .utils-more .util-more {
    margin-right:12px;
    font-size:13px; font-weight:400; color:#53616d;
}
.m-comment.type03 .utils-more .util-more .bold {
    font-size:13px; font-weight:bold;
}

.m-comment.type04 {
    font-size:11px; color:#53616d; font-weight:bold;
}
.m-navs-padding {padding-bottom:140px;}
.m-navs.type01 {
    display:flex; align-items: center; justify-content: space-around;
    max-width:500px; width:100%; height:53px;
    position: fixed; bottom:0; left:50%; transform:translateX(-50%);
    border-top:1px solid #e1e1e1;
    background-color:#fff;
    z-index:20;
}
.m-navs.type01 .m-nav .active {display:none;}
.m-navs.type01 .m-nav img {display:block;}
.m-navs.type01 .m-nav.active .inactive {display:none;}
.m-navs.type01 .m-nav.active .active {display:block;}

.m-avatars.type01 {
    display:flex; flex-wrap:wrap;
    margin:-5px;
}
.m-avatars.type01 .avatar-wrap {
    width:33.33%; padding:5px;

}
.m-avatars.type01 .avatar-wrap img {
    display:block; width:100%;
}
.m-avatars.type01 .avatar-wrap .avatar {
    border-radius:15px;
    overflow:hidden;
}
.m-avatars.type01 .avatar-wrap.active .avatar {
    border:3px solid black;
}

.m-thumbnails.type01 {
    width:40px; height:40px; position:relative;
}
.m-thumbnails.type01 .m-thumbnail {
    position:absolute;
}
.m-thumbnails.type01.number2 .m-thumbnail:nth-child(1) {
    z-index:10;
}
.m-thumbnails.type01.number2 .m-thumbnail:nth-child(2) {
    z-index:20;
}
.m-thumbnails.type01.number2 .m-thumbnail:nth-child(3) {
    z-index:30;
}
.m-thumbnails.type01.number2 .m-thumbnail:nth-child(4) {
    z-index:40;
}
.m-thumbnails.type01.number2 {}
.m-thumbnails.type01.number2 .m-thumbnail {
    width:25px; height:25px;
}
.m-thumbnails.type01.number2 .m-thumbnail:nth-child(1) {
    left:0; bottom:0;
}
.m-thumbnails.type01.number2 .m-thumbnail:nth-child(2) {
    top:0; right:0;
}

.m-thumbnails.type01.number3 .m-thumbnail {
    width:19px; height:19px;
}
.m-thumbnails.type01.number3 .m-thumbnail:nth-child(1) {
    left:0; bottom:0;
}
.m-thumbnails.type01.number3 .m-thumbnail:nth-child(2) {
    top:0; left:50%;
    transform: translateX(-50%);
}
.m-thumbnails.type01.number3 .m-thumbnail:nth-child(3) {
    bottom:0; right:0;
}

.m-thumbnails.type01.number4 .m-thumbnail {
    width:19px; height:19px;
}
.m-thumbnails.type01.number4 .m-thumbnail:nth-child(1) {
    left:0; bottom:0;
}
.m-thumbnails.type01.number4 .m-thumbnail:nth-child(2) {
    top:0; left:0;
}
.m-thumbnails.type01.number4 .m-thumbnail:nth-child(3) {
    top:0; right:0;
}
.m-thumbnails.type01.number4 .m-thumbnail:nth-child(4) {
    bottom:0; right:0;
}

.m-thumbnail.type01 {
    flex: 0 0 auto;
    position:relative;
    overflow:hidden;
    background-color:#eee;
}
.m-thumbnail.type01 .m-ratioBox-wrap {
    padding-top:100%;
}
.m-thumbnail.type01 .m-ratioBox-wrap img {
    width:100%;
}
.m-thumbnail.type01.empty  {
    width:40px; height:40px;
    border-radius:100%;
    background-color:#e1e6e9;
}
.m-thumbnail.type01.type-small {
    width:40px; height:40px;
    margin-top:2px;
    border-radius:100%; overflow:hidden;
}

.m-thumbnail.type01.type-smaller {
    width:30px; height:30px;
    margin-top:2px;
    border-radius:100%; overflow:hidden;
}
.m-thumbnail.type01.type-small img {
    height:100%;
    max-width:none;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}
.m-thumbnail.type01.type-small img:first-of-type {
    max-width:none;
    position:absolute;
}
.m-thumbnail.type01.type-smaller img:first-of-type {
    width:100%;
    max-width:none;
    position:absolute;
}
.m-thumbnail.type01 .default {
    z-index:2;
}
.m-thumbnail.type01 > img:first-of-type {
    display:block; max-width:100%;
    position:relative;
}
.m-thumbnail.type01 > img {
    display:block;
    max-width:100%;
    position:absolute;
    top:0;
    left:0;
}
.m-thumbnail.type01 {display:flex; align-items: flex-end; justify-content: center;
    position:relative;
}

.m-thumbnail.type01 .base {background-size:cover !important;}

.m-thumbnail.type01 .btn-util {
    position:absolute; right:17px; bottom:20px;
    cursor:pointer;
}
.m-thumbnail.type01 .utils {
    display:flex; align-items: flex-end; justify-content: space-between;
    width:100%; padding:20px;
    position:absolute; bottom:0; right:0;
    text-align: center;
    z-index:20;
}
.m-thumbnail.type01 .btn-folder {
    display: flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}
.m-thumbnail.type01 .utils .right {
    text-align: right;
}

.m-thumbnail.type01 .utils .btn-save {
    display:flex; align-items: center; justify-content: center;
    min-width:73px; height:38px;
    padding:0 20px;
    font-size:14px;
    border-radius:20px; background-color:#DBDBDB; color:#A7A7A7;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}
.m-thumbnail.type01 .utils .btn-save .point {
    margin-left:2px;
    font-size:14px;
    color:#FF8755;
}
.m-thumbnail.type01 .utils .btn-save.active {
    background-color:#fff; color:#000;
}
.m-thumbnail.type01 .utils .controllers {
    display:inline-block;
    padding:6px 0;
    background-color: rgba(0,0,0,0.3);
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    border-radius:20px;
}

.m-thumbnail.type01 .utils .controllers .btn-control {
    display:block;
    margin:8px 0; padding:4px 6px;
}
.m-thumbnail.type01 .utils .controllers .btn-control:first-of-type {
    margin-top:0;
}
.m-thumbnail.type01 .utils .controllers .btn-control:last-of-type {
    margin-bottom:0;
}
.m-thumbnail.type01 .utils .controllers .btn-control img {
    display:block;
}

.m-thumbnail.type01 .btn-shop {
    display: flex; align-items: center; justify-content: center;
    width:38px; height:38px;
    position:relative;
    border-radius:100%; background-color:#fff;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}
.m-thumbnail.type01 .btn-shop .cart {
    position: relative;
    top:3px; left:-2px;
}
.m-thumbnail.type01 .btn-shop .count {
    width:15px; height:15px;
    position:absolute; top:4px; right:5px;
    font-size:10px;
    border-radius:100%;
    background-color:#fe5f1d; color:#fff;
}

.m-thumbnail.type02 {
    background-color: #eee;
}
.m-thumbnail.type02 .btn-util {
    position:absolute; right:17px; bottom:20px;
    cursor:pointer;
}
.m-thumbnail.type02 .utils {
    position:absolute; bottom:55px; right:10px;
    text-align: center;
    z-index:20;
}
.m-thumbnail.type02 .utils .controllers {
    display:inline-block;
    padding:6px 0;
    background-color: rgba(255,255,255,0.2);
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    border-radius:20px;
}
.m-thumbnail.type02 .utils .controllers .btn-control {
    display:block;
    margin:8px 0; padding:4px 6px;
}
.m-thumbnail.type02 .utils .controllers .btn-control:first-of-type {
    margin-top:0;
}
.m-thumbnail.type02 .utils .controllers .btn-control:last-of-type {
    margin-bottom:0;
}
.m-thumbnail.type02 .utils .controllers .btn-control img {
    display:block;
}
.m-thumbnail.type02 .btn-shop {
    display: flex; align-items: center; justify-content: center;
    width:38px; height:38px;
    position:relative;
    border-radius:100%; background-color:#fff;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}
.m-thumbnail.type02 .btn-shop .cart {
    position: relative;
    top:3px; left:-2px;
}
.m-thumbnail.type02 .btn-shop .count {
    width:15px; height:15px;
    position:absolute; top:4px; right:5px;
    font-size:10px;
    border-radius:100%;
    background-color:#fe5f1d; color:#fff;
}

.accent {}
.primary {color:#fe5f1d !important;}
.bg-primary {background-color:#fe5f1d !important;}
.bg-black {background-color:#363636 !important;}

.red {color:red !important;}
.m-overlay.type01 {
    width:100%; height:100%;
    position: fixed; top:0; left:0;
    background-color:rgba(255,255,255,0.7);
    z-index:100;
}
.m-utils.type01 {position:fixed; bottom:80px; right:17px; z-index:10;}
.m-utils.type01 .m-util {
    content:""; display:flex; align-items: center; justify-content: center; width:50px; height:50px; border-radius:100%;
    background-color:#fff;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}
.m-utils.type01 .m-util.disabled {
    background-color:#e1e6e9 !important;
}
.m-utils.type01 .m-util-wrap {
    display:flex; align-items: center; justify-content: flex-end;
    margin-top:16px;
}
.m-utils.type01 .m-util-wrap .title {
    margin-right:14px;
    font-weight:bold;
    text-align: right;
}

.m-swiper.type01 .swiper-slide {
    width:84px; padding-bottom:60px;
    position:relative;
}
.m-swiper.type01 .swiper-slide .title {
    display:none;
    min-width:130px;
    padding:10px 13px;
    position: absolute; top:95px; left:50%;
    transform:translateX(-50%);
    white-space: nowrap;
    font-size:13px; font-weight:bold; text-align: center;
    background-color:#a9b0b6; color:#fff;
    border-radius:20px;
}
.m-swiper.type01 .swiper-slide .title:after {
    content:""; width:20px; height:13px;
    position:absolute; left:50%; transform:translateX(-50%); top:-11px;
    background:url("../img/triangle-gray.png") no-repeat; background-size:20px auto;
}
.m-swiper.type01 .swiper-slide img {display:block; width:100%;}
.m-swiper.type01 .swiper-slide-active .m-thumbnail.type01 {border:3px solid #fe5f1d;}
.m-swiper.type01 .swiper-slide-active .title {display:block;}

.m-drops.type01 {
    display:none; align-items: flex-end;
    max-width:500px; width:100%; height:100%;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    background-color:rgba(0,0,0,0.5);
    z-index:100;
}

.m-drops.type01 .m-drops-inner {
    width:100%;
    margin-top:auto;
    position:relative; bottom:-350px;
    border-radius:12px;
    background-color:#fff;
    transition:all .3s;

}

.m-drops.type01.active {
    display:flex;
    padding: 20px;
}
.m-drops.type01.active .m-drops-inner {
    animation:slideUp .6s;
    bottom:0;
}

@keyframes slideUp {
    0% {
        bottom:-350px;
    }
    100% {
        bottom:0;
    }
}

.m-drops.type01 .m-drop {
    display:flex; align-items: center; justify-content: center;
    padding:14px;
    text-align: center;
    border-bottom:1px solid #e1e1e1;
}
.m-drops.type01 .m-drop:last-of-child {
    border-bottom:none;
}
.m-drops.type01 .m-drop .icon-wrap {
    content:"";
    display:none;
    width:18px; height:18px;
    position:relative;
}
.m-drops.type01 .m-drop .icon-wrap img {
    display:block;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}
.m-drops.type01 .m-drop .text {
    display:flex; align-items: center;
    justify-content: center;
    font-size:16px; font-weight:500;
}
.m-drops.type01 .m-drop .new {
    margin-left:8px;
}
.m-drops.type01 .btn-close {
    display:none;
    position:absolute; top:-30px; right:0px; cursor:pointer;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}


label {cursor:pointer;}
.m-input-file.type01 {}
.m-input-file.type01 input {display:none;}
.m-input-file.type01 label {
    display:flex;
    max-width:120px;
    align-items: center;
    justify-content: center;
}
.m-input-file.type01 label {
    padding:6px 8px;
    border:1px solid #e1e1e1; border-radius:3px;
}
.m-input-file.type01 label span {
    margin-left:6px;
    font-size:13px; color:#53616d;
}
.m-input-file.type01 .file-list {
    display:flex; margin-top:10px;

}
.m-input-file.type01 .file-list li {
    margin-right:8px;
    font-size:13px; color:#53616d;
}

.m-input-checkbox * {
    transition:all .3s;
}
.m-input-checkboxes.type01 {
    display:flex; flex-wrap:wrap;
    margin:-5px;
 }
.m-input-checkboxes.type01 input {
    display:none;
}
.m-input-checkboxes.type01 .m-input-checkbox-wrap {
    width:50%;
    padding:5px;
}
.m-input-checkboxes.type01 .m-input-checkbox label {
    display:flex; align-items: center; justify-content: center;
    height:80px;
    border:1px solid #e1e1e1; border-radius:5px;
    cursor:pointer;
}
.m-input-checkboxes.type01 input:checked + label {
    background-color:#0050ff;
}
.m-input-checkboxes.type01 input:checked + label img {
    filter: brightness(0) invert(1);
}

.m-input-checkbox.type01 input {display:none;}
.m-input-checkbox.type01 label {
    display:inline-block;
    content:""; width:43px; height:27px;
    position:relative;
    background-color:#e1e1e1; border-radius:20px;
}
.m-input-checkbox.type01 label:after {
    content:""; display:inline-block;
    width:21px; height:21px;
    position:absolute; left:3px; top:50%; transform:translateY(-50%);
    background-color:#fff; border-radius:100%;
    transition:all .3s;
}
.m-input-checkbox.type01 input:checked + label {
    background-color:#ff7d26;
}
.m-input-checkbox.type01 input:checked + label:after {left:19px;}

.m-input-checkbox.type02 label {

}
.m-input-checkbox.type02 .m-avatar.type02 {
    align-items: center;
}
.m-input-checkbox.type02 input {display:none;}
.m-input-checkbox.type02 .checkbox {
    flex:0 0 auto;
    content:""; width:23px; height:23px;
    margin-left:auto;
    background:url("../img/radio-inactive.png") no-repeat;
    background-size:20px 20px;
}

.m-input-checkbox.type02 input:checked + label .checkbox {
    background:url("../img/radio-active.png") no-repeat;
    background-size:20px 20px;
}
.m-input-checkbox.type02 .m-avatar.type02 .right {
    width:calc(100% - 160px);
    margin-right:10px;
}
.m-count.type01 {
    margin-left:6px;
    font-size:13px; color:#999;
    white-space:nowrap;
}
.m-input-checkbox.type02 .m-avatar.type02 .right .sub {
    font-size:13px; color:#53616d;
    white-space: nowrap;
}
.m-input-checkbox.type02 .m-avatar.type02 .right .sub img {
    max-width:90px;
}
.m-input-checkbox.type02 .m-avatar.type02 .right .sub + .m-timer {
    margin-left:auto;
    padding-right:10px;
}
.m-input-checkbox.type02 .m-avatar.type02 .right .sub.active {
    font-weight:600; color:#000;
}
.m-input-checkbox.type02.type-block input:checked + label .checkbox {
    background:#fff; color:#333; border:1px solid #ccc;
    text-align: center;
}
.m-input-checkbox.type02.type-block .checkbox {
    display:flex; align-items: center; justify-content: center;
    width:86px; height:27px;
    font-size:14px;
    background:#d11e1e; color:#fff;
    border-radius:15px;
}

.m-input-checkbox.type02.type-img .checkbox {
    width:auto; height:auto; background:none;
}
.m-input-checkbox.type02.type-img .checkbox .box-menu {
    display:flex; align-items: center; justify-content:flex-end;
    width:20px; height:20px;
}
.m-input-checkbox.type02.type-img input:checked + label .checkbox {
    background:none;
}
.m-input-checkbox.type02.type-img input:checked + label .checkbox .new {
    display:inline-block;
    content:""; width:10px; height:10px;
    margin-right:10px; margin-bottom:1px;
    background-color:#ff5000;
    border-radius:100%;
}
.m-input-checkbox.type02.type-text .checkbox {
    width:auto; height:auto; background:none;
}
.m-input-checkbox.type02 .utils {
    display:flex; justify-content: flex-end;
    margin-top:8px;
}
.m-input-checkbox.type02 .util {
    display:flex; align-items: center; justify-content: center;
    width:78px; height:26px; margin-left:10px;
    font-size:13px; color:#333;
    border:1px solid #e1e1e1; border-radius:5px;
}
.m-input-checkbox.type02 .util.active {
    color:#fff; background-color:#ff5000;
    border:none;  border-radius:5px;
}
.m-input-checkbox.type02.type-text input:checked + label .checkbox  {
    background:none;
}

.m-input-checkbox.type03 input {
    display:none;
}
.m-input-checkbox.type03 label {
    display:block;
    padding:6px;
    font-size:13px; color:#53616d; text-align: center;
}
.m-input-checkbox.type03 input:checked + label {
    background-color:#f2f2f2;
}

.m-input-checkbox.type04 label {
    display:flex; align-items: center; justify-content: flex-start;
    font-size:14px;
}

.m-input-checkbox.type04 .m-avatar.type02 {
    align-items: center;
}
.m-input-checkbox.type04 input {display:none;}
.m-input-checkbox.type04 .checkbox {
    flex:0 0 auto;
    content:""; width:23px; height:23px;
    margin-right:16px;
    background:url("../img/radio-inactive.png") no-repeat;
    background-size:23px 23px;
}
.m-input-checkbox.type04 input:checked + label .checkbox {
    background:url("../img/radio-active.png") no-repeat;
    background-size:23px 23px;
}
.m-input-checkbox.type04 .fragment {
    display:flex; align-items: center; justify-content: space-between;
    width:100%;
}
.m-input-checkbox.type04 .fragment .left {
    display:flex; align-items: center; font-size:14px; font-weight:600;
}

.m-input-checkbox.type04 .fragment .right {
    font-size:14px;
}

input[type=checkbox] {display:none;}
.m-input-checkbox.type05 .btn-enter {
    display:flex; align-items: center; justify-content: center;
    width:91px; height:30px; margin-top:3px;
    font-size:13px;
    border:1px solid #ff5000; border-radius:15px; color:#ff5000;
}
.m-input-checkbox.type05 .m-avatar.type02 {
    align-items: center;
}
.m-input-checkbox.type05 .m-avatar.type02 .info .title {
    display:flex; align-items: center;

    margin-bottom:4px;

    max-width: calc(100vw - 209px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight:500;
}
.m-input-checkbox.type05 .m-avatar.type02 .info .body {
    font-size:13px; font-weight:300;
    max-width: calc(100vw - 209px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.m-input-checkbox.type05 .m-avatar.type02 .info .body img {
    max-width:100px;
}
.m-input-checkbox.type05.new .new {
    display:block;
}
.m-input-checkbox.type05.new .m-avatar.type02 .info .body {
    display:block;
    font-weight:500;
}
.m-input-checkbox.type05 .m-avatar.type02 .right {
    display:flex; align-items: flex-start; justify-content: space-between;
}
.m-input-checkbox.type05 .box-menu {
    margin-left:16px;
}
.m-input-checkbox.type05 .new {
    display:none;
    content:"";
    width:10px; height:10px; content:"";
    margin-left:auto; margin-top:6px;
    background-color:#ff5000; border-radius:100%;
}
.m-input-checkbox.type05 .m-avatar.type02 .right .sub {
    font-size:13px; color:#53616d;
    white-space: nowrap;
}
.m-input-checkbox.type05 .m-avatar.type02 .right .sub img {
    max-width:90px;
}

.m-input-checkbox.type05.type-remove .fragment.more {
    display:none;
}
.m-input-checkbox.type05.type-remove .checkbox {
    flex:0 0 auto;
    content:""; width:23px; height:23px;
    margin-left:auto;
    background:url("../img/radio-inactive.png") no-repeat;
    background-size:20px 20px;
}

.m-input-checkbox.type05.type-remove input:checked + label .checkbox {
    background:url("../img/radio-active.png") no-repeat;
    background-size:20px 20px;
}

.width-100 {width:100%;}

.m-btn.type01 {
    display:block;
    padding:13px;
    font-size:14px; font-weight:500; color:#fff; background-color:#fe5f1d;
    border-radius:5px;
    text-align:center;
}
.m-btn.type01.type-revert {
    color:#fe5f1d; background-color:#fff;
}

.m-btn.type02 {
    display:flex; align-items: center; justify-content: center;
    padding:8px 15px;
    font-size:14px; font-weight:500; color:#fff; background-color:#fe5f1d;
    border-radius:15px;
}

.m-btn.type03 {
    display:flex; align-items: center; justify-content: center;
    padding:4px 15px;
    font-size:12px; font-weight:500; color:#fff; background-color:#fe5f1d;
    border-radius:15px;
}

.m-btn.type04 {
    font-weight:600; font-size:14px;
}

.m-box.type01 {
    padding:12px;
    border:1px solid #e1e1e1; border-radius:5px;
}
.m-box.type01 .top {
    display:flex; align-items: flex-start;
}
.m-box.type01 .top .m-ratioBox-wrap {
    flex: 0 0 auto;
    width:74px;
    margin-right:16px; padding-top:70px;
    border-radius:15px;
}
.m-box.type01 .top .content .title {
    margin-top:4px;
    font-size:14px; color:#7e7e7e;
}
.m-box.type01 .top .content .body {
    font-size:14px; font-weight:600;
}
.m-box.type01 .top .m-ratioBox-wrap img {
    width:auto; max-width:80%; max-height:80%; height:auto; max-height:100%;
    top:50%; left:50%; transform:translate(-50%, -50%);
}
.m-box.type01 .bottom {
    display:flex; align-items: center; justify-content: space-between;
    padding:10px 14px;
    padding-bottom:0;
    border-top:1px solid #e1e1e1;
}
.m-box.type01 .bottom .left {
    font-size:12px; font-weight:bold;
}
.m-box.type01 .bottom .right {
    display:flex;
    align-items: flex-end; flex:0 0 auto;
}
.m-box.type01 .bottom .right .discount {
    margin-right:7px;
    font-size:12px; color:#b3b3b3; text-decoration: line-through;
}
.m-box.type01 .bottom .right .price {
    font-size:15px; font-weight:bold;
}

.m-box.type02 {
    margin-bottom:20px;
}
.m-box.type02 .info {
    display:flex; align-items: center; justify-content: space-between;
    margin-bottom:10px;
}
.m-box.type02 .info .title {
    font-size:14px; font-weight:bold;
}
.m-box.type02 .info .sub {
    font-size:12px; color:#fe5f1d;
}
.m-box.type02 .top {
    display:flex; align-items: center; justify-content: space-between;
    padding:8px 15px;
    background-color:#f7f7f7;
    border:1px solid #f2f2f2;
}
.m-box.type02 .top .left .title {
    font-size:10px;
}
.m-box.type02 .top .left .title * {
    font-size:10px;
}
.m-box.type02 .top a {
    margin-left:10px;
    font-size:10px; color:#7e7e7e;
    white-space: nowrap;
}
.m-box.type02 .top span {
    font-size:10px; color:#7e7e7e;
}
.m-box.type02 .m-ratioBox-wrap {
    width:80px; padding-top:80px; margin-right:10px;
}
.m-box.type02 .m-ratioBox-wrap img {
    width:auto;
    max-width:80%;
    max-height:80%;
}
.m-box.type02 .top img {
    margin-left:4px;
    position:relative; top:0.5px;
}
.m-box.type02 .bottom {
    display:flex; align-items: flex-start;
    padding:20px;
    border:1px solid #f2f2f2;

}
.m-box.type02 .bottom .content {
    flex:auto;
}
.m-box.type02 .bottom .btns {
    display:flex;
    width:100%;
    margin-top:20px;
}
.m-box.type02 .bottom .btns .m-btn {
    flex:1;
}
.m-box.type02 .bottom .btns .m-btn {
    margin:0 2px;
}
.m-box.type02 .bottom .emoticon {
    margin-right:20px;
}
.m-box.type02 .bottom .subtitle {
    font-size:14px; color:#7e7e7e;
}
.m-box.type02 .bottom .title {
    margin-bottom:10px;
    font-size:14px; font-weight:bold;
}
.m-box.type02 .bottom .price {
    display:flex; align-items: flex-end;
    font-size:15px; font-weight:bold; color:#fe5f1d;
}
.m-box.type02 .bottom .price .sub {
    margin-left:4px;
    font-size:12px; color:#b3b3b3;
}

.m-center.type01 {
    display:flex; align-items: center; justify-content: center;
    height:100vh;
    padding-bottom:40px;
}

.m-center.type01 > div {
    width:100%;
}
input[type='radio'] {
    display:none;
}
.m-input-radios.type01 {
    display:flex; flex-wrap:wrap;
    margin:-10px;
}
.m-input-radios.type01 .m-input-radio-wrap {
    padding:10px;
}

.m-input-radio.type01:first-of-type label {
    border-top:1px solid #e1e1e1;
}
.m-input-radio.type01 label {
    display:flex; align-items: center;
    padding:20px;
    border-bottom:1px solid #e1e1e1;
}
.m-input-radio.type01 input {
    display:none;
}
.m-input-radio.type01 .box-icon {
    width:20px; height:20px;
    margin-right:12px;
    position:relative;
}
.m-input-radio.type01 .box-icon img {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
}
.m-input-radio.type01 .info .title {
    margin-bottom:1px;
    font-size:15px;
}
.m-input-radio.type01 .info .body {
    font-size:12px; font-weight:300; color:#909090;
}
.m-input-radio.type01 .checkbox {
    content:""; width:23px; height:23px;
    margin-right:16px;
    background:url("../img/radio-inactive.png") no-repeat;
    background-size:23px 23px;
}
.m-input-radio.type01 input:checked + label .checkbox {
    background:url("../img/radio-active.png") no-repeat;
    background-size:23px 23px;
}
.m-input-radio.type02 label {
    display:flex; align-items: center;
    padding-left:26px;
    position:relative;
    font-size:15px; font-weight:400;
}
.m-input-radio.type02 label img {
    display:block;
    margin-right:4px;
}
.m-input-radio.type02 label:before {
    content:""; width:20px; height:20px;
    position:absolute; left:0; top:-1px;
    background:url("../img/radio-inactive.png") no-repeat; background-size:100%;
}
.m-input-radio.type02 input:checked + label:before {
    content:""; width:20px; height:20px;
    background:url("../img/radio-active.png") no-repeat; background-size:100%;
}
.wrap {padding:0 20px;}
.wrap {padding:0 20px;}

.m-input-error {
    margin-top:4px;
    font-size:12px; color:red;
}
.m-input-error-state.type01 {
    margin-left:4px;
}
.m-input-error-state.type01 img {
    display: block;
}
.m-input-error-state.type01 .active {display:none;}
.m-input-error-state.type01.active .active {display:block;}
.m-input-error-state.type01.active .inactive {display:none;}

.m-input-wrap.type01 {}
.m-input-wrap.type01 .m-input-title {
    margin-bottom:4px;
}
/*.m-bottom.type01 {
    max-width:500px; width:100%;
    position:absolute; bottom:15px; left:50%; transform:translateX(-50%);
}*/
.m-bottom.type01 {
    max-width:500px; width:100%;
    margin-top:60px;
}
.m-bottom.type01 .wrap {
    display:flex; align-items: center; justify-content: space-between;
}

.m-bottom.type02 {
    max-width:500px; width:100%;
    position:absolute; bottom:0px; left:50%; transform:translateX(-50%);
}
.m-bottom.type02 .wrap {
    display:flex; align-items: center; justify-content: space-between;
    padding:10px 17px; border-top:1px solid #e1e1e1;
}

.m-bottom.type03 {
    padding-bottom:65px;
}
.m-bottom.type03 .m-bottom-inner {
    max-width:500px; width:100%;
    position:fixed; bottom:0px; left:50%; transform:translateX(-50%);
    background-color:#fff;
    z-index:15;
}
.m-bottom.type03 .wrap {
    display:flex; align-items: center; justify-content: space-between;
    padding:10px 17px;
}

.m-editor.type01 {padding:20px; position:relative;}
.m-editor.type01 textarea {width:100%; color:transparent;}
.m-editor.type01 .content {
    padding:20px;
    position:absolute; top:0; left:0;
    white-space: pre-line;
}
.m-editor.type01 .placeholder {color:#999;}
.m-editor.type01 .hashtag { color:#1a4a98; }
.m-editor.type01 .quote { color:#1a4a98; }
.m-input-textarea.type01 {
    width:100%;
    font-size:14px;
}
.m-input-textarea.type01 textarea {
    width:100%;
    padding:20px;
    resize:none;
    overflow-y: auto;
}
.m-input-textarea.type02 textarea {
    width:100%; height:120px;
    padding:12px;
    border-radius:10px;
    border:1px solid #DBDBDB;
    resize:none;
}
.m-input-textarea.type03 {
    padding:18px;
    background-color:#fff;
    border:1px solid #e1e1e1; border-radius:10px;
}
.m-input-textarea.type03 textarea {
    width:100%; height:140px;
    margin-top:15px;
    font-size:14px; font-weight:300;
    resize:none;
}

.m-box-infos.type01 {}
.m-box-infos.type01 .title {
    font-size:14px;
    font-weight:bold;
}
.m-box-infos.type01 .m-box-info {
    display:flex; align-items: center; justify-content: space-between;
    padding:0 10px;
}
.m-box-infos.type01 .m-box-info .left {
    font-size:12px;
    font-weight:bold;
}
.m-box-infos.type01 .m-box-info .right {
    font-size:15px; font-weight:bold;
}

.m-sidebar.type01 {
    display:none;
    width:100%; max-width:500px; height:100vh;
    position:fixed; top:0; left:calc(50% - 1px);  z-index:101; transform: translateX(-50%);
}
.m-sidebar.type01.active {
    display:block;
}
.m-sidebar.type01 .black {
    content:""; width:100%; height:100%;
    position:absolute; top:0; left:0;
    background-color:rgba(0,0,0,0.3);
}
.m-sidebar.type01 .m-sidebar-inner {
    display:flex; flex-direction: column;
    /*justify-content: space-between;*/
    width:220px; height:100vh;
    position:relative;
    background-color:#fff;
    overflow-y:auto;
    z-index:1;
}
.m-sidebar.type01 .btn-avatar {
    display:flex; align-items: center; justify-content: center;
    width:100%; height:30px; margin-top:20px;
    font-weight:300; color:#fff; background-color:#ff5000; border-radius:15px;
}
.m-sidebar.type01 .top {
    margin-bottom:60px;
}
.m-sidebar.type01 .btn-close {
    width:10px;
    position:absolute; top:20px; right:20px;
}
.m-sidebar.type01 .bottom {
    padding-top:30px; border-top:1px solid #e1e1e1;
}
.m-sidebar.type01 .bottom .box-toggle {
    padding:0 20px;
}
.m-sidebar.type01 .m-thumbnail {
    margin-bottom:12px;
}
.m-sidebar.type01 .m-ratioBox-wrap img {width:auto; height:100%;}
.m-sidebar.type01 .box-toggle {
    display:block;
    margin-bottom:20px;
}
.m-sidebar.type01 .box-toggle .btn-toggle img {
    filter: grayscale(1);
}
.m-sidebar.type01 .box-toggle .btn-toggle.point img {
    filter:none;
}
.m-sidebar.type01 .box-toggle:last-of-type {
    margin-bottom:0;
}
.m-sidebar.type01 .box-toggle .box-title {
    display:flex; align-items: center; justify-content: space-between;
    cursor:pointer;
}
.m-sidebar.type01 .box-toggle .box-title > .title {
    display:flex; align-items: center;
    font-weight:500;
}
.m-sidebar.type01 .box-toggle .box-title .icon-wrap {
    content:""; width:16px; height:16px;
    margin-right:12px;
    position:relative;
}
.m-sidebar.type01 .box-toggle .box-title .icon-wrap img {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}
.m-sidebar.type01 .box-toggle .box-title > .title .name {
    font-size:14px; font-weight:bold;
}
.m-sidebar.type01 .box-toggle .box-title > .title .sub {
    margin-left:2px;
    font-size:12px; color:#4d4d4d;
}
.m-sidebar.type01 .box-toggle .infos {
    display:flex;
}
.m-sidebar.type01 .box-toggle .info {
    margin-right:20px;
}
.m-sidebar.type01 .box-toggle .info .title {
    margin-bottom:2px;
    font-size:12px; font-weight:bold;
}
.m-sidebar.type01 .box-toggle .info .body {
    font-size:12px; color:#4e4e4e;
}
.m-sidebar.type01 .box-body {
    display:block;
    margin-top:20px;
}
.m-sidebar.type01 .box-toggle.active .box-body {
    display:block;
}
.m-sidebar.type01 .box-toggle.active .btn-toggle img {
    transform:rotate(180deg);
}
.m-sidebar.type01 .menu {
    display:block;
    margin-bottom:12px;
    font-size:12px; color:#818181;
}
.m-sidebar.type01 .account {
    display:flex; align-items: center;
    margin-bottom:16px;
}
.m-sidebar.type01 .account:last-of-type {
    margin-bottom:0;
}
.m-sidebar.type01 .account .m-ratioBox-wrap {
    margin-bottom:0; margin-right:12px;
}

.m-sidebar.type01 .account .name {
    margin-bottom:2px;
    font-size:14px; font-weight:bold;
}
.m-sidebar.type01 .account .body {
    font-size:12px; color:#4d4d4d;
}
.m-sidebar.type01 .menu:last-of-type {margin-bottom:0;}
.m-ratioBox-wrap {width:100%; padding-top:59%; position:relative; border:1px solid #ebebeb; overflow:hidden;}
.m-ratioBox-wrap .m-ratioBox {position:absolute; top:0; left:0; right:0; bottom:0;}
.m-ratioBox-wrap img {width:100%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}
.m-ratioBox-wrap iframe {width:105%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}

.m-avatar.type01 {width:27px; padding-top:27px; border-radius:100%;}
.m-avatar.type01 img {width:auto; height:100%;}

.m-avatar.type02 {
    display:flex; align-items: flex-start; padding:10px 17px;
    background-color:#fff;
}
.m-avatar.type02 .top {
    display:flex; align-items: center; justify-content: space-between; margin-bottom:5px;
}
.m-avatar.type02 .top img {
    position:relative; top:2px;
}
.m-avatar.type02 .top span img {
    display:block;
    max-width:90px;
}
.m-avatar.type02 .right {
    margin-left:10px; flex:auto;
}
.m-avatar.type02 .right .info {}
.m-avatar.type02 .right .info .more {
    margin-bottom:6px;
    font-size:10px; color:#54616d;
}
.m-avatar.type02 .right .info .more * {
    font-size:10px; color:#ff7d26;
}
.m-avatar.type02 .right .info .name {
    display:flex; align-items: center; flex:auto;
    font-size:15px; font-weight:800; word-break: break-all;
}
.m-avatar.type02 .right .info .name .sub {
    display:none;
    margin-left:6px;
}
.m-avatar.type02 .right .info .name .title {
    max-width:155px;
    font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;
}
.m-avatar.type02 .right .info .timer {margin-left:6px; font-size:13px; font-weight:bold; color:#d61f21;}
.m-avatar.type02 .right .info .time {font-size:14px; color:#53616d; font-weight:400;}
.m-avatar.type02 .right .body {
    white-space: nowrap; font-size:15px; font-weight:500;
    overflow:hidden; text-overflow:ellipsis;
}
.m-avatar.type03 {
    display:flex; align-items: center;
}
.m-avatar.type03 .left {
    display:flex; align-items: center;
    margin-right:10px;
}
.m-avatar.type03 .right .title {
    font-size:15px;
}
.m-avatar.type03 .right .title * {
    font-size:15px;
}
.m-avatar.type03 .right .body {
    margin-top:2px;
    font-size:14px; color:#fe5f1d;
}
.m-avatar.type03.type-small .m-ratioBox-wrap {
    width:28px; padding-top:28px;
}
.m-avatar.type03.type-small .m-ratioBox-wrap + .m-ratioBox-wrap {
    margin-left: -10px;
}
.m-avatar.type03.type-small .right .body {
    font-size:12px;
}
.m-avatar.type03.type-small .right .body * {
    margin-right:6px;
    font-size:12px;
}

.bold {font-weight:bold !important;}

.m-avatar.type03 .m-ratioBox-wrap {
    width:40px; padding-top:40px; border-radius:100%;
}
.m-avatar.type03 .m-thumbnail + .m-thumbnail {
    margin-left:-15px;
}
.m-avatar.type03 .m-ratioBox-wrap + .m-ratioBox-wrap {
    margin-left:-15px;
}
.m-avatar.type03 .m-ratioBox-wrap img {
    width:auto; max-height:100%;
}
.m-emoticons.type01 {
    transition: all .3s;
}
.m-emoticons.type01.active {
    margin-bottom:0;
}
.m-emoticons.type01 .top {
    display:flex;
    margin:0 -17px;
    margin-top:10px;
    position: relative; z-index:2;
    border-bottom:1px solid #e1e1e1; border-top:1px solid #e1e1e1;
    overflow-x:auto;
    background-color:#fff;
}
.m-emoticons.type01 .top .img-wrap {
    display:flex; align-items: center; justify-content: center; flex:0 0 auto;
    width:44px; height:35px;
}
.m-emoticons.type01 .top .img-wrap.shop {
    border-left:1px solid #e1e1e1;
}
.m-emoticons.type01 .top .img-wrap.active {
    background-color:#ebebeb;
}
.m-emoticons.type01 .top .img-wrap img {
    max-width:80%;
}
.m-emoticons.type01 .emoticons {
    display:flex; flex-wrap:wrap;
    height:250px; overflow-y:auto;
    margin:-10px; padding:10px 0; padding-bottom:0;
}
.m-emoticons.type01 .emoticon-wrap {
    width:20%; padding:10px;
}
.m-emoticons.type01 .emoticon-wrap .m-ratioBox-wrap {
    padding-top:100%;
    border:none;
}
.m-emoticons.type01 .emoticon-wrap img {
    max-width:80%;
    width:auto; height:auto;
}
.m-swiper.type02 {
    position:relative;
}
.m-swiper.type02 .swiper-pagination {
    left:50%; transform:translateX(-50%);
    margin-bottom: 8px;
}
.m-swiper.type02 .swiper-pagination-bullet {
    margin:0 2px;
    background: #D9D9D9;
    opacity: 1;
    width: 5px;
    height: 5px;
}
.m-swiper.type02 .swiper-pagination-bullet-active {
    background: #FF5000;

}
.m-swiper.type02 .deco {
    width:20px;
    position:absolute; top:20px; right:20px; z-index:2;
}
.m-swiper.type02 .swiper-slide .m-ratioBox-wrap {
    padding-top:110%;
}
.m-swiper.type02 .swiper-slide .m-ratioBox {
    background-size:cover; background-position:center;
}
.m-shop.type01 .bases {
    display:flex; padding:4px 0; padding-left:17px;
    width:100%; max-width:500px;
    overflow-x:auto;
    z-index:20;
    background-color:#fff;
}

.m-shop.type01 .base img {
    display:block;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    max-height:90%;
}
.m-shop.type01 .base-wrap {
    margin-right:10px;
    position:relative;
}
.m-shop.type01 .base-wrap.active .base {
    background-color:#303030;
}
.m-shop.type01 .base {
    width:43px; height:43px;
    position:relative;
    background-color:#eee;
    border-radius:100%; overflow:hidden;
}
.m-shop.type01 .base img {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.m-shop.type01 .base-wrap .new {
    position:absolute; top:-2px; left:-2px; right:auto;
    transform:none;
    z-index:2;
}
.m-shop.type01 .categories {
    display:flex;
    min-height:51px;
    padding:4px 0; padding-left:17px;
    overflow-x:auto;
    background-color:#fff;
}
.m-shop.type01 .category-wrap {
    margin-right:10px;
    position:relative;
}
.m-shop.type01 .category-wrap.required .category {
    /*border-color:#ff611a;*/
}
.m-shop.type01 .category-wrap.active .category {
    background-color:#303030;
}
.m-shop.type01 .category-wrap .new {
    position:absolute; top:-2px; left:-2px; right:auto;
    transform:none;
    z-index:2;
}
.m-shop.type01 .category {
    width:43px; height:43px;
    position:relative;
    background-color:#efefef;
    border:2px solid transparent;
    border-radius:100%; overflow:hidden;
}
.m-shop.type01 .category img {
    display:block;
    width:100%;
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.m-shop.type01 .items {
    display:flex; flex-wrap:wrap; align-items: flex-start;
    max-height:calc(100vh - 532px);
    padding:14px 17px; padding-bottom:80px;
    overflow-y:auto;
}
.m-shop.type01 .item-wrap {
    width:25%;
    padding:1px;
    position:relative;
}
.m-shop.type01 .item-wrap .new {
    position:absolute; top:-2px; left:-2px; right:auto;
    transform:none;
    z-index:2;
}
.m-shop.type01 .item-wrap.active .m-ratioBox-wrap {
    border:2px solid #fe5f1d !important;
}
.m-shop.type01 .item .m-ratioBox-wrap {
    padding-top:96%;
    border:3px transparent; border-radius:15px; background-color:#fff;
    border:2px solid transparent;
}
.m-shop.type01 .item .m-ratioBox-wrap img {
    width:auto; height:auto;
}
.m-shop.type01 .item .title {
    display:none;
    padding:2px;
    font-size:12px; font-weight:bold; text-align: center;
    border-radius:15px;
}
.m-shop.type01 .item span {
    display:flex; align-items:center; justify-content: center;
}
.m-shop.type01 .item .title * {
    padding:2px;
    font-size:12px; font-weight:bold; text-align: center;
    border-radius:15px;
}
.m-shop.type01 .item .title.my {
    display:none; align-items: center; justify-content: center;
    width:20px; height:20px; margin:0 auto;
    font-weight:300; font-size:6px; background-color:#4F5D69; color:#fff; border-radius:100%;
}
.m-shop.type01 .item-wrap.disabled .mark {display:block;}
.m-shop.type01 .item-wrap .overlay {
    display:none;
    align-items: center; justify-content: center;
    width:100%; height:100%;
    background-color:rgba(0,0,0,0.5);
    z-index:1;
}
.m-shop.type01 .item-wrap.active .title {

}
.m-shop.type01 .item-wrap.active .overlay {
    display:block;
}
.m-shop.type01 .item-wrap.active .overlay * {
    font-weight:300;
    color:#fff;
}
.m-shop.type01 .item-wrap.active .item .m-ratioBox-wrap img {
    display:block;
    max-width:100%;
    max-height:none;
}
.m-shop.type01 .item-wrap .m-ratioBox-wrap img {
    width:auto;
    max-width:100%;
    max-height:none; border-radius:15px;
}
.m-shop.type01 .item-wrap .mark {
    display:none;
    left:6px; top:4px;
    transform:none;
}
.m-shop.type01 .item-wrap.active .title {

}
.m-shop.type01 .item-wrap .img-box img {
    display:block;
    width:100%;
}

.m-flash.type01 {
    max-width:calc(100% - 40px);
    padding:9px 13px;
    position:fixed; bottom:100px; right:17px;
    border-radius:15px;
    background-color:#53616d;
    font-size:13px;
    z-index:1000;
    color:#fff;
}
.m-flash.type01.error {
    /*background-color:white;
    border:2px solid red; color:red;*/
}
.section.type01 {
    padding-bottom:24px;
}
.section.type01 .section-title {
    margin-bottom:8px;
    font-size:15px; font-weight:600;
}
.area-orders {padding-bottom:40px;}
.area-orders .box-coins .coins .coin .box-img {
    width:60px; height:60px;
    position:relative;
}
.area-orders .box-coins .coins .coin .box-img img {
    position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
}
.area-chats .btn-more {margin:0 auto;}
.area-chats .m-input-checkbox.type02 .m-avatar.type02 .right .sub {
    overflow:hidden; text-overflow: ellipsis;
}
.area-chats .section {
    padding-top:24px;
}
.area-chats .section-top {
    display:flex; align-items: center; justify-content: space-between;
    padding:0 20px;
}
.area-chats .section-top .section-title {
    font-weight:bold;
}
.area-chats .section-top .btn {
    margin-left:8px;
    font-size:13px; font-weight:500; color:#53616d;
}
.area-chats .section-top .btn.active {
    color:#ff5000;
}
.area-follow-choice .m-input-checkbox.type02 .m-avatar.type02 .right .sub {
    overflow:hidden; text-overflow: ellipsis;
}
.area-chat .m-bottom.type03 {padding-bottom:0;}
.area-chat .users-wrap {
    margin-top:55px;
}
.area-chat .users {
    display:flex; align-items: flex-start;
    padding:15px 10px;
    background-color:#fff6f1;
    overflow-x:auto;
}

.area-chat .user-wrap {
    padding:5px;
}
.area-chat .user {
    flex:0 0 auto;
    width:55px;
    text-align: center;
}
.area-chat .user .m-thumbnail {margin:0 auto; margin-bottom:6px;}
.area-chat .user .title {
    font-size:11px; font-weight:800;
    overflow:hidden; text-overflow:ellipsis;
}
.area-chat .user .body {
    font-size:11px; color:#53616d;
    white-space: nowrap; overflow:hidden; text-overflow:ellipsis;;
}
.area-chat .user .btn {
    display:none;
    padding:1px 4px;
    font-size:10px; font-weight:300; border-radius:6px;
    color:#fff; background-color:#53616d;
}
.area-chat .user.active .btn {
    display:inline-block;
}
.area-chat .user.active .body {
    display:none;
}
.area-chat .user.active .m-thumbnail.type01:after {
    content:"";
    width:100%; height:100%;
    position:absolute; top:0; left:0;
    background-color:rgba(0,0,0,0.5);
}
.area-chat .box-top {
    width:100%; max-width:500px;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    background-color:#fff;
    z-index:10;
}
.area-chat .box-top .box-btn {
    display:flex; justify-content: center;
    position:relative;
}
.area-chat .box-top .box-btn .btn-toggle {
    position: absolute; right:0; top:25px;
}
.area-chat .box-top .box-btn .btn-toggle.active {
    transform:rotate(180deg);
}
.area-chat .box-bomb {
    margin-top:20px;
    position:relative;
    border:1px solid #d1d5d8; border-radius:20px;
}
.area-chat .box-bomb.active {
    border-radius:20px 20px 0 0 ;
}
.area-chat .box-bomb.active .arrow {
    transform:rotate(180deg);
}
.area-chat .times {
    display:none;
    width:calc(100% + 2px);
    position:absolute; top:100%; left:-1px;
    border:1px solid #d1d5d8; border-top:1px solid #e1e1e1;
    border-radius:0 0 20px 20px;
    background-color:#fff;
    overflow:hidden;
}
.area-chat .btn-bomb {
    display:flex; align-items: center;
    padding:5px 10px;
}
.area-chat .btn-bomb .text {
    margin:0 4px; margin-right:8px;
    font-size:13px; color:#53616d;
}

.area-chat .chat-container {
    padding-top:242px;
    padding-bottom: 56px;
    height:calc(100vh - 56px);
    overflow-y:auto;
}
.area-chat .chat-container.active {
    padding-top:120px;
}
.area-chat .chat-inner {
    padding:20px 0;
    padding-bottom:0;
}
.area-chat .date-wrap {
    margin-bottom:20px;
    text-align: center;
}
.area-chat .date {
    display:inline-block;
    font-size:11px; font-weight:300; color:#53616d;
}
.area-chat .comment {
    margin:12px 0; padding:6px;
    font-size:12px; text-align: center; font-weight:300;
    background-color:#a9b0b6; color:#fff;
    border-radius:3px;
}

.area-chat .message {
    display:flex; align-items: flex-end;
}
.area-chat .message .content-wrap {
    display:flex; align-items: flex-end;
}
.area-chat .message .content {
    display:inline-block;
    white-space: pre-line;
    padding:10px;
    font-size:13px;
    background-color:#f0f0f0; color:#333;
    border-radius: 0 15px 15px 15px;
}
.area-chat .message .content img {
    max-width:120px;
}
.area-chat .message .time {
    margin:0 6px;
    font-size:10px; color:#8f8f8f;
    white-space: nowrap;
}
.area-chat .message-wrap {
    margin:15px 0;
}
.area-chat .message-wrap.my-message {
    display:flex; justify-content: flex-end;;
}
.area-chat .message-wrap.my-message .content {
    background-color:#fff; border:1px solid #e1e1e1;
    border-radius:15px 0 15px 15px;
}
.area-chat .message-wrap.my-message .content img {
    max-width:90px;
}
.area-chat .message-wrap.other-message {
    display:flex; align-items: flex-start;
}
.area-chat .message-wrap.other-message .m-thumbnail {
    margin-right:8px;
}
.area-chat .message-wrap.other-message .m-ratioBox-wrap {
    flex:0 0 auto;
    width:45px; padding-top:45px; margin-right:8px;
    border-radius:100%;
}
.area-chat .message-wrap.other-message .name {
    margin-bottom:4px;
    font-weight:bold;
}
.area-chat .message-wrap.other-message .name .sub {
    font-size:13px; color:#53616d;
}

.area-chat > .header {
    width:100%; max-width:500px;
    padding:7px 0;
    position:fixed; top:0; left:50%;
    transform:translateX(-50%);
    background-color:#fe5f1d;
    z-index:101;
}
.area-chat > .header .wrap {
    display:flex; align-items: center; justify-content: space-between;
}
.area-chat > .header .right img {
    display:block;
}

.area-chat > .header .m-ratioBox-wrap {
    flex:0 0 auto;
    width:40px; padding-top:35px;
    border:3px solid white;
    background-color:#fff;
    border-radius:100%;
}
.area-chat > .header .left {
    display:flex; align-items: center;
}
.area-chat > .header .left .title {
    display:inline-block;
    max-width:152px;
    margin-left:8px;
    font-size:16px; font-weight:500; color:#fff; white-space: nowrap; text-overflow:ellipsis; overflow:hidden;
}

.area-splash {
    display:flex; align-items:center; justify-content:center; width:100%; height:100vh;
    position: fixed; top:0; left:0;
    background-color:#ffa025;
}

.area-shop {

}
.area-shop .m-navs-padding {
    padding-bottom:0;
}
.area-shop .new:before {
    content:"";
    width:14px; height:14px;
    position:absolute; top:0; left:0;
    background:url("../img/new.png") no-repeat;
    z-index:2;
}
.area-shop .category-wrap.new:before {
    display:none;
}
/*.area-shop .category-wrap.required:before {
    display:inline-block;
    content:"";
    width:10px; height:10px;
    position:absolute; top:0; left:0;
    background:url("../img/star-fill.png") no-repeat;
    background-size:10px auto;
    background-size:100%;
    z-index:2;
}*/
.area-shop .m-thumbnail.type01 {
    max-width:500px; width:100%;
    z-index:10;
    background-color:#e1e1e1;
}
.area-shop .m-thumbnail.type02 {
    padding-bottom:73px; background-color:#f0f0f0;
}

/* 추가부분 */
.area-shop .header.type03 {
    padding-top:0;
}
.area-shop .header.type03 .header-inner {
    background-color:transparent;
    border-bottom:none;
}
.area-shop .m-coin.type01 {
    padding:4px; position:relative;
    background-color:#fff; border-radius:15px;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.area-shop .m-coin.type01 .deco {
    display:flex; align-items: center; justify-content: center;
    width:14px; height:14px;
    position:absolute; top:-6px; right:-6px;
    font-size:10px; color:#fff; background-color:red;
    border-radius:100%;
}
.area-shop .m-coin.type01:before {
    margin-right:4px;

}
.area-shop .header.type03 .header-inner .left i {
    font-size:24px; color:#fff; font-weight:400; text-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}

.area-avatarChoice {
    padding-bottom:100px;
}
.area-avatarChoice .m-btn {}
.area-avatarChoice .m-bottom.type01 {
    padding-bottom:20px;
}
.area-avatarChoice .comment {margin-top:16px; margin-bottom:70px;}
.area-avatarChoice .comment .title {margin-bottom:6px; font-size:18px; font-weight:bold;}
.area-avatarChoice .comment .body {font-size:14px; color:#6f6f6f;}

.area-login {}
.area-login .logo {display:block; margin:0 auto; margin-bottom:50px;}
.area-login .box-title {
    margin-bottom:70px;
    margin-top:-60px;
}
.area-login .box-title .title {
    font-size:24px; font-weight:800; text-align: center;
}
.area-login .links {text-align: right;}
.area-login .links .link {font-size:12px; font-weight:500; color:#fe5f1d;}
.area-login .bottom .links {
    margin-bottom:8px;
    text-align: center;
}
.area-login .bottom {
    width:100%;
    padding-bottom:20px;
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    text-align: center;
}
.area-login .bottom .copyright {
    color:#555;
}
.area-login .bottom .link {
    margin:0 4px;
    font-size:14px;
    color:#999;
}
.area-login .m-input-text.type01 {
    position: relative;
}
.area-login .m-input-text.type01 .deco {
    position:absolute; top:50%; left:13px; transform:translateY(-50%);
}
.area-login .m-input-text.type01 input {
    padding-left:36px;
    border-radius:30px; background-color:transparent;
}
.area-login .m-btn.type01 {
    border-radius:30px;
}
.area-login .box-sns {
    margin-top:10px;
}
.area-login .box-link {
    display:flex; align-items: center; justify-content: center;
    width:100%; height:40px;
    font-weight:bold; font-size:14px;
    border:1px solid #e1e6e9; border-radius:30px;
}
.area-login .box-link .sub {
    margin-left:4px;
    position:relative; top:1px;
    font-size:12px; color:#777;
}
.area-login .m-btn.type01 .sub {
    margin-left:4px;
    position:relative;
    font-size:12px; color:rgba(255,255,255,0.9);
}
.area-login .comment {
    margin-top:20px;
    font-size:12px; text-align: center;
}
.area-login .comment a {
    color:#1a4a98; font-weight:bold; font-size:12px;
}
.area-likes .comment {
    padding:20px 0; padding-bottom:10px;
    font-size:11px; color:#53616d;
}
.area-register .comment {
    font-size:12px; color:#fe5f1d;
}
.area-register .title-big {
    margin-bottom:40px;
    font-size:24px; font-weight:bold;
}
.area-url .box-top img {
    display:block; margin:0 auto; margin-bottom:20px;
}
.area-url .box-top .body {
    display:block;
    margin-bottom:80px;
    font-size:26px; font-weight:bold;
    text-align: center;
}
.area-url .box-top .body .point {
    display:block;
    font-size:26px; font-weight:bold; color:#fe5f1d;
}
.area-url .box-url-wrap {text-align: center;}
.area-url .box-url {display:flex; align-items: center; justify-content: center;}
.area-url .box-url .text {
    font-size:16px; font-weight:bold; color:#fe5f1d;
}
.area-url .box-url .m-input-url {
    display:flex; align-items: center;
    margin-left:16px;
    position:relative;
}
.area-url .box-url .m-input-url.error:after {
    content:"";
}
.area-url .box-url .m-input-url input {
    width:120px; height:20px;
    padding:4px;
    font-size:14px; text-align: center;
    border:1px solid #e4e4e4; border-radius:20px;
}
.area-url .deco {display:block; margin:0 auto; margin-top:70px;}

.area-register .wrap {
    padding:0 30px;
}
.area-register .box-top img {
    display:block; margin:0 auto; margin-bottom:70px;
}

.area-registerEnd .m-comment {
    margin-top:-70px;
}
.area-registerEnd .box-avatar {
    margin-top:100px;
    text-align: center;
}
.area-registerEnd .box-avatar .body {
    margin-top:20px; font-weight:500;
}
.area-write .m-box-secret {
    display:flex; align-items: center;
    width:100%;
    padding:10px 20px;
    position:fixed; bottom:0; left:0px;
}
.area-write .m-box-secret > label {
    margin-left:10px;
    position:relative; top:-3px;
}
.area-write .box-count {
    padding:10px 20px;
    text-align: right; font-weight:400;
    color:#999;
}
.area-write textarea {
    width:100%; height:100%; padding:20px;
    white-space: pre-line;
    word-break: break-all;
}

.area-write .m-editor.type01 .content {
    padding:0; position:static;
    white-space: pre-line; word-break: break-all;
}
.area-write .m-editor.type01 .content * {
    white-space: pre-line; word-break: break-all;

}
.area-write .img {display:block; width:100%;}
.area-write .m-comment {margin:20px; border-bottom:none;}
.area-write .m-comment .right {flex:auto; position:relative; top:12px;}
.area-write .m-comment textarea {

}
.area-write .m-bottom .utils {display:flex; justify-content:flex-end;}
.area-write .m-bottom .utils img {display:block; margin-left:4px;}
.area-write .m-comment.type01.type-reply .right {top:0;}

input {outline:none;}
select {outline:none;}
textarea {outline:none;}

.area-index .m-tabs.type01 {
    margin-top: 8px;
}
.area-index .m-tabs .m-tab-wrap {
    flex:1;
}
.area-index .box-video.active {
    display:block;
}
.area-index .box-video {
    display:none;
    width:100%; height:100%;
    position:fixed; top:0; left:0;
    z-index:1000;
    background-color:black;
}
.area-index .box-video video {
    height:100%;
}
.area-index .box-video .btn-close {
    padding:8px 16px;
    position:absolute; left:20px; top:20px;
    background-color:#fff;
    border-radius:16px;
    z-index:2;
}
.area-index > .img {width:100%;}
.area-index .box-empty {
    position:relative;
}
.area-index .box-empty .base {
    display:block; width:100%;
}
.area-index .box-empty .content {
    margin-top:40px;
    text-align: center;
}
.area-index .box-empty .content .deco {
    display:block; margin:0 auto; margin-bottom:20px;
}
.area-index .box-empty .content .title {
    margin-bottom:28px;
    font-size:15px;
}
.area-index .box-empty .content .btn {
    display:flex; align-items: center; justify-content: center;
    width:104px; height:30px; margin:0 auto;
    background-color:#ff5000; color:#fff; border-radius:5px;
}
.area-index .box-no-permission {
    display:flex; align-items: center; justify-content: center;
    padding:60px 0;
}
.area-index .box-no-permission-inner {
    text-align: center;
}
.area-index .box-no-permission-inner img {
    margin-bottom:19px;
}
.area-index .box-no-permission-inner .title {
    font-size:15px; font-weight:600;
}
.area-setting .menus {}
.area-setting .menus .menu {
    display:flex; align-items: center;
    padding:12px 20px;
    font-weight:500;
    border-bottom:1px solid #e1e1e1;
}
.area-setting .menus .menu .sub {
    font-size:14px; font-weight:300; color:#687684;
}
.area-setting .menus .menu.point {
    font-weight:bold;
    background-color:#fafafa;
    border-top:1px solid #e1e1e1;
}
.area-setting .comment {
    padding:10px 20px;
    font-size:12px; font-weight:300; color:#687684;
}

.area-setting-information > .menus {}
.area-setting-information > .menus > .menu {
    display:block;
    font-weight:500;
}
.area-setting-information > .menus > .menu > .text {
    display:flex;align-items: center;
    width:100%; padding:12px 20px;
    justify-content: space-between;
    border-bottom:1px solid #e1e1e1;
}
.area-setting-information > .menus > .menu:first-child > .text {
    border-top:1px solid #e1e1e1;
}
.area-setting-information > .menus > .menu > .menus .menu .text {
    display:block;
    width:100%; padding:12px 20px;
    font-size:12px; color:#5a6c7b;
    border-bottom:1px solid #e1e1e1;
}
.area-setting-information > .menus > .menu > .menus {
    display:none;
}
.area-setting-information > .menus > .menu.active > .menus {
    display:block;
}
.area-setting-information > .menus > .menu.active > .text img {
    transform:rotate(180deg);
}
.users-edit .form {
    padding-bottom: 16px;
}
.users-edit input {
    font-weight:500;
    color:#5faa65 !important;
}
.users-edit input:disabled {
    color:#333 !important;
}


.red {color:red;}
.blue {color:#3e82f5;}

.area-reply .m-comment.type01 .right .info .name {
    display:block;
    font-size:14px;
}
.area-reply .m-comment.type01 .right .info .sub {font-size:14px;}
.area-reply .m-comment.type01 .right .body {font-size:14px; cursor:pointer;}

.area-reply .m-comment.type01.m-real-comment {padding-bottom:0; border-bottom:none;}
.area-reply .m-comment.type01.m-real-comment .right .info .top {
    display:flex; align-items: flex-start;
}
.area-reply .m-comment.type01.m-real-comment .right .info .util {margin-top:4px; margin-left:10px;}
.area-reply .m-comment.type01.m-real-comment .right .info .name {display:inline-block; font-size:14px; font-weight:400;}
.area-reply .m-comment.type01.m-real-comment .right .info .sub {display:inline-block; font-size:14px;}
.area-reply .m-comment.type01.m-real-comment .right .body {font-size:14px; cursor:pointer;}
.area-reply .m-comment.type01.m-real-comment .top {display:block;}
.area-reply .m-comment.type01.m-real-comment .right .info .name * {display:inline-block;}
.area-reply .m-comment.type01.m-real-comment .right .info .name span {
    display:block;
}
.area-reply .m-comment.type01.m-real-comment .right .info .name .description-wrap {
    margin-top:2px;
    position:relative;
}
.area-reply .m-comment.type01.m-real-comment .right .info .name .description-wrap .comment {
    color:#1a4a98;
}
.area-reply .m-comment.type01.m-real-comment .right .info .name .description-wrap span {
   display:contents;
}
.area-reply .m-comment.type01.m-real-comment .right .info .name span img {display:block;}
/* .area-reply .m-comment.type01.m-real-comment .right .info .name span img:after {
    content:"<br/>"
} */
.area-reply .m-comment.type01.m-real-comment .smalls {display:flex;}
.area-reply .m-comment.type01.m-real-comment .small {margin-right:8px; font-size:13px; color:#53616d;}
.area-reply .m-comment.type01.m-real-comment .small.time {font-weight:300;}
.area-reply .m-comment.type01.m-real-comment .view {
    margin-top:10px;
    position:relative;
}
.area-reply .m-comment.type01.m-real-comment .head {
    padding-bottom:0;
    border-bottom:none;
}
.area-reply .m-comment.type01.m-real-comment .view:before {
    content:""; width:32px; height:1px;
    position:absolute; left:-38px; top:50%;
    transform:translateY(-50%);
    background-color:#e1e1e1;
}
.area-reply .m-comment.type01.m-real-comment .view * {
    font-size:13px; color:#53616d;
}
.area-reply .m-comment.type01.m-real-comment .m-comment.type01.m-real-comment .head {
    padding-right:0;
}
.area-reply .m-comment.type01.m-real-comment .m-comment.type01.m-real-comment .replies {
    margin-left:-66px;
}


.area-alert .fragment .wrap {
    display:flex; align-items: center; justify-content: space-between;
    padding-top:12px; padding-bottom:12px;
    border-bottom:1px solid #e1e1e1;
}
.area-alert .fragment .wrap .title {
    font-size:15px;
}
.area-avatars .box-avatar .box-title {
    display:flex; align-items: center; justify-content: space-between;
    margin-top:15px; margin-bottom:20px;
}
.area-avatars .box-avatar .box-title img {
    display:block;
}
.area-avatars .box-avatar .box-title .title {
    font-size:22px; font-weight:bold;
}

.users-destroy .m-bottom.type03 .wrap {
    padding-bottom:40px;
}
.users-destroy .box-comment {
    padding-top:70px; text-align: center;
}
.users-destroy .deco {margin-bottom:28px;}
.users-destroy .m-comment.type02 {margin-bottom:25px;}
.users-destroy .body {margin-bottom:25px; padding:0 40px; word-break: keep-all; font-size:12px;}
.users-destroy .sub {
    font-size:12px; color:#53616d;
}
.users-destroy3 .box-comment {padding-top:130px;}
.users-destroy3 .m-comment.type02 {margin-bottom:8px;}
.users-destroy4 .m-comment.type02 {
    margin-bottom:4px;
}
.users-destroy4 .body {
    margin-bottom:16px;
}

.users-destroy5 .deco {margin-bottom:90px;}
.users-destroy5 .m-comment.type02 {
    margin-bottom:4px;
}
.users-destroy6 .deco {margin-bottom:90px;}

.area-myAvatars .header.type03 .page-title {
    margin-left:0;
}
.area-myAvatars .btn-plus {
    display:flex; align-items: center; justify-content: center;
    width:38px; height:38px;
    position:absolute; bottom:20px; left:20px;
    z-index: 30; border-radius:100%; background-color:#fff; border-radius:100%;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}
.area-myAvatars .btn-plus img {
    display:block;
}
.area-myAvatars .items {
    display:flex; flex-wrap:wrap;
    padding:2px;
}
.area-myAvatars .item-wrap {
    width:33.33%; padding:2px;
}
.area-myAvatars .item-wrap .item {

}
.area-myAvatars .item-wrap .item .circle {
    width:18px; height:18px;
    position:absolute; left:8px; top:8px;
    border-radius:100%; border:1px solid #53616d;
    background-color:#fff;
    z-index:10;
}
.area-myAvatars .item-wrap.selected .item .circle:after {
    content:"";
    width:10px; height:10px;
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    border-radius:100%;
    background-color:#ff7800;
}
.area-myAvatars .item-wrap .m-ratioBox-wrap {
    padding-top:90%;
    overflow:hidden;
    border:3px solid transparent;
}
.area-myAvatars .item-wrap.active .item {
    border:3px solid #e1e6e9;
}
.area-myAvatars .header .right img {
    display:block;
}
.area-myAvatars .box-top {
    display:flex; align-items: center; justify-content: space-between;
    padding:15px 0;
}
.area-myAvatars .box-top .title {
    font-size:20px; font-weight:bold;
}
.area-myAvatars .item img {
    display:block;
    width:100%; height:auto; max-height:100%; max-width:100%;
    position:absolute; top:0; left:0;
}
.area-myAvatars .item img:first-of-type {
    position:relative;
}
.area-myAvatars .item {position:relative;}

.area-pay .m-input-checkbox.type04 {margin-bottom:10px;}
.area-pay .m-box.type01 {margin-bottom:10px;}
.area-pay .box-message {
    margin-bottom:20px;
    padding:14px 0;
    background-color:#f7f7f7;
}
.area-pay .box-message .top {
    display:flex; align-items: center; justify-content: space-between;
}
.area-pay .box-message .top .title {
    font-size:14px; font-weight:bold;
}

.area-emoticons .item {
    display:flex; align-items: center;
    padding:12px 40px;
    border-bottom:1px solid #f3f5f6;
    cursor:pointer;
}
.area-emoticons .item > img {
    width:62px;
    margin-right:27px;
}
.area-emoticons .item .title {
    display:flex; align-items: center;
}
.area-emoticons .item .title img {
    margin-left:6px;
}
.area-emoticons-show .box-top img {
    display:block; margin:0 auto; width:200px;
}
.area-emoticons-show .box-top {
    margin-top:60px;
    text-align: center;
}
.area-emoticons-show .box-top .title {
     margin-top:10px; margin-bottom:4px;
    font-weight:bold; font-size:16px;
}
.area-emoticons-show .box-top .body-wrap {
    display:flex; align-items: center; justify-content: center;
    margin-top:4px;
}
.area-emoticons-show .box-top .body-wrap img {
    margin-right:8px; margin-left:0;
}
.area-emoticons-show .box-top .body {
    display:inline-block;
    padding:2px 9px;
    font-size:12px;
    color:#fff; background-color:#fe5f1d;
    border-radius:3px;
}
.area-emoticons-show .box-top .sub {
    margin-top:10px;
    font-size:12px; color:#999;
}

.area-emoticons-show .items {
    display:flex; flex-wrap:wrap;
    margin-top:20px; padding:20px;
    background-color:#fafafa;
}
.area-emoticons-show .item-wrap {
    width:33.33%;
    padding:10px 0;
}
.area-emoticons-show .item .m-ratioBox-wrap {
    border:none;
}
.area-emoticons-show .item .m-ratioBox-wrap img {
    width:auto; height:auto; max-height:100%; max-width:100%;
}

.orders-show .title {
    font-size:14px; font-weight:bold;
}
.orders-show .body {
    padding:0 10px;
    font-size:12px; color:#7e7e7e;
}

.m-pop-btns.type-order {
    display:flex;
    margin-top:20px;
}
.m-pop-btns.type-order .m-pop-btn-wrap {
    flex:auto;
    text-align: center;
}
.m-pop-btns.type-order .m-pop-btn-wrap.sub {
    display:flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width:73px;
    margin-right:4px;
    background-color:#f6f6f6;
    border-radius:5px;
}
.m-pop-btns.type-order .m-pop-btn {
    display:block;
}

.orders-pay {
    display:flex; align-items: center; justify-content: center;
    width:100%; height:100vh;
}
.orders-pay .title {
    font-size:20px; font-weight:bold;
}

.area-follow-choice {
    width:100%; max-width:500px; height:100vh;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    background-color:#fff;
    z-index:101;
    overflow-y:auto;
}
.area-follow-choice .m-center.type01 {
    height:calc(100vh - 209px);
}
.area-follow-choice .m-timer {
    margin-left:6px;
}
.area-follow-choice .m-input-wrap .title {
    margin-bottom:12px;
    font-size:15px; font-weight:600;
}
.area-feeds .m-comment .m-comment {
    margin:20px; margin-top:0;
}

.area-index .header {z-index:10;}
.area-index .header .left .page-title {display:flex; align-items:center; margin-left:30px;}
.area-index .header .left .page-title img {margin-left:6px;}
.area-index .m-user.type01 {
}
.m-thumbnail.type02 {position:relative;}
.m-thumbnail.type02 .m-ratioBox-wrap {border:none;}

.m-thumbnail.type02 .base {
    height:191px;
    background-position: center center !important;
    background-size:cover !important;
}
.m-thumbnail.type02 .cha {
    width:100px;
    height: 100px;
    position:absolute;
    z-index:1;
    border-radius:10px;
    background-color:#eee;
    padding-top: 0;
    top: 141px;
    left: 16px;
}
.m-thumbnail.type02 .cha .img {
    width:auto; height:100%;
}
.m-thumbnail.type02 .btn-plus {
    width:auto; height:auto; top:auto; left:auto; transform:none;
    position:absolute; right:4px; bottom:4px; cursor:pointer;
    z-index:20;
}
.m-thumbnail.type02 .btn-plus.big {
    right:12px; bottom:8px;
}
.m-thumbnail.type02 .btn-like {
    width:21px; height:auto; top:auto; left:auto; transform:none;
    position:absolute; right:10px; top:10px; cursor:pointer;
    z-index:20;
}
.m-thumbnail.type02 .utils {
    display:flex; align-items: center; justify-content: space-between;
    padding:0 20px;
    position:absolute; bottom:20px; right:0px;
    text-align: center;
    z-index:20;
}
.m-thumbnail.type02 .utils .controllers {
    display:flex; align-items: center; justify-content: center;
    width:38px; height:38px;
    background-color: #fff;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    border-radius:100%;
}
.m-thumbnail.type02 .utils .btn-save {
    display:flex; align-items: center; justify-content: center;
    min-width:73px; height:38px;
    padding:0 20px;
    font-size:14px;
    border-radius:20px; background-color:#DBDBDB; color:#A7A7A7;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}
.m-thumbnail.type02 .utils .btn-save .point {
    margin-left:2px;
    font-size:14px;
    color:#FF8755;
}
.m-thumbnail.type02 .utils .btn-save.active {
    background-color:#fff; color:#000;
}
.m-thumbnail.type02 .utils .controllers .btn-control {

}
.m-thumbnail.type02 .utils .controllers .btn-control i {
    font-size:24px;
}

.area-search .m-avatar.type02 .right .info .name {
    flex:auto;
    font-weight:600;
}
.area-search .header .wrap {display:flex;}
.area-search .header .wrap .m-input-text {flex:auto; margin-left:12px;}
.area-search .btns {
    display:flex; align-items: center; justify-content: space-between;
    margin-bottom:8px;
}
.area-search .btn {
    font-size:15px; font-weight:bold;
}

.m-menus.type01 {
    padding:10px;
    position:absolute; left:0; top:calc(100% + 2px);
    box-shadow:4px 0px 6px rgba(0,0,0,0.3);
    background-color:#fff;
    border-radius:10px;
    white-space: nowrap;
}
.m-menus.type01 .menu {
    display:flex; align-items: center;
    margin-top:14px;
}
.m-menus.type01 .menu:first-of-type {margin-top:0;}
.m-menus.type01 .menu .img-wrap {
    content:"";
    width:20px; height:20px;
    margin-right:10px;
    position:relative;
}
.m-menus.type01 .menu .img-wrap img {
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
}
.m-menus.type01 .menu .title {
    font-size:14px;
}

.area-backgrounds .m-shop.type01 .items {
    max-height:calc(100vh - 350px);
}
.area-backgrounds .m-shop.type01 .item-wrap {
    width:50%;
}
.area-backgrounds .m-shop.type01 .item-wrap .m-ratioBox-wrap .m-ratioBox > img {
    width:100%;
    max-width:100%; max-height:100%;
}
.area-backgrounds .m-shop.type01 .item-wrap .m-ratioBox-wrap .m-ratioBox > .mark {
    width:auto;
}
.area-backgrounds .m-shop.type01 .item .m-ratioBox-wrap {
    padding-top:62%;
    border:2px solid transparent;
}

.area-backgrounds .m-shop.type01 .bases {
    background-color:#fff; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;
}

.area-alarms .m-input-checkbox.type02 .m-avatar.type02 .left {
    margin-bottom:auto;
}

.area-alarms .m-input-checkbox.type02 .m-avatar.type02 .right {
    display:flex;
    margin-top:5px;
    justify-content: space-between;
}
.area-alarms .m-input-checkbox.type02 .m-avatar.type02 .right .content {
    flex:auto;
}
.area-alarms .m-input-checkbox.type02 .m-avatar.type02 .right .box-img {
    flex: 0 0 auto;
    width:40px; height:40px;
    margin-left:16px;
    position:relative;
    overflow:hidden;
}
.area-alarms .m-input-checkbox.type02 .m-avatar.type02 .right .box-img img {
    width:100%; height:100%;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}
.area-alarms .m-input-checkbox.type02 .checkbox {
    margin:auto 0; margin-left:20px;
}

.area-alarms .m-avatar.type02 .top {
    display:block;
    font-size:14px;
    word-break: keep-all;
}
.area-alarms .m-avatar.type02 .top * {
    font-size:14px;
    word-break: keep-all;
}
.area-alarms .m-input-checkbox.type02 .m-avatar.type02 .right .sub {
    font-size:12px;
}

.m-policy-wrap {
    padding:20px;
}
.m-policy {
    padding:20px;
    white-space: pre-line;
    background-color:#eee;
    word-break: keep-all;
    border-radius:5px;
    font-size:14px;
}

.nprogress-busy {

}

#nprogress .bar {
    display:none;
}

#nprogress .spinner {
    position:fixed; top:47% !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%);
    z-index:100;
}
#nprogress .spinner-icon {
    width:40px !important; height:40px !important;
    border-top-color:#fe5f1d !important; border-left-color:#fe5f1d !important;

}

.area-checkmark {

}
.area-checkmark .box-img {
    width:100%; height:251px;
    margin-bottom:30px;
    position:relative; overflow:hidden;
}
.area-checkmark .img {
    display:block; margin:0 auto;
    position:absolute; top:0; left:50%; transform:translateX(-50%);
}
.area-checkmark .box-content {
    text-align: center;
}
.area-checkmark  .content .title {
    margin-bottom:20px;
    font-size:15px; font-weight:bold;
}
.area-checkmark  .content .body {
    margin-bottom:24px;
    font-size:13px; color:#53616d;
}
.area-checkmark  .content .email {
    font-size:13px; color:#1d78c5;
}
.area-coins {
    background-color:#ededed;
}
.m-card.type01 {
    display:block;
    width:100%; height:180px;
    margin-bottom:20px; margin-top:20px;
    position:relative;
    background:url("../img/base-card.png") no-repeat; background-size:cover; border-radius:10px;
    box-shadow:4px 8px 12px rgba(0,0,0,0.16);
    overflow:hidden;
}
.m-card.type01 .logo {
    position:absolute; top:20px; left:16px;
}
.m-card.type01 .deco {
    position:absolute; top:-40px; right:-20px;
}
.m-card.type01 .bottom {
    position:absolute; left:16px; bottom:16px;
}
.m-card.type01 .bottom  .title {
    font-size:13px; font-weight:300;
    color:#fff;
}
.m-card.type01 .bottom  .body {
    font-size:36px; font-weight:bold; color:#fff;
}
.m-card.type01 .bottom  .body .unit {
    margin-left:-4px;
    font-size:24px; font-weight:bold; color:#fff;
}

.area-coins .box-coins > .title {
    margin-bottom:10px;
    font-size:15px; font-weight:600;
}
.area-coins .box-coins .coins {
    display:flex; flex-wrap:wrap;
    margin:-10px -4px;
}
.area-coins .box-coins .coins .coin-wrap {
    width:33.33%; padding:10px 4px;
}
.area-coins .box-coins .coins .coin {
    padding-top:16px;
    position:relative;
    text-align: center;
    background-color:#fff; border-radius:10px; overflow:hidden; box-shadow:0px 0px 10px rgba(0,0,0,0.1);
}
.area-coins .box-coins .coins .coin .tag {
    display:flex; align-items: center; justify-content: center;
    width:40px; height:18px;
    position:absolute; top:0; left:0;
    font-size:11px; color:#fff; background-color:#d31919;
    border-radius:10px 0 10px 0;
}
.area-coins .box-coins .coins .coin .tag.best {
    background-color:#0d3e64;
}
.area-coins .box-coins .coins .coin .top {
    min-height:120px;
}
.area-coins .box-coins .coins .coin .box-img {
    width:60px; height:60px;
    margin:0 auto; margin-bottom:13px;
    position:relative;
}
.area-coins .box-coins .coins .coin .box-img img {
    position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
}
.area-coins .box-coins .coins .coin .box-title .title {
    font-weight:bold;
}
.area-coins .box-coins .coins .coin .box-title .bonus {
    display:inline-block;
    padding:1px 4px;
    font-size:10px; font-weight:300; color:#fff; background-color:#ff5000; border-radius:10px;
}
.area-coins .box-coins .coins .coin .price {
    padding:12px 0; padding-top:14px;
    background-color:#ff953b; color:#fff;
}

.loader-base {
    width:100%; height:100%;
    position:fixed; top:0; left:0;
    background-color:rgba(0,0,0,0.6);
    z-index:1000;
}
.loader {
    width: 48px;
    height: 48px;

    position: fixed;
    top: 41%;
    left: 45%;
    transform: translate(-50%, -50%);

    border: 5px solid #fe5f1d;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    z-index:1000;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.area-store-home {
    min-height:100vh;
    background-color:#e5e5e5;
}
.area-store-home .btn-shop {
    display:flex; align-items:center;
    padding:4px 4px;
    position:absolute; bottom:10px; right:0px;
    background-color:black; border-radius:20px 0 0 20px;
}
.area-store-home .btn-shop img {
    margin-right:2px;
}
.area-store-home .btn-shop .text {
    margin-left:2px;
    font-size:13px;
    color:#fff;
}
.area-store-home .section-title {
    margin-bottom:10px;
    font-weight:600;
}
.area-store-home .section {
    margin-bottom:20px;
}
.area-store-home .section01 .boxes {
    display:flex; flex-wrap:wrap;
    margin:-5px;
}
.area-store-home .section01 .box-wrap {
    width:33.33%;
    padding:5px;
}
.area-store-home .section01 .box {
    display:block;
    padding:20px 0;
    background-color:#fff; border-radius:10px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.16);
    text-align: center;
}
.area-store-home .section01 .box .title {
    font-weight:bold;
}
.area-store-home .section01 .box-img {
    width:45px; height:45px; margin:0 auto; margin-bottom:8px;
    position:relative;
}
.area-store-home .section01 .box-img img {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}

.area-store-home .section02 .box-img {
    width:20px; height:20px; margin:0 auto; margin-right:10px;
    position:relative;
}
.area-store-home .section02 .box-img img {
    position:absolute; top:50%; left:0; transform:translateY(-50%);
}
.area-store-home .section02 .box {
    display:flex; align-items: center; justify-content: space-between;
    width:100%; height:57px;
    margin-bottom:10px; padding:0 20px;
    background-color:#fff; border-radius:10px;
}
.area-store-home .section02 .box .left {
    display:flex; align-items: center;
}
.area-store-home .section02 .box .left .title {
    margin-left:8px;
}

.m-coin.type01 {
    display:flex; align-items: center; justify-content: center;
     position:relative;
    font-size:13px; font-weight:bold;
}
.m-coin.type01:before {
    content:""; width:19px; height:19px;
    margin-right:8px;
    background:url("../img/coin-smaller.png") no-repeat;
    background-size:cover;
}

.m-content-picture.type01 .boxes {
    display:flex; flex-wrap:wrap;
    margin:-1px;
    margin-top: 2px;
}
.m-content-picture.type01 .m-ratioBox {
    background-size:cover; background-position:center;
    background-color:#eee;
}
.m-content-picture.type01 .box-wrap {
    width:33.33%;
    padding:1px;
}
.m-content-picture.type01 .m-ratioBox-wrap {
    padding-top:100%;
    border:none;
}

.merge-canvas {
    position:absolute; z-index:-1;
    left:-100%; top:-100%;
    opacity:0;
}

.items-center {
    align-items: center;
}

.w-10 { width: 10px; }

.ml-10 { margin-left: 10px; }
.ml-5 { margin-left: 5px; }
.p-10 { padding: 10px; }
.h-15 { height: 15px;}
.flex1 {flex: 1;}
.border-gray-1 { border: 1px solid #e1e6e9; }
.color-gray { color: #999999; }

.users-edit div{
    font-size: 14px;
    font-weight: normal;
}

.users-edit h3{
    font-size: 14px;
    font-weight: 600;
}