.sign_box {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    margin: auto;
}

.sign_header {
    position: relative;
    height: 45px;
    margin-bottom: 30px;
}

.prev_btn {
    position: absolute;
    left: 5.33%;
    top: 18px;
    cursor: pointer;
}

.sign_header h1 {
    text-align: center;
    font-size: var(--main_font_size);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 16px;
    font-weight: 500;
}
.ticket_header {
    position: relative;
    height: 45px;
    margin-bottom: 30px;
}
.ticket_header.m_none {
    margin-bottom: 40px;
    margin-left: 38px;
    padding-top: 40px;
}
.ticket_header h2 {
    font-family: 'Nanum Myeongjo';
    font-size: 24px;
    font-weight: 800;
    color: #444;
}
.ticket_header h3 {
    text-align: center;
    font-size: var(--main_font_size);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 16px;
    font-weight: 500;
    color: #111;
}

.input_wrap.phone {
    width: 61.33%;
    margin-right: 1.33%;
    margin-bottom: 5px;
}

.x_btn {
    filter: opacity(0.1);
    width: 24px;
}

input[type=text]:focus+.login_img_box>.x_btn {
    filter: opacity(1);
}

.notice_box {
    width: 89.33%;
    height: 24px;
    display: flex;
    position: relative;
    margin-top: 10px;
    margin-bottom: 30px;
}
.notice_box img{
    width: 24px;
}

.notice_box h6 {
    position: absolute;
    top: 50%;
    left: 29px;
    transform: translateY(-50%);
    font-size: var(--main_font_size_m);
    color: #888;
    font-weight: normal;
}

.input_wrap.sign_up {
    margin-bottom: 5px;
}

.notice_box.margin {
    margin-top: 10px;
    margin-bottom: 10px;
}

.info_box {
    width: 89.33%;
    height: 24px;
    display: flex;
    position: relative;
    margin-bottom: 20px;
}

.info_box h6 {
    position: absolute;
    top: 50%;
    left: 29px;
    transform: translateY(-50%);
    font-size: var(--main-font-size_m);
    color: #888;
    font-weight: normal;
}

.check_btn {
    filter: opacity(0.1);
    cursor: pointer;
    width: 24px;
}
.check_btn.active {
    filter: opacity(1);
}

/* loading img div */
.loading_box {
    position: absolute;
    z-index: 12000;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: 65%;
    margin-top: -70px;
    display: none;
}
    .loading_box> img {
        width: 55px;
    }
    .loading_box> p{
        font-size: 18px;
        font-weight: 500;
    }

/* signUp */

/* signUp 반응형 */

@media screen and (max-width:423px) {
    .info_box h6 {
        font-size: 13.5px;
    }

    .notice_box h6 {
        font-size: 13.5px;
    }
}

@media screen and (max-width:362px) {
    .info_box h6 {
        width: 100%;
        font-size: 12px;
    }

    .notice_box h6 {
        font-size: 12px;
    }

    .num_btn {
        font-size: 12px;
    }
}

/* /signUp 반응형 */

