@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: 15px;line-height: 45px;text-decoration: none;color: #000;}
.prdt-tab1 li.active{border-color: #313f64;}
.prdt-tab1 li.active a{background: #313f64;color: #fff;}

.prdt-tab2{border-top: 2px solid #313f64;background: #f7f7f7;border-bottom: 1px solid #ddd;margin-bottom: 40px;text-align: center;padding: 20px 0;}
.prdt-tab2 li{display: inline-block;margin: 5px 10px;}
.prdt-tab2 li a{font-size: 14px;color: #000;}

.prdt-list{margin: -1%;}
.prdt-list li{position: relative;display: inline-block;margin: 1%;width: 23%;vertical-align: top;}
.prdt-list li: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;z-index: 2;}
.prdt-list li:hover:before{border: 2px solid #313f64;}
.prdt-list li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
.prdt-list li .tmb{position: relative;padding-bottom: 100%;background-position: center center;background-repeat: no-repeat;background-size: contain !important;}
.prdt-list li .info{padding: 20px 10px;background: #f7f7f7;}
.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;}

.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: 50px;}
.prdt-view:after{display: block;content: '';clear: both;}
.prdt-view > *{float: left;box-sizing: border-box;}
.prdt-view dt{padding-right: 70px;width: 45%;}
.prdt-view dt .bigimg{position: relative;}
.prdt-view dt .bigimg img{max-width: 100%;max-height:700px;height: auto;}
.prdt-view dt .tmb-list{margin: -0.5%;margin-top: 20px;}
.prdt-view dt .tmb-list li{position: relative;display: inline-block;margin: 0.5%;width: 24%;}
.prdt-view dt .tmb-list li a{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
.prdt-view dt .tmb-list li .tmb{position: relative;padding-bottom: 100%;background-size: contain;background-repeat: no-repeat;background-position: center center;}

.prdt-view dd{padding-top: 10px;width: 55%;}
.prdt-view dd .head{border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 25px;}
.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: normal;}
.prdt-view dd .txt{display: block;font-size: 16px;line-height: 26px;color: #888888;}
.prdt-view dd .txt h5{font-size: 20px;color: #444444;letter-spacing: -1px;font-weight: 300;margin-bottom: 5px;}
.prdt-view dd .down{margin-top: 40px;}
.prdt-view dd .down a{display: inline-block;margin-right: 2px;background: #8b8b8b;line-height: 43px;padding: 0 20px;text-decoration: none;font-size: 16px;color: #fff;box-sizing: border-box;min-width: 180px;border-radius: 4px;text-align: center;}
.prdt-view dd .down a.blue{background: #0052a5;}

.prdt-tab{margin-bottom: 30px;border-bottom: 2px solid #666666;}
.prdt-tab li{position: relative;display: inline-block;vertical-align: top;margin-right: -1px;border: 1px solid #ddd;border-bottom: none;}
.prdt-tab li a{display: block;line-height: 45px;height: 45px;text-align: center;width: 210px;font-size: 16px;color: #999;letter-spacing: -1px;text-decoration: none;box-sizing: border-box;}
.prdt-tab li.active{border: 2px solid #666666;border-bottom: none;background: #fff;height: 47px;margin-bottom: -2px;z-index: 2;}
.prdt-tab li.active a{font-weight: 300;color: #333;}
.prdt-tab li.active a:after{content: '';display: inline-block;background: url(/superboard/images/sb_slt_spr.jpg) no-repeat center center;margin-left: 10px;width: 15px;height: 15px;vertical-align: middle;}

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

@media screen and (max-width: 1200px) {

    /* list */
    .prdt-tab1{margin-bottom: 20px;}
    .prdt-tab1 li{width: 33.33%;}
    .prdt-tab1 li a{font-size: 13px;line-height: 35px;}

    .prdt-tab2{margin-bottom: 20px;padding: 15px 0;}
    .prdt-tab2 li{margin: 5px 8px;}
    .prdt-tab2 li a{font-size: 13px;}

    .prdt-list{margin: -1%;margin-top: 15px;}
    .prdt-list li{margin: 1%;width: 48%;}
    .prdt-list li .info{padding: 10px 0;}
    .prdt-list li .info .tit{font-size: 14px;}
    .prdt-list li .info .txt{font-size: 13px;}

    .prdt-no-data{margin: 50px 0;font-size: 13px;padding: 20px 0;}

    /* view */
    .prdt-view{padding-bottom: 40px;}
    .prdt-view > *{float: none;}
    .prdt-view dt{padding-right: 0;width: auto;}
    .prdt-view dt .bigimg{text-align: center;}
    .prdt-view dt .bigimg img{max-height:500px;}
    .prdt-view dt .tmb-list{margin: -0.5%;margin-top: 10px;}

    .prdt-view dd{margin-top: 20px;padding-top: 10px;width: auto;}
    .prdt-view dd .head em{font-size: 13px;}
    .prdt-view dd .head h4{font-size: 16px;line-height: 20px;font-weight: 300;}
    .prdt-view dd .txt{font-size: 13px;line-height: 20px;}
    .prdt-view dd .txt h4{font-size: 14px;}
    .prdt-view dd .down{margin-top: 20px;text-align: center;}
    .prdt-view dd .down a{font-size: 13px;min-width: 30%;}

    .prdt-tab{margin-bottom: 20px;}
    .prdt-tab li{width: 33.33%;box-sizing: border-box;}
    .prdt-tab li a{line-height: 35px;height: 35px;width: auto;font-size: 13px;}
    .prdt-tab li.active{height: 38px;}
    .prdt-tab li.active a:after{margin-left: 5px;width: 10px;height: 10px;background-size: contain;}

    .prdt-tabCont{margin-bottom: 40px;}
    .prdt-txtbox{font-size: 13px;line-height: 19px;}

}