@import "global.css";
@import "swiper.min.css";

.product_list {padding: 66px 0; position: relative;}
.product_list .inner_box {width: 1000px; padding: 0 40px; margin: 0 auto; position: relative; box-sizing: border-box;}
/*.product_list .header {width: 100%; position: fixed; top: 0; left: 0; background-color: #fff; z-index: 10;}*/
/*.product_list .header .app_bar {width: 1000px; height: 66px; margin: 0 auto; padding: 0 40px;  position: relative; box-sizing: border-box;}*/
/*.product_list .header .app_bar .btn_prev {display: block; width: 38px; height: 38px; position: absolute; left: 45px; top: 14px; background: url(../../images/ic_arrow_back.svg) center center no-repeat; background-size: 34px auto;}*/
/*.product_list .header .app_bar .search_box {width: 600px; height: 38px; border-radius: 38px; background-color: #f4f7f8; position: absolute; left: 106px; top: 14px;}*/
/*.product_list .header .app_bar .search_box .it {height: 38px; padding:0 62px 0 20px; line-height: 38px; border: 0; font-size: 16px; color: #000; background-color: transparent;}*/
/*.product_list .header .app_bar .search_box .btn_search {display: block; width: 62px; height: 38px; background: url(../../images/ic_search.svg) center center no-repeat; border: 0; background-size: 22px auto; position: absolute; right: 0; top: 0;}*/
/*.product_list .header .app_bar .app_box {position: absolute; right: 40px; top: 14px; overflow: hidden;}*/
/*.product_list .header .app_bar .app_box a {display: inline-block; height: 38px; line-height: 38px; padding: 0 14px; font-size: 15px; color: #fff; float: left; margin-left: 6px; background-color: #000000; border-radius: 10px;}*/
/*.product_list .header .app_bar .app_box a:first-child {margin-left: 0;}*/
/*.product_list .header .app_bar .app_box a span {display: inline-block;}*/
/*.product_list .header .app_bar .app_box a.btn_google span {padding-left: 23px; background: url(../../images/playstore@2x.png) 0 center no-repeat; background-size: 18px auto;}*/
/*.product_list .header .app_bar .app_box a.btn_app span {padding-left: 20px; background: url(../../images/appstore@2x.png) 0 center no-repeat; background-size: 18px auto;}*/
.product_list .toggle_box {margin-top: 6px; margin-bottom: 26px; position: relative; overflow: hidden;}
.product_list .toggle_box .btn_state,
.product_list .toggle_box .btn_option {display: inline-block; padding: 0 14px; margin-right: 7px; height: 36px; font-size: 16px; color: #565858; border-radius: 36px; border: solid 1px #eceef1; box-sizing: border-box; float: left;}
.product_list .toggle_box .btn_state.on {color: #fff; background-color: #0eb4f3;}
.product_list .toggle_box .btn_option.on {color: #0eb4f3; border: 1px solid #0eb4f3; background-color: #fff;}
.product_list .toggle_box .btn_refresh {display: inline-block; width: 36px; height: 36px; background: url(../../images/ic_refresh.svg) center center no-repeat; background-size: 36px auto; position: absolute; right: 0; top: 0;}
.product_list .list {width: 960px; padding: 0 20px; margin-left: -60px; position: relative;}
.product_list .list ul {overflow: hidden;}
.product_list .list ul li {width: 200px; margin:0 0 45px 40px; float: left;}
.product_list .list ul li a {display: block;}
.product_list .list ul li a span {display: block;}
.product_list .list ul li a span.img {width: 200px; height: 200px; border-radius: 48px; overflow: hidden; margin-bottom: 15px; position: relative;}
.product_list .list ul li.fin a span.img::after {content: ''; display: block; width: 200px; height: 200px; border-radius: 48px; position: absolute; left: 0; top: 0; background-color: rgba(49, 136, 168, 0.6);}
.product_list .list ul li.fin a span.img::before {content: '거래완료'; display: block; width: 100%; position: absolute; left: 0; top: calc(50% - 45px); color: #fff; z-index: 1; text-align: center; font-size: 20px; background: url(../../images/ic_completed.svg) center 0 no-repeat; background-size: 77px auto; padding-top: 66px;}
.product_list .list ul li a span.img img {width: 100%; min-height: 200px; object-fit: cover;}
.product_list .list ul li a span.name {width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 17px; color: #373c3d;}
.product_list .list ul li a span.price {font-size: 19px; color: #000000; font-weight: 700;}
.product_list .list ul li a span.price strong {display: inline-block; font-size: 23px; font-family: 'Montserrat'; font-weight: 800; margin-right: 3px;}
.product_list .list ul li a span.time {padding-left: 16px; font-size: 13px; color: #929b9f; background: url(../../images/ic_time_upload.svg) 0 2px no-repeat; background-size: 13px auto;}
.product_list .list ul li.nothing {width: 100%; height: calc(100vh - 193px); margin:0 0 45px 0; text-align: center; position: relative;}
.product_list .list ul li.nothing div {width: 100%; padding-top: 125px; background: url(../../images/img_no_alert.svg) center 0 no-repeat; background-size: 99px auto; font-size: 32px; color: #373c3d; position: absolute; left: 0; top: calc(50% - 86px);}
.product_list .btn_appdown {display: none; width: 100%; height: 64px; line-height: 64px; color: #fff; text-align: center; font-size: 20px; font-weight: 700; background-color: #0EB4F3; position: fixed; bottom: 0; left: 0; z-index: 10; box-shadow:0px -5px 10px 0px rgba(0, 0, 0, 0.1);}
.product_list .btn_appdown span {color: #0eb4f3;}
.product_list .skeleton_screen {width: 960px; padding: 0 20px; position: absolute; left: -20px; top: 62px; z-index: 5;}
.product_list .skeleton_screen ul {overflow: hidden;}
.product_list .skeleton_screen ul li {width: 200px; margin:0 0 32px 40px; float: left;}
.product_list .skeleton_screen ul li span {display: block; height: 20px; margin-bottom: 13px; background-color: #f4f7f8;}
.product_list .skeleton_screen ul li span.img {width: 200px; height: 200px; border-radius: 48px; overflow: hidden;}
.product_list .skeleton_screen ul li span.name {width: 200px;}
.product_list .skeleton_screen ul li span.price {width: 140px; margin-bottom: 7px;}
.product_list .skeleton_screen ul li span.time {width: 55px;}

.product_detail {padding: 66px 0; position: relative;}
.product_detail .inner_box {width: 520px; margin: 0 auto; position: relative;}
/*.product_detail .header {width: 100%; position: fixed; top: 0; left: 0; z-index: 10;}*/
/*.product_detail .header .app_bar {width: 520px; height: 81px; margin: 0 auto; position: relative; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0)); transition: all 0.3s;}*/
/*.product_detail .header.white_bg .app_bar {background-color: #fff; background-image:none;}*/
/*.product_detail .header .app_bar .btn_prev {display: block; width: 81px; height: 81px; position: absolute; left: 0; top: 0; background: url(../../images/ic_arrow_back_w.svg) center center no-repeat; background-size: 35px auto; transition: all 0.3s;}*/
/*.product_detail .header .app_bar .btn_share {display: block; width: 63px; height: 81px; position: absolute; right: 63px; top: 0; background: url(../../images/ic_share_w.svg) center center no-repeat; background-size: 35px auto; transition: all 0.3s;}*/
/*.product_detail .header .app_bar .btn_menu {display: block; width: 63px; height: 81px; position: absolute; right: 0; top: 0; background: url(../../images/ic_more_w.svg) center center no-repeat; background-size: 17px auto; transition: all 0.3s;}*/
/*.product_detail .header.white_bg .app_bar .btn_prev {background: url(../../images/ic_arrow_back.svg) center center no-repeat; background-size: 35px auto;}*/
/*.product_detail .header.white_bg .app_bar .btn_share {background: url(../../images/ic_share.svg) center center no-repeat; background-size: 35px auto;}*/
/*.product_detail .header.white_bg .app_bar .btn_menu {background: url(../../images/ic_more.svg) center center no-repeat; background-size: 17px auto;}*/
.product_detail .product_img {width: 520px; height: 520px; overflow: hidden;}
.product_detail .product_img .swiper-container {width: 520px; height: 520px;}
.product_detail .product_img .swiper-slide img {width: 100%; min-height: 520px; object-fit: cover;}
.product_detail .product_img .swiper-container-horizontal>.swiper-scrollbar {height: 4px !important; bottom: 0 !important; left: 0 !important; width: 100% !important; background:#eceef1 !important;}
.product_detail .product_img .swiper-scrollbar-drag {background:#000 !important;}
.product_detail .txt_box {padding:30px 25px 40px; position: relative;}
.product_detail .txt_box .category {margin-bottom: 35px;}
.product_detail .txt_box .category span {display: inline-block; padding-left: 20px; font-size: 16px; color: #929b9f; background: url(../../images/detail_arrow.svg) 3px 2px no-repeat; background-size: 10px auto;}
.product_detail .txt_box .category span:first-child {padding-left: 0; background:none;}
.product_detail .txt_box .label {display: inline-block; padding: 0 12px; font-size: 15px; height: 32px; line-height: 32px; border-radius: 32px; border: solid 1px #83c5de; box-sizing: border-box; position: absolute; right: 25px; top: 25px;}
.product_detail .txt_box .label.type_01 {border: solid 1px #83c5de; color: #6093a7;}
.product_detail .txt_box .label.type_02 {border: solid 1px #69ff47; color: #000;}
.product_detail .txt_box .label.type_02 span {display: inline-block; padding-right: 25px; background: url(../../images/badge_check.svg) right 4px no-repeat; background-size: 19px auto;}
.product_detail .txt_box .label.type_03 {border: solid 1px #b7c0c5; color: #929b9f;}
.product_detail .txt_box .label.type_03 span {display: inline-block; padding-left: 25px; background: url(../../images/ic_hide-item_state.svg) 0 6px no-repeat; background-size: 19px auto;}
.product_detail .txt_box .brand {margin-bottom: 15px; font-size: 21px; color: #565858;}
.product_detail .txt_box .name {margin-bottom: 15px; font-size: 28px; line-height: 39px; color: #000;}
.product_detail .txt_box .price {margin-bottom: 9px; font-size: 34px; color: #000; font-weight: 500;}
.product_detail .txt_box .price strong {display: inline-block; font-size: 40px; font-family: 'Montserrat'; font-weight: 700; margin-right: 5px; position: relative;}
.product_detail .txt_box .price.fin strong::after {content: ''; display: block; width: 100%; height: 2px; background-color: #69ff47; position: absolute; left: 0; top: calc(50% - 1px);}
.product_detail .txt_box .time {margin-bottom: 40px; padding:0 0 40px 22px; font-size: 17px; color: #929b9f; background: url(../../images/ic_time_upload.svg) 0 2px no-repeat; background-size: 18px auto; border-bottom: 1px solid #eceef1;}
.product_detail .txt_box .option {margin-bottom: 20px;}
.product_detail .txt_box .option ul li {margin-bottom: 20px; font-size: 24px; color: #040f13; font-weight: 700;}
.product_detail .txt_box .option ul li span {display: inline-block; width: 122px; font-size: 22px; color: #697274; font-weight: 500;}
.product_detail .txt_box .comment {padding:20px 25px; font-size: 20px; line-height: 33px; color: #000; border-radius: 6px; border: solid 1px #eef4f8;}
.product_detail .txt_box .comment .hash_tag {display: block; margin-top: 10px; color: #506f7b;}
.product_detail .buy_box {width: 100%; margin-bottom: 42px; padding-right: 98px; box-sizing: border-box; position: relative;}
.product_detail .buy_box .btn_buy,
.product_detail .buy_box .btn_zzim {display: block; height: 84px; border-radius: 84px;}
.product_detail .buy_box .btn_buy {width: 100%; font-size: 24px; color: #fff; line-height: 84px; text-align: center; background-color: #0eb4f3;}
.product_detail .buy_box .btn_zzim {width: 84px; position: absolute; right: 0; top: 0; background: url(../../images/ic_item_bookmark.svg) center center no-repeat #000; background-size: 35px auto !important; transition: all 0.2s;}
.product_detail .buy_box .btn_zzim.on {background: url(../../images/ic_item_bookmark_on.svg) center center no-repeat #000;}
.product_detail .seller_box {padding: 0 25px; overflow: hidden;}
.product_detail .seller_box .profile {margin-bottom: 25px; padding-left: 85px; position: relative;}
.product_detail .seller_box .profile span {display: block;}
.product_detail .seller_box .profile span.img {width: 65px; height: 65px; border-radius: 65px; overflow: hidden; position: absolute; left: 0; top: 0; background: url(../../images/img_default_profile.png) 0 0 no-repeat; background-size: 65px auto;}
.product_detail .seller_box .profile span.img img {width: 100%; min-height: 65px; object-fit: cover;}
.product_detail .seller_box .profile span.name {font-size: 24px; line-height: 65px; font-weight: 700; color: #000;}
.product_detail .seller_box .txt {margin-bottom: 20px; font-size: 20px; font-weight: 700; color: #040f13;}
.product_detail .seller_box .txt span {color: #0eb4f3;}
.product_detail .seller_box .sale_product .list ul {width: 498px; overflow: hidden;}
.product_detail .seller_box .sale_product .list ul li {width: 138px; float: left; margin:0 28px 29px 0;}
.product_detail .seller_box .sale_product .list ul li a span {display: block; line-height: 1;}
.product_detail .seller_box .sale_product .list ul li a .img {width: 138px; height: 138px; margin-bottom: 14px; border-radius: 20px; overflow: hidden;}
.product_detail .seller_box .sale_product .list ul li a .img img {width: 100%; min-height: 138px; object-fit: cover;}
.product_detail .seller_box .sale_product .list ul li a .name {width: 100%; padding-left: 5px; font-size: 17px; margin-bottom: 6px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box;}
.product_detail .seller_box .sale_product .list ul li a .price {font-size: 19px; color: #040f13; padding-left: 5px;}
.product_detail .seller_box .sale_product .list ul li a .price strong {display: inline-block; font-size: 20px; font-family: 'Montserrat'; font-weight: 700; margin-right: 6px;}
.product_detail .seller_box .sale_product .mobile {display: none;}
.product_detail .seller_box .sale_product .swiper-container {overflow: visible;}
.product_detail .seller_box .sale_product .swiper-slide {width: 120px;}
.product_detail .seller_box .sale_product .swiper-slide .img {display: block; width: 120px; height: 120px; margin-bottom: 5px; border-radius: 6px; overflow: hidden;}
.product_detail .seller_box .sale_product .swiper-slide .img img {width: 100%; min-height: 120px; object-fit: cover;}
.product_detail .seller_box .sale_product .swiper-slide .name {display: block; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.product_detail .seller_box .sale_product .swiper-slide .price {display: block; font-size: 17px; color: #040f13;}
.product_detail .seller_box .sale_product .swiper-slide .price strong {display: inline-block; font-size: 18px; font-family: 'Montserrat'; font-weight: 800; margin-right: 2px;}
.product_detail .nothing {width: 100%; height: 100vh; text-align: center; position: relative;}
.product_detail .nothing div {width: 100%; padding-top: 125px; background: url(../../images/img_disappear_item.svg) center 0 no-repeat; background-size: 100px auto; font-size: 32px; color: #040f13; position: absolute; left: 0; top: calc(50% - 210px);}
.product_detail .nothing .btn_list {display: block; width: 270px; height: 56px; line-height: 56px; border-radius: 56px; background-color: #000; position: absolute; left: calc(50% - 135px); top: calc(50% + 107px); font-size: 18px; color: #fff;}

@media screen and (max-width: 600px) {
    .product_list .inner_box {width: 360px; padding: 0;}
    /*.product_list .header .app_bar {width: 360px; height: 56px; padding: 0 16px;}*/
    /*.product_list .header .app_bar .btn_prev {width: 56px; height: 56px; left: 0; top: 0; background-size: 24px auto;}*/
    /*.product_list .header .app_bar .search_box {width: 289px; height: 36px; left: 55px; top: 10px;}*/
    /*.product_list .header .app_bar .search_box .it {height: 36px; padding:0 45px 0 14px; line-height: 36px;}*/
    /*.product_list .header .app_bar .search_box .btn_search {width: 45px; height: 36px;}*/
    /*.product_list .header .app_bar .app_box {display: none;}*/
    .product_list .toggle_box {margin-bottom: 20px; padding: 0 16px;}
    .product_list .toggle_box .btn_state,
    .product_list .toggle_box .btn_option {padding: 0 12px; margin-right: 6px; height: 28px; font-size: 14px;}
    .product_list .toggle_box .btn_refresh {width: 28px; height: 28px; background-size: 28px auto; right: 16px;}
    .product_list .list {width: 334px; padding: 0 24px; margin-left: -20px; position: relative;}
    .product_list .list ul {overflow: hidden;}
    .product_list .list ul li {width: 145px; margin:0 0 25px 22px;}
    .product_list .list ul li a span.img {width: 145px; height: 145px; border-radius: 28px; margin-bottom: 11px;}
    .product_list .list ul li.fin a span.img::after {width: 145px; height: 145px; border-radius: 28px;}
    .product_list .list ul li.fin a span.img::before {top: calc(50% - 34px); font-size: 16px; background-size: 56px auto; padding-top: 44px;}
    .product_list .list ul li a span.img img {min-height: 145px;}
    .product_list .list ul li a span.name {font-size: 15px;}
    .product_list .list ul li a span.price {font-size: 15px;}
    .product_list .list ul li a span.price strong {font-size: 19px; margin-right: 2px;}
    .product_list .list ul li a span.time {padding-left: 15px; font-size: 12px; background-size: 12px auto;}
    .product_list .list ul li.nothing {height: calc(100vh - 122px); margin:0;}
    .product_list .list ul li.nothing div {padding-top: 80px; background-size: 72px auto; font-size: 18px; font-weight: 700; top: calc(50% - 56px);}
    .product_list .btn_appdown {display: block;}
    .product_list .skeleton_screen {width: 334px; padding: 0 24px; left: -22px; top: 48px;}
    .product_list .skeleton_screen ul li {width: 145px; margin:0 0 16px 22px;}
    .product_list .skeleton_screen ul li span {height: 16px; margin-bottom: 11px;}
    .product_list .skeleton_screen ul li span.img {width: 145px; height: 145px; border-radius: 28px;}
    .product_list .skeleton_screen ul li span.name {width: 140px;}
    .product_list .skeleton_screen ul li span.price {width: 115px;}
    .product_list .skeleton_screen ul li span.time {width: 45px;}
    
    .product_detail {padding-bottom: 100px;}
    .product_detail .inner_box {width: 100%;}
    /*.product_detail .header .app_bar {width: 100%; height: 56px;}*/
    /*.product_detail .header .app_bar .btn_prev {width: 56px; height: 56px; background-size: 24px auto;}*/
    /*.product_detail .header .app_bar .btn_share {width: 50px; height: 56px; right: 50px; background-size: 24px auto;}*/
    /*.product_detail .header .app_bar .btn_menu {width: 50px; height: 56px; background-size: 12px auto;}*/
    /*.product_detail .header.white_bg .app_bar .btn_prev {background-size: 24px auto;}*/
    /*.product_detail .header.white_bg .app_bar .btn_share {background-size: 24px auto;}*/
    /*.product_detail .header.white_bg .app_bar .btn_menu {background-size: 12px auto;}*/
    .product_detail .product_img {width: 100%; height: 100vw;}
    .product_detail .product_img .swiper-container {width: 100%; height: 100vw;}
    .product_detail .product_img .swiper-slide img {min-height: 100vw;}
    .product_detail .product_img .swiper-container-horizontal>.swiper-scrollbar {height: 3px !important;}
    .product_detail .txt_box {padding:20px 18px 30px;}
    .product_detail .txt_box .category {margin-bottom: 25px;}
    .product_detail .txt_box .category span {font-size: 14px;}
    .product_detail .txt_box .category span:first-child {padding-left: 0; background:none;}
    .product_detail .txt_box .label {font-size: 12px; height: 25px; line-height: 25px; border-radius: 25px; right: 18px; top: 20px;}
    .product_detail .txt_box .label.type_02 span {padding-right: 15px; background: url(../../images/badge_check.svg) right 5px no-repeat; background-size: 13px auto;}
    .product_detail .txt_box .label.type_03 span {padding-left: 18px; background: url(../../images/ic_hide-item_state.svg) 0 5px no-repeat; background-size: 14px auto;}
    .product_detail .txt_box .brand {margin-bottom: 5px; font-size: 15px;}
    .product_detail .txt_box .name {margin-bottom: 5px; font-size: 20px; line-height: 28px;}
    .product_detail .txt_box .price {font-size: 24px;}
    .product_detail .txt_box .price strong {font-size: 28px; margin-right: 3px;}
    .product_detail .txt_box .time {margin-bottom: 25px; padding:0 0 28px 15px; font-size: 12px; background-size: 12px auto;}
    .product_detail .txt_box .option ul li {margin-bottom: 10px; font-size: 18px;}
    .product_detail .txt_box .option ul li span {width: 85px; font-size: 16px;}
    .product_detail .txt_box .comment {padding:17px 20px; font-size: 14px; line-height: 22px;}
    .product_detail .buy_box {margin-bottom: 0; padding-right: 58px; position: fixed; left: 0; bottom: 0; z-index: 10;}
    .product_detail .buy_box .btn_buy,
    .product_detail .buy_box .btn_zzim {height: 58px; border-radius: 0;}
    .product_detail .buy_box .btn_buy {font-size: 18px; line-height: 58px;}
    .product_detail .buy_box .btn_zzim {width: 58px; background-size: 24px auto !important;}
    .product_detail .seller_box {padding: 0 18px;}
    .product_detail .seller_box .profile {margin-bottom: 15px; padding-left: 60px;}
    .product_detail .seller_box .profile span.img {width: 45px; height: 45px; border-radius: 45px; background-size: 45px auto;}
    .product_detail .seller_box .profile span.img img {min-height: 45px;}
    .product_detail .seller_box .profile span.name {font-size: 18px; line-height: 45px;}
    .product_detail .seller_box .txt {margin-bottom: 10px; font-size: 14px;}
    .product_detail .seller_box .sale_product .list {display: none;}
    .product_detail .seller_box .sale_product .mobile {display: block;}
    .product_detail .nothing {height: calc(100vh - 100px);}
    .product_detail .nothing div {padding-top: 80px; background-size: 72px auto; font-size: 18px; top: calc(50% - 52px);}
    .product_detail .nothing .btn_list {width: 324px; height: 50px; line-height: 50px; border-radius: 50px; left: calc(50% - 162px); top: auto; bottom: -50px; font-size: 16px;}
}