/*=================================================
            [Common] 공통
=================================================*/
/*****#####===== 리스트 프레임 =====#####*****/
.lists-frame .lists-content{
    padding: 1.5rem 0;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 991px){
    .lists-frame{
        display: block;
    }

    .lists-frame .lists-side-nav{
        display: none;
    }

    .lists-frame .lists-content{
        width: 100%;
    }
}


/*=================================================
            [Main] index.php
=================================================*/
#main_page-main-page{
    padding: 0;
}

.section-wrap[data-layout="banner_section"] {
    overflow-x: hidden;
}

.section-wrap {
    margin-bottom: 2.5rem;
}

.section-wrap .slick-wrap,
.section-wrap .slick-list {
    padding: 0;

    overflow: visible;
}

.section-wrap .empty-wrap{
    height: 12rem;
}

/*****##### main-img-section #####*****/
.response-section {
    margin-top: 0.25rem;

    font-size: 0.6rem;
    color: var(--helper-color-secondarylight);
}

/*****##### pink + black 대제목 #####*****/
.pink-title {
    color: var(--helper-color-primary);
}

.black-title {
    margin-left: 0.3rem;

    color: var(--helper-color-secondarydark);
}

/*=================================================
            [Section] banner_section.php
=================================================*/
.section-wrap[data-layout="banner_section"] .slick-wrap{
    position: relative;
    height: 30rem;
}

.section-wrap[data-layout="banner_section"] .banner-img{
    height: 30rem;
}

.section-wrap[data-layout="banner_section"] .banner-img .banner-title-wrap {
    position: absolute;
    top: 50%;

    margin-left: 1.25rem;

    transform: translateY(-50%);
}

.section-wrap[data-layout="banner_section"] .banner-title {
    margin-bottom: 0.5rem;

    color: #ffffff;
}

.section-wrap[data-layout="banner_section"] .banner-subtitle {
    color: #F863B9;
}

.section-wrap[data-layout="banner_section"] .slick-dots{
    height: 0.375rem;

    bottom: 1rem;
}

.section-wrap[data-layout="banner_section"] .slick-dots li{
    width: 0.375rem;
    height: 0.375rem;
}

.section-wrap[data-layout="banner_section"] .slick-dots li button{
    background-color: #ffffff;

    opacity: 1;
}

.section-wrap[data-layout="banner_section"] .slick-dots li.slick-active,
.section-wrap[data-layout="banner_section"] .slick-dots li.slick-active button{
    width: 1.5rem;

    background: #F863B9;

    border-radius: 0.25rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .section-wrap[data-layout="banner_section"] .banner-img{
        height: 13rem;
    }
}

/*=================================================
            [Section] rise_section.php
=================================================*/
.section-wrap[data-layout="rise_section"] .main-img{
    border-radius: 0.313rem;
}

/*=================================================
            [Section] category_section.php
=================================================*/
.section-wrap[data-layout="category_section"] .cate-img {
    border-radius: 0.313rem;
    border: 1px solid #E5E5E5;
}

/*=================================================
            [Section] tagbtn_section.php
=================================================*/
.section-wrap[data-layout="tagbtn_section"]{
    overflow-x: visible;
}

.section-wrap[data-layout="tagbtn_section"] .tag-title {
    margin-bottom: 1rem;

    text-align: center;
}

/*=================================================
            [Section] lowbanner_section.php
=================================================*/
.section-wrap[data-layout="lowbanner_section"] .lbanner-img {
    border-radius: 0.5rem;
}

.section-wrap[data-layout="lowbanner_section"] .lbanner-title-wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 1.25rem;
}

.section-wrap[data-layout="lowbanner_section"] .lbanner-title {
    color: #ffffff;
}

.section-wrap[data-layout="lowbanner_section"] .lbanner-subtitle {
    color: #F863B9;
}

/*=================================================
            [Section] interest_section.php
=================================================*/
.section-wrap[data-layout="interest_section"] .inter-main-title {
    margin-bottom: 0.375rem;

    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
    color: var(--helper-color-secondarydark);
}

.section-wrap[data-layout="interest_section"] .inter-title {
    font-size: 0.875rem;
    text-align: center;
    color: var(--helper-color-secondary);
}

.section-wrap[data-layout="interest_section"] .interest-wrap {
    margin-top: 0.75rem;
}

/*****##### 메뉴 버튼 #####*****/
/* 회색 버튼일 때 */
.gray-btn {
    border-radius: 1.563rem;
    border: 1px solid #D4D4D4;

    /* 글씨 */
    padding: 0.375rem 1.25rem;

    color: var(--helper-color-secondarydark);
}

/*=================================================
            [section] 공통
=================================================*/
.section-wrap {
    overflow-x: hidden;
}

