@charset "utf-8";

/*************************************************************************
* @ 서비스명   : goods
* @ 파일명     : /css/goods.css
* @ 페이지설명  : goods.css
* @ 작성자     : 김정은 (pointweb)
* @ 작성일     : 2021-09-27
************************** 수정이력 **************************************
* 날짜                    작업자                  변경내용
* 2021-09-27              김정은                  최초작성
**************************************************************************/


#goods .list{}
#goods .list .menu-group{margin-top:0.4rem;}
#goods .list .menu-group .m-toggle-btn{display:none;}
#goods .list .menu-group .menu{font-size:0;position:relative;}
#goods .list .menu-group .menu li{display:inline-block;vertical-align:middle;width:12.5%;background:#fafafa;border-left:0.01rem solid #fff;}
#goods .list .menu-group .menu li:first-child{border-left:0;}
#goods .list .menu-group .menu li .menu-level1{display:block;font-size:0.18rem;font-weight:400;text-align:center;padding:0.15rem 0;}
#goods .list .menu-group .menu-level2{font-size:0;text-align:center;margin-top:0.25rem;}
#goods .list .menu-group .menu-level2 a{font-size:0.17rem;position:relative;display:inline-block;color:#666;margin:0 0.2rem;}
#goods .list .menu-group .menu li .menu-level1.active,
#goods .list .menu-group .menu li .menu-level1:hover{background:#16469d;color:#fff;}
#goods .list .menu-group .menu-level2 a.active,
#goods .list .menu-group .menu-level2 a:hover{font-weight:500;color:#16469d;}
#goods .list .menu-group .menu-level2 a.active::after,
#goods .list .menu-group .menu-level2 a:hover::after{content:'';width:100%;height:0.02rem;background:#16469d;position:absolute;bottom:-0.04rem;left:50%;transform:translateX(-50%);}

#goods .list .goods-list{font-size:0;margin:0.5rem -2% 0;}
#goods .list .goods-list > div{display:inline-block;vertical-align:top;width:29.333%;margin:1% 2% 5%;}
#goods .list .goods-list > div figure{overflow:hidden;border:0.01rem solid #ccc;}
#goods .list .goods-list > div figure a{}
#goods .list .goods-list > div figure a img{width:100%;transition:.3s;}
#goods .list .goods-list > div .txt-box{margin-top:0.2rem;}
#goods .list .goods-list > div .txt-box a{display:block;}
#goods .list .goods-list > div .txt-box a h3{font-size:0.2rem;font-weight:500;}
#goods .list .goods-list > div .txt-box a .txt{font-size:0.16rem;margin-top:0.05rem;}
#goods .list .goods-list > div .txt-box a .price{font-size:0.18rem;font-weight:600;color:#ff6d2d;margin-top:0.1rem;}
#goods .list .goods-list > div:hover figure a img{transform:scale(1.1);}

#goods .view{}
#goods .view .top-info{font-size:0;margin-top:0.4rem;}
#goods .view .top-info .thunmail{display:inline-block;vertical-align:top;width:50%;border:0.01rem solid #e3e3e3;}
#goods .view .top-info .thunmail img{display:block;margin:0 auto;}
#goods .view .top-info .detail-info{display:inline-block;vertical-align:top;width:50%;padding-left:0.4rem;}
#goods .view .top-info .detail-info dl{}
#goods .view .top-info .detail-info dl dt{font-size:0.18rem;color:#707070;font-weight:400;}
#goods .view .top-info .detail-info dl dd{padding:0 0 0.3rem 25%;}
#goods .view .top-info .detail-info dl dd.name{font-size:0.28rem;font-weight:600;}
#goods .view .top-info .detail-info dl dd.category{font-size:0.18rem;}
#goods .view .top-info .detail-info dl dd.price{font-size:0.24rem;font-weight:600;color:#ff6d2d;}
#goods .view .top-info .detail-info dl:nth-of-type(1) dt{margin-top:0.05rem;}
#goods .view .top-info .detail-info dl:nth-of-type(1) dd{padding:0 0 0.2rem 25%;}
#goods .view .top-info .detail-info dl:nth-of-type(2){border-top:0.01rem solid #ccc;padding-top:0.3rem;}
#goods .view .top-info .detail-info .txt-box{position:relative;font-size:0.16rem;background:#f5f5f5;padding:0.2rem 0.24rem 0.2rem 0.48rem;margin-top:0.2rem;word-break:keep-all;}
#goods .view .top-info .detail-info .txt-box::before{content:'';width:0.2rem;height:0.2rem;background:url('/_public/images/@draft/sp_ico.png') no-repeat;background-size:6rem;background-position:-2.2rem 0;position:absolute;top:0.22rem;left:0.2rem;}
#goods .view .top-info .detail-info .txt-box span{font-weight:500;}
#goods .view .top-info .detail-info .go-inquiry{display:block;line-height:0.65rem;font-size:0.18rem;font-weight:500;color:#fff;background:#16469d;text-align:center;margin-top:0.2rem;}
#goods .view .detail-box{padding-top:0.4rem;margin-top:0.4rem;border-top:0.01rem solid #ccc;}
#goods .view .detail-box img{display:block;margin:0 auto;}
#goods .view > button{display:block;width:1.8rem;line-height:0.65rem;border:0.01rem solid #16469d;font-size:0.18rem;color:#16469d;font-weight:500;text-align:center;margin:1rem auto 0;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#goods .view > button:hover{color:#fff;background:#16469d;}


