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

	SUPERBOARD :: PRODUCT SKIN :: basic

**************************************************/
/* list */
.prdt-tab1{margin-bottom: 40px;}
.prdt-tab1 li{display: inline-block;width: 20%;border: 1px solid #ddd;margin: 0 -1px -1px 0;box-sizing: border-box;}
.prdt-tab1 li a{display: block;text-align: center;font-size: 18px;line-height: 50px;text-decoration: none;color: #222;font-weight: 500;}
.prdt-tab1 li.active{border-color: #4475ba;}
.prdt-tab1 li.active a{background: #4475ba;color: #fff;}

.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: -1%;}
.prdt-list li{position: relative;display: inline-block;margin: 1%;width: 23%;vertical-align: top;}
.prdt-list li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;text-indent: -999em;}
.prdt-list li .tmb{position: relative;padding-bottom: 100%;background-position: center center;background-repeat: no-repeat;background-size: cover !important;}
.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;}
.prdt-list li .info{padding: 20px 0;}
.prdt-list li .info > span{display: block;text-align: center;}
.prdt-list li .info .tit{font-size: 18px;color: #222222;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 300;}
.prdt-list li .info .txt{font-size: 14px;color: #888888;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 5px;}

.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{width: 40%;position: relative;border: 1px solid #ddd;padding: 80px 20px;}
.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: -0.5%;margin-top: 5px;}
.prdt-view dt .dots{position: absolute;bottom: 28px;left: 0;width: 100%;z-index: 81;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.prdt-view dt .dots span{margin: 2px;}
.prdt-view dt .dots span.swiper-pagination-bullet{display: block;width: 10px;height: 10px;border: 1px solid #ccc;background: #fff;text-indent: -999em;overflow: hidden;border-radius: 5px;transition: all 0.1s;box-sizing: border-box;opacity: 1;}
.prdt-view dt .dots span.swiper-pagination-bullet-active{background: var(--color);border-color: var(--color);}
.prdt-view dt .arrows > button {position: absolute;top: 50%;z-index: 44;border: none;background: none;}
.prdt-view dt .arrows > button.prev {left: 0;}
.prdt-view dt .arrows > button.prev img {transform: scaleX(-1);}
.prdt-view dt .arrows > button.next {right: 0;}
.prdt-view dt .tmb-list .item {position: relative;display: inline-block;margin: 0.5%;width: 24%;}
.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 dd{width: 60%;padding-top: 40px;padding-left: 70px;}
.prdt-view dd .head{border-bottom: 1px solid #ddd;padding-bottom: 40px;margin-bottom: 45px;}
.prdt-view dd .head em{display: block;margin-bottom: 15px;font-style: normal;font-size: 18px;color: var(--color);font-weight: 300;}
.prdt-view dd .head h4{display: block;font-size: 35px;line-height: 40px;color: #222222;letter-spacing: -1px;font-weight: 600;}
.prdt-view dd .txt{display: block;font-size: 20px;line-height: 32px;}
.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;}