@charset "utf-8";

.shop_head { position: relative; max-width: 1200px; margin: 0 auto; padding: 60px 0; text-align: center; }
.shop_head .category { margin-bottom: 15px; font-size: 30px; font-weight: bold; color: #151517; }
.shop_head .desc { font-size: 15px; color: #858590; }

.shop_wrap { display: flex; max-width: 1200px; margin: 0 auto; padding-bottom: 85px; }

.shop_category { width: 200px; margin-right: 50px; }

.shop_category .biz_info { border-radius: 5px; border: 1px solid #e9ebf4; }
.shop_category .biz_info .head { padding: 20px 20px 15px 20px; }
.shop_category .biz_info .head .order_amount { margin-top: 5px; font-size: 13px; color: #858590; }
.shop_category .biz_info .head .order_amount span { color: #151517; font-weight: 500; } 
.shop_category .biz_info .body { padding: 0 20px 5px 20px; }
.shop_category .biz_info .name { font-size: 18px; font-weight: bold; color: #151517; word-break: break-all; }
.shop_category .biz_info .info_wrap { padding: 15px 0; border-top:1px solid rgba(21, 21, 23, 0.1); }
.shop_category .biz_info .info_wrap .title { margin-bottom: 15px; font-size: 13px; color: #151517; }
.shop_category .biz_info .info_wrap .title strong { font-weight: 500; }
.shop_category .biz_info .info_list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; font-size: 13px; line-height: 15px; }
.shop_category .biz_info .info_list:last-child { margin: 0; }
.shop_category .biz_info .info_list .subject { color: #858590; }
.shop_category .biz_info .info_list .info { color: #151517; }

.shop_category .pc { display: block; }
.shop_category .mobile { display: none; }

.shop_category .pc .count,
.shop_category .mobile .count { display: inline-block; margin-left: 5px; font-weight: 500; color: #f22775; }

.shop_category .pc .menu { margin-top: 60px; }
.shop_category .pc .menu .btn_document { display: block; margin-top: 10px; padding: 20px; border: 1px solid #151517; background: no-repeat url('../img/download_ico.svg'); background-size: 12px 14px; background-position: right 20px top 22px; font-size: 15px; font-weight: 500; }
.shop_category .pc .menu .head + .btn_document { margin-top: 20px; }
.shop_category .pc .menu .btn_document.point { background-image: url('../img/download_ico_white.svg'); background-color: #151517; color: #fff; }
.shop_category .pc .menu .btn_logout { display: block; margin-top: 20px;  padding: 20px; border: 1px solid #151517; background: no-repeat url('../img/logout_ico.svg'); background-size: 14px 14px; background-position: right 20px top 22px; font-size: 15px; font-weight: 500; }

.shop_category .pc .head h3 { padding-bottom: 20px; border-bottom: 2px solid #151517; font-size: 20px; font-weight: bold; color: #151517; }
.shop_category .pc .list { width: 200px; }
.shop_category .pc .main { position: relative; padding: 20px 0; border-top: 1px solid rgba(21, 21, 23, 0.1); }
.shop_category .pc .main > a { font-size: 18px; font-weight: 500; color: #666; }
.shop_category .pc .main.on > a { color: #000; width: calc(100% - 30px);display: inline-block;font-weight: bold;}
.shop_category .pc .btn_toggle { position: absolute; top: 23px; right: 0; width: 15px; height: 15px; background: no-repeat url('../img/open_category_ico.svg'); background-size: 10px 10px; background-position: 2.5px 2.5px; }
.shop_category .pc .sub { display: none; width: 100%; margin-top: 15px; padding: 20px; border-radius: 5px; background-color: #fafafc; }
.shop_category .pc .sub.depth3 { margin-top: 10px; padding: 15px; background-color: #f0f0f5; }
.shop_category .pc .opened > .sub { display: block; }
.shop_category .pc .opened > .btn_toggle { background: no-repeat url('../img/close_category_ico.svg'); background-size: 10px 2px; background-position: 2.5px 6px; }
.shop_category .pc .sub li { position: relative; }
.shop_category .pc .sub li .btn_toggle { top: 1.5px; }
.shop_category .pc .sub > li + li { margin-top: 15px; }
.shop_category .pc .sub a { font-size: 15px; font-weight: 500; color: #999;  }
.shop_category .pc .sub .on > a { color: #151517; }

.shop_category .mobile .swiper-container { overflow: hidden; }
.shop_category .mobile .swiper-slide { display: inline-block; width: auto; }
.shop_category .mobile .main { padding-left: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(21, 21, 23, 0.1); }
.shop_category .mobile .main a { display: inline-block; margin-right: 35px; font-size: 16px; font-weight: 500; color: #b9bec4; }
.shop_category .mobile .main .on a { color: #151517; }
.shop_category .mobile .sub { padding: 25px 0 25px 20px; background-color: #fafafc; }
.shop_category .mobile .sub.depth3 { background-color: #f0f0f5; }
.shop_category .mobile .sub a { display: inline-block; margin-right: 20px; font-size: 15px; font-weight: 500; color: #b9bec4; }
.shop_category .mobile .sub .on a { color: #151517; }

.shop_content { flex-grow: 1; -ms-flex: 1 0 0%; }

@media screen and (max-width: 1199px) {
    .shop_head { padding: 35px 0; }
    .shop_wrap { display: block; padding-bottom: 60px; }
    .shop_content { padding: 15px; }

    .shop_category { width: unset; margin: 0; }
    .shop_category .pc { display: none; }
    .shop_category .mobile { display: block; }

    .shop_category .biz_info { margin: 0 25px 35px 25px; }
    .shop_category .biz_info .head { padding: 20px; background: no-repeat url('../img/box_fold_ico.svg'); background-size: 10px 5px; background-position: top 26px right 20px; user-select: none; cursor: pointer; }
    .shop_category .biz_info .body { display: none; }
    .shop_category .biz_info.opened .head { padding-bottom: 15px; background-image: url('../img/box_unfold_ico.svg'); }
    .shop_category .biz_info.opened .body { display: block; }
}

@media screen and (max-width: 880px) {
    .shop_head .category { font-size: 20px; }
    .shop_content { display: block; padding-bottom: 0; }
}