@charset "utf-8";
/**************************************************

	SUPERBOARD :: PRODUCT SKIN :: basic

**************************************************/

#sb-search { display: none;}

/* list */
.prdt-tab1{display: flex;justify-content: center;flex-wrap: wrap;margin-bottom: 40px;}
.prdt-tab1 li{}
.prdt-tab1 li a{position: relative;display: block;min-width: 150px;padding: 0 8px; height: 46px; align-content: center;font-size: 18px;text-decoration: none;text-align: center;color: #333;border-radius: 99px;}
.prdt-tab1 li a:before{content: '';display: block;position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1px;height: 15px;background: #ddd;}
/* .prdt-tab1 li.active{border-color: #444c62;} */
.prdt-tab1 li:first-child a:before { display: none;}
.prdt-tab1 li.active a{background:var(--col-red2);color: #fff; font-weight: bold;}
.prdt-tab1 li.active a:before {display: none;}
.prdt-tab1 li.active + li a:before {display: none;}

.prdt-tab2{background: #f7f7f7;margin-bottom: 40px;text-align: center;padding: 30px 20px;}
.prdt-tab2 li{display: inline-block;margin: 5px 10px;}
.prdt-tab2 li a{font-size: 16px;color: #000;text-decoration: none;}
.prdt-tab2 li.active a{text-decoration: underline;}

.prdt-list{margin: -15px;}
.prdt-list li{position: relative;display: inline-block;margin: 15px;width: calc((100%/3) - 30px);vertical-align: top;border-radius: 16px;}
.prdt-list li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;background-color: rgba(68,56,51,0.7);border-radius: 16px;opacity: 0;transition: all .3s;text-align: center; text-decoration: none; align-content: center;}
.prdt-list li .link p { display: block; color: #fff; font-size: 34px; font-weight: bold; text-align: center;  }
.prdt-list li .link i { display: inline-block; width: 90px; aspect-ratio: 1/1; margin-top: 15px; background-color: #fff; color: var(--col-red2); font-size: 30px; text-align: center; align-content: center; border-radius: 50%;}
.prdt-list li .tmb{position: relative;padding-bottom: 89.6%;background-position: center center;background-repeat: no-repeat;background-size: cover !important;border-radius: 16px; overflow: hidden;}
/* .prdt-list li .tmb:before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,0.1);box-sizing: border-box;transition: all 0.1s;border-radius: 16px; overflow: hidden;} */
.prdt-list li .info{padding: 25px 0 30px;}
.prdt-list li .info > span{display: block;text-align: center;}
.prdt-list li .info .tit{font-size: 26px;color: #222222;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: bold;}
.prdt-list li .info .tit .ico_spicy { display: inline-block; width: 28px; height: 22px; margin-left: 5px; background: url(/images/sub/ico_spicy.png) no-repeat 50% / contain; }
.prdt-list li .info .txt{font-size: 14px;color: #888888;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 5px;display: none;}
.prdt-list li .info .badge_box { display: flex; justify-content: center; margin-top: 25px;}
.prdt-list li .info .badge_box .badge { display: inline-block; padding: 10px 15px; border-radius: 99px; font-size: 17px; font-weight: 500; text-align: center;}
.prdt-list li .info .badge_box .badge + .badge { margin-left: 5px;}
.prdt-list li .info .badge_box .badge i { display: inline-block; width: 17px; height: 15px; background-position: 50%; background-repeat: no-repeat; background-size: contain; margin-right: 5px; vertical-align: middle; }
.prdt-list li .info .badge_box .badge.hall { color: #63483d; background-color: rgba(99,72,61,0.1);}
.prdt-list li .info .badge_box .badge.hall i { background-image: url(/images/sub/ico_badge_hall.png)}
.prdt-list li .info .badge_box .badge.delivery { color: #ad9442; background-color: rgba(210,184,102,0.2);}
.prdt-list li .info .badge_box .badge.delivery i { background-image: url(/images/sub/ico_badge_delivery.png)}
.prdt-list li .info .badge_box .badge.takout { color: #536f38; background-color: rgba(83,111,56,0.15);}
.prdt-list li .info .badge_box .badge.takout i { background-image: url(/images/sub/ico_badge_takout.png)}

.prdt-list li:hover .link { opacity: 1; }

.prdt-no-data{margin: 50px 0;text-align: center;font-size: 14px;color: #999;background: #f7f7f7;padding: 40px 0;font-style: italic;}

/* view */
.prdt-view{zoom: 1;padding-bottom: 80px;}
.prdt-view:after{display: block;content: '';clear: both;}
.prdt-view > *{float: left;box-sizing: border-box;}
.prdt-view dt{padding-right: 70px;width: 40%;}
.prdt-view dt .bigimg{position: relative;text-align: center;}
.prdt-view dt .bigimg img{max-width: 100%;max-height:700px;height: auto;display: block;margin: 0 auto;}
.prdt-view dt .bigimg .no-data{text-align: center;line-height: 350px;background: #f7f7f7;font-size: 16px;letter-spacing: -1px;color: #999;}
.prdt-view dt .tmb-list{position: relative;margin-top: 15px;}
.prdt-view dt .tmb-list .slick-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 50px;background-color: rgba(0,0,0,0.5);border: 0;text-indent: -999em;z-index: 10;}
.prdt-view dt .tmb-list .slick-prev {left: 1%;}
.prdt-view dt .tmb-list .slick-next {right: 1%}
.prdt-view dt .tmb-list .slick-prev:before,
.prdt-view dt .tmb-list .slick-next:before {position: absolute;top: 0;left: 0;width: 100%;font-family: axicon;font-size: 22px;line-height: 50px;color: #fff;text-indent: 0;}
.prdt-view dt .tmb-list .slick-prev:before {content: '\e84f';}
.prdt-view dt .tmb-list .slick-next:before {content: '\e850';}
.prdt-view dt .tmb-list .item a{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
.prdt-view dt .tmb-list .item .text {font-size: 0;text-indent: -999em;}
.prdt-view dt .tmb-list .item .tmb{position: relative;padding-bottom: 100%;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.prdt-view dt .tmb-list .swiper-slide-thumb-active .tmb::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0px;border: 1px solid #000;}

.prdt-view dd{width: 60%;padding-top: 40px;}
.prdt-view dd .head{border-bottom: 1px solid #ddd;padding-bottom: 40px;margin-bottom: 45px;}
.prdt-view dd .head em{display: block;margin-bottom: 5px;font-style: normal;font-size: 17px;color: #505d7e;font-weight: 300;}
.prdt-view dd .head h4{display: block;font-size: 35px;line-height: 42px;color: #222222;letter-spacing: -1px;font-weight: bold;}
.prdt-view dd .txt{display: block;font-size: 16px;line-height: 26px;color: #888888;}
.prdt-view dd .down{margin: -3px;margin-top: 50px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.prdt-view dd .down a{flex-basis: 0;flex-grow: 1;display: inline-block;margin: 3px;background: var(--btn3-bg-color);border: 1px solid var(--btn3-border-color);line-height: 45px;padding: 0 20px;text-decoration: none;font-size: 15px;color: var(--btn3-txt-color);min-width: 120px;text-align: center;}
.prdt-view dd .down a:before{content: '\e83e';display: inline-block;margin-right: 5px;font-family: axicon;font-size: 16px;vertical-align: middle;}

.prdt-view dd .shopOptWrap{margin-top: 30px;position: relative;border: 1px solid #ccc;padding: 30px;border-radius: 4px;box-shadow: 0 2px 0 rgba(0,0,0,0.03);}
.prdt-view dd .shopOptWrap .priceWrap{position: relative;}
.prdt-view dd .shopOptWrap .priceWrap .count{position: relative;padding: 0 45px;width: 160px;box-sizing: border-box;}
.prdt-view dd .shopOptWrap .priceWrap .count .inp{border: 1px solid #ddd;height: 45px;background: none;text-align: center;width: 70px;}
.prdt-view dd .shopOptWrap .priceWrap .count button{position: absolute;top: 0;border: 1px solid #ddd;box-sizing: border-box;height: 45px;width: 45px;text-align: center;background: none;font-size: 20px;color: #000;line-height: 45px;cursor: pointer;}
.prdt-view dd .shopOptWrap .priceWrap .count .minus{left: 0;border-right: none;}
.prdt-view dd .shopOptWrap .priceWrap .count .plus{right: 0;border-left: none;}
.prdt-view dd .shopOptWrap .priceWrap .total_price{position: absolute;top: 0;right: 0;line-height: 45px;font-size: 20px;color: #333;}
.prdt-view dd .shopOptWrap .shopBtnWrap{margin-top: 20px;border-top: 1px solid #eee;margin-top: 15px;padding-top: 15px;text-align: center;display: flex;justify-content: space-between;flex-wrap: wrap;}
.prdt-view dd .shopOptWrap .shopBtnWrap > *{width: calc(50% - 2px);border-radius: 4px;}

.prdt-tab{margin-bottom: 40px;border-bottom: 1px solid #000;display: flex;justify-content: space-between;flex-wrap: wrap;}
.prdt-tab li{display: inline-block;vertical-align: top;flex-basis: 0;flex-grow: 1;}
.prdt-tab li a{display: block;font-size: 18px;color: #666;display: block;line-height: 60px;text-decoration: none;text-align: center;}
.prdt-tab li.active{margin-bottom: -1px;}
.prdt-tab li.active a{border: 1px solid #000;border-bottom: none;background: #fff;color: #000;}

.prdt-tabCont{margin-bottom: 80px;min-height: 200px;}
.prdt-txtbox img{max-width: 100%;height: auto;}