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

	SUPERBOARD :: PRODUCT SKIN :: basic

**************************************************/
/* list */


#sb-search {display:none;}

.prdt-tab1{margin-bottom: 40px; display:none;}
.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: #444c62;}
.prdt-tab1 li.active a{background: #444c62;color: #fff;}

.prdt-tab2{background: #f7f7f7;margin-bottom: 40px;text-align: center;padding: 30px 20px; display:none;}
.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:-70px -20px 0;}
.prdt-list li{position: relative;display: inline-block; vertical-align: top; width:calc(33.333% - 40px); margin:70px 20px 0;}
.prdt-list li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 4;text-indent: -999em;}
.prdt-list li .tmb{position: relative;padding-bottom: 56.36%; width:100%; height:0;}
.prdt-list li .tmb img {position:absolute; top:0; left:0; width:100%; height:100%;}

.prdt-list li .tmb:before {opacity:0;z-index:2; transition:all 0.3s; position:absolute; content:''; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.5);}
.prdt-list li .tmb:after {opacity:0;z-index:3; transition:all 0.3s; content:'\f04b'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80px; height:80px; border-radius:50%; border:2px solid #fff; color:#fff; font-size:40px; text-align:center; line-height:76px; font-family: axicon;}
.prdt-list li:hover .tmb:before {opacity:1; }
.prdt-list li:hover .tmb:after {opacity:1; }

.prdt-list li .info{padding: 20px 0;}
.prdt-list li .info > span{display: block;}
.prdt-list li .info .tagbox {position:relative; margin:15px 0 0; padding-bottom:20px; border-bottom:1px solid #5e5d5d; margin-bottom:20px;}
.prdt-list li .info .tagbox span {display:inline-block; box-sizing:border-box; margin:6px 6px 0 0; padding:0 10px; line-height:24px; border-radius:5px; font-size:13px; font-weight:600; font-family: 'Montserrat';}
.prdt-list li .info .tagbox span.tag1 {border:1px solid #e13a24; color:#e13a24;}
.prdt-list li .info .tagbox span.tag2 {border:1px solid #e90f73; color:#e90f73;}
.prdt-list li .info .tagbox span.tag3 {border:1px solid #bf42ba; color:#bf42ba;}
.prdt-list li .info .tagbox span.tag4 {border:1px solid #516ce8; color:#516ce8;}
.prdt-list li .info .tagbox span.tag5 {border:1px solid #0083e9; color:#0083e9;}
.prdt-list li .info .tagbox span.tag6 {border:1px solid #008cc1; color:#008cc1;}

.prdt-list li .info .tit{font-size: 18px;color: #ddd;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;}
.prdt-list li .info .txt{font-size: 16px;color: #777;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 5px; font-weight:500;}

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

/* view */


.work_view {width:100%;}
.work_view .box {width:100%;  max-width:1000px; margin:0 auto;}
.work_view .iframe {position:relative; width:100%; height:0; padding-bottom:56.25%;}
.work_view .iframe iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.work_view .iframe video {position:absolute; top:0; left:0; width:100%; height:100%;}


.work_view .img {width:100%; position:relative;}

.work_view .img img {width:100%; max-width:100%; display:block;}

.work_view .prdt-tabCont {width:100%; margin:100px 0;}
.work_view .prdt-tabCont h4 {text-align:center; font-size:32px; color:#ddd; line-height:1.3em; font-weight:600;}
.work_view .prdt-txtbox {margin-top:50px; font-size:17px !important; line-height:32px !important; color:#777 !important; font-weight:300; text-align:center;}



.sb_btn {width:100%; text-align:center;}
.sb_btn .btn_1 {display:inline-block; vertical-align:top; font-size:14px; line-height:30px; color:#ddd; font-weight:normal; font-family: 'Montserrat'; margin-right:20px;}
.sb_btn .btn_1 i {margin-right:12px; font-size:20px; line-height:30px; vertical-align: bottom;}
.sb_btn .btn_2 {display:inline-block; vertical-align:top; text-align:center; line-height:30px; width:40px;}
.sb_btn .btn_2 img {vertical-align: middle;}
.sb_btn .btn_3 {display:inline-block; vertical-align:top; font-size:14px; line-height:30px; color:#ddd; font-weight:normal; font-family: 'Montserrat'; margin-left:20px;}
.sb_btn .btn_3 i {margin-left:12px; font-size:20px; line-height:30px; vertical-align: bottom;}




.imgbox {margin-top:60px; width:100%;}
.imgbox h4 {position:relative; text-align:center; font-size:18px; font-weight:700; font-family: 'Montserrat'; color:#ddd; padding-bottom:20px;}
.imgbox h4:after {position:absolute; content:''; width:40px; height:2px; bottom:0; left:50%; margin-left:-20px; background:#e13a24;}
.imgbox ul {margin:10px -15px 0;}
.imgbox ul li {display:inline-block; vertical-align:top; width:calc(50% - 30px); margin:30px 15px 0;}
.imgbox ul li img {display:block; width:100%;}


.infobox {margin-top:90px; width:100%;}
.infobox h5 {position:relative; text-align:center; font-size:18px; font-weight:700; font-family: 'Montserrat';  color:#ddd; padding-bottom:15px; width:100%; max-width:300px; margin:0 auto; border-bottom:1px solid #5e5d5d;}
.infobox .infobtn {position:relative; margin:35px auto 0; width:20px; height:20px; cursor:pointer;}
.infobox .infobtn:before, .infobox .infobtn:after { content: ""; display: block;  background-color: #e13a24; position: absolute;  top: 50%;  left: 0;  transition: 0.35s;  width: 100%;  height: 1px;}
.infobox .infobtn:before { transform: translatey(-50%);}
.infobox .infobtn:after { transform: translatey(-50%) rotate(90deg);}
.infobox .infobtn.active:before {  transform: translatey(-50%) rotate(-90deg);  opacity: 0;}
.infobox .infobtn.active:after {  transform: translatey(-50%) rotate(0); background:#ddd;}

.infobox .infotxt {text-align:center; margin:35px auto 45px; overflow:hidden; transition:all 0.3s;}
.infobox .infotxt.active {height:auto; transition:all 0.3s;}
.infobox .infotxt li {  margin-top:0; height:0; transition:all 0.3s; opacity:0;}
.infobox .infotxt li strong {display:block; text-align:center; font-size:18px; line-height:1.3em; font-weight:500; color:#ddd; padding-bottom:7px; font-family: 'Montserrat';}
.infobox .infotxt li p {font-size:16px; line-height:1.3em; color:#777; text-align:center; }



.infobox .infotxt.active li {margin-top:25px; height:auto;transition:all 0.3s; opacity:1;}





/*
.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: -0.5%;margin-top: 5px;}
.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 {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;}
.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;}
*/