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

	SUPERBOARD :: PRODUCT SKIN :: basic

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

/* #sb-search {display: none} */


/* 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-sort {padding-bottom: 15px; margin-bottom: 40px; text-align: right; border-bottom: 1px solid #ddd}
.prdt-sort ul {display: inline-block}
.prdt-sort ul li {position: relative; display: inline-block; vertical-align: top; padding-left: 20px; margin-left: 20px}
.prdt-sort ul li:before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 10px; background: #dddddd}
.prdt-sort ul li:first-child:before {display: none}
.prdt-sort ul li a {font-size: 16px; line-height: 30px; color: #555; letter-spacing: -1px}
.prdt-sort ul li.active a {}

.prdt-list{margin: -20px -10px}
.prdt-list li{position: relative;display: inline-block;vertical-align: top; width: calc(25% - 20px); margin: 10px; padding: 30px; padding-bottom: 0; border: 1px solid #ddd; box-sizing: border-box}
.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: 128%;background-position: center center;background-repeat: no-repeat;background-size: cover !important;}
.prdt-list li .tit{display: block; font-weight: 700; font-size: 20px; line-height: 65px; color: #333333;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; text-align: center}
/* .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: 4px solid #313f64;} */
.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;}

.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; width: 50%; box-sizing: border-box;}
.prdt-view dt{padding-right: 100px}
.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: -5px;margin-top: 20px; text-align: center}
.prdt-view dt .tmb-list li{position: relative;display: inline-block;width: calc(20% - 10px);margin: 5px}
.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 a.active:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #ff6c70; box-sizing: border-box}
.prdt-view dt .tmb-list li .tmb{position: relative;padding-bottom: 118%;background-size: cover;background-repeat: no-repeat;background-position: center center;}

.prdt-view dd{}
.prdt-view dd .head{padding-bottom: 20px}
.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: 38px;line-height: 46px;color: #333333;letter-spacing: -1px}
.prdt-view dd .profile {margin-bottom: 45px; padding: 20px 40px; background: #f7f7f7; border-top: 1px solid #333333}
.prdt-view dd .profile ul {}
.prdt-view dd .profile ul li {position: relative; padding: 5px 0; padding-left: 140px; font-size: 16px; line-height: 26px; color: #555555}
.prdt-view dd .profile ul li strong {position: absolute; top: 5px; left: 0; padding-left: 12px; font-weight: 500; color: #333333}
.prdt-view dd .profile ul li strong:before {content: ''; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background: #fe0404; border-radius: 50%}
.prdt-view dd .career {}
.prdt-view dd .career h5 {padding-bottom: 25px; border-bottom: 1px solid #ddd; font-size: 22px; line-height: 30px; color: #333333}
.prdt-view dd .career .list {}
.prdt-view dd .career .list dl {margin-top: 40px}
.prdt-view dd .career .list dl:first-child {margin-top: 25px}
.prdt-view dd .career .list dt {margin-bottom: 5px; font-weight: 700; font-size: 16px; line-height: 26px; color: #333333; letter-spacing: -0.5px}
.prdt-view dd .career .list dd {font-size: 16px; line-height: 26px; color: #555555;}


.prdt-view dd .txt{display: block;font-size: 16px;line-height: 26px;color: #888888;}
.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 #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: 1300px) {


    .prdt-sort {height: auto; padding-bottom: 10px; margin-bottom: 25px}
    .prdt-sort ul li {padding-left: 10px; margin-left: 10px}
    .prdt-sort ul li a {font-size: 14px; line-height: 24px}

    .prdt-list {margin: -15px -5px}
    .prdt-list li {width: calc(100% / 3 - 10px); margin: 15px 5px; padding: 20px; padding-bottom: 0}
    .prdt-list li .tit {font-size: 16px; line-height: 50px}

    .prdt-view > * {float: none; width: 100%}
    .prdt-view > dt {padding: 0 15%; text-align: center}
    .prdt-view > dt .tmb-list {margin-top: 10px}
    .prdt-view > dd {margin-top: 30px}
    .prdt-view > dd .head {padding-bottom: 15px}
    .prdt-view > dd .head h4 {font-size: 20px; line-height: 30px}
    .prdt-view > dd .profile {margin-bottom: 25px; padding: 15px 20px}
    .prdt-view > dd .profile ul li {padding: 0; padding-left: 100px; font-size: 14px; line-height: 28px}
    .prdt-view > dd .profile ul li strong {top: 0}
    .prdt-view > dd .profile ul li strong:before {top: 11px}
    .prdt-view > dd .career h5 {padding-bottom: 15px; font-size: 18px; line-height: 26px}
    .prdt-view dd .career .list dl {margin-top: 25px}
    .prdt-view dd .career .list dt {font-size: 14px; line-height: 22px}
    .prdt-view dd .career .list dd {font-size: 14px; line-height: 22px}

    .sb-btn.type9 {width: 130px; height: 40px; line-height: 40px; font-size: 14px}



}

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


    .prdt-sort {margin-bottom: 20px}
    .prdt-sort ul li {padding-left: 8px; margin-left: 8px}
    .prdt-sort ul li a {font-size: 13px; line-height: 20px}

    .prdt-list {margin: -10px -5px}
    .prdt-list li {width: calc(50% - 10px); margin: 10px 5px; padding: 10px; padding-bottom: 0}
    .prdt-list li .tit {font-size: 14px; line-height: 40px}

    .prdt-view > dt {padding: 0}
    .prdt-view dt {padding: 0}
    .prdt-view > dd {margin-top: 20px; padding: 0}
    .prdt-view > dd .head h4 {font-size: 18px; line-height: 26px}
    .prdt-view > dd .profile {margin-bottom: 20px; padding: 10px 15px}
    .prdt-view > dd .profile ul li {padding-left: 80px; font-size: 13px; line-height: 26px}
    .prdt-view > dd .career h5 {font-size: 17px; line-height: 24px}

}