@media all and (max-width:1024px){
    #goods .list,
    #goods .view{padding-top:0;border-top:0;}

    #goods .hgroup{margin-top:0.2rem;}
    #goods .list .menu-group{position:relative;}
    #goods .list .menu-group .m-toggle-btn{position:relative;display:block;width:100%;font-size:0.18rem;color:#fff;text-align:left;padding:0.15rem 0.2rem;background:#16469d;}
    #goods .list .menu-group .m-toggle-btn::after{content:'';width:0.2rem;height:0.2rem;background:url('/_public/images/@draft/sp_ico.png') no-repeat;background-size:6rem;background-position:-0.4rem 0;position:absolute;right:0.2rem;top:0.19rem;}
    #goods .list .menu-group .menu{display:none;position:absolute;width:100%;z-index:100;border:0.01rem solid #ccc;}
    #goods .list .menu-group .menu li{display:block;width:100%;background:#fff;border-left:0;border-top:0.01rem solid #ccc;}
    #goods .list .menu-group .menu li:first-child{border-top:0;}
    #goods .list .menu-group .menu li .menu-level1{font-size:0.18rem;text-align:left;color:#666;padding:0.15rem 0.2rem;}
    #goods .list .menu-group .menu-level2{text-align:left;margin-top:0.1rem;white-space:nowrap;overflow-x:auto;padding:0.1rem 0;}
    #goods .list .menu-group .menu-level2 a{margin:0 0.3rem 0 0;}

    #goods .list .goods-list{margin:0.4rem -2% 0;}

    #goods .view .top-info{margin-top:0.2rem;}
    #goods .view .top-info .thunmail{display:block;margin:0 auto;}
    #goods .view .top-info .detail-info{display:block;width:100%;padding-left:0;margin-top:0.2rem;}
    #goods .view .top-info .detail-info dl dd{padding:0 0 0.15rem 20%;}
    #goods .view .top-info .detail-info dl dd.name{font-size:0.24rem;}
    #goods .view .top-info .detail-info dl dd.price{font-size:0.22rem;}
    #goods .view .top-info .detail-info dl:nth-of-type(1) dd{padding:0 0 0.1rem 20%;}
    #goods .view .top-info .detail-info dl:nth-of-type(2){padding-top:0.15rem;}
    #goods .view .top-info .detail-info .txt-box{margin-top:0.1rem;}
    #goods .view .top-info .detail-info .go-inquiry{margin-top:0.1rem;}
    #goods .view .detail-box{padding-top:0.2rem;margin-top:0.2rem;}
    #goods .view > button{margin:0.6rem auto 0;}
}


@media all and (max-width:640px){
    html{font-size:50px;}

    #goods .hgroup{margin-top:0.4rem;}
    #goods .list .menu-group .m-toggle-btn{font-size:0.28rem;padding:0.3rem;}
    #goods .list .menu-group .m-toggle-btn::after{width:0.4rem;height:0.4rem;background-size:12rem;background-position:-0.8rem 0;right:0.3rem;top:0.3rem;}
    #goods .list .menu-group .menu{border-width:0.02rem;}
    #goods .list .menu-group .menu li .menu-level1{font-size:0.28rem;padding:0.3rem;}
    #goods .list .menu-group .menu-level2{margin-top:0.2rem;padding:0.2rem 0;}
    #goods .list .menu-group .menu-level2 a{font-size:0.29rem;}
    #goods .list .menu-group .menu-level2 a.active::after{height:0.04rem;bottom:-0.08rem;left:52%;}

    #goods .list .goods-list > div{width:46%;}
    #goods .list .goods-list > div .txt-box a h3{font-size:0.3rem;}
    #goods .list .goods-list > div .txt-box a .txt{font-size:0.26rem;margin-top:0.1rem;}
    #goods .list .goods-list > div .txt-box a .price{font-size:0.28rem;margin-top:0.2rem;}

    #goods .view .top-info{margin-top:0.4rem;}
    #goods .view .top-info .detail-info{margin-top:0.4rem;}
    #goods .view .top-info .detail-info dl dt{font-size:0.28rem;}
    #goods .view .top-info .detail-info dl dd{padding:0 0 0.3rem 25%;}
    #goods .view .top-info .detail-info dl dd.name{font-size:0.34rem;}
    #goods .view .top-info .detail-info dl dd.category{font-size:0.28rem;}
    #goods .view .top-info .detail-info dl dd.price{font-size:0.32rem;}
    #goods .view .top-info .detail-info dl:nth-of-type(1) dd{padding:0 0 0.2rem 25%;}
    #goods .view .top-info .detail-info dl:nth-of-type(2){padding-top:0.3rem;border-width:0.02rem;}
    #goods .view .top-info .detail-info .txt-box{font-size:0.28rem;padding:0.3rem 0.3rem 0.3rem 0.8rem;margin-top:0.2rem;}
    #goods .view .top-info .detail-info .txt-box::before{width:0.4rem;height:0.4rem;background-size:12rem;background-position:-4.4rem 0;top:0.3rem;left:0.28rem;}
    #goods .view .top-info .detail-info .go-inquiry{font-size:0.28rem;line-height:1rem;margin-top:0.2rem;}
    #goods .view .detail-box{padding-top:0.4rem;margin-top:0.4rem;border-width:0.02rem;}
    #goods .view > button{width:3rem;line-height:1rem;font-size:0.28rem;margin:1rem auto 0;}
}