@import './reset.css?v=1.1.1';

main { min-height: 60vh; }

/************* common *************/
.btn-close {width: 15px; vertical-align: inherit;}
/**/
.classic-tabs {border-bottom: 1px solid #EEE;}
.classic-tabs li { flex: 1; text-align: center; height: 44px; }
.classic-tabs li a { font-weight: 500; color: #AAA !important; font-size: 16px; position: relative; padding: 10px 0;}
.classic-tabs li a.active { color: #000 !important }
.classic-tabs li a.active em { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 3px; background: #1BA971;}
.classic-tabs li span { display: inline-block; padding: 5px 7px; background: #EB0000; border-radius: 10rem; color: white; font-size: 10px; height: 15px; line-height: 4px; margin-left: 4px; position: relative; top: -3px; }
.hr-big {border-bottom: 7px solid #F3F4F8; width: 100%;}
.hr-m {border-bottom: 3px solid #F3F4F8; width: 100%;}
.hr {border-bottom: 1px solid #F3F4F8; width: 100%;}
.no-data {font-size: 14px; font-weight: 400; color: #777; margin: 2rem 0; text-align: center;}
.no-data h6 {font-size: 14px; font-weight: 500;}
/**/
.pswp img {height: auto !important; position: unset;}
.pswp__img--placeholder {display: none !important;}
.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {transform: translate3d(0px, 0px, 0px) scale(1) !important; display: flex; align-items: center; justify-content: center; position: unset; height: 100vh;}
.hasscroll .header-wrap {position: fixed; top: 0; left: 0; width: 100%; background: white; z-index: 9;}
.hasscroll .body-wrap { overflow-y: scroll; margin-top: 55px; min-height: calc( 100vh - 55px); width: 100vw; max-width: 100%;}
/************* login *************/
main.login {min-height: 100vh}
.login .sns-wrap {display: flex; align-items: center; justify-content: space-evenly; width: 290px; margin: auto;}
.login .sns-wrap img {width: 3.5rem;}
.login .login-title img {width: 10rem;}
.login .select-wrap {position: absolute; bottom: 1rem; left: 0; padding: 0 2rem; width: 100%;}
.login .find-pass a { font-size: .7rem; border-bottom: 1px solid; }
.login .form-control { 
    background-repeat: no-repeat;
    background-position: 0 0.85rem;
    background-size: 1.1rem;
}
.login .form-control.email {
    padding: .6rem 1rem .6rem 2rem; 
    background-image: url(../img/i_email.png);
    background-position: 0 1.1rem;
    background-size: 1.2rem;
}
.login .form-control.password {
    padding: .6rem 1rem .6rem 2rem; 
    background-image: url(../img/i_password.png);
}
.login .top-wrap img {width: 8px;}
.login .bottom-wrap {width: 100%; margin-top: 30.3vh;}
.login .bottom-wrap .btn { margin: 0; border-radius: 0; width: 100%; border: none;height: 47px; line-height: 20px;}
.login .have-btn { width: calc( 100% - 5.2rem ); display: inline-block; height: 2.5rem; }
.login .have-input { margin: 0; width: 5rem; padding: 0 }
p.red-text { font-size: 12px; }
/**/
.login .id-pw-wrap {display: flex; align-items: center; justify-content: space-evenly; width: 300px; margin: 5rem auto;}
.login .id-pw-wrap .item {background: #EEEEEE; width: 120px; height: 120px; padding: 2rem 0; text-align: center; border-radius: 1rem; color: #AAA; font-size: 1rem; font-weight: 500;}
.login .id-pw-wrap .item.active {background: #1BA971; color: white;}
.login .id-pw-wrap .item .img-wrap {height: 35px; text-align: center;}
.login .id-pw-wrap .item img.de-active {display: inline;}
.login .id-pw-wrap .item img.active {display: none;}
.login .id-pw-wrap .item.active img.de-active {display: none;}
.login .id-pw-wrap .item.active img.active {display: inline;}
.login .id-pw-wrap .item:first-child img {width: 33px;}
.login .id-pw-wrap .item:last-child img {width: 30px;}
.auth-wrap .timer {position: absolute; top: 1rem; right: 0; font-size: 12px; color: red;}
.login .form-check-label {font-size: 16px !important; line-height: 21px !important; font-weight: 400;}
#btn-agree-all {font-size: 17px !important;}
.login .term-descript {font-size: 12px; letter-spacing: -.5px; margin-left: 1.9rem; margin-top: 0.25rem;}
.login .support-wrap {position: absolute; bottom: 3rem; width: 100%; font-size: 14px; color: #555; text-align: center; line-height: 20px;}

/************* register *************/
.login .top-wrap {padding: 1.1rem 1.3rem 1rem; font-size: 17px; font-weight: 500; border-bottom: 1px solid #F3F3F3;}
/*.login .top-wrap img {width: 9px;}*/
.login .top-wrap img.close {width: 1rem;}
.login .btn-resend {text-decoration: underline;}
.login .form-check {padding-left: 0;}
.login .term-wrap .form-check-label {font-size: 14px; font-weight: 400;}
.login .term-wrap img {width: 10px; margin-top: 2px;}

/************* home *************/
.header-wrap { padding: 1rem 0.75rem; font-size: 19px; font-weight: bold;}
.header-wrap .btn-back {width: 18px; margin-right: .5rem; vertical-align: baseline;}
.header-wrap .btn-cancel {font-size: 15px; color: #AAA; float: right; font-weight: 400;}
.header-wrap .logo {margin-top: -2px;width: 39px;}
.header-wrap .i_alarm {position: relative; width: 20px;}
.header-wrap .i_alarm img {width: 17px;}
.header-wrap .i_alarm span { position: absolute; top: 2px; right: -14px; display: inline-block; padding: 3px; border-radius: 10rem; background: #DD274E; color: white; font-size: 10px; font-weight: 400; text-align: center; width: 21px; height: 14px; line-height: 8px;}
.header-wrap .i_ggram {position: relative; width: 20px; height: 20px;}
.header-wrap .i_ggram img {width: 20px;}
/*footer*/
.footer-wrap { display: flex; height: 63px; width: 100%; border-top: 1px solid #DDD; position: fixed; bottom: 0; background-color: white; z-index: 9;}
.footer-wrap a {background-repeat: no-repeat; background-position: 50% 0.8rem; padding-top: 2.2rem; width: calc( 100% / 4 ); text-align: center;}
.footer-wrap a span {color: #999999; font-size: 11px;}
.footer-wrap a text { position: absolute; top: -31px; right: -8px; display: inline-block; padding: 2px; border-radius: 10rem; background: #DD274E; color: white; font-size: 8px; font-weight: 400; text-align: center; width: 18px; height: 12px; line-height: 8px;}
.footer-wrap a.on span {color: #223543; font-weight: 500;;}
.footer-wrap a:nth-child(1) {
    background-image: url(../img/i_home.png);
    background-size: 20px;
}
.footer-wrap a:nth-child(2) {
    background-image: url(../img/i_greenlight.png);
    background-size: 22px;
}
.footer-wrap a:nth-child(3) {
    background-image: url(../img/i_join_status.png);
    background-size: 20px;
}
.footer-wrap a:nth-child(4) {
    background-image: url(../img/i_chatting.png);
    background-size: 20px;
}
.footer-wrap a:nth-child(5) {
    background-image: url(../img/i_ggram_v2_off.png);
    background-size: 20px;
}
.footer-wrap a.on:nth-child(1) {background-image: url(../img/i_home_on.png);}
.footer-wrap a.on:nth-child(2) {background-image: url(../img/i_greenlight_on.png);}
.footer-wrap a.on:nth-child(3) {background-image: url(../img/i_join_status_on.png);}
.footer-wrap a.on:nth-child(4) {background-image: url(../img/i_chatting_on.png);}
.footer-wrap a.on:nth-child(5) {background-image: url(../img/i_ggram_v2_on.png);}
/**/
.body-wrap.scroll { overflow-y: scroll; height: calc( 100vh - 118px); clear: both; margin-bottom: 63px;}
.home .home-slider .banner { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw; height: calc(100vw * 0.37);}
.home .swiper-wrap.home-slider {height: calc(100vw * .5 - 25px); position: relative;}
.home .swiper-pagination-bullet {
    width: 4px; height: 4px; padding: 0;
    display: inline-block;
    border-radius: 10px;
    background: #DADADA;
    opacity: 1;
    margin-left: 9px;
}
.home .swiper-pagination-bullet-active { background: #000; width: 20px; }
.home .swiper-pagination { bottom: 0px; width: 100%; }
.home .filter-join-wrap {display: flex; align-items: center; justify-content: space-evenly; padding: 1rem 0; }
.home .filter-join-wrap img {height: 56px;}
.home .join-wrap {padding: 2rem 0 1rem;}
.home .title-wrap strong {font-size: 16px;}
.home .title-wrap a {font-size: 12px; font-weight: 500; float: right; line-height: 17px;}
.home .title-wrap a img {width: 6px; margin-left: 4px; margin-top: -2px;}
/**/
.home .join-list-wrap {padding: 1rem 0; padding-left: 1rem; overflow-x: scroll;}
.home .join-list-wrap-inner {display: flex; align-content: stretch; flex-wrap: wrap; flex-direction: row; flex-wrap: nowrap;}
.home .join-list-wrap-inner .mem-home-item{flex: 0 0 auto;}
.join-item {
    box-shadow: 2px 2px 2px 0 rgb(100 100 100 / 16%), 0 2px 17px 0 rgb(200 200 200 / 20%);
    border-radius: 1rem; padding: 10px 14px; margin-bottom: 12px; width: 100%; 
}
.join-item.home {width: 87vw; margin-right: 5px; padding: 1rem;}
.join-item.active {border: 3px solid #1BA970;}
.join-item .wrapper {display: flex; align-items: center; width: 100%; position: relative;}
.join-item .position-relative, .join-item .profile {width: 60px; height: 60px; border-radius: 6px;}
.join-item .i_join_complete {width: 60px; height: 60px; border-radius: 6px; position: absolute; top: 0; left: 0;}
.join-item.home .i_join_complete {width: 70px; height: 70px;}
.join-item.home .position-relative, .join-item.home .profile {width: 70px; height: 70px; border-radius: 9px;}
.join-item .main-wrap {margin-left: 1rem; font-size: 11px; font-weight: 500; flex: 1;}
.join-item .info-wrap { padding-bottom: .5rem; }
.join-item .info-wrap .hits {font-size: 11px; color: #BBB; float: right;}
.join-item.home .info-wrap {padding: 0; line-height: 17px;}
.join-item .info-wrap span {background: #EEEEEE; padding: 3px 9px; border-radius: 10rem; font-size: 12px; color: #999; margin-right: 4px;} 
.join-item .bottom-wrap {margin-top: 5px; padding-top: 1px; font-weight: 400; font-size: 11px;display: flex; justify-content: space-between;border-top: 1px solid #eee; height: 23px;}
.join-item .bottom-btn-wrap {display: flex; margin: 1rem 0;}
.join-item .btn { height: 38px; padding: 5px !important; font-size: 14px !important;}
.invite-content .g_ticket {width: 58px; height: 26px; font-size: 13px; line-height: 25px; font-weight: 500;}
.day-mark {border-radius: 10rem; border: 1px solid #dd284e; color: #dd284e; padding: 1px 6px 1px; font-size: 10px;margin-right: 3px;}
.day-mark.new { border: none; color: white; background-color: #dd284e; padding-bottom: 2px;}
.day-mark.complete { border: none; color: white; background-color: #A5A9B4;padding-bottom: 2px;}
.join-item .seat-info span {font-size: 12px; color: #dd284e; line-height: 28px; font-weight: 500;}
.join-item .seat-info img {width: 25px; height: 25px; border-radius: 100%; border: 3px solid white;}
.join-item .seat-info img+img {margin-left: -10px; }
.g_ticket {width: 38px; height: 16px; background: url(../img/i_green_ticket.png); background-position: center; background-size: cover; display: inline-block; font-size: 10px; font-weight: 300; text-align: center; color: white; padding-right: 5px; line-height: 16px; vertical-align: bottom;}
.g_cash {width: 15px; height: 15px; background: url(../img/i_greencash.png); background-position: center; background-size: cover; display: inline-block; font-size: 10px; font-weight: 300; text-align: center; color: white; padding-right: 5px; line-height: 16px; vertical-align: bottom;}
.ticket_gift { background-image: url(../img/i_gift_ticket.png); }
.cash_gift { width: 17px; height: 17px; background-image: url(../img/i_gift2.png); }
/**/
.home .ggram-list-home {padding: 1.5rem 0; padding-left: 1rem; overflow-x: scroll;}
.home .ggram-list-home-inner {width: calc(100vw * 2.5); display: flex; align-content: stretch; flex-wrap: wrap; flex-direction: row; flex-wrap: wrap;}
.home .ggram-list-home-inner div {border-radius: 100%; margin-right: .5rem; width: 90px; height: 90px;background-position: center;background-size: 100%;}
.home .mem-list-wrap {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 20px;}
.mem-home-item {text-align: center; margin-right: 14px; margin-bottom: 1rem; margin-right: .5rem;}
.mem-list-wrap .mem-home-item:nth-child(3n) {margin-right: 0;}
.mem-home-item .profile {width: calc(100vw / 3 - 20px); height: calc(100vw / 3 - 20px); border-radius: 5px;}
.mem-home-item .wishJoin-wrap .profile {width: calc((100vw / 3) + 30px); height: calc((100vw / 3) + 30px); border-radius: 5px;}
.mem-home-item h6 {margin-top: 10px; font-weight: 500; font-size: 14px;}
.mem-home-item p {margin-top: 3px; font-weight: 400; font-size: 12px; color: #555;}
.mem-home-item .image-block .txt_pr{position: absolute;left: 0;bottom: 0;width: 100%;text-align: center;background: #00000038;color: #fff;padding: 0.2rem 0;}
.mem-home-item .wishJoin-wrap{border-radius:20px;overflow: hidden;background-color: #fff;padding-bottom: 10px;box-shadow: 2px 2px 2px 0 rgb(100 100 100 / 16%), 0 2px 17px 0 rgb(200 200 200 / 20%);}

.btn_wishjoin{border-radius: 50px;line-height: 20px;padding: 0 !important;text-align: left;padding-left: 25px !important;width: 90%;margin-left: 5% !important;}
.btn_wishjoin.status_on{height: 70px !important;border-color: #f4f3f3 !important;background-color: #fafafa !important;}
.btn_wishjoin:after{content: ' ';border: solid #ff6060;border-width: 0 2px 2px 0;display: inline-block;padding: 3px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg) translate(0%, -50%);position: absolute;right: 1rem;top: 50%;}
.btn_wishjoin span.cgreen{color:#1BA971;font-size: 14px;}
.btn_wishjoin div.cgray{color:#AAA;font-size: 0.8rem !important;}


.ggram-list-wrap {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 20px 0;}
.ggram-list-wrap div {width: calc(100vw / 3 - 2px); height: calc(100vw / 3 - 2px); margin-right: 3px; margin-bottom: 3px; display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; color: #999;}
.ggram-list-wrap div .i_play {width: 15px; position: absolute; top: 10px; right: 10px;}
.ggram-list-wrap div:nth-child(3n), .ggram-list-wrap div:nth-child(3n) img {margin-right: 0;}
/**/
.float-btn {position: fixed; bottom: 1rem; right: 1rem; z-index: 99;}
.float-btn.float-btn-ggram {bottom: 5rem;}
.float-btn.has-tabs { bottom: 5rem;}
.float-btn.float-btn2 { bottom: 8rem;}
.float-btn.float-btn3  { bottom: auto; top: 7.2rem;}
.float-btn.float-btn4  { bottom: auto; top: 13rem;}
.float-btn img {width: 40px;}
#popupEventModal .popup-bottom {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 1rem 1rem;}
#regJoinModal .select-wrap {display: flex; align-items: center; justify-content: space-evenly; width: 100%; }
#regJoinModal .select-wrap img {height: 65px;}
#regJoinModal .item {padding: 1rem; border: 2px solid white; border-radius: 5px;}
#regJoinModal .item.active {border: 2px solid #1BA971; border-radius: 5px;}
#regJoinModal .reg-bottom {display: flex; align-items: center; justify-content: space-evenly; width: 100%; padding-top: 1rem; background: white;}
.invite .desc-title {position: relative; line-height: 2rem;}
.invite .desc-title span {margin-left: 8rem;}
.invite .desc-title img {width: 8rem; position: absolute; bottom: 1px; left: 0;}
.invite .count-wrap {display: flex; justify-content: flex-start; flex: 2}
.invite .count-wrap div {flex: 1;}
.invite .count-wrap h6 {font-size: 14px; font-weight: bold;}
.invite .count-wrap h1 {font-size: 27px; margin-top: .5rem; font-weight: bold; color: #22B792;}
.invite .code-wrap {background: #F4F5F9; border-radius: 6px; padding: 12px; font-size: 1.3rem; font-weight: bold; text-align: center; margin-top: .5rem;}
.invite .btn-bottom-reg {background: #DD2950; color: white; height: 55px; padding: 12px; font-size: 1rem; font-weight: bold; position: fixed; bottom: 0; left: 0; text-align: center; width: 100%; line-height: 27px;}
#codeRegModal .modal-content {border-radius: 0 !important;}
#codeRegModal .reg-bottom {height: 55px;width: 100%; position: relative;}
#codeRegModal .reg-bottom input {width: calc( 100vw - 70px); display: inline-block; height: 55px; padding-left: 1rem;}
#codeRegModal .reg-bottom .btn-send {width: 70px; display: flex; align-items: center; justify-content: center; float: right; background-color: #1BA971; height: 55px; font-size: 1rem; font-weight: 500; color: white;}
#ticketConfirmModal img {width: 5rem; position: absolute; top: -2rem; left: 37%;}
#appDownModal .btn-wrap, #appDownModal2 .btn-wrap  { margin-top: -10rem; text-align: center; z-index: 99; }
#appDownModal .modal-content, #appDownModal2 .modal-content {background: transparent; box-shadow: none;}
#appDownModal button, #appDownModal2 button {width: 18rem; font-size: 1.4rem !important; z-index: 99;}
#appDownModal p, #appDownModal2 p { z-index: 99;}
.modal-backdrop.show { opacity: 0.7; }

/************* greenlight *************/
.greenlight .header-wrap {height: 55px; padding: 0 1rem;}
.greenlight.index .header-wrap {position: fixed; top: 0; left: 0; background-color: white; width: 100%; z-index: 9;}
.greenlight .header-wrap .search-input {width: calc(100% - 42px); position: relative; display: inline-block;}
.greenlight .header-wrap .btn-search {position: absolute; right: 10px; top: 12px; width: 30px; text-align: right;}
.greenlight .header-wrap .btn-favmem {display: flex; align-items: center; justify-content: center; width: 35px; height: 55px; float: right;}
.greenlight .header-wrap .btn-favmem img {width: 17px;}
.greenlight .header-wrap .btn-favmem a {font-size: 15px; font-weight: 500; color: #999;}
.greenlight.index .body-wrap.scroll {overflow-y: unset; margin-top: 55px;}
.filter-tab {width: calc(100% - 35px); overflow-x: scroll; display: inline-block;}
.filter-tab div {width: 23rem; height: 23px;}
.filter-tab span {background: #F2F2F2; padding: 3px 9px; border-radius: 10rem; font-size: 11px; color: #999; margin-right: 0px; } 
.filter-tab span.active {background: #1BA971; color: white;}
.filter-btn {position: relative; width: 30px; height: 50px; display: inline-block; float: right; padding-left: 2px;}
.filter-btn span {display: inline-block; width: 8px; height: 8px; background: #DC264C; border-radius: 100%; position: absolute; top: 0; right: 0;}
/*member*/
.mem_item {padding: 8px 0;}
.mem_item a, .mem_item .mem-wrap { display: flex; align-items: center; width: 100%; }
.mem_item .profile-wrap {width: 70px; display: inline-block; position: relative;}
.mem_item .profile-wrap .profile {border-radius: 6px; width: 70px; height: 70px;}
.join .mem_item .profile-wrap {width: 70px; display: inline-block; position: relative;}
.join .mem_item .profile-wrap .profile {border-radius: 6px; width: 70px; height: 70px;}
.mem_item .profile-wrap .connected {width: 20px; position: absolute; bottom: -6px; right: -6px;}
.mem_item .main-wrap {margin-left: 1rem; font-size: 12px; font-weight: 400; flex: 1;}
.mem_item .main-wrap strong {font-size: 1rem;}
.mem_item .main-wrap span {font-size: 12px; margin-left: 3px;}
.mem_item .main-wrap p {font-size: 13px; color: #777;}
.mem_item .thumb-wrap {width: 70px; display: flex; align-items: center; justify-content: space-around; position: relative;}
.mem_item .thumb-wrap div {width: 20px;}
.join .mem_item .profile-wrap {width: 60px; display: inline-block; position: relative;}
.join .mem_item .profile-wrap .profile {border-radius: 6px; width: 60px; height: 60px;}
.filter-btns {display: flex; flex-wrap: wrap;}
.filter-btns span {background: #F5F5F5; border-radius: 10rem; height: 35px; min-width: 5rem; padding: .5rem 1rem; text-align: center; line-height: 18px; color: #999; font-weight: 500; margin-right: 6px; margin-bottom: 6px;}
.filter-btns span.active {background: #1BA971; color: white;}
.range-wrap {display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 400; margin-top: 10px;}
.label-title {font-size: 15px; font-weight: 500; margin-top: 1.5rem; margin-bottom: 1rem; padding-top: .5rem;}
.filter .ui-widget.ui-widget-content { border: none; background: #F4F5F9; height: 7px;}
.filter .ui-slider-horizontal .ui-slider-range {background: #1BA971;}
.filter .ui-state-active,
.filter .ui-widget-content .ui-state-active, .filter .ui-state-default, .filter .ui-widget-content .ui-state-default {border-radius: 100%; border: none; background: #1BA971; top: -6px !important;}
.filter .ui-state-active, .filter .ui-widget-content .ui-state-active, .filter .ui-widget-header .ui-state-active, .filter a.ui-button:active, .filter .ui-button:active, .filter .ui-button.ui-state-active:hover { border: 1px solid #1BA971 !important; background: #1BA971 !important; }
.filter .bottom-button-wrap { display: flex; height: 55px; width: 100%; color: white; font-weight: 500; font-size: 1rem; position: fixed; bottom: 0; left: 0;}
.filter .bottom-button-wrap div { display: flex; align-items: center; justify-content: center; flex: 1; }
.filter .bottom-button-wrap div:first-child {background: #A5A9B4; }
.filter .bottom-button-wrap div:last-child {background: #DD2950; }
/*ggram*/
.sort-wrap {display: flex; align-items: center; justify-content: space-between;padding: 13px;}
.sort-wrap .sort-wrap-inner {display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; }
.sort-wrap .sort-wrap-inner img {margin-top: -2px;}
.sort-modal li {width: 100%; padding: 9px; font-size: 1rem; font-weight: 500; border-radius: 6px; text-align: center; border: 2px solid white;}
.sort-modal li.active { border: 2px solid #1BA971; }
.search-type-list li {font-size: 1rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;}
.search-type-list li img {width: 9px;}
.ggram .img-wrap { display: flex; flex-wrap: wrap; }
.ggram .img-wrap .reg-wrap {border: 1px solid #D8DBE0; padding: 14px; text-align: center; margin-right: .5rem; width: calc(100vw / 4 - 19px); height: calc(100vw / 4 - 19px);}
.ggram .img-wrap .reg-wrap p {font-size: 12px; color: #AAA; margin-top: 4px; letter-spacing: 1px;}
.ggram .img-wrap .imgwrap { margin-right: .5rem; position: relative; width: calc(100vw / 4 - 19px); height: calc(100vw / 4 - 19px); margin-bottom: .5rem; border: 1px solid #F4F4f4; display: flex; align-items: center;background-position: center; background-repeat: no-repeat; background-size: cover;}
.ggram .img-wrap .imgwrap:nth-child(4n) {margin-right: 0;}
.ggram .img-wrap .imgwrap .close {width: 20px; position: absolute; top: 0; right: 0;}
.ggram .img-wrap .imgwrap video {border: 1px solid #F4F4f4;}
.ggram-item { border-top: 3px solid #F4F5F9; }
.ggram-item .mem_item .profile-wrap { border-radius: 100%; overflow: hidden;}
.ggram-item .banner { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw; height: 100vw; display: flex; align-items: center; justify-content: center;}
.ggram-item .swiper-pagination {margin-top: 13px;}
.ggram .info-wrap {padding: 0 1rem 1.5rem; font-weight: 400; margin-top: 1rem;}
.ggram .hits-wrap {font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.ggram .info-wrap p {font-size: 14px; color: #999; font-weight: 400;}
.ggram .swiper-wrap .banner {width: 100vw; height: 100vw;}
.ggram .uploading {background: lightgray;}
.ggram .ggram_content {word-break: break-word;}
.ggram_video video { height: 100vh; width: 100%; /*object-fit: fill; position: absolute;*/ }
.ggram_video .i_close {z-index: 99; position: absolute; top: 1rem; right: 1rem;}
.comment-item {display: flex; align-items: center; width: 100%; padding: 20px 0; border-bottom: 1px solid #EEE;}
.comment-item .profile-wrap {width: 45px; display: inline-block; position: relative;}
.comment-item .profile-wrap .profile {border-radius: 100%; width: 45px; height: 45px;}
.comment-item .main-wrap {margin: 0 .5rem; font-size: 12px; font-weight: 400; flex: 1;}
.comment-item .main-wrap strong {font-size: 1rem;}
.comment-item .main-wrap span {font-size: 12px; margin-left: 5px;}
.comment-item .main-wrap .comment {font-size: 14px; color: #777;}
.comment-item .btn-comment-more {height: 20px; transform: rotate(90deg); margin-left: .5rem;}
.comment-item .comment-mark {width: 20px; margin: -10px 1rem 0;}
.comment .bottom-comment {border-top: 1px solid #DDD; padding: 5px 0 5px 8px; display: flex; align-items: center; position: fixed; bottom: 0; height: 55px; width: 100%; background: white;}
.comment .bottom-comment .profile {border-radius: 100%; width: 45px; height: 45px;}
.comment .bottom-comment strong {font-size: 1rem; padding: 0 7px;}
.comment .bottom-comment input {flex: 1; border: none; margin: 0 5px;}
.comment .bottom-comment div {width: 70px; background: #1BA971; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; font-weight: 500; height: 55px;}

/*member profile*/
.mem-detail .mem-slider-wrap .banner {width: 100vw; height: 100vw;}
.mem-detail .mem-slider-wrap .swiper-pagination {bottom: 2rem;}
.mem-detail .mem-slider-wrap .swiper-pagination-bullet {background: white; opacity: .4;}
.mem-detail .mem-slider-wrap .swiper-pagination-bullet-active {opacity: 1;}
.mem-detail .mem-slider-wrap .need-profile {display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vw; color: white; font-weight: 500; font-size: 1.1rem; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.4);}
.mem-detail .mem-slider-wrap .need-profile button {color: white !important; line-height: 1rem;}
.mem-detail .top-wrap {position: absolute; top: 1rem; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; z-index: 1; padding: 0 1rem;}
.mem-detail .main-wrap {margin-top: -1rem; padding: 1.5rem 1rem; background: white; border-radius: 1rem; font-weight: 400; position: relative; z-index: 2; margin-bottom: 1.5rem;}
.mem-detail .main-wrap .nickname-wrap {display: flex; justify-content: space-between;}
.mem-detail .main-wrap .gift-wrap {display: flex; padding: 1rem;}
.mem-detail .main-wrap .gift-wrap a {padding: 7px; text-align: center; flex: 1;}
.mem-detail .main-wrap  .gift-wrap p {margin-top: 10px; font-size: 13px; font-weight: 500; }
.mem-detail .bottom-button-wrap { position: fixed; bottom: 0; width: 100%; background: white;z-index: 9;}
.tag-wrap span {background: #F2F2F2; padding: 3px 16px; border-radius: 10rem; font-size: 14px; margin-right: 3px; margin-bottom: 3px; color: #999; font-weight: 400; display: inline-block;} 
.tag-wrap span.active {background: #1BA971; color: white;}
.mem-detail .join-slider-wrap .swiper-slide {border-radius: 8px; border: 2px solid  #F1F1F1; padding: 15px 20px;}
.data-title {font-weight: bold; margin-top: 1.5rem; margin-bottom: .5rem;}
.data-wrap {display: flex; font-size: 14px; font-weight: 500; line-height: 23px;}
.data-wrap .label {width: 100px; color: #999;}
.data-wrap .data {flex: 1; }

/************* Join *************/
.join .map-wrap {position: relative;}
.join .bottom-popup {position: fixed; bottom: 0; left: 0; width: 100%; background: white; z-index: 9;}
.join .bottom-popup .top-wrap {display: flex; justify-content: space-between; font-size: 13px; margin: 1rem; margin-bottom: 0;}
.join .bottom-popup .top-wrap img {width: 14px; height: 14px; margin-top: 4px;}
.join .bottom-popup .join-wrap {height: 260px; overflow-y: scroll; padding: 1rem;}
.join .top-info-wrap {background: #F4F5F9; padding: 7px 1.5rem; font-size: 12px; color: #555;}
.join.join_status .header-wrap { position: fixed; background: white; width: 100%; top: 0; left: 0; z-index: 9;}
.join.join_status .body-wrap.scroll {margin-top: 55px;}
.join_status .sort-wrap, .hasscroll .sort-wrap {position: fixed; top: 50px; background: white; width: 100%; z-index: 9;}
.join_status .join-wrap {margin-top: 50px;}
.join_status .map-wrap {margin-top: 42px; height: calc(100vh - 150px);}
.join_status .bottom-popup {bottom: 50px;}
.info-wrap .mem_item .profile-wrap {width: 80px; }
.info-wrap .mem_item .profile-wrap .profile {width: 80px; height: 80px;}
.info-wrap .mem_item .main-wrap strong {font-size: 1.3rem;}
.btn-request-chat {padding: 5px; border: 1.5px solid #1BA971; border-radius: 6px; color: #1BA971; font-size: 13px; font-weight: 500; width: 90px; text-align: center;}
.btn-request-chat img {width: 12px; margin-top: -2px; margin-right: 3px;}
.join .infos {font-size: 14px; font-weight: 400; line-height: 25px;}
.join .infos p img {width: 13px; margin-right: 5px;}
.join .tag-wrap span {padding: 1px 15px; font-size: 13px; color: #777;}
.join .infos .g_ticket {width: 48px; height: 20px; line-height: 20px;}
.space-between {display: flex; justify-content: space-between; align-items: center;}
.g_ticket_help {width: 76px;height: 16px;background: url(../img/ticket_bg2.png);background-position: center;background-size: cover;display: inline-block;font-size: 10px;font-weight: 300;text-align: center;color: white;line-height: 16px;vertical-align: bottom; margin-top: 4px;}
.g_ticket_help.ticket_gift {background: url(../img/ticket_bg2red.png);background-position: center;background-size: cover;}
.join-help { color: #777; letter-spacing: -1px; line-height: 22px; margin: 1rem 0 0 1rem;}
.join-help .descript { width: calc(100% - 70px); margin-left: 0.5rem;}
.requester-wrap .mem_item {padding: 1rem; border: 1px solid #F3F4F8; border-radius: 12px; margin-bottom: .5rem;}
.join .bottom-button-wrap {position: fixed; bottom: 0; left: 0; height: 50px; padding: .5rem 1rem; color: white; font-size: 15px; font-weight: 500; width: 100%; line-height: 2rem; background: #1BA971;}
.join .btn-request {background: #1BA971; text-align: center;}
.join .review-wrap {background: black; }
.join .btn-review {border-radius: 10rem; width: 5rem; margin: 0; padding: 0; height: 34px; font-size: 14px !important;}
.stadium-wrap {padding: 1rem; position: relative;}
.btn-phone {position: absolute; bottom: 1rem; right: 1rem;}
.join .join-reg-wrap {padding: .5rem 1rem; margin: 1.5rem 0; border-bottom: 3px solid #F3F4F8;}
.join .data-wrap {display: flex; font-size: 15px; font-weight: 400; line-height: 23px;}
.join .data-wrap .label {width: 70px; color: #555; font-size: 16px;}
.join .data-wrap .data {flex: 1; position: relative; }
.data-wrap .data text { background: #F2F2F2; border-radius: 10rem; margin-right: 3px; margin-bottom: 3px; display: inline-block; padding: 7px 16px; font-size: 16px; margin-bottom: 0px; color: #000; font-weight: 500;} 
.data-wrap .data text img {width: 7px; vertical-align: baseline; margin-left: 5px;}
.data-wrap .data.tag-wrap {display: flex; align-items: center; flex-wrap: wrap;}
.join .date-picker {position: absolute; z-index: -1; opacity: 0;}
.join .ticket_wrap .ticket {position: absolute; top: 19px; left: 5px; width: 30px;}
.join .together-wrap {padding: 1rem; margin-top: 1rem; border: 1px solid #DDD; }
.stadium .main-wrap {display: flex; color: #999;}
.stadium .main-wrap li {padding: 12px; background: #F5F5F5; border: 1px solid white; font-size: 15px; font-weight: 500; width: 100px;}
.stadium .main-wrap li.active {background: #1BA971; color: white;} 
.stadium .detail-wrap {border: 2px solid #1BA971; padding: 1rem; width: 100%; margin-left: 4px;}
.stadium .detail-wrap .item {margin-bottom: 1rem;}
.stadium .detail-wrap h5 {font-size: 15px; font-weight: bold;}
.stadium .detail-wrap span {font-size: 13px; font-weight: 400;}
.search-wrap {width: 100%; position: relative; display: inline-block;}
.btn-search {position: absolute; right: 10px; top: 12px; width: 20px;}
.stadium .btn-wrap {position: absolute; top: 1rem; left: 0; width: 100%; display: flex; padding: 0 1rem;}
.stadium .btn-wrap button {font-size: 15px !important; padding: 10px !important; height: 40px; border-radius: 10rem;}
.stadium .data-list.more {max-height: 190px; overflow-y: scroll;}
.mark-wrap {display: flex; align-items: center; justify-content: center; width: 100%; margin: 1rem 0;}
.mark-wrap img {width: 29px; margin-right: 5px; background: none;}
.descript {font-size: 12px; color: #999; font-weight: 400;}
.simplepicker-date-section .simplepicker-select-pane {display: none;}

/************* Chatting *************/
.chat.chat_list .header-wrap {position: fixed; top: 0; left: 0; width: 100%; background: white;z-index: 9;}
.chat.chat_list .body-wrap.scroll {margin-top: 55px;height: calc( 100vh - 178px);}
.chat .item {padding: 1rem;display: flex; align-items: center; width: 100%; border-bottom: 1px solid #F3F4F8;}
.chat .item .profile-wrap {width: 40px; display: inline-block; position: relative;}
.chat .item .profile-wrap .profile {border-radius: 100%; width: 40px; height: 40px;}
.chat .item .main-wrap {margin-left: 1rem; font-size: 14px; color: #777; font-weight: 400; flex: 1;}
.chat .item .main-wrap .g_ticket {position: relative; top: -3px;}
.chat .item .main-wrap .g_cash {position: relative; top: -3px;}
.chat .item .thumb-wrap {font-size: 11px; color: #999; text-align: right;}
.chat .item .thumb-wrap span { display: inline-block; padding: 5px 6px; background: #EB0000; border-radius: 10rem; color: white; font-size: 9px; height: 14px; line-height: 4px; }
.chat .item.group .profile-wrap {width: 50px; align-items: center; justify-content: center; flex-wrap: wrap;}
.chat .item.group .profile-wrap .profile {border-radius: 100%; width: 20px; height: 20px; margin: 1px;}
.chat .item .btn-outline-grey {border-width: 1px !important;}
.boolean .profile {width: 40px; height: 40px; border-radius: 100%;}
.boolean .btn-confirm, .boolean .btn-cancel {font-size: 15px; font-weight: 500; color: #EB0000; padding-top: 12px;}
.boolean .btn-cancel {color: #999; padding: 12px;}
/*chatting*/
.chat.chatting .header-wrap {position: fixed; top: 0; left: 0; width: 100%; background: white; z-index: 9;}
.chat.chatting .body-wrap {padding: 1rem; background: #E9EAEF; padding-right: 1.5rem; margin-bottom: 0; overflow-y: scroll; margin-top: 55px; min-height: calc( 100vh - 110px); width: 100vw; max-width: 100%;}
.chat .date {font-size: 13px; font-weight: 400; text-align: center; margin: 1rem;}
.chat .left-wrap {margin: 1rem 0; display: flex;}
.chat .left-wrap .profile {width: 40px; height: 40px; border-radius: 100%; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;}
.chat .left-wrap .nickname {font-size: 13px; font-weight: 500; margin-bottom: 8px;}
.chat .left-wrap .cont-wrap {background: #FFF; padding: 13px; border-radius: 6px; position: relative;border-top-left-radius: 6px;}
.chat .cont-wrap {max-width: 57vw;}
.chat .left-wrap .arrow {position: absolute; top: 0; left: -.5rem; width: 11px;}
.chat .content {font-size: 13px; font-weight: 400; word-break: break-all;}
.chat .time {font-size: 9px; color: #777; margin: 0 7px; align-items: flex-end; display: flex;}
.chat .right-wrap {margin: .5rem 0; display: flex; justify-content: flex-end; }
.chat .right-wrap .cont-wrap {background: #FFF; padding: 13px; border-radius: 6px; position: relative;border: 2px solid #1BA971; border-top-right-radius: 0;}
.chat .right-wrap .arrow {position: absolute; top: -2px; right: -11px; width: 11px;}
.chat .content img {width: 50vw;}
.chat .bottom-wrap {height: 55px;width: 100%; position: fixed; bottom: 0; left: 0; background-color: white;}
.chat .bottom-wrap input {width: calc( 100vw - 70px); display: inline-block; height: 55px; padding-left: 1rem; border: none;}
.chat .bottom-wrap .btn-send {width: 70px; display: flex; align-items: center; justify-content: center; float: right; background-color: #1BA971; height: 55px; font-size: 1rem; font-weight: 500; color: white;}
.chat .bottom-wrap .btn-cam {width: 70px; display: flex; align-items: center; justify-content: center; float: right; height: 55px; background: white;}
.chat .bottom-wrap .btn-cam img {width: 25px;}
.chat .bottom-wrap .disable-chat {color: gray; font-size: 1rem; line-height: 3rem; text-align: center; display: flex; align-items: center; justify-content: center;}
.chat .g_ticket_help { width: 86px; height: 19px; font-size: 12px; font-weight: 500; line-height: 19px;}
.chat .accept .descript { color: #1BA971; background: #E4FBF1; padding: 5px;}
.mdb-lightbox figure { float: unset; }

/************* More *************/
.more .green_ticket {font-size: 1.1rem; font-weight: bold;}
.more .green_ticket img {width: 32px; margin-top: -3px;}
.more .profile-wrap {margin: 1.5rem 0 1rem; display: flex;}
.more .profile {width: 80px; height: 80px; border-radius: 100%;}
.more .ticket-wrap {padding: 1rem .75rem; background: #F4F5F9; border-radius: 6px; flex: 1; height: 55px; font-size: 1.2rem;}
.more .membership-wrap {border-radius: 6px; border: 1px solid #DDD; padding: 1rem .75rem; display: flex; justify-content: space-between; font-size: 13px; flex: 1;font-weight: 500; align-items: center; margin-left: 5px; height: 55px;}
.more .membership-wrap span {color: #555;}
.more .menu-wrap {display: flex; padding: 1.1rem 0;}
.more .menu-wrap a {padding: 7px; text-align: center; flex: 1;}
.more .menu-wrap p {margin-top: 5px; font-size: 13px; font-weight: 500; }
.more .data-wrap .data, .mem-detail .data-wrap .data { width: calc(100% - 100px); word-wrap: break-word; }
.buy-ticket .item { display: flex; padding: 6px 0; align-items: center; justify-content: space-between;}
.buy-ticket .item button {margin: 0; height: 37px; font-size: 14px !important; width: 7rem; padding: .5rem 1rem !important;}
.ticket-list .item {padding: 1rem; border-bottom: 1px solid #F3F4F8; font-weight: 500; font-size: 1rem;}
.ticket-list .item p {display: flex; justify-content: space-between;}
.ticket-list .data-wrap {font-size: 15px;}
.ticket-desc {background: #F3F4F8; padding: 1.5rem; font-size: 13px; margin: 1.5rem 0;}
/**/
.membership-buy .membership-select {display: flex; margin: 1.5rem 0;}
.membership-buy .membership-select img {width: 110px;}
.membership-buy .membership-select .item {flex: 1; border-radius: 6px; border: 1px solid white; padding: 10px; text-align: center;}
.membership-buy .membership-select .item.active {border: 1px solid #1BA971; box-shadow: 0 2px 12px 0 rgb(100 100 100 / 16%), 0 2px 17px 0 rgb(200 200 200 / 20%);}
.membership-buy .descript-wrap {font-size: 15px; font-weight: 400;}
.membership-buy .price-wrap {display: flex; margin: 2rem 0 1.5rem;}
.membership-buy .price-wrap .item {border-radius: 12px; border: 3px solid white; padding: 1rem 7px; text-align: center; position: relative; flex: 1;box-shadow: 0 2px 12px 0 rgb(100 100 100 / 16%), 0 2px 17px 0 rgb(200 200 200 / 20%); margin: 4px;}
.membership-buy .price-wrap .item.active {border-radius: 12px; border: 3px solid #1BA971; }
.membership-buy .price-wrap .item .hot-mark {position: absolute; top: -30px; left: -3px; width: 40px;}
.membership-buy .price-wrap .item span { background: black; border-radius: 10rem; color: white; padding: 2px 10px; font-size: 11px;}
.event .item img {width: 100%; border-radius: 6px;}
.faq .faq-title {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.faq .faq-title div { margin-right: 1px; margin-bottom: 1px; background: #F4F5F9; color: #999; width: calc(100vw / 3 - 1px); font-size: 15px; font-weight: 500; padding: 12px; text-align: center;}
.faq .faq-title div.active { background: #1BA971; color: white;}
.faq .faq-title div:nth-child(3n) {margin-right: 0;}
.faq .card {border-top: none;}
.set-alarm li {display: flex; justify-content: space-between; margin-top: 1rem;}
.set-alarm li span {font-size: 1rem; font-weight: 500; }
.set-alarm li p {font-size: 13px; font-weight: 400;color: #999; }
/**/
.edit-profile .img-wrap {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.edit-profile .img-wrap .imgwrap {margin-right: 6px; margin-bottom: 6px; position: relative; border-radius: 6px;}
.edit-profile .img-wrap .imgwrap .profile {width: calc(100vw / 3 - 15px); height: calc(100vw / 3 - 15px); border-radius: 6px;}
.edit-profile .img-wrap .imgwrap div.profile {background: #F4F5F9; }
.edit-profile .img-wrap .imgwrap:nth-child(3n) {margin-right: 0;}
.edit-profile .img-wrap .i_thumb {width: 35px; position: absolute; top: 0; left: 5px;z-index: 1;}
.edit-profile .img-wrap .i_close {width: 20px; position: absolute; top: 42%; left: 42%; z-index: 1;}
.edit-profile .label {padding-top: 11px;}
.edit-profile .label span {color: red;}
.edit-profile .form-control {height: 40px;}
.edit-profile .data-wrap {margin-bottom: .5rem;}
.edit-profile .data-wrap .data text {padding: 5px 16px;} 
.edit-profile .data-wrap .data text img {position: relative; top: 2px;} 

/* 메인 화면 이벤트 추천 */
.event-item {
    box-shadow: 2px 2px 2px 0 rgb(100 100 100 / 16%), 0 2px 17px 0 rgb(200 200 200 / 20%);
    border-radius: 1rem; padding: 10px 14px; margin-bottom: 12px; width: 100%; 
}
.event-item.home {width: auto; margin-right: 5px; padding: 0px; margin-right: 13px;width:87vw;}
.event-item.active {border: 3px solid #1BA970;}
.event-item .wrapper {display: flex; align-items: center; width: 100%; position: relative;}
.event-item .i_join_complete {width: 60px; height: 60px; border-radius: 6px; position: absolute; top: 0; left: 0;}
.event-item.home .i_join_complete {width: 70px; height: 70px;}
.event-item.home .position-relative, .event-item.home .profile {background-size: cover; width: 100px; height: 103px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.event-item .main-wrap {margin-left: 1rem; font-size: 11px; font-weight: 500; flex: 1;}
.event-item .info-wrap { padding-bottom: .5rem; }
.event-item .info-wrap .hits {font-size: 11px; color: #BBB; float: right;}
.event-item.home .info-wrap {padding: 0; line-height: 17px;}
.event-item .info-wrap span {background: #EEEEEE; padding: 3px 9px; border-radius: 10rem; font-size: 12px; color: #999; margin-right: 4px;} 
.event-item .bottom-wrap {margin-top: 5px; padding-top: 1px; font-weight: 400; font-size: 11px;display: flex; justify-content: space-between;border-top: 1px solid #eee; height: 23px;}
.event-item .bottom-btn-wrap {display: flex; margin: 1rem 0;}
.event-item .btn { height: 38px; padding: 5px !important; font-size: 14px !important;}
.event-item .seat-info span {font-size: 12px; color: #dd284e; line-height: 28px; font-weight: 500;}
.event-item .seat-info img {width: 25px; height: 25px; border-radius: 100%; border: 3px solid white;}
.event-item .seat-info img+img {margin-left: -10px; }

/* 메인 화면 위시조인 라운딩 */
.wish_join_wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
}
.wish_join_wrap .wish_join {
    width: 130px;
    max-width: 130px;
}
.member_foto_wrap {
    display: flex;
    position: relative;
    left: 20px;
}
.member_foto_wrap .member_foto {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid #F3F4F8;
    
}
.member_foto img {
    position: absolute;
}
.member_foto:not(:first-child) {
    left: -15px;
    border: 4px solid #F3F4F8;
}
.member_foto_wrap > button {
    display: flex;
    align-items: center;
    position: relative;
    left: 20px;
    border: none;
    background-color: inherit;
}

/* 메인 화면 G그램 */
.thumBox_contain {
    display: flex;
    gap: 10px;
}
.thumBox_wrap {
    border-radius: inherit;
    width: 150px;
    min-width: 150px;
    height: 150px !important;
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: inset 0px -20px 20px 0px rgb(0 0 0 / 20%);
    mix-blend-mode: multiply;
}

.thumBox_wrap .thumBox_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    position: relative;
}
.thumBox_wrap .thumBox_head > .imgwrap {
    color: white;
    font-size: 12px;
}
.thumBox_wrap .thumBox_head > .imgwrap img {
    width: 24px;
    height: 24px;
    border: 2px solid white;
    border-radius: 50%;
}
.thumBox_wrap .thumBox_head > .imgwrap span {
    text-shadow: 0px 0px 5px #000000;
    font-weight: 500;
}
.thumBox_wrap .thumBox_head > span {
    color: white;
}
.thumBox_wrap .thumBox_head .playbtn {
    position: absolute;
    font-size: 2.3rem;
    right: 6px;
}
.thumBox_wrap .ggram_cont {
    position: absolute;
    bottom: 14px;
    left: 14px;
    padding-right: 14px;
    font-size: 12px;
    color: white;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 500;
    text-shadow: 0px 0px 5px #000000;
}

/* 메인 화면 골프 친구 추천 */
.thumBox_wrap2 {
    overflow: hidden;
    width: 150px;
    min-width: 150px;
    height: 150px !important;
    background-size: cover;
    background-position: center;
    position: relative;
}
.thumBox_wrap2 .thumBox_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    position: relative;
}
.thumBox_wrap2 .thumBox_head > .imgwrap {
    color: white;
    font-size: 9px;
}
.thumBox_wrap2 .thumBox_head > .imgwrap img {
    width: 24px;
    height: 24px;
    border: 2px solid white;
    border-radius: 50%;
}
.thumBox_wrap2 .thumBox_head > span {
    color: white;
}
.thumBox_wrap2 .thumBox_head .playbtn {
    position: absolute;
    font-size: 2.3rem;
    right: 6px;
}
.thumBox_wrap2 .ggram_cont_wrap {
    position: relative;
    height: 100%;
}
.thumBox_wrap2 .ggram_cont_wrap .ggram_cont_bottom {
    padding: 10px;
    background-color: #000000;
    opacity: 0.7;
    color: white;
    position: absolute;
    bottom: 0;
    font-size: 9px;
    width: 100%;
    text-align: center;
    font-weight: 500;
}