/*
.cart a{width: 36px; }
.cart a > img{position: static; transform: none; }
.cart .cartTotal{top: 8px; right: -4px; }

*/

/*  기본 리스트 .list */
/*.list{border-top: 1px solid #efefef; }*/
body{height: 100% !important;}
.wrap{position: relative; overflow: hidden; }
.list > li{border-bottom: 1px solid #e5e5e5; padding: 12px 0; }

.productList{padding-top: 40px; }
.brandList{padding-top: 0; }
.listTitle{width: 95%; margin: 0 auto 28px; position: relative; }
.productListTitle{text-align: center; }
.fyiTitle{font-size: 11px; line-height: 1.5; margin: 4px auto 8px; color: #212121; padding-left: 12px; }
.fyiTitle > span{font-weight: bold; color: var(--main-color); }
.listTitle > h4{display: inline-block; font-size: 18px; color: #333; font-weight: 700; padding-bottom: 20px; margin-bottom: 20px; position: relative; }
.listTitle > h4:after{content: ''; display: block; width: 20px; height: 1px; background-color: #797979; position: absolute; left: 50%; margin-left: -10px; bottom: 0; }
.listTitle > h4 > input{}
.listTitle > h4 > label{display: block;font-size: 14px;vertical-align: middle; margin-top: 8px; }
.listTitle > h4 > label > img{width: 24px;margin-right: 4px; vertical-align: middle; margin-top: -2px; }
.userUploadImg{display: table; margin: 0 auto 8px;border-radius: 8px;overflow: hidden; padding: 0;}
.userUploadImg > img{width: 280px;margin: 0 auto;padding: 0;height: auto;text-align: center; display: block; }
.listTitle > ul{text-align: center; font-size: 0; }
.listTitle > a{position: absolute; right: 0; bottom: 0; padding: 8px 20px; background-color: #1a73e8; color: #fff; font-weight: normal; font-size: 15px; border-radius: 4px; transition: all ease .1s; }
/*.listTitle > a:hover{font-weight: 700; }*/
.listTitle .requestWriteBtn{float: right; padding: 8px 20px; background-color: #1a73e8; color: #fff; font-weight: normal; font-size: 15px; border-radius: 4px; transition: all ease .1s; }
.listTitle a:hover{font-weight: 700; }
/*  브랜드 리스트  */
.brandInfor{margin-bottom: 20px; display: none; }
.brandInfor > h3{font-size: 24px; font-weight: 700; color: #212121; text-align: center; word-break: break-all; margin-bottom: 12px; }
.brandInfor > h3 > p{display: inline-block; vertical-align: middle; }
.brandInfor > h3 span{display: none; }
.brandInfor > h3 .area{border-radius: 4px;color: #fff;display: inline-block;font-size: 14px;height: 24px;line-height: 24px;margin-right: 6px;padding: 0 8px;text-align: center; margin-top: -4px; vertical-align: middle; }
.brandInfor > h3 .area.area2{background-color: #d6475c; }
.brandInfor > h3 .area.area3{background-color: #4184bd; }
.brandInfor > h3 .area.area4{background-color: #a02124; }
.brandInfor > h3 .area.area5{background-color: #FE5B00; }
.brandInfor > h3 .area.area6{background-color: #f83f6e; }
.brandInfor > h3 button{text-align: center; font-size: 12px; color: #797979; font-weight: 700; display: inline-block; vertical-align: middle; }
.brandInfor > h3 button > img{width: 24px; display: block; }
.brandInfor > form{position: relative; margin: 8px auto 32px; width: 200px; }
.brandInfor > form input{width: 100%; border-radius: 20px; padding: 4px 32px 4px 12px; }
.brandInfor > form button{position: absolute; right: 4px; top: 4px; }
.brandInfor > form button img{width: 20px; }
.brandCategory{width: 95%; margin: 0 auto; }
.brandCategory a{color: #333; font-size: 14px; display: inline-block; }
.brandCategory a.on{color: #212121; font-weight: bold; }
.brandCategory > a{display: block; text-align: center; width: 36px; margin: 8px auto; }
.brandCategory > div{font-size: 0; margin: 8px auto; }
.brandCategory > div > a{display: inline-block; font-size: 14px; font-weight: bold; margin: 0 12px; }
.brandCategory > div > ul{display: inline-block; }
.brandCategory > div > ul > li{display: inline-block; margin-right: 12px; cursor: pointer; }
.brandCategory > div > ul > li > a{width: 100%; height: 100%; display: block; color: #333; font-size: 14px; }
.brandCategory li.on{border-bottom: 1px solid #595959; }

.categoryL{margin-bottom: 24px; }
.categoryL > li{display: inline-block; margin: 4px 12px; font-size: 13px; color: #acacac; cursor: pointer; }
.categoryL > li.on{color: #333; font-weight: 700; }
.categoryL > li:hover{color: #595959; font-weight: 700; }
.categoryM{text-align: center; }
.categoryM > ul{display: inline-block;background-color: #f5f5f5; padding: 0 8px; }
.categoryM > ul > li{margin: 0 20px; display: inline-block; }
.categoryM > ul > li > a{font-size: 12px; color: #797979; }
.categoryM > ul > li:hover > a{color: #736598; font-weight: 700; }
.categoryM > ul > li.on > a{font-weight: 700; color: #333; }

.listTitle > h3{font-size: 24px; margin-bottom: 8px; color: #333; font-weight: 500; }
.listTitle > h6{font-size: 13px; color: #797979; font-weight: normal; }
.listTitle > h6 > p{float: left;width: calc(100% - 128px);display: block; }
.listSection{max-width: 1280px; margin: 0 auto; min-height: 480px; }
.listBox{width: 100%; }
.listBox > h3{width: 100%; max-width: 1280px; margin: 12px auto 4px; padding: 0 4px; }
.listBox > h3 > strong{color: #736598; }
.listBox > h3 > a{float: right; }
.listBox > h3 > a > img{display: inline-block; width: 28px; height: 28px; vertical-align: sub; opacity: .75; }
.listUp{max-width: 1280px; width: 95%; margin: 20px auto; }
.listUp > ul{}
.listUp > ul > li{float: left; width: calc(50% - 6px); margin-right: 12px; margin-bottom: 48px; }
.listUp > ul > li > div{padding: 4px 4px 8px; overflow: hidden; }
.listUp > ul > li > div:hover{background-color: #efefef; }

.listFilter{width: 100%; margin: 0 auto 4px; }
.listFilter > p{font-size: 14px; margin-top: 4px;color: #595959;font-weight: normal; padding-right: 4px; }
.optionLine{width: 100%; margin: 0; padding: 0 4px; font-size: 0; overflow: auto; }
.optionLine li{margin-right: 4px; position: relative; display: inline-block; vertical-align: middle; }
.optionLine li > button{background-color: #fff; border-radius: 20px; position: absolute; right: 4px; top: 6px; padding: 0; display: none; }
.optionLine li > button > img{width: 20px; margin: 0; }
.optionLine select{padding: 0 24px 0px 10px;border-radius: 32px; font-size: 12px; }
.optionLine option{font-size: 14px; color: #595959; background-color: transparent; text-align: center; }
.optionLine optgroup > option{text-align: left; }
.optionLine button{border: 0; background-color: transparent; cursor: pointer; color: #595959; vertical-align: middle; font-size: 14px; }
.optionLine button > img{margin-left: 8px; vertical-align: middle; }

.selectStyle{max-width: 1280px; width: 95%; margin: 0 auto; }
.selectStyle > ul{float: right; }
.selectStyle > ul > li{border: 1px solid #acacac; padding: 0 4px; border-radius: 4px; height: 20px; text-align: center; font-size: 12px; color: #797979; float: left; line-height: 18px; margin: 0 2px; }

.modalFilter{position: fixed; z-index: 3700; right: -100%; top: 0; max-width: 640px; width: 100%; height: 100%; background-color: #fff; box-shadow: -5px 0 10px rgba(0,0,0,.1); transition: all ease .2s; overflow-x: hidden; overflow-y: auto; }
.modalFilter.on{right: 0; }
.modalFilter > div{padding: 20px; width: 100%; position: relative; padding-bottom: 40px; }
.modalFilter > div > form{}
.filterT{margin-bottom: 36px; }
.filterT > h4{font-size: 18px; font-weight: 700; color: #797979; }
.filterT > button{border: 0; background-color: transparent; float: right; }
.filterT > button > img{width: 24px; }
.filterBox{border-bottom: 1px solid #efefef; margin-bottom: 24px; padding-bottom: 8px; }
.filterBox > h5{padding-left: 8px; font-weight: 700; color: #333; font-size: 14px; border-left: 2px solid #333; margin-bottom: 12px; }
.filterBox > ul{font-size: 0; }
.filterBox > ul > li{display: inline-block; margin: 8px 4px; }
.filterBox > ul > li > input{}
.filterBox > ul > li > label{font-size: 12px; color: #797979; text-align: center; padding: 2px 8px; text-align: center; }
.filterBox > ul > li > input:checked + label{color: #fff; font-weight: 700; background-color: #B692FF; border-radius: 50px; }
.filterSearch{width: 100%; max-width: 600px; position: fixed; bottom: 20px; }
.filterSearch > li{}
.filterSearch > li > button{height: 32px; float: left; border-radius: 32px; border: 0; }
.filterSearchBtn{width: calc(100% - 80px); margin-right: 8px; background-color: #4285F4; color: #fff; font-weight: 700; text-align: center; }
.filterResetBtn[type="reset"]{width: 32px; text-align: center; background-color: #797979; padding: 0; }
.filterResetBtn[type="reset"] > img{vertical-align: middle; }

.otherBox{margin-bottom: 4px; padding: 0 4px; }
.otherBox > .ranking{font-size: 12px; color: #333; vertical-align: middle; float: left; margin-right: 12px; }
.otherBox > .ranking:before{content: ''; display: inline-block; width: 2px; height: 14px; background-color: #797979; vertical-align: middle; margin-right: 4px; margin-top: -2px; }
.otherBox > .new{float: left; font-size: 12px; font-weight: 700; color: #ecec0b; }
.otherBox > .brand{float: right; font-size: 11px; color: #797979; }

.productTop{}
.productTop > *{float: left; }
.productTop > .imgBox{width: 100px; padding-bottom: 100px; margin-right: 8px; }
.productTop > .textBox{width: calc(100% - 136px); }
.productTop > .textBox > a{margin-bottom: 8px; color: #333; display: inline-block; font-size: 16px; }
.imgBox{border-radius: 4px; width: 100%; height: 0; margin-bottom: 8px; position: relative; padding-bottom: 100%; overflow: hidden; }
.imgBox > img{width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; left: 0; top: 0; }
.imgBox > a{width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; }
.imgBox > a > img{width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.imgBox > a > div{width: 100%; position: absolute; z-index: 500; top: 0; }
.imgBox > a > div > p{color: #ecec0b; font-size: 12px; float: left; margin-top: 6px; margin-left: 8px; animation: blink-effect 2s step-end infinite;}
@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}
.imgBox > a > div > label{cursor: pointer; float: right; width: 24px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center center; float: right; margin-right: 8px; margin-top: 8px; }
.imgBox > a > ul{position: absolute; left: 0; bottom: 4px; }
.imgBox > a > ul > li{float: left; margin-left: 4px; }
.imgBox > a > ul > li > img{width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; }
.textBox{}
.textBox > h4{font-size: 16px; color: #333; }
.textBox > h4 > a{font-size: 14px; color: #333; font-weight: 700; }
.textBox > h5{font-size: 14px; color: #797979; margin-bottom: 12px; }
.textBox .area{}
.textBox > ul{margin-bottom: 24px; }
.textBox > ul > li{float: left; margin-right: 4px; margin-bottom: 2px; }
.textBox > h6{font-size: 18px; font-weight: 400; color: #333; }
.productOption{}
.productOption > li{margin-bottom: 4px; width: 100%; /*border-bottom: 1px solid #f0f0f0;*/padding-bottom: 4px; }
.productOption > li:last-child{margin-bottom: 0; }
.productOption > li > *{padding: 0; }
.productOption > li > p{color: #797979; font-size: 14px; width: 100%; margin-bottom: 4px; }
.productOption > li > p > span{font-size: 12px; margin-left: 4px; vertical-align: text-top; }
.productOption > li > div{}
.productOption > li > div > .optionSelect{float: left; margin: 0; }
.optionSelect{font-size: 0; width: 100px;}/*text-align: right; */
.optionSelect > button{font-size: 14px; color: #797979; font-weight: 700; display: inline-block; height: 28px; width: 28px; vertical-align: middle; border: 1px solid #ccc; padding: 0; }
.optionSelect > button > img{vertical-align: middle; width: 16px; }
.optionSelect > input{display: inline-block; width: 40px; height: 28px; vertical-align: middle; border: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 14px; color: #595959; padding: 0 4px; text-align: center; border-radius: 0; }
.optionSelect > .optionMinus{border-radius: 4px 0 0 4px; }
.optionSelect > .optionPlus{border-radius: 0 4px 4px 0; }
.productOption > li > div > h5{text-align: right; float: right; }
.productOption > li > div > h5 > p{color: #333; font-size: 14px; font-weight: 500; display: inline-block; vertical-align: middle; }
.productOption > li > div > h5 > button{vertical-align: middle; padding: 0; margin-left: 4px; }
.productOption > li > div > h5 > button > img{width: 20px; opacity: .5; }
.listBox > ul > li > div:hover > .textBox > h6{font-weight: 500; }

.listUp2{}
.listDom{width: 100%; margin: 0 auto; max-width: 1280px; }
.listDom:after{content: ''; display: block; clear: both; }
.list{width: 49.2%; float: left; margin: 0 .4% 20px; position: relative; }
.column2{width: 49.2%; }
.column3{width: 32.533333%; }
.list > div{position: relative; padding-top: 2px; overflow: visible; }
.listImg{position: relative; display: block; width: 100%; height: 0; padding-bottom: 133.3%; overflow: hidden; }
.listImg > img{position: absolute; width: 100%; height: 100%; left: 0; top: 0; -o-object-fit: cover; object-fit: cover; z-index: 50; border: 1px solid #efefef; transform: scale(1.11); transition: all ease .48s; }
.list:hover .listImg > img{transform: scale(1.28); }
.listImg > h6{position: absolute; background-color: #333; color: #fff; z-index: 100; top: 0; right: 0; width: 24px; height: 24px; text-align: center; line-height: 22px; font-size: 14px; }
.listImg > ul{position: absolute; z-index: 100; bottom: 4px; left: 4px; }
.listImg > ul > li{width: 32px;height: 32px;position: relative;float: left;margin-right: 2px; }
.listImg > ul > li > img{width: 100%; }
.listDom .jjimBtn{position: absolute;right: 4px;bottom: 0;width: 36px;z-index: 100;padding: 4px; background-color: rgba(0,0,0,.25); border-radius: 8px 8px 0 0; font-size: 11px; color: #fff; }
.listDom .videoTag{width: 44px; height: 44px; background-color: rgba(0,0,0,.25); border-radius: 8px; text-align: center; }
.listDom .videoTag > img{width: 24px; height: 24px; -o-object-fit: contain; object-fit: contain; margin-top: 10px; }
.listDom .requestDelBtn{position: absolute;right: 4px;top: 4px;width: 24px;height: 24px;z-index: 100;padding: 0; }
.listDom .requestDelBtn > img{width: 100%; opacity: .7; }
.listDom .jjimBtn.jjim{background-color: #ff554e; } /*736598*/
.listDom .jjimBtn > img{width: 24px; height: auto; display: block; margin: 0 auto; }
.listText{padding: 0 4px; }
.listText > *{margin-bottom: 2px; }
.listText > h3{max-height: 48px; height: 16px; overflow: visible; }
.listText > h3 > a{font-size: 14px; color: #212121; width: 100%; height: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 14px; text-overflow:ellipsis; white-space:nowrap; display: block; padding-top: 2px; transition: all ease .48s; font-weight: 500; }
.list:hover .listText > h3 > a{font-weight: 700; }
.listText h5{float: left; font-size: 12px; color: #999; height: 18px; width: calc(100% - 54px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listText > h4{font-size: 15px; font-weight: 700; color: #212121; height: 24px; }
.listText .premium{background-color: #ffcd4a; border-radius: 2px; color: #fff; font-size: 10px; margin-left: 4px; padding: 1px 4px; letter-spacing: 0; display: inline-block; position: absolute; top: 5px; font-weight: 500; }
.listText > ul{height: 16px; }
.listText > p{font-size: 12px; }
.platformList{margin-bottom: 4px; height: 16px; }
.platformList:after{content: ''; display: block; clear: both; }
.platformList > li{font-size: 11px; color: #999; float: left; margin-right: 4px; }

#sentinel{position: absolute; bottom: 120vh; display: block; width: 1px; height: 1px; z-index: 0; }

/* 브랜드 리스트 메인 */
.brandBox{max-width: 1280px; width: 100%; margin: 0 auto 20px; }
.productBrand{width: 100%; padding: 0 12px; }
.listBrand{width: 35%; margin-right: 2%; border-radius: 12px; border: 1px solid #ccc; overflow: hidden; float: left; }
.listBrand > a{width: 100%; height: 0; padding-bottom: 100%; position: relative; }
.listBrand > a > img{position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; left: 0; top: 0; }
.listBrand > a > div{position: absolute;width: 100%;padding-top: 20px;height: 64px;padding-left: 12px;bottom: 0;left: 0;font-size: 16px;color: #fff;font-weight: 700; background: linear-gradient( to bottom, rgba(20, 20, 20, 0) 5%, rgba(20, 20, 20, 0.2) 25%, rgba(20, 20, 20, 0.5) 50%, rgba(20, 20, 20, 0.7) 75%, rgba(20, 20, 20, 0.85) 100% ); }
.listBrand > ul{font-size: 0; padding: 4px; }
.listBrand > ul > li{display: inline-block; width: 32%; height: 0; padding-bottom: 32%; position: relative; }
.listBrand > ul > li:nth-child(2){margin: 0 2%; }
.listBrand > ul > li > a{width: 100%; height: 100%; display: block; overflow: hidden; position: absolute; left: 0; top: 0; }
.listBrand > ul > li > a > img{width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 6px; }
/* 브랜드 리스트 메인 */

/*  스켈레톤 UI적용  */
.skeletionElement {position: relative; background: var(--bg-color);}
.skeletionImg {width: 100%;height: 100%; position: absolute; left: 0; top: 0; z-index: 500; }
.skeletionText{position: absolute; z-index: 500; display: inline-block; width: 80px; height: inherit; }
.skeletionM{width: 120px; }
.skeletionL{width: 160px; }
/*.skeletionText:nth-of-type(1) {top: 0; width: 80px; height: 12px; }*/
/*.skeletionText:nth-of-type(1) {top: 0px; width: 120px; height: 20px; }
.skeletionText:nth-of-type(2) {top: 24px; width: 80px; height: 16px; }
.skeletionText:nth-of-type(3) {top: 50px;width: 100px; height: 20px; }*/
.skeletionElement .skeletionImg{background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);background-size: 200% 100%;background-position: 100% 0;animation: load 1s infinite;}
.skeletionElement .skeletionText {background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);border-radius: 12px; background-size: 200% 100%;background-position: 100% 0;animation: load 1s infinite;}
@keyframes load {
    100% {
        background-position: -100% 0;
    }
}

.addProduct {overflow: hidden; width: 100%; position: relative; }
.addProduct > ul{padding: 0; }
.list.swiper-slide{margin: 0; }

/*  브랜드 정보  */ 
.detailBrand{background-color: #f5f5f5; padding: 8px; border-radius: 12px; margin: 0 auto; }
.detailBrand > ul{margin-bottom: 4px; }
.detailBrand > ul > li{margin-right: 2px; }
.inforBrand{}
.inforBrand > div{white-space: normal; }
.inforBrand > div > h2{}
.inforBrand > div > h2 > a{color: #595959; font-size: 18px; font-weight: 700; white-space: normal; word-break: break-all; word-wrap: break-word; -webkit-hyphens: none;}
.inforBrand > div > h2 > a:hover{color: var(--main-color); }
.inforBrand > div > button{margin: 0 auto; text-align: center; font-size: 14px; color: #acacac; display: block; }
.inforBrand > div > button > img{width: 20px; display: inline-block; vertical-align: middle; }
.inforBrand > div > ul{margin: 8px auto 12px; }
.inforBrand > div > ul > li{margin-right: 2px; }
.inforBrand > ul{font-size: 0; }
.inforBrand > ul > li{display: inline-block; vertical-align: middle; white-space: normal; }
.inforBrand > ul > li:first-child{width: 92px; }
.inforBrand > ul > li:last-child{width: calc(100% - 92px); }
/*.inforBrand > ul > li > h6{height: 24px; line-height: 24px; font-size: 14px; color: #797979; display: inline-block; }*/
.inforBrand > ul > li > h6{height: 24px; line-height: 22px; font-size: 12px; color: #797979; display: block; border: 1px solid #ccc; border-radius: 20px; width: 84px; text-align: center; margin-bottom: 4px; }
.inforBrand > ul > li > div{width: 100%; height: 24px; line-height: 23px; display: block; vertical-align: middle; font-size: 14px; color: #212121; margin-bottom: 4px; /*background-image: url('/images/icon_grade.svg'); background-position: left top; background-repeat: no-repeat; overflow: hidden; background-size: 88px 40px;*/ }
.inforBrand > ul > li > div.noData{display: table-cell; height: 72px; vertical-align: baseline; line-height: 1.45; }

.inforBrand > ul > li > div > img{width: 18px; margin-right: -2px; margin-top: -4px; vertical-align: middle; }
.inforBrand > ul > li > div > span{height: 20px; display: block; background-repeat: no-repeat; left: 0; top: 0; width: 50%; /*background-image: url('/images/icon_grade.svg'); background-position: left bottom; background-size: 88px 40px; */line-height: 0; vertical-align: top; }
/*  브랜드 정보  */

.productPopup{width: 100%; position: fixed; top: 0; left: 0; height: 100%; z-index: 4000; background-color: #fff; display: none; overflow:hidden; overflow-y: auto; }
.productPopup > div{width: 100%; }
.xmlTop{background-color: rgba(0, 0, 0, .1);border: 0;border-radius: 50%;bottom: 124px;display: none;height: 42px;padding: 0;position: fixed;right: 18px;text-align: center;width: 42px;z-index: 2500; transition: none; }

@media screen  and (hover: none) {
  /* 터치가능한 디바이스(스마트폰, 터치스크린) */
    .xmlTop{right: 8px; width: 44px; height: 44px; bottom: 114px; }
}
@media all and (max-width: 479px){
    .listUp > ul > li:nth-of-type(2n){margin-right: 0; }
    .listUp > ul > li:nth-of-type(2n+1){clear: both; }
    .column2:nth-of-type(2n+1){clear: both; }
    .column3:nth-of-type(3n+1){clear: both; }
}
@media all and (min-width: 480px){
    .listUp > ul > li{width: calc(33.333333% - 10.666666px); }
    
    .optionLine{padding: 0 8px; }
    .listFilter > p{padding-right: 8px; }
    .listDom{width: 98%; }
    .list{width: 32.533333%;margin: 0 0.4% 28px; }
    .listImg > h6{width: 32px; height: 32px; line-height: 32px; }
    .listImg > ul > li{width: 36px;height: 36px; }
    .listText > h3 > a{font-size: 13px; }
    .listText > h4{font-size: 16px;}
    .platformList > li{font-size: 12px; }
    
    .productOption > li > p{float: left; width: auto; }
    .productOption > li > div{float: right; }
    .productOption > li > div > h5{width: 120px; }
}

@media all and (min-width:480px) and (max-width: 767px){
    .listUp > ul > li:nth-of-type(3n){margin-right: 0; }
    .listUp > ul > li:nth-of-type(3n+1){clear: both; }
    .list:nth-of-type(3n+1){clear: both; }
}
@media all and (min-width: 610px){
    .filterSearchBtn{width: calc(100% - 40px); }
}

@media all and (max-width: 767px){
    .brandCategory{text-align: center; }
    .productDetail .detailBrand{width: calc(100% - 16px); }
    .detailBrand{width: 200px; }
    .brandInfor{padding-top: 40px; }
    .inforBrand{font-size: 0; }
    .inforBrand::after{content: ''; display: block; clear: both; }
    .inforBrand > *{display: inline-block; vertical-align: middle; }
    .inforBrand > div{width: 120px; }
    .inforBrand > div > h2{text-align: center; }
    .inforBrand > div > h2 > a{}
    .inforBrand > div > button{margin: 0 auto; text-align: center; font-size: 14px; color: #acacac; display: block; }
    .inforBrand > div > button > img{width: 20px; display: inline-block; vertical-align: middle; }
    .inforBrand > ul{padding-left: 8px; }
    .productDetail .inforBrand > ul{width: calc(100% - 120px); border-left: 1px solid #ccc; }
    .inforBrand > ul > li{}
    .inforBrand > ul > li > h6{width: 68px; }
    .inforBrand > ul > li > div{}
    .productOption > li > div > h5 > p{vertical-align: middle; }
    
}
@media all and (min-width: 768px){
    
    .listTitle .requestWriteBtn{margin-top: -20px; }
    .fyiTitle{font-size: 13px; text-align: center; padding: 0; margin: 8px auto 20px; }
    .listSection{min-height: 860px; }
    .filterT > button > img{width: 28px; }
    /*  기본 리스트 .list */
    .listDom{width: 100%; }
    .list > li{padding: 12px 0; display: table; width: 100%; }
    .list > li > *{display: table-cell; vertical-align: middle; }
    
    .categoryM > ul{padding: 8px; }
    
    .productList{padding-top: 60px; }
    .brandList{float: right; width: calc(100% - 220px); }
    .listFilter{width: 100%; padding: 0 4px; }
    .optionLine{float: left; width: auto; }
    .listFilter > p{float: right; height: 32px; margin-top: 0; display: grid; align-items: flex-end; padding-right: 4px; }
    .listTitle{width: 98%; margin: 0 auto 24px; }
    .listTitle > h4{margin-bottom: 32px; }
    
    /*  브랜드 리스트  */
    .brandInfor{width: 200px; float: left; margin-top: -14px; }
    .brandInfor > h3{}
    .brandInfor > h3 label{}
    .brandInfor > h3 label > img{}
    .brandInfor > form{width: 100%; }
    .brandInfor > form input{}
    .brandInfor > form button{}
    .brandInfor > form button img{}
    .brandCategory{}
    .brandCategory a{font-size: 16px; display: inline-block; }
    .brandCategory > a{text-align: left; margin: 4px 0; color: #797979; }
    .brandCategory > a:hover{color: #212121; font-weight: bold; }
    .brandCategory > div{border-top: 1px solid #dfdfdf; padding-top: 12px; width: 100%; margin: 12px 0; }
    .brandCategory > div > a{display: block; width: 100%; font-size: 16px; color: #797979; margin: 0 auto; font-weight: normal; }
    .brandCategory > div > a:hover{color: #212121; font-weight: bold; }
    .brandCategory > div > ul{display: block; width: 100%; }
    .brandCategory > div > ul > li{display: block; padding-left: 16px; text-align: left; height: auto; margin: 12px 0; }
    .brandCategory > div > ul > li > a{font-size: 15px; height: 100%; color: #333; }
    .brandCategory li.on{border-bottom: 0; }
    .brandCategory li.on > a{font-weight: bold; color: #212121; }
    
    .listUp > ul > li{float: left; width: calc(25% - 12px); margin-right: 16px; }
    .listText > h3{height: 16px; }
    .productTop{width: 35%; /*max-width: 360px; */align-self: flex-start; }
    .productTop > .imgBox{margin-bottom: 0; }
    .productOption{margin-bottom: 0; width: 48%; /*max-width: 460px;*/ position: relative; padding-right: 8px; }
    .productOption:after{content: ''; display: block; position: absolute; width: 1px; height: 100%; display: block; background-color: #e5e5e5; right: 0; top: 0; }
    .productOption > li{border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
    
    .list{width: 24.6%;margin: 0 .2% 28px; }
    .listText > h3 > a{font-size: 14px; }
    .listText h5{font-size: 13px; font-weight: normal; }
    .listText > h4{font-size: 18px; }
    .platformList > li{font-size: 12px; }
    
    .listBrand{width: 17%; }
    .listBrand > div > div > a{font-size: 16px; }
    .addProduct {margin-bottom: 12px; }
    
    .detailBrand{font-size: 0; }
    .brandProductBox{width: calc(100% - 188px); display: inline-block; vertical-align: middle; }
    .inforBrand{width: 180px; display: inline-block; vertical-align: middle; margin-right: 8px; border-radius: 8px; /*border: 1px solid #ccc; */padding: 4px; padding-right: 0; }
    .inforBrand > div{text-align: center; }
    .inforBrand > div > h2{text-align: center; display: inline-block; vertical-align: middle; margin-right: 4px; }
    .inforBrand > div > h2 > a{word-break: break-all; }
    .inforBrand > div > button{display: inline-block; margin: 0 auto; text-align: center; font-size: 14px; color: #acacac; vertical-align: middle; }
    .inforBrand > div > button > img{width: 20px; display: block; }
    .inforBrand > ul > li:first-child{}
    .inforBrand > ul > li:last-child{}
    .inforBrand > ul > li > h6{}
    .inforBrand > ul > li > div{}
    .inforBrand > ul > li > div > img{width: 22px; margin-right: -4px; }
    
    .xmlTop{bottom: 128px; right: 20px; }
}
@media all and (min-width:768px) and (max-width: 1279px){
    .listUp > ul > li:nth-of-type(4n){margin-right: 0; }
    .listUp > ul > li:nth-of-type(4n+1){clear: both; }
    .list:nth-of-type(4n+1){clear: both; }
}

@media all and (min-width: 1280px){
    .listUp > ul > li{float: left; width: calc(20% - 10px); margin-right: 12px; }
    .listUp > ul > li:nth-of-type(5n){margin-right: 0; }
    .listUp > ul > li:nth-of-type(5n+1){clear: both; }
    
    .list{width: 19.6%; }
    .list:nth-of-type(5n+1){clear: both; }
    .productOption > li > p{width: auto; float: left; }
    .productOption > li > div{float: right; }
    .productOption > li > div > h5{font-size: 15px; width: 140px; }
    .addProduct {margin-bottom: 20px; }
}