/* password */
.notice_box.margin_m {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* /password */
.login_wrapper .logo {
    position: absolute;
    top: 41.76%;
    left: 50%;
    transform: translateX(-50%);
}

/* login */
.flex_wrapper.login_btn {
    display: block;
    width: 89.33%;
    height: 101px;
    margin: auto;
    position: absolute;
    bottom: 7.02%;
    left: 50%;
    transform: translateX(-50%);
}
.logo >img{
    width: 216.9px;
}

.other_btn {
    width: 100%;
    height: 51px;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
}

.other_btn .other_txt {
    color: #000;
    font-size: var(--main_font_size_m);
    font-weight: normal;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* /login */

/* other_login */
.other_wrapper div:first-child {
    margin-bottom: 5px;
}

.other_wrapper div:nth-child(2) {
    margin-bottom: 10px;
}

.login_txt {
    width: 89.33%;
    margin: auto;
    height: 20px;
    overflow: hidden;
    font-size: var(--main_font_size_m);
    color: #808080;
    margin-top: 20px;
}

.login_left_txt {
    float: left;
}

.login_right_txt {
    float: right;
}
@media screen and (max-width:768px) {
.other_bottom {
    display: block;
    width: 89.33%;
    height: auto;
    margin: auto;
    position: fixed;
    bottom: 7.02%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 384.13px;
}
}
@media screen and (min-width:768px) {
    .other_bottom {
        display: block;
        width: 89.33%;
        height: auto;
        margin: auto;
        margin-top: 71px;
    }
}

/* /other login */

/* sns_sign_up */
.sign_title{
    width: 89.33%;
    margin:auto;
    font-size:var(--main_font_size);
    color:#888;
    margin-bottom:10px;

}
.flex_wrapper.sns {
    margin-bottom:30px;
}

.notice_box.sns_box {
    margin-bottom: 10px;
}

/* /sns_sign_up */

/* profile */
.sign_header.profile {
    margin-bottom: 10.66%;
}

.user_img {
    width: 110px;
    height: 110px;
    background-image:url(/resources/img/user.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.plus_icon {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor:pointer;
}
.plus_icon img{
    width: 30px;
}
.profile_txt {
    width: 89.333%;
    height: 100%;
    color: #888;
    font-weight: 500;
    margin-top: 5.33%;
    margin-bottom: 2.66%;
    display:flex;
    align-items:center;
}
.platform_box{
    display:flex;
}
.platform_box img{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.platform_box img:first-child{
    margin-left: 8px;
}
.profile_bottom_btn{
    display:flex;
    width: 89.33%;
    margin:auto;
    justify-content:space-between;
    color:#888;
    font-size:14px;
    padding-bottom: 50px;
}
.profile_bottom_btn >span{
    border-bottom:1px solid #888;
    cursor:pointer;
}

.update_btn {
    margin-top: 30px;
    margin-bottom: 20px;
    height: 50px auto;
    cursor:pointer;
}

/* /profile */

/* option */
.option_box {
    width: 89.333%;
    height: auto;
    margin: auto;
    overflow: hidden;
}

.option_box.margin {
    margin-bottom: 18px;
}

.option_txt span {
    display: inline-block;
    transform: translateY(-4px);
    font-size: 12px;
    font-weight: normal;
}

.option_txt {
    height: 42px;
    color: #444;
    font-weight: 500;
    float: left;
}

.option_txt_right {
    float: right;
}

.option_btn_box {
    width: 51px;
    height: 31px;
    border-radius: 20px;
    background-color: #E9E9EB;
    position: relative;
    cursor: pointer;
    border: none;
    outline: none;
    float: right;
}

.option_btn {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    transition: all 0.5s;
}

.option_btn.active {
    left: 20px;
}

.option_btn_box.active {
    background-color: #000;
}

.option_line {
    width: 100%;
    height: 15px;
    background-color: #f5f5f5;
    margin-top: 29px;
    margin-bottom: 38px;
}

/* /option */

/* notice */
.sign_header.notice {
    margin-bottom: 18px;

}

.flex_wrapper.notice {
    text-align: center;
}

.notice_txt {
    width: 50%;
    height: 50px;
    border-bottom: 2px solid #f6f6f6;
    box-sizing: border-box;
    font-size: var(--main_font_size_m);
    font-weight: 500;
    line-height: 36px;
    color: #888;
    position: relative;
    transition: all 0.5s;
}

.notice_txt.active {
    font-weight:bold;
    color: #111;
    border-bottom: 2px solid #444;
}

.btn_purchase {
    display: flex;
    justify-content: center;
    align-items: center;
}

.notify_txt {
    width: 50%;
    height: 50px;
    border-bottom: 2px solid #f6f6f6;
    box-sizing: border-box;
    font-size: var(--main_font_size_m);
    font-weight: 500;
    line-height: 36px;
    color: #888;
    position: relative;
    transition: all 0.5s;
}

.notify_txt.active {
    font-weight:bold;
    color: #111;
    border-bottom: 2px solid #444;
}

.input_wrap.notify {
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border-bottom: solid 1px #dedede;
    margin: auto;
    word-break: break-all;
    margin-bottom: 10px;
}

.div_product {
    margin-top: 20px;
}

.product {
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: solid 1px #e5e5e5;
    margin: 0px 20px;
    word-break: break-all;
    margin-bottom: 10px;
    width: calc(100% - 40px);
    /* display: flex;
    justify-content: space-between; */
    text-align: left;
}

.product.active {
    border: solid 1px #626262;
}

.product_name {
    color: #fc9d2b;
    font-size: 15px;
    font-weight: bold;
}

.product .sale {
    padding: 4px;
    border-radius: 3px;
    background-color: #fa5858;
    color: #fff;
    font-size: 12px;
}

.product_price {
    color: #111111;
    font-size: 16px;
    font-weight: bold;
}

.product_price_del {
    color: #888888;
    font-size: 13px;
    margin-left: 5px;
    text-decoration: line-through;
}

.purchase_info {
    margin-top: 30px;
    text-align: left;
    width: calc(100% - 60px);
    padding: 0px 30px;
}

.purchase_info h4 {
    font-size: 16px;
    font-weight: 500;
    color: #888888;
}

.purchase_info_row {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.purchase_info_row.dashed_line {
    width: 100%;
    margin-left: 0px;
    margin-top: 22px;
}

.purchase_info_row span {
    color: #111111;
    font-size: 14px;
}

.purchase_info_row .purchase_number {
    font-family: Roboto;
    font-size: 16px;
}
.purchase_info_row .discount_amount {
    font-family: Roboto;
    color: #ff3434;
}

.purchase_info_row.total_info span {
    font-size: 16px;
}

.purchase_info_row.total_info .purchase_total_number {
    font-family: Roboto;
    font-size: 24px;
    font-weight: 500;
}

.total_info {
    margin-top: 20px;
    text-align: left;
    width: calc(100% - 60px);
    padding: 0px 30px;
}

.div_btn_pay {
    width: calc(100% - 40px);
    height: 50px;
    margin: 60px 20px;
    cursor: pointer;
}

.btn_pay {
    background-color: #060607;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
}

.notify_contents_box .input_wrap.active {
    border: solid 1px #626262;
    background-color:#fff;
}

.notify_contents_box .new_icon_box {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
.new_icon_box img{
    width: 24px;
}

.new_icon_box.active {
    display: block;
}

.notify_contents_box {
    display: none;
    width: 100%;
    height:auto;
    background-color:#f5f5f5;
}
.ticket_history_contents_box {
    display: none;
    width: 100%;
    height:auto;
    padding-bottom: 70px;
}
.history_box {
    font-size: 14px;
    text-align: left;
}
.history_title{
    color: #444444;
}
.history_date{
    font-size: 12px;
    color: #888888;
}
.history_amount_plus{
    color: #fc9d2b;
}
.history_amount_minus{
    color: #fa5858;
}

.remain_coin_info {
    display: flex;
}
.remain_coin_info span {
    height: 30px;
    line-height: 30px;
}
.coin_title {
    width: calc(100% - 40px);
    text-align: left;
    color: #111111;
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 17px;
}

@media screen and (min-width:768px){
    .coin_title{
        width: calc(100% - 80px);
    }
}

.user_txt_box{
    text-align:center;
    color:#111;
    padding:30px 0px 20px;
    font-size:var(--main-font-size_m);
    font-weight:500;
}
.notice_contents_box {
    width: 100%;
}
.notice_contents_box .input_wrap{
    text-align:left;
    margin:auto;
    height:auto;
    padding:30px 0px;
}
.notice_contents_box .input_wrap::after{
    content:"";
    display:block;
    position: absolute;
    bottom:0;
    left:-10%;
    width: 100vw;
    height: 1px;
    background-color:#f5f5f5;
}
.notice_contents_box .bg{
    margin-bottom:2px;
}
.notice_contents_box .notice_bg.active{
    background-color:#060607;
    color:#fff;
}
.notice_contents_box .notice_bg.active .date_box{
    color:#888;
}
.notice_contents_box .right_new_icon{
    position: absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}
.notice_contents_box .right_new_icon img{
    width: 24px;
}
.notice_contents_box .notice_bg .new_icon_w{
    display:none;
}
.notice_contents_box .notice_bg.active .new_icon_w{
    display:block;
}
.notice_contents_box .notice_bg.active .new_icon{
    display:none;
}

/* purchase box */
.remain_ticket {
    border-radius: 5px;
    border: solid 1px #626262;
    box-sizing: border-box;
    margin: 0px 20px 20px 20px;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    color: #444444;
    font-size: 14px;
    padding: 0px 20px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.remain_ticket_count {
    color: #fc9d2b;
    font-size: 18px;
}

.gift_icon {
    margin-right: 8px;
    vertical-align: -5px;
    width: 30px;
    height: 20px;
}

.coin_icon {
    margin-right: 8px;
    width: 30px;
    height: 30px;
}

/* ticket gift */
.ticket_contents_box {
    width: 100%;
}
.ticket_gift {
    padding: 0;
    margin: 10px auto 0;
}
.ticket_noti_box {
    width: 89.333%;
    text-align: left;
    margin: 10px auto 0;
    text-align: left;
}
.ticket_noti_box > li {
    width: calc(100% - 8px);
    min-height: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #888;
    list-style: '- ';
    margin-left: 8px;
}

/* 이동국 8/13 공지해더작업 */
@media screen and (min-width:768px){
    .remain_ticket {
        margin: 0px 40px 20px;
    }
    .remain_ticket_gift {
        margin: 0px 20px 5px;
    }
    .product {
        width: calc(100% - 80px);
        margin: 0px 40px;
        margin-bottom: 10px;
    }
    .purchase_info {
        width: calc(100% - 100px);
        padding: 0px 50px;
    }
    .purchase_info_row.dashed_line {
        width: calc(100% + 20px);
        margin-left: -10px;
    }
    .total_info {
        width: calc(100% - 100px);
        padding: 0px 50px;
    }
    .div_btn_pay {
        width: calc(100% - 80px);
        margin: 60px 40px;
    }
    .gift_send_btn {
        width: calc(100% - 40px);
        margin: 60px 20px;
        position: absolute;
        bottom: 0;
    }

    .notice .sign_header{
        background-image: url(/resources/img/notice.png);
        background-size: 2590px;
        background-position-x: 50%;
        background-repeat: no-repeat;
    }

    .wrapper.notice  .notice.sign_header h1{
        text-align: left;
        min-width: 1100px;
        max-width: 1100px;
        transform: translate(0%);
        position: unset;
        margin: auto;
        font-family: 'Nanum Myeongjo', serif;
        font-weight: 800;
        color: #000;
        font-size: 36px;
        letter-spacing: 1.8px;
        padding-top: 110px;
        margin-bottom: 10px;
    }

    .notice.sign_header h2{
        min-width: 1100px;
        max-width: 1100px;
        color: #383930;
    }

    .ticket_header.ticket_header2 {
        margin-left: 20px;
        height: 30px;
    }
}
/* /이동국 8/13 공지해더작업 */


/* /notice */

/* notice_view */
.sign_header.view{
    margin-bottom:0;
}
.notice_view_bg{
    width: 100%;
    background:#060607;
    color:#fff;
    position: relative;
    padding:20px 0px;
    height:auto;
}
.notice_view_bg img{
    width: 24px;
    position: absolute;
    top:8px;
    right:2.1333%;
}
.notice_view_bg .input_wrap{
    margin:auto;
}
.notice_view_bg .view_txt_box{
    width: 300px;
    height:auto;
    word-break:break-all;
    font-size:20px;
}
.notice_view_bg .date_box{
    color:#888;
    font-size:12px;
    margin-top:10px;
}
.view_contents_box{
    width: 89.33%;
    margin:auto;
    padding:20px 0px 29px 0px;
    word-break:break-all;
}
/* /notice_view */

/* drop_user */
.sign_header.drop{
    margin-bottom:30px;
}
.drop_txt {
    font-size: 16px;
    font-weight: 500;
    color: #888;
    width:89.33%;
    margin-bottom:10px;
}
.drop_txt_area{
    width: 89.33%;
    height: 200px;
    resize:none;
    outline:none;
    border-radius: 5px;
    border: solid 1px #ebebeb;
    box-sizing:border-box;
    padding:20px 0px 0px 20px;
    margin-bottom:10px;
}
.notice_box.drop{
    margin:0;
    margin-bottom:10px;
}
.drop_txt_area:focus{
    border:1px solid #111;
}
.next_btn.drop{
    margin:auto;
    position: absolute;
    bottom:13.33%;
    left:50%;
    transform: translateX(-50%);
}

/* /drop_user */

/* service */
.flex_wrapper.service .notice_txt{
    text-align: center;
    line-height:50px;
}
.notice_txt.service{
    margin-bottom:32px;
}
.service_title{
    width:100%;
    color:#444;
    line-height:24px;
    font-size:var(--main_font_size);
    margin-bottom:5px;
}
.service_date{
    width:100%;
    color:#888;
    font-size:var(--main_font_size_m);
    line-height:20px;
    margin-bottom:20px;
}
.service_contents{
    width:100%;
    word-break:break-all;
    padding-bottom:9%;
    box-sizing:border-box;
}
.service_box{
    width: 89.33%;
    margin:auto;
    margin-bottom: 50px;
    height:auto;
    display:none;
}
.service_box.active{
    display:block;
}
.service_center_txt{
    width: 89.33%;
    margin:auto;
    height: 60px;
    line-height:60px;
    position: relative;
}
.flex_wrapper.service a{
    width: 100%;
    height: 60px;
}
.service_center_txt .next_btn_box img{
    width: 24px;
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    right:0;
}
.service_chat{
    width: 89.33%;
    height:auto;
    padding:19px 0px 19px 25px;
    background-color:#060607;
    margin-top:20px;
    border-radius:5px;
    box-sizing:border-box;
    position: relative;
}
.service_chat h2{
    color:#fff;
    font-size:var(--main_font_size);
}
.service_chat p{
    color:#888;
    font-size:12px;
}
.chat_icon{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    right:25px;
    width: 30px;
}
/* /service */

/* coupon */
.sign_header.coupon{
    background-color:#fff;
    margin-bottom:30px;
}
.coupon_btn{
    margin-bottom:30px;
    font-size: 14px;
}
.coupon_txt_box::placeholder{
    color:#111;
}
.coupon_txt_box{
    width: 68%;
    margin-right:5px;
}
.coupon_box{
    width: 89.33%;
    height:150px;
    background-color:#fff;
    border:solid 1px #626262;
    position: relative;
    border-radius:5px;
    margin-bottom:10px;
    /* display:none; */
    /* 쿠폰없을때 */
}
.coupon_box::after {
    width: 10px;
    height: 20px;
    border: 1px solid #626262;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f5f5f5;
    border-left: 0;
    z-index: 55;
    left: -1px;
}
.coupon_icon_box {
    width: 28.23%;
    height: 150px;
    border-right: 1px dashed #dedede;
    position: absolute;
    left: 0;
}
.coupon_icon_box img{
    width: 55.55%;
    max-width: 90px;
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%,-50%);
}
.coupon_txt_right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 32.5%;
}
/* 쿠폰 정보 */
.coupon_title{
    font-size:20px;
    color:#111;
    font-weight:500;
}
.coupon_discount{
    font-size:14px;
    color:#888;
    font-weight:500;
    margin-top:4%;
}
.coupon_use{
    font-size:14px;
    color:#888;
    font-weight:500;
    margin-bottom:10px;
}
.coupon_date_box{
    font-size:12px;
    color:#888;
    font-weight:500;
    margin-bottom:6px;
}
.coupon_num_box{
    font-size:12px;
    color:#888;
    font-weight:500;
}
.coupon_num_box .coupon_num{
    color:#111;
}
/* /쿠폰 정보 */
/* 쿠폰 없을때 출력 */
.coupon_logo{
    width: 180px;
    margin:auto;
    padding-top:53.33%;
    display:block;
}
.coupon_logo img{
    transform:translate(35px);
    width: 110px;
}
.coupon_txt{
    width: 200px;
    font-size:20px;
    color:#111;
    font-weight:500;
}
/* /coupon */
/* coupon 반응형 */
@media screen and (max-width:299px){
    .coupon_box{
        height:166px;
    }
}
/* /coupon 반응형 */

/* upra_story */
    .story_banner{
        width: 100%;
        height: 194px;
        border-radius:5px;
        background-position:center 15%;
        background-size:cover;
        background-repeat:no-repeat;
        cursor:pointer;
        overflow:hidden;
        position: relative;
        box-shadow: 0.2px 0.2px 1px #C8C8C8;
    }
    .story_anchor{
        width: 84%;
        height:auto;
        cursor:pointer;
        margin-bottom:29px;
    }
    .story_banner1{
       background-image:url(/resources/img/banner1.png);
    }
    .story_banner2{
        background-image:url(/resources/img/banner2.png);
     }
     .story_banner3{
        background-image:url(/resources/img/banner3.png);
     }
    .category{
        min-width: 22.85%;
        padding:0 5px;
        height: 25px;
        text-align:center;
        color:#fff;
        font-size:12px;
        line-height:25px;
        position: absolute;
        border-bottom-right-radius:5px;
        top:0;
    }
    .category1{
        background-color:#fc9d2b;
    }
    .category2{
        background-color:#111;
    }
    .category3{
        background-color:#fa5858;
    }
    .category_txt{
        width: 80%;
        word-break:break-all;
        margin-top:10px;
    }
    .category_title{
        font-size:var(--main_font_size);
        color:#444;
        font-weight:500;
    }
    .category_txt h3{
        font-size:12px;
        color:#888;
        font-weight:normal;
    }



/* /upra_story */
/* upra_story_view */
.sign_header.view {
    margin-bottom:0;
}
.story_wrapper.view h1{
    transform:translate(0);
    left:13.6%;
    width:73.06%;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    white-space: nowrap;
}
.story_wrapper.view .category {
    min-width: 22.85%;
    left:0;
}
.story_wrapper.view .story_banner {
    width: 100%;
    height: 230px;
    border-radius: 0;
}
.category_wrap {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #f6f6f6;
    margin-bottom: 20px;
}
.story_wrapper.view .category_txt {
    width: 89.6%;
    height: 70px;
    margin: auto;
    padding-top: 13px;
    box-sizing: border-box;
}
.story_wrapper.view .story_txt{
    width: 89.6%;
    height:auto;
    margin-bottom:30px;
    margin-top:6px;
}
.story_txt:first-child{
    margin-bottom:30px;
    margin-top:0px;
}
.story_wrapper.view .story_img img{
    max-width: 89.6%;
    position: relative;
    left:50%;
    transform:translateX(-50%);
    margin-bottom:4px;
    display:block;
}
.card{
    width:89.6%;
}
.card img{
    max-width:100%;
}
.card iframe{
    width: 100%;
    height: 220px;
}
/* 동국작업 */
.wrapper.view .artist_now_banner{
    background-color: #ffffff;
    max-width: 430px;
    margin: auto;
}

.wrapper.view .artist_now_banner>article{
    margin: auto;
    width: 89.33%;
    padding-bottom: 20px;
}


.wrapper.view .artist_now_banner>article>h2{
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    margin-bottom: 13px;
}

.wrapper.view .artist_list_box.cursor{
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
}

.wrapper.view article>.artist_list_box >.artist_type1.artist_type{
    min-height: 120px;
    max-width: 100px;
}


.wrapper.view .artist_type1>.artist_container>.top_artist_txt>h3{
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    line-height: 1.6;
}

.wrapper.view .artist_type1>.artist_container>.top_artist_txt>h4{
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    line-height: 1.83;
}

.wrapper.view .artist_list_txt{
    margin-left: 20px;
}
.wrapper.view .artist_list_txt >p{
    word-break: break-all;
    color: #444;
    line-height: 20px;
    font-size: var(--main_font_size_m);
    overflow:hidden;
    display:-webkit-box;
    white-space:normal;
    -webkit-line-clamp: 3;
    word-break:break-all;
    -webkit-box-orient: vertical;
    box-sizing:border-box;
    padding-right:10px;
}

.wrapper.view .artist_list_box>.artist_list_txt>h3{
    margin-top: 15px
}

.wrapper.view .artist_list_txt>.artist_flex{
    margin-top: 5px;
}

.wrapper.view .story_wrapper>.flex_wrapper>.story_txt{
    font-size: 14px;
    color: #888;
}


/* /동국작업 */

@media screen and (min-width:550px){
 .card iframe{
    width: 100%;
    height: 300px;
}
}
/* /upra_story_view */
/* m_gnb */
.m_gnb{
    width:100vw;
    max-width:764px;
    min-height: 100vh;
    height:100%;
    background-color:#3b3d45;
    opacity:0;
    top:0;
    max-width:430px;
    position: absolute;
    right:-100vw;
    z-index:888;
    display:none;
}
.m_gnb_header.sub{
    width: 100vw;
    height: 61px;
    max-width:430px;
    display:flex;
    align-items:center;
    padding-left:5.386%;
    padding-top: 23px;
}
.m_gnb_header{
    width: 100vw;
    height: 61px;
    max-width:430px;
    display:flex;
    align-items:center;
}
.m_logo img{
    width: 98.8px;
}
.icon_box{
    width:88px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.icon_box img{
    width: 24px;
}
.icon_box > .search_icon{
    float:left;
}
.icon_box > .alarm_icon{
    float:left;
}
.close_btn_box{
    width: 50px;
    height: 50px;
    background-color:#000;
    border-radius:50%;
    top:11px;
    right:19px;
    cursor:pointer;
    margin-left:13px;
    transform:translateY(-2px);
}
.close_btn{
    width:17px;
    height:17px;
    position:relative;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;
    cursor:pointer;
}
.close_bg{
    width: 50px;
    height: 50px;
    background-color:#1C1D21;
    opacity:0.5;
    border-radius:50%;
}
.bar{
    width:17px;
    height: 3px;
    background-color:#8E8E90;
    display:block;
    position: absolute;
    border-radius:30px;
}
.bar1{
    top:50%;
    transform:rotate(-45deg);
}
.bar2{
    top:50%;
    transform:rotate(45deg);
   
}
.gnb_btn{
    width:100vw;
    height:auto;
    text-align:left;
    box-sizing:border-box;
    padding-left:5.386%;
    margin-top:65.4px;
}
.gnb_btn img{
    width: 24px;
    margin-left:5px;
    position: relative;
    top:3px;
}
.gnb_btn li{
    font-size:24px;
    color:#fff;
    margin-bottom:20px;
}
.gnb_btn li:nth-child(6){
    margin-bottom:80px;
}
.bottom_info{
    margin-top: 35px;
    box-sizing: border-box;
    padding-left: 5.386%;
    line-height:1.4;
}
.bottom_info .flex_wrapper{
    flex-wrap:wrap;
    justify-content:flex-start;
}
.bottom_info h3{
    font-size:12px;
    color:#fff;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 2px;
}
.bottom_info h2{
    font-size:18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color:#fff;
    margin-bottom: 10px;
}
.bottom_info .flex_wrapper >li >b{
    font-weight: 500;
    font-size:12px;
    color:#fff;
}
.bottom_info .flex_wrapper >li >span{
    font-size:12px;
    color:#fff;
    opacity:0.7;
    margin-left:4px;
}
/* m_gnb 반응형 */

@media screen and (max-height:740px){
    .gnb_btn li{
        font-size:22px;
    }
    .gnb_btn li{
        margin-bottom: 15px;
    }
    .gnb_btn {
        margin-top: 55px;
    }
    .gnb_btn li:nth-child(6) {
        margin-bottom: 30px;
    }
}
@media screen and (max-height:690px){
    .bottom_info {
        margin-top: 25px;
    }
    .gnb_btn li:nth-child(6) {
        margin-bottom: 25px;
    }
}
@media screen and (max-height:667px){
    .gnb_btn {
        margin-top: 30.4px;
    }
}
@media screen and (max-height:569px){
    .gnb_btn {
        margin-top: 20px;
    }
    .gnb_btn li:nth-child(6){
        margin-bottom:25px;
    }
    .gnb_btn li {
        font-size: 18px;
        margin-bottom: 12.5px;
    }
    .bottom_info h2 {
        font-size: 16px;
    }
}

/* /m_gnb */
/* gift */
.gift_bg{
    background-color:#f5f5f5;
    min-height:100vh;
}
.sign_header.gift{
    margin-bottom:8px;
}
.gift_txt {
    width:33.33%;
    height: 50px;
    line-height:50px;
    border-bottom: 2px solid #f6f6f6;
    box-sizing: border-box;
    font-size: var(--main_font_size_m);
    font-weight: 500;
    color: #888;
    position: relative;
    transition: all 0.5s;
    text-align:center;
    background-color:#fff;
}
.gift_txt.active {
    font-weight:bold;
    color: #111;
    border-bottom: 2px solid #444;
}
.flex_wrapper.gift{
    width:100%;
}
.gift_box{
    width: 100%;
    box-sizing:border-box;
    padding-top:30px;
}
.gifticon{
    width: 89.33%;
    height:auto;
    background-color:#fff;
    border:solid 1px #626262;
    position: relative;
    border-radius:5px;
    margin-bottom:12px;
    margin:auto;
    padding-bottom:20px;
}
.gifticon::after {
    width: 10px;
    height: 20px;
    border: 1px solid #626262;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    content: "";
    display: block;
    position: absolute;
    top:124px;
    transform: translateY(-50%);
    background-color: #f5f5f5;
    border-left: 0;
    z-index: 55;
    left: -1px;
}
.gifticon::before{
    width: 10px;
    height: 20px;
    border: 1px solid #626262;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    content: "";
    display: block;
    position: absolute;
    top:124px;
    transform: translateY(-50%);
    background-color: #f5f5f5;
    z-index: 55;
    right: -1px;
    border-right:none;
}
.gift_img{
    width: 60px;
    height: 60px;
    overflow:hidden;
    border-radius:50%;
    margin-top:34px;
    margin-right:8.35%;
    margin-left:7.16%;
}
.gift_img img{
    width: 60px;
}
.gifticon_contents img{
    width: 11px;
    margin-right:3px;
}
.gifticon_header{
    display:flex;
    position: relative;
    width: 100%;
    height: 124px;
    margin-bottom:19px;
}
.show{
    width: 64px;
    height: 25px;
    background-color:#fc9d2b;
    position: absolute;
    top:-1px;
    right:-1px;
    font-size:12px;
    color:#fff;
    text-align:center;
    line-height:23px;
    border-bottom-left-radius:4px;
    border-top-right-radius:4px;
    border-top:1px solid #626262;
    border-right:1px solid #626262;
}
.show.show_end{
    background-color:#afafaf;
}
.gifticon_header::after{
    content:"";
    display:block;
    width:89.25%;
    height:0.1px;
    border-bottom:0.9px dashed #dedede;
    box-sizing:border-box;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}
.gifticon_title{
    margin-top:24px;
    width: 60%;
}
.gifticon_title h3{
    font-size: 20px;
    color:#111;
    font-weight:500;
    margin-bottom:4px;
}
.gifticon_contents img{
    transform:translateY(2px);
}
.gifticon_title .gifticon_contents{
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    white-space: nowrap;
    font-size:14px;
    color:#888;
}
.gifticon_box{
    width: 89.33%;
    margin: auto;
    font-size:12px;
    color:#888;
}
.gifticon_name{
    font-size:14px;
    color:#111;
    font-weight:500;
}
.gifticon_name > h3{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.gifticon_txt{
    display:block;
    margin:0;
    padding:0;
    text-align:left;
    margin-top:5px;
    margin-bottom:13px;
    color:#888;
    font-size:14px;
    font-family: 'Noto Sans KR', sans-serif;
    white-space:pre-line;
    font-weight:400;
}
@media screen and (min-width:431px){
    .gifticon_txt{
        height:140px;
        overflow:hidden;
        padding-right:7.16%;
        box-sizing:border-box;
        display:-webkit-box;
        white-space:normal;
        -webkit-line-clamp: 5;
        word-break:break-all;
        -webkit-box-orient: vertical;
    }

}
.gifticon_btn_box{
    width:100%;
    margin:auto;
    margin-top:21px;
    display:flex;
    justify-content:start;
    margin-left:20px;
}
.gifticon_btn_box button{
    font-weight:500;
    color:#111;
    font-size:14px;
    width: 43.28%;
    height: 40px;
    border-radius:5px;
    border:1px solid #626262;
    background-color:#fff;
    font-family: 'Noto Sans KR', sans-serif;
    cursor:pointer;
}
.gifticon_btn_box button:hover{
    opacity:0.5;
}
.gifticon_btn_box button:first-child{
    margin-right:5px;
}
.gifticon_btn_box button:first-child.active{
    background-color:#e2e2e2;
    border:none;
    color:#fff;
}
.gifticon.end{
    background-color:#f0f0f0;
}
.notice_box.gift{
    margin:auto;
    margin-top:10px;
    height:auto;
    margin-bottom:30px;
}
.notice_box img{
    height: 24px;
}
.notice_txt_gift{
    white-space:pre-line;
    font-size:14px;
    color:#888;
    font-family: 'Noto Sans KR', sans-serif;
    line-height:20px;
    font-weight:400;
    margin-left:5px;
    height:auto;
}
.gifticon_order_date{
    width: 89.33%;
    margin:auto;
    font-size:14px;
    color:#111;
    font-weight:bold;
    margin-bottom:10px;
}
.gift_box2{
    display:none;
}
.gift_box2 .gifticon{
    margin-bottom:30px;
}
.gift_box3{
    display:none;
}

.gift_box3 .gifticon{
    margin-bottom:30px;
}

.gift_list_loading_txt {
    color: #888;
    font-size: 14px;
    margin: 15px 0 25px;
    text-align: center;
}

.gift_flex_wrap{
    margin-left:7.16%;
    display:flex;
    width:87%;
    flex-wrap:wrap;
    justify-content:space-between;
}
.gift_flex_wrap .left{
    width: 40%;
    margin-bottom:10px;
}
.gift_flex_wrap .right{
    width: 60%;
    text-align:right;
    font-size:14px;
}
.right span{
    color:#888;
}

/* /gift */
/* gift_view */
.gift_wrapper.view .info{
    font-size: 14px;
    font-weight: 500;
    color:#111;
    line-height:30px;
}
.gift_wrapper.view .value{
    font-size:14px;
    color:#888;
    line-height:30px;
    font-family: 'Roboto', sans-serif;
    font-weight:400;
}
.gift_wrapper.view h4{
    margin-bottom:10px;
    color:#888;
    font-size:16px;
    font-weight:500;
}
.order_box{
    width: 89.33%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:20px;
}
.order_box h4{
    width: 100%;
}
.order_value{
    text-align:right;
}
.payment_box{
    width: 89.33%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:20px;
}
.payment_box h4{
    width:100%;
}
.payment_value{
    text-align:right;
}
.price_box{
    width: 89.33%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:20px;
}
.price_value{
    text-align:right;
    line-height:30px;
    font-family: 'Roboto', sans-serif;
}
.price_value span{
    font-size:14px;
    color:#888;
    margin-right:24px;
}
.price_box h4{
    width: 100%;
}
.total_box{
    width: 89.33%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    font-weight:500;
    align-items:center;
}
.total_price{
    font-size:24px;
}
.cancle_btn_box{
    width: 89.33%;
    margin:auto;
    background-color:#fff;
}
.cancle_btn{
    width:100%;
    height: 50px;
    background-color: black;
    color:#fff;
    border-radius:5px;
    outline:none;
    border:none;
    margin-top:33px;
    font-size:14px;
    font-weight:bold;
}
.view_rule_txt{
    width: 81%;
    margin-left:49px;
    font-size:14px;
    color:#666;
}

.dashed_line{
    border: none;
    height: 1px;
    background: repeating-linear-gradient(90deg,#dedede,#dedede 4px,transparent 0px,transparent 6px);
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

/* /gift_view */
/* main */
.m_gnb_header.main{
    display:flex;
    align-items:center;
    position: absolute;
    z-index:5;
    height: 104px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.47), rgba(0, 0, 0, 0));
}
.m_gnb_header.main .m_logo{
    margin-left:5.33%;
    margin-right:20.8%;
}
.open_btn_box{
    margin-left:13px;
    width: 50px;
    min-width:50px;
    height: 50px;
    background-color:#000;
    transform:translateY(-2px);
    border-radius:50%;
    cursor:pointer;
    position: relative;
}
.open_btn img{
    width:27px;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
/* main_slide 부분 */
.main_slide{
    width: 100%;
    min-height:92vh;
    max-width: 432px;
}
.main_banner{
    max-width: 432px;
    width: 100%;
    min-height:92vh;
    background-color:#575757;
    position: absolute;
    z-index: 4;
    overflow: hidden;
    opacity:0;
    transition:all 1s;
}
.main_banner.active{
    opacity:1;
}
/* main_slide 부분 */
.main_banner .main_bg{
    width:100%;
    top:51%;
    height: 94vh;
    transform:translateY(-50%);
    position: absolute;
}
/* 모바일용 메인 이미지 공통 스타일 */
.main_banner .main_img {
    width: 100%;
    height: 90%;
    bottom: -43px;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: 4;
}
.main_txt_bg{
    background-image:linear-gradient(to bottom, rgba(23, 23, 23, 0) 2%, #222222);
    width:100vw;
    height:39.77%;
    position: absolute;
    bottom:0;
    z-index:4;
}
.main_txt_bg2{
    background-image:linear-gradient(to bottom, rgba(23, 23, 23, 0) 2%, #222222);
    width:100vw;
    height:39.77%;
    position: absolute;
    bottom:0;
    z-index:4;
}
.right_gnb_box{
    display:flex;
    align-content:center;
    position: absolute;
    right:19px;
}
.alarm_icon.active::after{
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffa700;
    top: 8px;
    right: 66px;
}
.gift_icon.active{
    animation:scale 2s infinite;
    transition:all 1s;
}
@keyframes scale{
    50%{
        transform:scale(1.5);
    }
    100%{
        transform:scale(1);
    }
}
.main_txt{
    position: absolute;
    bottom:0px;
    left:20px;
    transform:translateY(-50%);
    z-index:5;
}
.main_txt h5{
    font-size:var(--main_font_size_m);
    color:#fff;
    letter-spacing: normal;
    font-weight:500;
    opacity: 0.8;
    margin-bottom:19px;
}
.main_txt hr{
    width: 206px;
    background-color:#fff;
    margin-bottom:19px;
}
.main_txt pre{
    white-space:pre-line;
    font-size:32px;
    line-height:45px;
    font-weight:700;
    color:#fff;
    font-family: 'Nanum Myeongjo', serif;
}
@media screen and (max-width:350px){
    .main_txt pre{
        font-size:28px;
    }
}
/* main_banner END */
.main_story{
    width: 100vw;
    max-width:430px;
    min-height:300px;
    height:auto;
    padding-top:41px;
    background-color:#fff;
    position: relative;
    z-index:22;
}
.main_story_box{
    width: 100%;
    position: absolute;
    display:flex;
    overflow-x:scroll;
    padding-left: 5.333%;
    box-sizing:border-box;
    background-color:#fff;
    -ms-overflow-style: none;
}

.main_story_box > .story_anchor{
    width: 315px;
    margin-right:10px;
}
.main_story_box .story_banner{
    width: 315px;
    height: 194px;
}
.main_story_box .category_txt{
    width: 100%;
    color:#444;
}
.main_story_box .category_txt h2{
    font-size:16px;
}
.main_story>h2{
    font-size:22px;
    color:#111;
    margin-bottom:16px;
    margin-left:5.33%;
}
.main_story_img{
    width: 315px;
    height:194px;
    margin-right:10px;
    border-radius:5px;
}
.main_story_img1{
    background:url(/resources/img/banner1.png);
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
}
.main_story_img2{
    background:url(/resources/img/banner2.png);
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
}
.main_story_img3{
    background:url(/resources/img/banner3.png);
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
}
.main_story_img4{
    background:url(/resources/img/banner1.png);
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
}
.main_story_txt img{
    margin-right:5px;
    vertical-align:middle;
}
.main_story_txt h3{
    margin-top:10px;
    font-size:var(--main_font_size_m);
    color:#888;
    font-weight:500;
}
.main_story_txt p{
    font-size:var(--main_font_size);
    color:#444;
    font-weight:500;
}
/* main story END */
.recommend{
    width:100vw;
    max-width:430px;
    min-height:320px;
    background-color:#fff;
    position: relative;
    padding:48px 0px 95px 0;
}
.recommend_box{
    padding-left: 5.333%;
    width: 100%;
    position: absolute;
    display:flex;
    overflow-x:scroll;
    -ms-overflow-style: none;
    box-sizing:border-box;
}
.recommend_box article{
    width: 170px;
    margin-right:20px;
}
.recommend h2{
    margin-bottom:13px;
    font-size:22px;
    color:#111;
    padding-left: 5.333%;
}
.recommend_img{
    width: 170px;
    height: 170px;
    border-radius:50%;
    position: relative;
    background-position: center;
    background-size: cover;
    box-shadow: 0.5px 0.5px 1px #c8c8c8;
}
.recommend_img::after{
    content:"";
    display:block;
    position: absolute;
    width: 53px;
    height: 53px;
    border-radius:50%;
    background-color:#fff;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.recommend_img1{
    background:url(/resources/img/banner1.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}
.recommend_img2{
    background:url(/resources/img/banner2.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}
.recommend_img3{
    background:url(/resources/img/banner3.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}
.recommend_img4{
    background:url(/resources/img/banner4.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}
.recommend_txt{
    padding-left:10px;
    position: relative;
    margin-top:13px;
}
.recommend_txt h3{
    font-size:var(--main_font_size_m);
    color:#444;
    font-weight:500;
}
.recommend_txt span{
    display:block;
    color:#a7a7a4;
    font-family:"Roboto";
    font-size:var(--main_font_size_m);
    margin-top:3px;
}
/* recommend END */
.bottom_nav{
    width: 100%;
    max-width: 432px;
    background-color: #000;
    height: 65px;
    position: fixed;
    bottom: 0;
    z-index: 777;
}
.navigator{
    position: absolute;
    left:50%;
    transform:translateX(-50%);
    top:-40px;
    animation:navi 2.2s infinite;
    transition:all 0.5s;
}
.navigator > .navigator_txt{
    color:#fff;
    text-shadow:1px 1px 1px #000;
    font-weight: bold;
    font-size:10px;
    text-align:center;
    
}
@keyframes navi {
    50%{
        opacity:0.3;
    }
    100%{
        opacity:1;
    }
}
.bottom_btn{
    text-align:center;
    color:#ffa700;
    font-size:18px;
}
.bottom_btn > li:first-child::after{
    content:"";
    position: absolute;
    display:block;
    width: 2px;
    height: 19px;
    background-color:#4d4d4d;
    right:0;
    top:22px;
}
.bottom_btn > li{
    width: 50%;
    float:left;
    padding-top:17px;
    position: relative;
}
.bottom_btn > li:last-child::after{
    content:"";
    position: absolute;
    display:block;
    background:url(/resources/img/gift_message.png);
    width: 87px;
    height: 31px;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    background-size:cover;
}
/* main 반응형 */
@media screen and (min-width:600px){
    
    .main_banner .main_img{
        width:359px;
    }
    .main_banner .main_bg {
        height: 100vh;
    }
    .main_banner {
        min-height: 91vh;
    }
}
@media screen and (max-width:320px){
    .main_banner .main_img{
        width:210px;
    }
}
/* 210px */
/* /main */
/* artist */
   .artist_type{
    max-width:430px;
    width:100vw;
    min-height:475px;
    overflow:hidden;
    position: relative;
    cursor:pointer;
}
.artist_type .artist{
    width:100%;
    min-width:375px;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    opacity:1;
}
.artist_type .artist_prev_btn{
    position: absolute;
    left:5.33%;
    top:55px;
    z-index:10;
}
/* heart_icon 쉐도우 부분 */
.heart_icon{
    width: 70px;
    height: 70px;
    border-radius:50%;
    box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.3);
    background-color:#fff;
    position: absolute;
    bottom:35px;
    right:20px;
    z-index:10;
}
.heart_icon >img{
    position: absolute;
    filter:grayscale(1);
    opacity:0.3;
    left:50%;
    top:52%;
    transform:translate(-50%,-50%);
    width: 26.9px;
}
.heart_icon >img.active{
    filter:none;
    opacity:1;
}
/* heart_icon 쉐도우 속성 */

/* .heart_icon2{ box-shadow: 10px 10px 30px 0 rgba(61, 201, 205, 0.35);}
.heart_icon3{ box-shadow: 10px 10px 30px 0 rgba(221, 62, 199, 0.51);}
.heart_icon4{ box-shadow: 10px 10px 30px 0 #555f11;}
.heart_icon5{ box-shadow: 10px 10px 30px 0 rgba(157, 54, 218, 0.64);}
.heart_icon6{ box-shadow: 10px 10px 30px 0 rgba(196, 47, 61, 0.7);} */

/* artist color_type 아티스트 색상 타입 upra_form.css에 있음 */
  .artist_txt{
      position: absolute;
      color:#fff;
      z-index:10;
      bottom:17px;
      left:20px;
  }
  .artist_txt h2{
      font-size:var(--main-font-size_m);
      color:#fff;
      font-weight:500;
  }
  .artist_txt hr{
      width: 130px;
      height: 2px;
      background-color:#fff;
      margin-top:8px;
      margin-bottom:4px;
      border:none;
  }
  .artist_txt h1{
      margin-bottom:10px;
      font-size:40px;
      font-weight: bold;
      font-family: 'Nanum Myeongjo', serif;
      letter-spacing:8px;
  }
  .artist_txt h3{
      font-size:14px;
      font-weight:500;
      opacity:0.8;
      margin-bottom:40px;
  }
  .artist_txt h4{
      display: inline-block;
      font-size:var(--main_font_size);
      font-weight:500;
      
  }
  .artist_txt .won::after{
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    width: 2px;
    height: 10px;
    background-color: #fff;
    right: -6px;
    top: 57%;
    transform: translateY(-50%);
    opacity: 0.5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
  .artist_txt h4 .artist_val{
      font-size:30px;
      font-family: Roboto;
      /* text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.13); 모바일 아티스트 상세 쉐도우 추가 */
  }
  .artist_txt h4 .won{
      position: relative;
      margin-left:1px;
      /* text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.13); 모바일 아티스트 상세 쉐도우 추가*/
      margin-right:9px;
  }
  .bottom_txt_bg{
      width: 100%;
      height: 70px;
      position: absolute;
      z-index:9;
      opacity:0.2;
      background-color:#fff;
      bottom:0;
  }
  .artist_btn{
      width: 100%;
      height: 50px;
      background-color:#fff;
      display:flex;
      font-size:var(--main_font_size_m);
      font-weight:500;
      color:#888;
      text-align:center;
      line-height:50px;
  }
  .artist_btn li{
      width: 33%;
      cursor:pointer;
  }
  .artist_btn li.active{
      color:#111;
      font-weight:bold;
      border-bottom:2px solid #444;
  }
  .artist_box{
      width: 89.33%;
      margin:auto;
  }
  .artist_box2{
    display:none;
  }
  .artist_box3{
    display:none;
  }
  .artist_box pre{
      white-space:pre-line;
      font-size:var(--main_font_size_m);
      color:#888;
      font-weight:500;
      font-family: 'Noto Sans KR', sans-serif;
  }
  .opening_ment{
      margin-top:30px;
  }
  .opening_ment h2{
      margin-bottom:10px;
      font-size:20px;
      font-weight:500;
  }
  .opening_ment pre{
      margin-bottom:40px;
  }
  .career{
      margin-bottom:30px;
  }
  .career h2{
    font-size:20px;
    font-weight:500;
  }
  .career ul li{
      padding:10px 0px;
      border-bottom:1px solid #e8e8e8;
  }
  .career ul li:last-child{
      border:none;
  }
  .repertory{
      padding-bottom:125px;
  }
  .repertory h2{
      margin-bottom:10px;
      font-size:20px;
      font-weight:500;
  }
  .repertory li{
      border:1px solid #626262;
      border-radius:5px;
      background-color:#fff;
      padding:20px;
      word-break:break-all;
      margin-bottom: 10px;
      position: relative;
  }
  .repertory li h3{
      font-size:var(--main_font_size);
      color:#111;
      margin-bottom:5px;
      display: flex;
      padding-right: 21px;
  }
  .repertory li h3 img{
      width: 24px;
      vertical-align:middle;
      height: 24px;
      transform: translateY(1.5px);
      margin-right: 4px;

  }
/* 08/23 이동국 레파토리 디테일 수정 */



  .repertory li p{
      padding-left:28px;
      padding-right:21px;
      font-size:var(--main_font_size_m);
      color:#888;
      line-height:16px;
  }
  .artist_wrapper footer{
      width: 100%;
      max-width:431px;
      height: 95px;
      background-color:#000;
      position: fixed;
      bottom:0;
      left:50%;
      transform:translateX(-50%);
  }
  .artist_wrapper footer ul{
      display:flex;
      width: 283px;
      position: absolute;
      right:0;
      top:17px;
      font-size:18px;
      color:#ffa700;
      font-weight:500;
  }
  .artist_wrapper footer ul li{
      width: 50%;
  }
  .artist_wrapper footer ul::after{
      content:"";
      display:block;
      position: absolute;
      width: 2px;
      height: 19px;
      background-color:#4d4d4d;
      left: 113px;
      top: 57%;
      transform: translateY(-50%);
  }
  .heart_btn{
      position: absolute;
      left:30px;
      top:20px;
      width: 24px;
      filter:grayscale(1);
      opacity:0.5;
  }
  .heart_btn.active{
    filter:none;
    opacity:1;
  }
  /* artist_box1 END */
  .artist_box2{
      padding-bottom:96px;
      background-color:#f2f2f2;
  }
  .artist_movie {
    padding-bottom:200px;
  }
  .artist_box2 h2{
    margin-top:30px;
    font-size:20px;
    font-weight:500;
    color:#111;
    margin-bottom:13px;
  }
  .artist_album_title > h2{
      margin-top:40px;
      margin-bottom:0;
      margin-bottom:10px;
  }
/* 공연 동영상 관련부분 */
.artist_movie{
    max-width:430px;
    position: relative;
    overflow-x:scroll;
    -ms-overflow-style: none;
}
.artist_movie::-webkit-scrollbar{ display:none; }
.movie_wrap{
    position: absolute;
    display:flex;
}
.movie_wrap > .movie_box{
    position: relative;
    width: 315px;
    height: 177px;
    overflow:hidden;
    border-radius:5px;
    margin-right:10px;
}
.movie_box .movie_banner{
    width: 315px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.movie_box .play_btn{
    position: absolute;
    width: 70px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

/* /공연 동영상 관련부분 */
.artist_album_box{
    display:flex;
    justify-content:center;
}
.artist_album_left{
    margin-right:7px;
    width: 50%;
}
.artist_album_right{
    width: 50%;
}
.artist_photo{
    width: 100%;
    overflow:hidden;
    margin-bottom:10px;
    border-radius: 5px;
}
.artist_photo img{
    width: 100%;
    height:auto;
    display:block;
}
.artist_box3{
    padding-top:30px;
    padding-bottom:147px;
}
.artist_box3 h2{
    font-size:20px;
    font-weight:500;
    margin:0px 0px 19px 0px;
}
.performance_review{
    position: absolute;
    display:flex;
    overflow-x: scroll;
    width:100%;
    -ms-overflow-style: none;
}
.performance_review::-webkit-scrollbar{ display:none; }
.performance_review_box{
    float:left;
    margin-right:10px;
}
.star{
    display:flex;
}
.star li{
    margin-right:4px;
}
.star li img{
    width: 12px;
    display:block;
}
.performance_box{
    width:190px;
    height: 143.3px;
    box-sizing:border-box;
    padding:14px 13px 0px 17px;
    background-color:#fff;
    border-radius:5px;
    border:1px solid #626262;
}
/* 공연 후기 보기 팝업 modal */
.modal_wrapper .customer{
    width: 89.33%;
    margin:auto;
    margin-top: 23px;
}
.modal_wrapper .performance_box{
    width:89.33%;
    margin:auto;
    margin-top: 17px;
    height:auto;
    padding-bottom:30px;
}
.modal_wrapper .performance_box p{
    display:block;
    height:auto;
}

.modal_wrapper .login_btn{
    position:absolute;
    bottom:54px;
    left:50%;
    transform:translateX(-50%);
}

.performance_box p{
    display:-webkit-box;
    margin-top:8px;
    font-size:var(--main_font_size_m);
    color:#444;
    overflow:hidden;
    height:84px;
    text-overflow:ellipsis;
    text-align:left;
    box-sizing:border-box;
    white-space:normal;
    -webkit-line-clamp: 4;
    word-break:break-all;
    -webkit-box-orient: vertical;
    line-height:20px;
}
.customer{
    margin-top:18.7px;
    display:flex;
    align-items:center;
}
.customer_photo{
    width: 30px;
    height: 30px;
    border-radius:50%;
    overflow:hidden;
    margin-right:6px;
}
.customer_photo img{
    width: 30px;
}
.customer_name{
    width:79%;
    font-size:12px;
    color:#444;
    font-weight:bold;
}
.song_title{
    color:#888;
    font-weight:500;
}
/* cheer */
h2.cheer{
    margin-top:249px;
    margin-bottom:10px;
}
.cheer_box_wrap.active .no_cheer{
    display:none;
}
.no_cheer{
    width:100%;
    height: 314px;
    background-color:#fff;
    border-radius:5px;
    position: relative;
}
.no_cheer_box{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    width: 168px;
    flex-wrap:wrap;
    justify-content:center;
}
.no_cheer_box img{
    width: 110px;
}
.no_cheer_box p{
    text-align:center;
    font-size:14px;
    color:#444;
    font-weight:500;
    margin-top:20px;
}
.cheer_box_slide{
    overflow-x:scroll;
    width: 105%;
    /* display:none; */
    -ms-overflow-style: none;
}
.cheer_box_slide::-webkit-scrollbar{ display:none; }
.cheer_box_wrap.active .cheer_box_slide{
    display:flex;
}
.cheer_box{
    width: 95%;
    min-height: 314px;
    border-radius:5px;
    box-sizing:border-box;
    border:1px solid #626262;
    padding:23px 20px 23px;
    margin-right:10px;
    background-color: #fff;
}
.cheer_box .customer{
    margin-top:0;
}
.cheer_user{
    width: 315px;
}
.cheer_user > li{
    width: 94%;
    margin-top:18px;
    padding-bottom:17px;
    border-bottom:1px solid #e8e8e8;
    position: relative;
}
@media screen and (max-width:340px){
    .cheer_user > li{
        width: 81%;
    }
}
.cheer_user > li.me .me_x_btn{
    position: absolute;
    width: 24px;
    bottom:23px;
    right:0;
    cursor:pointer;
}
.my{
    display:none;
    font-size:14px;
    color:#888;
}
.cheer_user > li.me .my{
    display:inline-block;
}
.cheer_user > li.me .cheer_message{
    font-weight:bold;
    color:#111;
}
.cheer_user > li:first-child{
    margin-top:0;
}
.cheer_user > li:last-child{
    border:none;
}
.cheer_box .user_name{
    font-size:var(--main_font_size_m);
    color:#888;
    font-weight:normal;
}
.cheer_box .cheer_message{
    font-size:var(--main_font_size_m);
    color:#444;
}
.cheer_box p{
    width: 98%;
    font-weight:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.cheer_submit{
    width: 100%;
    display:flex;
    margin-top:10px;
}



.cheer_submit input{
    width: 100%;
    margin-right:1.33%;
    border:1px solid #626262;
    box-sizing:border-box;
}

@media screen and (max-width:1239px) {
    .cheer_submit {
        max-width: 357px;}
}


.cheer_submit input::placeholder{
    color:#444;
}
/* artist 반응형 */
@media screen and (max-width:320px) {
    .artist_wrapper footer a{
        font-size:16px;
    }
    .artist_wrapper footer ul::after {
        left: 103px;
    }
    .artist_wrapper footer ul {
        width: 252px;
    }
    .heart_btn {
        left: 23px;
    }
    .cheer_submit input::placeholder{
        font-size:13px;
    }
}
@media screen and (max-width:280px){
    .artist_wrapper footer ul {
        width: 200px;
    }
    .artist_wrapper footer ul::after {
        left: 90px;
    }
}
/* /artist */
/* repertory_view */
.sign_header.repertory{
    padding:0;
    margin-bottom:0px;
}
.repertory_banner{
    background:url(/resources/img/repertory_banner.png);
    width: 100%;
    max-width:430px;
    height: 230px;
    background-size:cover;
}
.repertory_txt_wrap{
    width: 100%;
    height: auto;
    border-bottom: 1px solid #f6f6f6;
    margin-bottom: 20px;
}
.repertory_txt{
    width: 89.6%;
    min-height: 70px;
    margin: auto;
    padding:13px 0px;
    box-sizing: border-box;
    word-break:break-all;
}
.repertory_title{
    font-size: var(--main_font_size);
    color: #444;
    font-weight: 500;
    margin-bottom:5px;
}
.repertory_txt h3{
    font-size: 12px;
    color: #888;
    font-weight: normal;
}
.repertory_contents_wrap{
    width: 89.6%;
    height: auto;
    margin:auto;
}
.repertory_ment{
    margin-bottom: 30px;
    margin-top: 20px;
    word-break:break-all;
}
.repertory_ment pre{
    white-space:pre-line;
    font-size:var(--main_font_size_m);
    color:#888;
    font-family: 'Noto Sans KR', sans-serif;
}
.repertory_contents_wrap .repertory{
    padding-bottom:114px;
}
.repertory_contents_wrap .repertory p{
    margin-bottom:10px;
}
.repertory_contents_wrap .repertory a{
    margin-left: 28px;
    font-size:var(--main_font_size_m);
    color:#111;
    font-weight:bold;
    border-bottom:1px solid #111;
}
.repertory_contents_wrap .repertory a img{
    width: 5.5px;
}
.repertory_now{
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    margin-bottom: 13px;
}
/* /repertory_view */

/* search */
.search_wrapper input::placeholder{
    color:#111;
}
/* pc 검색 전 */
.search_wrapper.search{
    max-width: 370px;
    min-height: 573px;
    margin: auto;
    height: auto;
    position: relative;
    background-color: #fff;
    border: 2px solid #111;
    border-radius: 10px;
    padding-top: 40px;
    position:absolute;
    z-index:2222;
    right:19.27%;
    display:none;
}
.search_wrapper .input_wrap{
    margin:auto;
    border:2px solid #111;
    border-radius:5px;
    box-sizing:border-box;
    margin-bottom:20px;
}
.search_wrapper input:hover{
    border:none;
}
.search_wrapper input{
    padding-right:50px;
    color:#111;
}
.search_wrapper input + .login_img_box > img{
    right:20px;
}
.search_word_wrap{
    width: 89.333%;
    max-height: 120px;
    overflow-y:hidden;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
}
.search_word_wrap h2{
    width: 100%;
    font-size:var(--main_font_size_m);
    color:#888888;
    font-weight:500;
}
.search_word_box{
    padding: 8px 15px;
    border-radius: 5px;
    border: solid 1px #e5e5e5;
    background-color: #ffffff;
    margin:10px 5px 0 0;
    font-size: 14px;
    font-weight: 500;
    color:#444;
    box-sizing:border-box;
    max-width:48%;
    max-height:36px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
}
.top_artist_wrap{
    padding-left:5.386%;
    height:230px;
    margin:auto;
    position: relative;
    overflow-x:scroll;
    -ms-overflow-style:none;
}
.top_artist_wrap::-webkit-scrollbar{ display:none; }
.top_artist_title{
    font-size:var(--main_font_size_m);
    color:#888888;
    font-weight:500;
    margin:30px 0px 10px 0px;
    padding-left:5.386%;
}
.top_artist_slide{
    position: absolute;
    display:flex;
    overflow-x:hidden;
}
.top_artist_slide .artist_type{
    width: 160px;
    height: 230px;
    min-height:0;
    border-radius:5px;
    margin-right:10px;
}
.top_artist_slide .artist_container{
    width: 160px;
}
.top_artist_slide .artist_type1{
    background:url(/resources/img/artist1.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.top_artist_slide .artist_type2{
    background:url(/resources/img/artist2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.top_artist_slide .artist_type3{
    background:url(/resources/img/artist1.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.top_artist_slide .artist_type .artist{
    min-width:0;
    border-radius:5px;
}
.top_artist_txt {
    position: absolute;
    z-index:222;
    left:20px;
    bottom:16px;
    color:#fff;
}
.top_artist_txt h4{
    width: 160px;
    font-size:12px;
    font-weight:500;
    text-shadow:2px 2px 2px #111;
}
.top_artist_txt h3{
    font-size:24px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 2.4px;
    font-family: 'Nanum Myeongjo', serif;
}
.top_artist_txt h5{
    font-size:20px;
    font-weight:500;
    font-family:'Roboto';
    letter-spacing: -0.5px;
    text-shadow:2px 2px 2px #111;
}
.top_artist_txt hr{
    width: 74px;
    height: 2px;
    border:none;
    background-color:#fff;
    margin:5px 0px 3px 0px;
    text-shadow:2px 2px 2px #111;
}
.top_artist_txt .won{
    font-size:12px;
    margin-left:2px;
}
.top_repertory_wrap{
    width: 89.33%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    height:140px;
    overflow-y:hidden;
}
.top_repertory_wrap h2{
    width: 100%;
    margin:30px 0px 10px 0;
    font-weight:500;
    font-size:14px;
    color:#888;
}
.top_repertory_wrap .top_repertory_box{
    display:flex;
    align-items:center;
    padding: 6px 15px 6px 11px;
    box-sizing:border-box;
    max-width:49%;
    max-height:36px;
    background-color:#333;
    border-radius:5px;
    color:#fff;
    margin:0px 5px 5px 0px;
    z-index: 10;
    cursor: pointer;
}
.top_repertory_txt{
    font-size:var(--main_font_size_m);
    white-space:nowrap;
    overflow-x:hidden;
    text-overflow: ellipsis;
}
.top_repertory_wrap .top_repertory_box img{
    width: 24px;
    margin-right:5px;
}
/* /search */

/* search_result */

.no_result img{
    width: 110px;
}
.no_result{
    text-align:center;
    position: absolute;
    width: 100%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#111;
}
.no_result h2{
    font-size:20px;
    font-weight:500;
}
/* /search_result */

/* artist_list */
.sign_header.artist_list{
    margin-bottom:30px;
}
.sign_header.artist_list .search_icon{
    position: absolute;
    right:20px;
    width: 24px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
}
.sign_header.artist_list .setting_icon{
    position: absolute;
    width: 24px;
    right:21px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
}
.btn_box{
    position: relative;
    margin-bottom:20px;
}
@media screen and (min-width:431px){
    .btn_box{
        margin-bottom: 40px;
    }
}
.list_btn{
    width: calc(100% - 110px);
    height: 34px;
    display:flex;
    margin:auto;
    border-bottom: 2px solid #d9d9d9;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-left: 3vh;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.list_btn::-webkit-scrollbar {
    display: none;
}
.list_btn li{
    height:100%;
    margin-right:20px;
    cursor:pointer;
    color:#888888;
    flex: 0 0 auto;
}
.list_btn li.active{
    color:#111;
    border-bottom:2px solid #111;
}
.change_btn_box{
    position: absolute;
    top:0;
    right:20px;
}
.change_btn_box img{
    width: 24px;
    cursor:pointer;
    filter:grayscale(1);
    opacity:0.2;
}
.change_btn_box li.active img{
    filter:none;
    opacity:1;
}
.change_btn_box li{
    float:left;
}
.change_btn_box li:last-child{
    margin-left:10px;
}
.artist_list_wrapper .artist_type{
    min-width:100px;
    width: 100px;
    min-height: 120px;
    border-radius:5px;
    overflow: hidden;
    position: relative;
    margin-right: 15px;
    cursor:pointer;
}
.artist_list_wrapper .artist_type.active{
    width:100%;
    min-height:230px;
}
.artist_list_wrapper .artist_type1{
    background:url(/resources/img/tutorial_img0.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
}
.flex_wrapper.artist_list{
    flex-wrap:wrap;
    width: 89.33%;
    margin: auto;
    justify-content:flex-start;
    position: relative;
    z-index:0;
}
.flex_wrapper.artist_list.active{
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    justify-content:flex-start;
}
.artist_list_box{
    display:flex;
    margin-bottom:20px;
}
.artist_list_box.active{
    display:block;
    width:42.66%;
    position: relative;
    padding-left:5%;
}
.artist_list_box .top_artist_txt{
    bottom:10px;
    left:10px;
}
.artist_list_box .artist_type  .top_artist_txt h3{
    width: 85px;
    font-size:20px;
    letter-spacing:2px;
    font-family: 'Nanum Myeongjo', serif;
    word-break:break-all;
    text-shadow:2px 2px 2px #111;
}
.artist_list_box .top_artist_txt h3.active{
    font-size:24px;
    width:81%;
}
.artist_list_box .top_artist_txt hr{
    display:none;
}
.artist_list_box .top_artist_txt h5{
    display:none;
}
.artist_list_txt h3{
    font-size:12px;
    color:#888;
    margin-top: 10px;
    margin-bottom:3px;
}
.artist_list_box.active .artist_list_txt h3{
    display: none;
}
.artist_list_box.active .top_artist_txt{
    left: 18px !important;
    bottom: 16px;
}
.artist_list_box .hashtag{
    display:none;
    margin-top: 5px;
    font-size:12px;
    color:#fff;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
}
.artist_list_box.active .m_tag{
    display:block
}
.m_tag{
    display:none;
    font-weight: 500;
    width: 70%;
    word-break:break-all;
}
.artist_list_box.active .hashtag{
    display:block;
}
.artist_list_txt pre{
    white-space:pre-line;
    word-break:break-all;
    color:#444;
    line-height:20px;
    font-size:var(--main_font_size_m);
}
.artist_list_txt span{
    display:inline-block;
}
.artist_list_txt .artist_value{
    color:#fa5858;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}
.artist_list_txt .won{
    margin-left:2px;
    font-size:12px;
    color:#fa5858;
}
.artist_list_txt .calendar{
    width: 24px;
    margin-right:5px;
    cursor:pointer;
} 
.artist_flex{
    display:flex;
    align-items:center;
    margin-top:16px;
}
.performance_btn{
    width: 100%;
    height: 95px;
    max-width:430px;
    background-color:#000;
    box-sizing:border-box;
    padding-top:19px;
    position: fixed;
    bottom:0;
    z-index:999;
}
.performance_btn ul{
    position: relative;
    display:flex;   
    justify-content:center;
    align-items:center;
}
.performance_btn ul::after{
    content:"";
    display:block;
    position: absolute;
    width: 2px;
    height: 19px;
    background-color:#4d4d4d;
    top:50%;
    left:52%;
    transform:translate(-50%,-50%);
}
.performance_btn ul li{
    font-size:18px;
    font-weight:500;
    color:#fff;
    display: flex;
    align-items: center;
    cursor:pointer;
    position: relative;
}
.performance_btn ul li:nth-child(3){
    margin-left:17.06%;
}
.performance_btn ul li img{
    width: 24px;
    margin-right:5px;
}
/* .performance_message{
    width: 133px;
    word-break: break-all;
    overflow:hidden;
    min-height: 31px;
    background:url(/resources/img/performance_message.png);
    background-size:cover;
    position: absolute;
    background-repeat:no-repeat;
    left:31px;
    top:-15.5px;
} */
.flex_wrapper.music_search{
    width:100%;
    padding-left:14px;
    justify-content:flex-start;
}
.flex_wrapper.music_search h2{
    width:89.33%;
    color:#888;
    font-size:var(--main_font_size);
    margin-bottom:10px;
    font-weight:500;
    margin-left:6px;
}
.flex_wrapper.music_search .music_search_txt{
    margin-top:20px;
}
.check{
    position: absolute;
    width: 24px;
    top:50%;
    transform:translateY(-50%);
    right:12.34%;
}
.vocal_music_btn img{
    display:none;
}
.vocal_music_btn.active img{
    display:block;
}
.music_wrapper .notice_box{
    width: 89.33%;
    margin:auto;
    margin-top: 20px;
    color:#888;
    font-weight:normal;
}
.music_wrapper .notice_box img{
    width: 24px;
    margin-right:5px;
}
.music_search_result{
    width: 89.33%;
    margin:auto;
    position: relative;
    display:flex;
    flex-wrap:wrap;
    padding-top:124px;
    margin-bottom:15px;
}
.music_result_box{
    display:inline-block;
    padding:5px 10px;
    border-radius:5px;
    background-color:#fff;
    border:1px solid #e5e5e5;
    margin-right:5px;
    margin-bottom:5px;
    font-size:var(--main_font_size_m);
    color:#444;
}
.search_btn{
    width:89.33%;
    margin:auto;
    height: 50px;
    border-radius:5px;
    background-color: #060607;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
.music_wrapper{
    z-index:999;
    display:none;
    left:50%;
    transform:translateX(-50%);
    top:0;
}
/* calendar */
.calendar_box{
    width:100%;
    max-width:430px;
    min-height:582px;
    background-color:#000;
    position: fixed;
    z-index:555;
    bottom:0;
}
.calendar_box_wrap{
    position: absolute;
    top: 0;
}
.calendar_top_btn{
    width: 100vw;
    max-width: 430px;
    display: flex;
    justify-content:flex-start;
    color: #fff;
    height:100px;
    align-items: center;
    padding-left:12%;
    padding-top: 10px;
    position: relative;
    z-index: 555;
}
.calendar_top_btn img{
    width: 24px;
}
.calendar_box{
    position: fixed;
}
.calendar_box_wrap{
    position: absolute;
    bottom:0;
}
.calendar_top_btn > li{
    display:flex;
    cursor:pointer;
}
.calendar_top_btn > li:last-child{
    transform:translateX(-5px);
}
.calendar_top_btn > li > img{
    margin-right:5px;
}
.speed_search_box{
    max-width: 430px;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
}
.speed_search_box .input_wrap{
    width: 89.333%;
    position: relative;
    top:123px;
}
.search_box{
    padding: 30px 0 41px 20px;
    max-width:100%;
    max-height:251px;
    box-sizing:border-box;
    background-color:#fff;
    border-radius:5px;
    margin-top:10px;
    overflow-y:hidden;
    display:none;
}
.search_box img{
    width: 24px;
    margin-right: 15px;
}
.search_box > li{
    margin-bottom:15px;
    display:flex;
    font-size:var(--main_font_size_m);
    color:#444;
    font-weight:500;
}
.search_box > li:last-child{
    margin-bottom:0;
}
.search_wrap{
    width: 89.333%;
    position: relative;
    top:123px;
}
.selected_box.result{
    width: 100%;
    flex-wrap:nowrap;
    position: absolute;
    margin-top: 10px;
}
.top_repertory_wrap.search{
    margin-top: 123px;
}
/* /calendar */
/* /artist_list */
/* repertory_setting */
.sign_header.repertory_setting{
    margin-bottom:18px;
}
.modify_icon{
    position: absolute;
    right:10px;
    top:10px;
    width: 24px;
    cursor:pointer;
}
.repertory .repertory_plz{
    min-height:80px;
    text-align:center;
    line-height:80px;
    font-weight:500;
    padding: 0px;
}
/* /repertory_setting */
/* repertory_add */
.flex_wrapper.repertory_add{
    margin-top:20px;
}
.flex_wrapper.repertory_add input[type="text"]:first-child{
    margin-bottom:30px;
}
.flex_wrapper.repertory_add .drop_txt{
    color:#444;
}
/* 첫 등록시 출력 */
.flex_wrapper.repertory_add .login_btn{
    position: absolute;
    bottom:6.7%;
}
/* 수정할 때 출력 */
.repertory_btn_wrap{
    width: 100%;
    bottom: 6.7%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    display:none;
}
.flex_wrapper.repertory_add .repertory_btn_wrap > .login_btn{
    position:static;
    margin-top:10px;
}
.repertory_btn_wrap .login_btn.notify{
    background-color:#e2e2e2;
}
/* /repertory_add */
/* give_present */
.flex_wrapper.give_present{
    flex-wrap:wrap;
}
.flex_wrapper.give_present .give_main_txt{
    width: 89.33%;
    display:flex;
    justify-content:space-between;
    margin-bottom:28px;
}
.flex_wrapper.give_present .give_main_txt h2{
    font-family: 'Nanum Myeongjo', serif;
    font-size: 30px;
    line-height:1.5;
    font-weight: bold;
    color:#111;
}
.flex_wrapper.give_present .give_main_txt img{
    margin-right:24.6px;
    width: 58.4px;
    height: 75.1px;
}
.flex_wrapper.give_present .give_box{
    width:89.33%;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
    background-color: #ffffff;
    margin-bottom:10px;
    padding: 39px 30px;
    box-sizing:border-box;
    position: relative;
}
@media screen and (min-width:768px){
    
.flex_wrapper.give_present .give_box.performance_choice_box{
    border-radius: 5px 0 0 5px;
    box-shadow: 0 5px 40px 0 rgb(0 0 0 / 10%);
}
.flex_wrapper.give_present .give_box.performance_choice_box::before{
    content: '';
    display: block;
    position: absolute;
    right: 0px;
    top: 30px;
    background: repeating-linear-gradient(35deg,#dedede,#dedede 4px,transparent 0px,transparent 6px);
    height: 183px;
    width: 1px;
}


.flex_wrapper.give_present .give_box.repertory_choice_box {
    border-radius: 0px;
    box-shadow: 14px 8px 15px 0 rgb(0 0 0 / 10%);
}


.flex_wrapper.give_present .give_box.repertory_choice_box::before{
    content: '';
    display: block;
    position: absolute;
    right: 0px;
    top: 30px;
    background: repeating-linear-gradient(35deg,#dedede,#dedede 4px,transparent 0px,transparent 6px);
    height: 183px;
    width: 1px;
}


.flex_wrapper.give_present .give_box.find_artist_box {
    border-radius: 0 5px 5px 0;
    box-shadow:16px 8px 15px 0 rgb(0 0 0 / 10%);
}
}

.flex_wrapper.give_present .give_box h2{
    font-size:18px;
    font-weight:500;
    margin-bottom:3px;
}
.flex_wrapper.give_present .give_box img{
    width: 60px;
    cursor:pointer;
    position: absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
}
@media screen and (max-width:320px) {
    .flex_wrapper.give_present .give_box pre{
        font-size:12px;
    }
}
/* /give_present */
/* performance_request */
.request_step_box{
    width: 89.33%;
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}
.request_step_box>li{
    width: 32.23%;
    height: 50px;
    color:#111;
    font-weight:500;
    background-color:#f8f8f8;
    border-radius:5px;
    border: solid 1px #ebebeb;
    text-align:center;
    line-height:50px;
    position: relative;
    margin-right:5px;
    font-size:var(--main_font_size_m);
}
.request_step_box li:last-child{
    margin:0;
}
.request_step_box li.step_color{
    background-color:#000;
    color:#fff;
}
.request_step_box li:nth-child(2)::after{
    content:"";
    display:block;
    position: absolute;
    background:url(/resources/img/next_step.png);
    width: 34px;
    height: 34px;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    background-size:cover;
    z-index:222;
}
.request_step_box2 li:first-child::after{
    content:"";
    display:block;
    position: absolute;
    background:url(/resources/img/check_step.png);
    width: 34px;
    height: 34px;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    background-size:cover;
    z-index:222;
}
.request_step_box3 li:first-child::after{
    content:"";
    display:block;
    position: absolute;
    background:url(/resources/img/check_step.png);
    width: 34px;
    height: 34px;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    background-size:cover;
    z-index:222;
}
.request_step_box3 li:nth-child(2)::after{
    content:"";
    display:block;
    position: absolute;
    background:url(/resources/img/check_step.png);
    width: 34px;
    height: 34px;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    background-size:cover;
    z-index:222;
}
.request_step_box li.step_color::after{
    content:"";
    display:block;
    position: absolute;
    background:url(/resources/img/color_next_step.png);
    width: 34px;
    height: 34px;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    background-size:cover;
    z-index:222;
}
.receive_box{
    width: 89.33%;
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}
.receive_box li:first-child{
    font-size:var(--main_font_size);
    color:#444;
    font-weight:500;
}
.receive_box li:last-child{
    font-size:var(--main_font_size_m);
    color:#888;
}
.receive_box li> img{
    width: 24px;
    filter: grayscale(1);
    opacity: 0.1;
    margin-right:5px;
}
.receive_box li > img.active{
    filter:none;
    opacity:1;
}
.receive_box li:last-child{
    display:flex;
    align-items:center;
}
.input_wrap.request{
    margin-bottom:30px;
}
.phone_request{
    margin-bottom:10px;
    width:89.33%;
}
.flex_wrapper.request .count_box{
    width:89.33%;
    position: relative;
    display:flex;
    justify-content:center;
}
.count_box .drop_txt_area{
    width: 100%;
    min-height: 123px;
    height:auto;
    padding:20px;
}
.count_position{
    position: absolute;
    bottom:20px;
    right:17px;
    color:#c1c1c1;
    font-size:14px;
}
.notice_box.request{
    height: 44px;
}
.flex_wrapper.request .login_btn{
    margin-top:60px;
}

/* /step1 END */
.performance_select_box{
    width: 89.33%;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    height: 105px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
    margin-bottom:10px;
    cursor:pointer;
    box-sizing:border-box;
    padding-left:8.95%;
    color:#888;
    font-weight:500;
    font-size:var(--main_font_size);
}
.performance_selected_box{
    width: 89.33%;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    align-content: center;
    height: 105px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
    margin-bottom:10px;
    cursor:pointer;
    box-sizing:border-box;
    padding-left:5.970%;
    color:#888;
    font-weight:500;
    font-size:var(--main_font_size);
    position: relative;
}
.performance_selected_box h2{
    font-size:16px;
    color:#111;
    font-weight:500;
    display:flex;
    align-items:center;
}
.performance_selected_box h3{
    width: 100%;
    font-size: var(--main_font_size);
    color: #111;
    margin-bottom: 5px;
    display:flex;
    height: 24px;
}
.performance_selected_box .repertory_txt_hidden{
    width: 74%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.performance_selected_box h3:first-child{
    margin-bottom:15px;
}
.performance_selected_box .timeline_time{
    margin-left:10px;
    background-color:#fff;
    color:#444;
    opacity:1;
}
.performance_select_box img{
    width: 24px;
    margin-right:5px;
}
.performance_selected_box h3 img{
    width: 24px;
    margin-right:4px;
}
.flex_wrapper.request .artist_notice{
    margin:20px 0px 10px 0px;
    font-size:var(--main_font_size);
    color:#444;
    font-weight:500;
    width: 89.33%;
}
.flex_wrapper.request h2+input{
    width: 89.33%;
    margin-bottom:10px;
}
/* /step2 END */
.repertory_choice_wrap{
    width: 89.33%;
    height: 50px;
    position: relative;
    margin-bottom:10px;
}
.repertory_select_box{
    width: 100%;
    padding: 13px 20px 13px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
    background-color: #ffffff;
    border-radius:5px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    cursor:pointer;
    position: relative;
    font-size:var(--main_font_size);
    color:#111;
    font-weight:500;
    opacity: 0.3;
}
.repertory_choice_wrap  img{
    width: 24px;
    margin-right:4px;
    filter:grayscale(1);
}
.repertory_select_box.active{
    opacity:1;
}
.repertory_select_box .note_icon.active{
    filter:none;
}
.chat_box_icon{
    position: absolute;
    margin:0;
    right:20px;
    filter:none;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
}
.notice_box.choice{
    margin-bottom:14px;
}
.choice_box_txt{
    width: 78%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.toss_artist{
    margin-top:10px;
    margin-bottom:100px;
    text-align:center;
    width: 89.33%;
    height: 110px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
    box-sizing:border-box;
    padding-top:22px;
    cursor:pointer;
    opacity:0.3;
}
.toss_artist.active{
    opacity:1;
}
.toss_artist h2{
    width: 100%;
    font-size:var(--main_font_size);
    color:#111;
    font-weight:500;
    margin-bottom:5px;
}
.toss_artist p{
    width: 100%;
    font-size:var(--main_font_size_m);
    color:#888;
}
.selected_box{
    width: 89.33%;
    display:flex;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.selected_box button{
    padding: 0px 10px;
    height: 30px;
    border-radius: 5px;
    border: solid 1px #e5e5e5;
    background-color: #ffffff;
    font-family: 'Noto Sans KR', sans-serif;
    font-size:14px;
    font-weight:500;
    color:#444;
    margin-right:5px;
    margin-bottom:5px;
    cursor:pointer;
    max-height:30px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.description{
    width: 69.33%;
    height: 73px;
    padding:10px 38.5px 9px 10px;
    box-sizing:border-box;
    font-size:12px;
    color:#111;
    font-weight:500;
    line-height:1.5;
    background-color:#ffe326;
    border:1px solid #000;
    position: absolute;
    right: 60px;
    top:50%;
    transform:translateY(-50%);
    border-radius:5px;
    display:none;
}
.chat_box_icon.active +.description{
    display:block;
}
.description > p{
    height: 54px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 3;
    word-break: break-all;
    -webkit-box-orient: vertical;
}
.description::after{
    content: "";
    display: block;
    position: absolute;
    z-index: 222;
    width: 10px;
    height: 10px;
    border: 1px solid #111;
    border-left: none;
    border-bottom: none;
    background: #ffe326;
    border-top-left-radius: none;
    right: -6px;
    top: 44%;
    transform: rotate(45deg);
}
.selected_box button:last-child{
    margin:0;
}
.selected_box button img{
    width: 9px;
}
@media screen and (max-width:350px){
    .repertory_choice_box{
        font-size:14px;
    }
}
@media screen and (max-width:320px){
    .toss_artist > p{
        font-size:12px;
    }
}
/* /repertory_choice END */
.request_step_box3  li.step_color::after{
    display:none;

}
.artist_message{
    width: 89.33%;
    padding:20px;
    margin:auto;
    border:1px solid #ebebeb;
    border-radius:5px;
    font-size:14px;
    color:#111;
    box-sizing:border-box;
    margin-bottom:20px;
}
/* /step3 END */

/* /performance_request */
/* schedule_add */
.sign_header.schedule{
    background-color:#000;
    color:#fff;
    margin:0;
}
.schedule_box{
    position: relative;
    top:0;
    height: 300px;
}
.timeline_box{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background-color:#fff;
    padding-bottom:43px;
    position: relative;
    min-height:441px;
}
.timeline_date{
    display:flex;
    padding-top:15px;
    max-width:100%;
    height: 40px;
    justify-content:space-between;
    align-items:center;
    margin:auto;
    padding-left:6.7%;
    padding-right: 5.33%;
    margin-bottom:44px;
    margin-top:15px;
}
.timeline_date span{
    font-size:var(--main_font_size);
    color:#111;
    font-weight:500;
}
.timeline_date button{
    width: 80px;
    height: 40px;
    border-radius:5px;
    outline:none;
    background-color:#fff;
    border: solid 1px #626262;
    font-size:var(--main_font_size_m);
    color:#111;
    font-weight:500;
    font-family: 'Noto Sans KR', sans-serif;
}
.appointment_box{
    min-width:360px;
    max-width:100%;
    margin-bottom:40px;
    padding-bottom: 50px;
    display:none;
}
.appointment_box.active{
    display:block;
}
.clock{
    width: 12px;
    margin-right:2px;
}
.appointment_box img{
    width: 12px;
    margin-right:2px;
}
.appointment_box > li{
    height: 40px;
    display:flex;
    align-items:center;
    padding-left:6.7%;
}
.appointment_box > li:nth-child(1){
    background-color:#fff;
}
.appointment_box > li:nth-child(2){
    background-color:#f2f1ef;
}
.appointment_box > li:nth-child(3){
    background-color:#fff;
}
.appointment_box > li:nth-child(4){
    background-color:#f2f1ef;
}
.appointment_box > li:nth-child(5){
    background-color:#fff;
}
.appointment_box > li:nth-child(6){
    background-color:#f2f1ef;
}
.appointment_box > li:nth-child(7){
    background-color:#fff;
}
.appointment_box > li:nth-child(8){
    background-color:#f2f1ef;
}
.appointment_box > li:nth-child(9){
    background-color:#fff;
}
.appointment_box > li:nth-child(10){
    background-color:#f2f1ef;
}
.appointment_box > li:nth-child(11){
    background-color:#fff;
}
.appointment_box > li:nth-child(12){
    background-color:#f2f1ef;
}
.timeline_time_title{
    margin-right:10px;
    font-size:24px;
    color:#888;
    letter-spacing:-2.4px;
    opacity:0.35;
    transform: translateY(-2px);
    font-weight:500;
}
.timeline_time{
    position: relative;
    min-width: 70px;
    padding:0 5px;
    height: 26px;
    border-radius:5px;
    background-color:#f5f5f3;
    margin-right:10px;
    border:1px solid #e5e5e5;
    font-size: 14px;
    font-weight: 500;
    color:#444;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.6;
}
.timeline_time.active{
    border:1px solid #e5e5e5;
    background-color: #fff;
    opacity:1;
}
.timeline_time.reservation_complete::after{
    content:"";
    display:block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius:50%;
    background-color:#ffa700;
    top:-4px;
    right:-4px;
}
.flex_wrapper.timeline{
    width:100%;
    position: absolute;
    bottom:50px;
}
.schedule_null{
    width:100%;
    text-align:center;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:20px;
    font-weight:500;
}

/* /schedule_add */
@media screen and (min-width:430px){
    .login_btn.fixed{
        position: fixed;
        width: 384px;
        bottom: 43px;
      }
}

@media screen and (max-width:429px){
    .login_btn.fixed{
        position: fixed;
        width: 89.3%;
        bottom: 43px;
      }
}


/* performance_view */
.performance_contents{
    width: 100%;
    min-height:100vh;
    background-color:#f5f5f5;
    box-sizing:border-box;
    padding-top: 30px;
    padding-bottom: 30px;
    display:none;
}
.performance_contents.active{
    display:block;
}
.performance_contents2{
    padding-top:0;
    padding-top: 13px;
}

/* 예약된 공연이 없을시 출력 */
.performance_logo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    display:none;
}
.performance_logo img{
    width:110px;
}
.performance_icon{
    width: 100%;
}
.coupon_txt{
    width:100%;
    font-size:20px;
    color:#111;
    font-weight:500;
}
.sign_header.ff{
    background-color:#fff;
}

/* info_btn_box */
.info_btn_box{
    width: 89.33%;
    display:flex;
    margin:auto;
    margin-bottom: 30px;
}
.info_btn_box >li{
    padding:5px 10px;
    border-radius:5px;
    background-color:#fff;
    color:#444;
    font-weight:500;
    font-size:var(--main_font_size_m);
    margin-right:4px;
}
.info_btn_box >li.active{
    border:1px solid #ffa700;
    color: #ffa700;
}
.info_btn_box >li:last-child{
    margin-right:0;
}
.gifticon_btn_box>.star_orange_box {
    border:none;
}
.star_orange_box img.gray{
    filter:grayscale(1);
    opacity:0.3;
}
@media screen and (max-width:333px){
    .info_btn_box >li{
        font-size:13px;
    }
}

.artist_btn.m_none{
    max-width: 1160px;
    position: absolute;
    bottom: 0px;
}

.sign_header.gift.m_none{
    background-image: url(/resources/img/pc_upra_story_view.png);
    background-position: 92% 100%;
    background-size: 4000px;
}
/* 
.sign_header.gift.m_none h1{
    color: #fff;
}
.sign_header.gift.m_none h2{
    color: #fff;
} */

/* /performance_view */

/* settlement_history */
.sign_header.settlement{
    background-color:#fff;
}
.settlement_wrapper .flex_wrapper{
    width: 89.33%;
    margin:auto;
}
.settlement_wrapper .login_btn{
    width: 100%;
}
.settlement_wrapper h2{
    width: 100%;
    font-size:var(--main_font_size);
    color:#444;
    font-weight:500;
}
.settlement_wrapper img{
    width: 22px;
    max-height:22px;
}
.settlement_wrapper .flex_wrapper > ul{
    width: 100%;
    display:flex;
    margin:10px 0px 5px 0px;
}
.settlement_wrapper .flex_wrapper > ul li{
    display:flex;
    justify-content:center;
    align-items:center;
    height: 50px;
    background-color:#fff;
    font-size:#444;
    font-size:var(--main_font_size);
    border:1px solid #ebebeb;
    border-radius:5px;
    box-sizing:border-box;
}
.settlement_wrapper .flex_wrapper > ul li span{
    margin-right: 12.96%;
    color:#444;
}
.settlement_wrapper .flex_wrapper > ul li:first-child{
    width:48.65%;
}
.settlement_wrapper .flex_wrapper > ul li:nth-child(2){
    border:none;
    border-radius:none;
    background-color:transparent;
    margin:0px 1px;
}
.settlement_wrapper .flex_wrapper > ul li:last-child{
    width:48.65%;
}
.total_money_box{
    margin:30px 0px 20px 0px;
    width: 100%;
    display:flex;
    background-color:#fff;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #626262;
    height: 60px;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
    padding:0px 20px;
    font-weight:500;
    color:#444;
    font-size:var(--main_font_size_m);
}
.total_money{
    display:flex;
    align-items:center;
}
.total_money span{
    font-size:18px;
    font-weight: bold;
    color:#fc9d2b;
    margin-right:2px;
}
.settlement_user_area{
    width: 100%;
}
.settlement_user_box{
    width: 100%;
    height: 132px;
    margin-bottom:10px;
    background-color:#fff;
    padding:26px 0px 0px 20px;
    box-sizing:border-box;
    border-radius:5px;
}
.settlement_user_box h2{
    font-size:18px;
    color:#111;
    position: relative;
    font-weight:500;
    display:flex;
    align-items:center;
    margin-bottom:10px;
}
.settlement_user_box h2 .show{
    position: relative;
    border:none;
    top:0;
    right:0;
    border-radius:2px;
    margin-left:5px;
    width: 54px;
    height: 20px;
    line-height:20px;
}
.user_info{
    display:flex;
    font-size:14px;
}
.user_info ul li{
    margin-bottom: 5px;
}
.user_info ul li:first-child{
    color:#888;
    font-weight:500;
}
.user_info ul li:last-child{
    color:#111;
    font-weight:normal;
}
.user_info ul:last-child{
    margin-left:20.89%;
}
.user_info ul:last-child li:last-child{
    font-weight:bold;
}
@media screen and (max-width:340px){
    .total_money_box{
        font-size:13px;
    }
    .total_money span {
        font-size: 16px;
    }
}
/* /settlement_history */





/* 08/13 이동국 artist_list 수정 */


.artist_flex.m_list{
    width: 290px;
    justify-content: space-between;
    bottom: 18px;
}



.list_calendar{
    width: 125px;
    height: 40px;
    border-radius: 99px;
    border: solid 1px #e5e5e5;
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    color: #444;
    line-height: 40px;
    cursor: pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}
.list_calendar:hover{
    opacity:0.5;
}



.m_list>.list_calendar img{
    height: 22px;
    width: 22px;
    margin-left: 5px;
}


@media screen and (max-width:1239px){
.artist_flex.m_list{
    justify-content: space-between;
    position: absolute;
    bottom: -5px;
    margin-top: 0px;
    width: 100%;
}


.m_list .artist_list_txt h3{
    margin-top: 0px;
}


.artist_list_box.m_list:not(.active){ 
    min-width: 100%;
}



.list_calendar{
    width: 95px;
    height: 30px;
    border-radius: 99px;
    border: solid 1px #e5e5e5;
    background-color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding-left: 15px;
    line-height: 30px;
}


.m_list>.list_calendar img{
    float: right;
    height: 18px;
    width: 18px;
    margin-right: 15px;
}

.m_list .artist_list_txt{
    position: relative;
    width: 100%;
}

.m_list .artist_list_txt h3{
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display:-webkit-inline-box ;
}


.artist_list_txt pre{
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display:-webkit-inline-box ;
    font-weight: 500;
}

.artist_price{
    display: flex;
}
.artist_price>.won{
    margin-left: 0px;
}

}

/* /08/13 이동국 artist_list 수정 */



@media screen and (min-width:499px){
/* 08/17 이동국 service_center 수정 */
.wrapper.service_center{
    background-color: #f4f4f4;
    min-height: 680px;
}

.wrapper.service_center .service_wrapper{
    min-height: 480px;
    max-width:1100px;
    margin:auto;
}

.wrapper.service_center .flex_wrapper.service{
    margin-top: 0px;
    background-color: #f4f4f4;
}



.service_wrapper .service_chat{
    background-image: url(/resources/img/service_center_banner.png);
    margin-top: 100px;
}

.service_wrapper .chat_btn{
    width: 140px;
    height: 50px;
    font-family: 'Noto Sans KR', sans-serif;
}

.service_wrapper .flex_wrapper.service a{
    margin-top: 10px;
    background-color: #fff;
}

.service_wrapper .flex_wrapper.service a:after {
    content: "";
    position: absolute;
    right: 50%;
    top: 79%;
    height: 100px;
    width: 0;
    border: 1px solid #e8e8e8
  }


/* /08/17 이동국 service_center 수정 */


/* 08/17 이동국 upra_story 수정 */
.sign_header.story{
    min-width: 1200px;
    width: 100vw;
    line-height: unset;
    background-image: url(/resources/img/pc_upra_story.png);
    background-position: 50%;
    background-repeat:no-repeat;
    margin-bottom: 52px;
    background-color:#f7e7e8;
}
.sign_header.story h1{
    height: auto;
    max-width:1000px;
    background-image: unset;
    background-color: unset;
    margin: auto;
    position: unset;
    transform: translate(0);
    text-align: left;
    padding-top: 108px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 1.8px;
    font-family: 'Nanum Myeongjo', serif;
}

.sign_header.story h2{
    height: auto;
    max-width:1000px;
    margin: auto;
    text-align: left;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.22;
    margin-top: 10px;
    color: #a28184;
  }
.story_btn{
    width: 62.5%;
    height: 50px;
    background-color: #fff;
    display: flex;
    font-size: var(--main_font_size_m);
    font-weight: 500;
    color: #888;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    bottom: 0px;
}
.story_btn li {
    width: 50%;
    cursor: pointer;
    font-size: 16px;
}
.story_btn li.active{
    color: #111;
    font-weight: bold;
    border-bottom: 2px solid #444;
}

}

/* /08/17 이동국 upra_story 수정 */


/* 08/17 이동국 rule 수정 */
@media screen and (min-width:768px) {
    

.sign_header.service.m_none{
    background-image: url(/resources/img/pc_rule_banner.png);
    background-position: 2000px;
}


.sign_header.service.m_none h1{
    width: 1000px;
    margin: auto;
    position: unset;
    transform: translate(0);
    text-align: left;
    padding-top: 100px;
    font-size: 36px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 1.8px;
    font-family: 'Nanum Myeongjo', serif;
}
.sign_header.service.m_none{
    margin-bottom: 0;
}
.sign_header.service.m_none h2{
    width: 1000px;
    margin: auto;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.22;
    color: #383930;

}


.service_wrapper>.flex_wrapper.service.rule{
    background-color: white;
    min-width: 1160px;
    margin-top: 0px;
    transform: translateY(-50px);
}
}

/* /08/17 이동국 rule 수정 */

/* 08/17 이동국 pc_repertory_list 수정 */
.title_wrapper.pc_repertory_list{
    background-image: url(/resources/img/pc_repertory_list_banner.png);
    background-size: 3500px;
    background-position: 2200px 450px;
    padding-top: 110px;
}

.title_wrapper.pc_repertory_list h1{
    font-size: 36px;
    letter-spacing: 1.8px;
    text-align: left;
    color: #111;
}

.title_wrapper.pc_repertory_list p{
    font-size: 18px;
    text-align: left;
    color: #a28184;
}

/* /08/17 이동국 pc_repertory_list 수정 */





/* 08/17 이동국 coupon 수정 */
@media screen and (min-width:768px) {
.wrapper.coupon{
    background-color: #ffffff;
}
.sign_header.coupon.m_none{
    background-image: url(/resources/img/pc_upra_story_view.png);
    background-position: 92% 98%;
    background-size: 4200px;
    height: 350px;
}


.sign_header.coupon.m_none h1{
    font-family: 'Nanum Myeongjo', serif;
    top: 111px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 13.6px;
    color: #fff;
}


.sign_header.coupon.m_none h2{
    font-family: 'Nanum Myeongjo', serif;
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 164px;
    left: 50%;
    transform: translate(-50%);
    font-size: 18px;
    font-weight: 500;
}

.coupon_wrapper{
    background-color: #f6f6f6;
    width: 57.29%;
    max-width: 1100px;
    min-width: unset;
    min-height: 140px;
    height: 140px;
    border: solid 1px #dedede;
}

.coupon_txt_box{
    position: absolute;
    margin-top: 33px;
    width: 50%;
    left: 20.2%;
}

.coupon_btn{
    position: absolute;
    margin-top: 33px;
    width: 9.1%;
    right: 20%;
}

.coupon_btn.active{
    border-radius: 5px;
    border: solid 1px #000;
    background-color: #747474;
    color: #fff;
}



.coupon_wrapper h1{
    position: absolute;
    bottom: 32px;
    font-size: 14px;
    font-weight: normal;
}


}
/* /08/17 이동국 coupon 수정 */


/* 08/19 이동국 공연 선물하기 수정 */
.wrapper.give .sign_header.gift h1{
    font-size: 60px;
    font-family: 'Nanum Myeongjo', serif;
}

.wrapper.give .sign_header.gift h2{
    font-size: 60px;
    color: #888;
    font-size: 24px;
}

/* /08/19 이동국 공연 선물하기 수정 */


 /* 08/19 이동국 아티스트 목록 수정 */
.pc_artist_list_header_box1 .message_box{
    left: -5px;
    bottom: -40px;
    z-index: 1;
    font-weight: 800;
}



  /* /08/19 이동국 아티스트 목록 수정 */




  /* 08/19 이동국 공연 상세 수정 */
    .today_performance_banner.m_none .banner_txt{
        padding-top: 110px;
    }

    .today_performance_banner.m_none .banner_txt h1{
        font-size: 36px;
        letter-spacing: 1.8px;
        font-family: 'Nanum Myeongjo', serif;
    }

    .today_performance_banner.m_none .banner_txt h2{
        font-size: 18px;
        color: #888;
        margin-top: 10px;
    }
    @media screen and (min-width:768px) {
    .performance_wrapper.f5 .artist_btn{
        position: absolute;
        top: -50px;
    }
}



    /* /08/19 이동국 공연 상세 수정 */

    /* 08/19 이동국 선물함 수정 */

    .wrapper.gift>.gift.sign_header.m_none{
        height: 350px;
        background-position-x: 57%;
        background-position-x: 69%;
        background-position-y: -57px;
        background-size: 3000px;
    }

    .wrapper.gift>.gift.sign_header.m_none h1{
        text-align: left;
        width: 1000px;
        margin:auto;
        margin-bottom: 0px;
        padding-top: 0px;
        position: absolute;
        top: 108px;
        left: unset;
        font-size: 36px;
        font-weight: 800;
        letter-spacing: 1.8px;
    }

    .wrapper.gift>.gift.sign_header.m_none h2{
        text-align: left;
        width: 1000px;
        margin:auto;
        margin-bottom: 0px;
        padding-top: 0px;
        position: absolute;
        top: 159px;
        left: unset;
        font-weight: normal;
    }


    /* /08/19 이동국 선물함 수정 */


    /* 08/19 이동국 공연 레파토리 수정 */


    .wrapper .title_wrapper.repertoire{
        background-position: 80%;
        background-position-y: 0px;
        background-size: 4000px;
    }


    /* /08/19 이동국 공연 레파토리 수정 */




    @media screen and (min-width:768px){
     /* 08/20 이동국 공연 요청하기 수정 */
    .request_wrapper .flex_wrapper.request{
        margin-top: 62px;
    }
    .request_step_box.request_step_box3{
        margin-top: 42px;
    }

     /* 08/20 이동국 공지사항 및 알림 수정 */

    .notice_preview_box.m_none p{
        margin-top: 5px;
    }


    }



    .artist_txt{
        text-shadow: 2px 2px 2px #111;
    }



    /* 08/25 이동국 웰컴 기프트 작업 */
            /* 첫 선물 작업 08/24 */
            .welcome .gifticon_title{
                margin-top: 30px;
            }
    

            .welcome .gifticon_txt{
                height: 20px;
            }
            .welcome .movie_wrap{
                width: 100%;
                height: 100%;
                margin-top: 20px;
            }
        
        
            .welcome .movie_box{
                width: 100%;
                margin-right: 0px;
            }

            .welcome .movie_banner_box{
                width: 100%;
                height: 100%;
                background-color: #ffffff;
                z-index: 40;
            }
        
            .welcome .movie_box .movie_banner{
                width: auto;
                height: 100%;
                z-index: 40;
            }
        
            .welcome .play_btn{
                z-index: 50;
            }
    
    
            /* 08/25 스케쥴표 PC수정 */
            @media screen and (min-width:768px){
    
                .schedule_box{
                    border-radius: 10px 0px 0px 10px;
                }
    
                .timeline_box{
                    border-radius: 0 10px 10px 0;
                }
            }
    
    
            /* 08/25웰컴 기프트 선물 동영상 */
    
            .main_wrapper .video_box .movie_banner{
                width: 100%;
                height: 50vh;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                z-index: 112;
            }
    
            .main_wrapper .video_box .play_btn{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                z-index: 113;
                height: 130px;
            }
    





    

    /* 08/24 장정규 튜토리얼 */
    .tutorial_wrapper figure img{
        position: absolute;
        z-index:333;
    }
    .tutorial_wrapper .tuto_prev_btn{
        left:5%;
        top:30%;
    }
    .tutorial_wrapper .tuto_next_btn{
        right:5%;
        top:30%;
    }
    .tutorial_wrapper{
        overflow:hidden;
        display:flex;
    }
    
    /* tutorial_slide부분 */
    .tutorial_slide_wrap{
        width:100%;
        height:auto;
        position: absolute;
        top:0;
        left:0;
    }
    /* //tutorial_slide부분 */

    /* tutorial_step부분 */
    .tutorial_step{
        width:99.9vw;
        height:100vh;
        max-width:430px;
        float:left;
        position: relative;
    }

    /* //tutorial_step부분 */

    /* tutorial_img부분 */
    .tutorial_img{
        width: 90%;
        height: 61.9vh;
        margin:auto;
        position:absolute;
        bottom:230px;
        left:50%;
        transform:translateX(-50%);
        padding:0 10px;
    }
    .tutorial_img0{
        background-image:url(/resources/img/tutorial_img0.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    .tutorial_img1{
        background-image:url(/resources/img/tutorial_img1.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    .tutorial_img2{
        background-image:url(/resources/img/tutorial_img2.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    .tutorial_img3{
        background-image:url(/resources/img/tutorial_img3.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    .tutorial_img4{
        background-image:url(/resources/img/tutorial_img4.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    .tutorial_img5{
        background-image:url(/resources/img/tutorial_img5.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    .tutorial_img6{
        background-image:url(/resources/img/tutorial_img6.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    /* //turorial_img부분 */

    /* tutorial_txt부분 */
    .tutorial_txt{
        position:absolute;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        width:100%;
        height: 279px;
        background-color:#fff;
        box-sizing:border-box;
        padding-left:5.33333%;
        padding-top:30px;
        max-width:430px;
    }
    .tutorial_title{
        font-size:28px;
        color:#111;
        font-weight:bold;
        font-family:'NanumSquare',sans-serif;
        margin-bottom: 7px;
    }
    .tutorial_contents{
        font-size:16px;
        color:#888;
        line-height: 1.5;
        margin-bottom: 45px;
    }
    .tutorial_pass{
        font-size:14px;
        border-bottom: 1px solid #888;
        color:#888;
    }
    .upra_start{
        width: 89.33%;
        height: 50px;
        border-radius:5px;
        display:block;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
        background-color: #060607;
        color:#fff;
        text-align:center;
        line-height:50px;
        font-size:14px;
        font-weight: bold;
    }
    /* //tutorial_txt부분 */

    /* 선물이 도착했습니다.  */
    .popup_gift_X_btn{
        position: absolute;
        height:21.9px;
        right:0%;
        top:-20px;
        transform:translateY(-50%);
        cursor:pointer;
    }
    .popup_gift_contents{
        display:none;
        border: solid 1px #707070;
        background-color: #fff;
        width : 84%;
        height : 400px;
        position: absolute;
        left : 50%;
        transform:translate(-50%,-50%);
        max-width: 363.16px;
        top:50%
    }
    .popup_gift_background{
        width : 88%;
        position: absolute;
        left : 50%;
        transform:translateX(-50%);
        top: 27px;
        animation-name: popup_gift_background;
        animation-duration:0.8s;
        animation-iteration-count:1;
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes popup_gift_background {
        0% {
            width : 0%;
            top : 250px
        }
            100% {
            width : 88%;
            top: 27px;

        }
    }


    .popup_gift_body{
        width : 32%;
        position: absolute;
        left : 50%;
        top : 190px;
        transform:translateX(-50%);
        
    }

    .popup_gift_top{
        width : 39%;
        position: absolute;
        left : 60%;
        top: 36.8px;
        transform:translateX(-50%);
        animation-name: popup_gift_top;
        animation-duration:0.8s;
        animation-iteration-count:1;
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }


    @-webkit-keyframes popup_gift_top {
        0% {
            left:30%;
            top: 130px;
            transform:rotate(-30deg)

        }
            100% {
                left:50%;
                top: 36.8px;
                transform:rotate(0deg)
        }
    }

    .popup_gift_coupon{
        width : 31.7%;
        position: absolute;
        left : 50%;
        top : 122.8px;
        transform:translateX(-50%);
        z-index: -1;
        animation-name: popup_gift_coupon;
        animation-duration:0.5s;
        animation-iteration-count:1;
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes popup_gift_coupon {
        0% {           
            top:200px;
            width: 0%;
        }
        
    }
    .popup_gift_contents pre{
        transform:translateX(-50%);
        position: absolute;
        left : 50%;
        bottom:102px;
        font-size: 20px;
        font-weight: 500;
        color: #111;
        width:100%;
        text-align: center

    }
    .popup_gift_contents button{
        transform:translateX(-50%);
        position: absolute;
        left : 50%;
        bottom:20px;
        width:87.3%;
        height : 50px;
        border-radius: 5px;
        border:none;
        outline:none;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
        background-color: #060607;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }
    /* /선물이 도착했습니다.  */

    /* video_box */
    .video_box{
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%);
        display: none;
        background-color: black;
        z-index: 1111;
    }
    .video_box > video{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        display:none;
    }
    .video_box_txt{
        display:flex;
        align-items:center;
        position: absolute;
        font-size:14px;
        font-weight: 500;
        color:#fff;
        right: 5.333%;
        bottom:5%;
    }
    .video_box_txt >img{
        margin-left: 8px;
    }

    /* /video_box */

.pc_ask_call {
    position: fixed;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 237px;
    height: 50px;
    line-height: 50px;
    background-color: #fc9d2b;
    border-radius: 25px;
    box-shadow: 5px 5px 10px 0 rgb(183 86 2 / 29%);
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.pc_ask_call img {
    vertical-align: -1px;
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

.m_ask_call {
    position: fixed;
    top: 82%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 800;
    width: 149px;
    height: 30px;
    line-height: 30px;
    border-radius: 25px;
    -webkit-backdrop-filter: blur(1.7px);
    backdrop-filter: blur(1.7px);
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #111;
    cursor: pointer;
}

.m_ask_call span {
    color: #fa5858;
}

.m_ask_call img {
    vertical-align: -3px;
    width: 16px;
    height: 16px;
    margin-left: 1px;
}