.section-wrap:not([data-layout="banner_section"]) .slick-slide:not(:last-child){
    padding-right: 1rem;
}

.section-wrap .mix-section-title{
    margin-bottom: 1rem;
}

/*=================================================
            [section] category_section.php
=================================================*/
/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .section-wrap[data-layout="category_section"] .each-col:nth-child(5),
    .section-wrap[data-layout="category_section"] .each-col:nth-child(6){
        display: none;
    }
}

/*=================================================
        [Chat] 채팅 리스트
=================================================*/
#chat-lists-body #gnb-wrap .logo-wrap{
    padding: 0.25rem 0;
}

/*=================================================
        [Chat] 채팅 상세
=================================================*/
#chat-room-body #gnb-wrap .logo-wrap{
    padding: 0.75rem 0;
}

#chat-room-page .dango_popover{
    position: relative;
}

#chat-room-page .chat-input-srch{
    padding: 0.675rem 1rem;
}

#chat-room-page .chat_wrap .message_wrap{
    height: calc(100% - 7.5rem);
}

#chat-room-page .chat_bubble_wrap.my_chat .bubble_text{
    background: var(--helper-color-primary);
}
#chat-room-page .translate-btn{
    margin-top: 0.125rem;

    font-size: 1.5rem;

    cursor: pointer;
}

#chat-room-page .port-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 4.438rem;
    padding: 0.75rem 1rem;

    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}

#chat-room-page .port-info-wrap {
    display: flex;
    gap: 0.5rem;
}

#chat-room-page .port-img {
    width: 3rem;
}

#chat-room-page .port-price {
    margin-top: 0.5rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    #chat-room-page .chat-view-box{
        height: calc(100vh - 4.5rem);
    }

    #chat-room-page .chat_wrap .message_wrap{
        height: calc(100% - 7.5rem);
    }
}

/*=================================================
        [Store] 긱워커 리스트
=================================================*/
#store-lists-page .slick-wrap {
    padding: 0;
}

#store-lists-page .slick-slide:not(:last-child){
    margin-right: 1rem;
}

#store-lists-page .underline-title-wrap{
    border-bottom: 1px solid #d4d4d4;
}

#store-lists-page .list-top-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#store-lists-page .lists-btn-wrap{
    padding-bottom: 0;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    #store-lists-page .slick-slide:not(:last-child){
        margin-right: 0.5rem;
    }
}

/*=================================================
        [Store] 긱워커 상세
=================================================*/
#store-view-page{
    padding: 1rem 0;

    overflow-x: hidden;
}

#store-view-page .content-group-wrap{
    margin: 0;
    padding: 1.75rem 0;
}

#store-view-page .content-group-wrap:not(:last-child){
    border-bottom: 8px solid #f5f5f5;
}

#store-view-page .slick-wrap{
    padding: 0;

    overflow: visible;
}

#store-view-page .slick-list{
    overflow: visible;
}


#store-view-page .gigabout-title,
#store-view-page .gigsocial-title{
    margin-bottom: 1rem;
}

#store-view-page .gig-img-wrap {
    position: relative;

    width: 8rem;
    margin: 0 auto;

    border-radius: 0.25rem;
    overflow: hidden;
}

#store-view-page .bi-star-fill {
    font-size: 0.75rem;
    color: #FFAA00;
}

#store-view-page .gig-name{
    font-size: 1.25rem;
    font-weight: 700;
}

#store-view-page .slick-slide:not(:last-child){
    margin-right: 1rem;
}

#store-view-page .country-img{
    width: 1.125rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    #store-view-page .gig-img-wrap {
        width: 7rem;
    }
}

/*=================================================
            [Portfolio] 포트폴리오 상세
=================================================*/
#portfolio-view-page .slick-wrap{
    padding: 0;
}

#portfolio-view-page .slick-slide:not(:last-child){
    margin-right: 1rem;
}

/*=================================================
            [Order] 결제하기
=================================================*/
#order-form-page .form-total-wrap{
    padding-top: 0;

    border-top: none;
}

#order-form-page .form-total-wrap .col-form-grid{
    grid-template-columns: auto 1fr;
}

.paypal-ui-fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    z-index: 5000;

    background-color: rgba(0,0,0,0.2);
}

.paypal-ui-wrapper{
    position: absolute;
    top: 10vh;
    left: 50%;

    min-width: 500px;
    max-height: 80vh;
    padding: 1rem;

    background-color: #ffffff;

    border-radius: 1rem;

    overflow-x: hidden;
    overflow-y: auto;

    transform: translateX(-50%);
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .paypal-ui-wrapper{
        top: 5vh;
        min-width: 345px;
    }
}