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

	SUPERBOARD :: PRODUCT SKIN :: basic

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


.prdt-tit {margin-bottom: 25px}
.prdt-tit h5 {font-weight: 500; font-size: 32px; line-height: 40px; color: #333; letter-spacing: -1px; text-align: center}

/* list */
.prdt-tab1{display: none; 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: -20px -10px}
.prdt-list li{position: relative;display: inline-block;width:calc(25% - 20px); margin: 20px 10px;vertical-align: top;}
.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: cover !important;}
.prdt-list li:hover .tmb {box-shadow: -1px 2px 10px 4px rgba(0,0,0,0.1)}
.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:hover .tmb:before{border: 2px solid #2d308f;}
.prdt-list li .info{margin-top: 25px}
.prdt-list li .info > span{display: block}
.prdt-list li .info .tit{font-family: exo2, noto; font-weight: 700; font-size: 26px; line-height: 34px; color: #333333;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.prdt-list li:hover .info .tit {color: #2d308f}
.prdt-list li .info .txt{min-height: 48px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; margin-top: 10px; font-size: 18px; line-height: 24px; color: #666; letter-spacing: -1px}

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

/* view */
.title {padding-bottom: 15px; margin-bottom: 30px; border-bottom: 1px solid #ddd}
.title h5 {font-weight: 500; font-size: 34px; line-height: 42px; color: #333; letter-spacing: -1px}

.prdt-view{display: flex; flex-flow: row wrap; align-items: center; zoom: 1;padding-bottom: 50px;}
.prdt-view:after{display: block;content: '';clear: both;}
.prdt-view > *{float: left;box-sizing: border-box;}
.prdt-view > dt{width: calc(50% + 10px);}
.prdt-view > dt .bigimg{position: relative;}
.prdt-view > dt .bigimg .thumb {padding-bottom: 88%; background-size: cover; background-repeat: no-repeat; background-position: center}
.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: cover;background-repeat: no-repeat;background-position: center center;}

.prdt-view > dd{width: calc(50% - 10px); padding-left: 60px; box-sizing: border-box}
.prdt-view > dd .mid {}
.prdt-view > dd .head{}
.prdt-view > dd .head em{display: block;margin-bottom: 15px;font-style: normal; font-weight: 700; font-size: 20px;color: #2d308f}
.prdt-view > dd .head h4{display: block;font-family: exo2,noto; font-weight: 700; font-size: 36px;line-height: 42px;color: #333333}
.prdt-view > dd .txt{display: block; margin: 10px 0 20px; font-size: 18px; line-height: 26px;color: #666666;}
.prdt-view > dd .info {}
.prdt-view > dd .info dl {}
.prdt-view > dd .info dt {padding-bottom: 15px; border-bottom: 2px solid #2d308f; font-weight: 700; font-size: 20px; line-height: 30px; color: #555; letter-spacing: -1px}
.prdt-view > dd .info dd {position: relative; padding-left: 15px; font-size: 18px; line-height: 50px; color: #555; letter-spacing: -1px; border-bottom: 1px solid #ddd}
.prdt-view > dd .info dd:before {content: ''; position: absolute; top: 24px; left: 0; width: 3px; height: 3px; background-color: #888; border-radius: 50%}
.prdt-view > dd .btns {display: flex; margin: 0 -5px; margin-top: 60px}
.prdt-view > dd .btns a {display: inline-block; width: calc(50% - 10px); margin: 0 5px; line-height: 70px; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none}
.prdt-view > dd .btns .type1 {background-color: #2d308f; color :#fff}
.prdt-view > dd .btns .type2 {background-color: #eeeeee; color: #555}
.prdt-view > dd .down{margin-top: 40px;}
.prdt-view > dd .down a{display: inline-block;margin-right: 2px;background: #313f64;line-height: 35px;padding: 0 20px;text-decoration: none;font-size: 14px;color: #fff;}

.prdt-tab{margin-bottom: 30px;border-bottom: 2px solid #2d308f;}
.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: 60px;height: 60px;text-align: center;width: 200px;font-size: 20px;color: #999;letter-spacing: -1px;text-decoration: none;box-sizing: border-box;}
.prdt-tab li.active{border: 2px solid #2d308f;border-bottom: none;background: #fff;height: 61px;margin-bottom: -2px;z-index: 2;}
.prdt-tab li.active a{font-weight: 700;color: #2d308f;}
/* .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: 1300px) {


    .prdt-tit {margin-bottom: 20px}
    .prdt-tit h5 {font-size: 24px; line-height: 34px}

    /* 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: -15px -10px}
    .prdt-list li{margin: 15px 10px; width: calc(100% / 3 - 20px)}
    .prdt-list li .info{margin-top: 15px}
    .prdt-list li .info .tit{font-size: 18px; line-height: 25px}
    .prdt-list li .info .txt{min-height: 44px; margin-top: 5px; font-size: 15px; line-height: 22px}

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

    /* view */

    

    .title {padding-bottom: 10px; margin-bottom: 20px}
    .title h5 {font-size: 24px; line-height: 32px}

    .prdt-view {padding-bottom: 30px}
    .prdt-view > * {float: none; width: 100% !important}
    .prdt-view > dd {padding-left: 0; margin-top: 40px}
    .prdt-view > dd .head em {margin-bottom: 5px; font-size: 16px; line-height: 24px}
    .prdt-view > dd .head h4 {font-size: 22px; line-height: 30px}
    .prdt-view > dd .txt {margin: 10px 0 15px; font-size: 16px; line-height: 24px}
    .prdt-view > dd .info dt {padding-bottom: 10px; font-size: 16px; line-height: 24px}
    .prdt-view > dd .info dd {padding-left: 10px; font-size: 15px; line-height: 40px}
    .prdt-view > dd .info dd:before {top: 18px; width: 2px; height: 2px}
    .prdt-view > dd .btns {margin-top: 30px}
    .prdt-view > dd .btns a {line-height: 50px; font-size: 16px}


    .prdt-tab li.active {height: 51px}
    .prdt-tab li a {width: 150px; height: 50px; line-height: 50px; font-size: 17px}


}

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

    .prdt-tit h5 {font-size: 20px; line-height: 30px}

    .prdt-list {margin: -10px -5px}
    .prdt-list li {width: calc(50% - 10px); margin: 10px 5px}
    .prdt-list li .info .tit {font-size: 16px; line-height: 22px}
    .prdt-list li .info .txt {min-height: 40px; font-size: 13px; line-height: 20px}


    .title {margin-bottom: 15px}
    .title h5 {font-size: 20px; line-height: 28px}

    .prdt-view > dd {margin-top: 25px}
    .prdt-view > dd .head em {font-size: 13px; line-height: 20px}
    .prdt-view > dd .head h4 {font-size: 18px; line-height: 26px}
    .prdt-view > dd .txt {font-size: 14px; line-height: 24px}
    .prdt-view > dd .info dd {font-size: 14px}
    .prdt-view > dd .btns {margin-top: 20px}
    .prdt-view > dd .btns a {line-height: 40px; font-size: 14px}

    .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;}

    

}