@charset "UTF-8";

/* 케이블 리스트 */
.cable_list {width: calc(100% + 15px);}
.cable_list::after {content:""; display: block; clear:both;}
.cable_list a {display: block; float: left; width: calc(25% - 15px); margin: 0 15px 15px 0; border-radius: 10px; /*height: 285px;*/ overflow: hidden;}
.cable_list a:nth-child(3) span {width: 50%;}
.cable_list a:hover {box-shadow: 10px 10px 30px rgb(0 0 0 / 30%);}
.cable_list .c_list {/*height: 288px;*/ border-radius: 10px; position: relative; word-break: keep-all; width:100%; text-align:center; padding-bottom:20px}
.cable_list .c_list span {position: static; color: #121212; font-size: 1.7rem; line-height: 21px; width: 80%; word-break: normal;}
.cable_list .c_list span em {/*word-break: keep-all; word-wrap: break-word;padding-left:20px;*/ display:block}
.cable_list .c_list span br {display: none;}
.cable_list .c_list img {width:80%; display:block; margin:0 auto}

/*media query*/
@media screen and (max-width:1024px) {
    .cable_list {width: calc(100% + 20px);}
    .cable_list a {width: calc(50% - 20px); margin: 0 20px 20px 0;}
    .cable_list .c_list img {width: 100%; max-height:130px}
    .cable_list .c_list span {font-size: 1.7rem;}
}

@media screen and (max-width:767px) {
    .cable_list a, .cable_list .c_list {/*height: 155px;*/}
    .cable_list .c_list span {font-size: 1.4rem; left: 15px; bottom: 15px;}
}

@media screen and (max-width:600px) {
    .cable_list .c_list span {line-height: 18px; width: 80%; word-break: keep-all;}
    .cable_list a:nth-child(3) span {width: 80%;}
    .cable_list .c_list span br {display: block;}
    .cable_list .c_list span em {word-break: break-word;}
}

@media screen and (max-width:480px) {
    .cable_list {width: calc(100% + 10px);}
    .cable_list a {width: calc(50% - 10px); margin: 0 10px 10px 0;}
}

/* 제품 리스트 */
.product_list .top_tab ul li a {border-right: 0;}
.product_list .top_tab ul li a:hover {border:1px solid #333333; text-decoration: none;}
.product_list .top_tab ul li.on a {border:1px solid #333; color: #333; font-weight: 500;}
.product_list .top_tab ul li:last-child a:hover {border-right: 1px solid #333;}
.product_list .top_tab ul li:last-child a {border-right: 1px solid #ddd;}

.product_list .pro_list h3 {/*font-family: 'Montserrat', sans-serif;*/ font-size: 2rem; color: #333333; margin-bottom: 30px;}
.product_list .pro_list h3::before {content:""; display: inline-block; background: #333; width: 4px; height: 20px; margin-right: 10px; vertical-align: middle;}
.product_list .pro_list ul::after {content: ""; display: block; clear: both;}
.product_list .pro_list ul li {float: left; width: 23.5%; margin-right: 2%; margin-bottom: 2%; min-height: 400px;}
.product_list .pro_list ul li:nth-child(4n) {margin-right: 0;}
.product_list .pro_list ul li a {display: block;}
.product_list .pro_list ul li a span.thum {display: block; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; text-align: center;}
.product_list .pro_list ul li a span.thum img {max-width: 100%;}
.product_list .pro_list ul li a:hover {text-decoration: none;}
.product_list .pro_list ul li a:hover span.thum {border:2px solid #0070c2;}
.product_list .pro_list ul li a span.detail {display: block; margin-top: 2rem; text-align: center; min-height: 71px;}
.product_list .pro_list ul li a span.detail h4 {font-size: 1.8rem; font-weight: 600;}
.product_list .pro_list ul li a span.detail p {font-size: 1.5rem; color: #555555; width: 70%; margin: 0 auto; word-break: break-word; line-height: 19px; margin-top: 5px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;}

/*media query*/
@media screen and (max-width:1024px) {
    .product_list .top_tab ul li a {font-size: 1.4rem;}
    .product_list .pro_list h3, .product_list .pro_list ul li a span.detail h4 {font-size: 1.6rem; margin-bottom: 20px;}
}

@media screen and (max-width:767px) {
    .product_list .top_tab ul {margin-bottom: 1rem;}
    .product_list .top_tab ul li {margin-bottom: 3px;}
    .product_list .top_tab ul li:nth-child(3) a {border-right: 1px solid #ddd;}
    .product_list .top_tab ul li a {height: 48px;}

    .product_list .pro_list ul li {width: 49%;}
    .product_list .pro_list ul li:nth-child(2n) {margin-right: 0;}
    .product_list .pro_list ul li a span.detail {margin-top: 1rem;}
    .product_list .pro_list ul li a span.detail h4 {font-size: 1.6rem; margin-bottom: 1rem;}
    .product_list .pro_list ul li a span.detail p {font-size: 1.3rem; line-height: 16px;}
}

@media screen and (max-width:480px) {
    .product_list .pro_list ul li a span.detail h4 {margin-bottom: 0;}
    .product_list .top_tab ul li a {font-size: 1.3rem;}
}

/* view페이지 */
.view_cont::after {content: ""; display: block; clear:both;}
.view_cont .left_thum {float: left; width: 50%;}
.view_cont .left_thum .big_thum span {display: block; width: 400px; height:400px; overflow: hidden;}
.view_cont .pro_detail {float: right; width: 50%; padding-top: 20px;}
.view_cont .pro_detail h2 {font-size: 3.3rem; color: #121212; padding-bottom: 3rem; border-bottom: 1px solid #dddddd; margin-bottom: 3rem;}
.view_cont .pro_detail .category select {background: url(/images/select_icon.png)right 30px center no-repeat; width: 60%; height: 60px; border: 1px solid #0070c2; color: #0070c2; padding-left: 2.5rem; font-size: 1.6rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; cursor: pointer; margin-right: 6px;}
.view_cont .pro_detail .category input {width: 20%; height: 60px; border: 1px solid #0070c2; background: none; margin-right: 6px;}
.view_cont .pro_detail .category button {background: #0070c2; color:#fff; height: 60px; line-height: 60px; width: 16.9%;}
.view_cont .pro_detail .option_cont {background: #f8f8f8; padding: 30px; margin-top: 10px;}
.view_cont .pro_detail .option_cont .option::after {content:""; display: block; clear: both;}
.view_cont .pro_detail .option_cont .option:not(:last-child) {margin-bottom: 10px;}
.view_cont .pro_detail .option_cont p {float: left; color: #121212; font-size: 1.7rem; font-weight: 500; margin-bottom: 0;}
.view_cont .pro_detail .option_cont span {float: right; color: #121212;}
.view_cont .pro_detail .option_cont span a {padding-left: 5px;}
.view_cont .pro_detail .option_cont span em {font-family: 'Lato', sans-serif;}
.view_cont .pro_detail .estimate::after {content: ""; display: block; clear:both;}
.view_cont .pro_detail .estimate {width: calc(100% + 1rem);}
.view_cont .pro_detail .estimate button {background: #0070c2; float: left; color: #fff; width: calc(50% - 1rem); height: 65px; line-height: 65px; font-size: 1.8rem; font-weight: 600; margin: 4rem 1rem 0 0;}
.view_cont .pro_detail .estimate button:nth-child(2) {background: #333;}

.view_cont .pro_detail ul {margin-bottom: 3rem;}
.view_cont .pro_detail ul li {margin-bottom: 0.5rem; font-size: 1.5rem;}
.view_cont .pro_detail ul li:last-child {margin-bottom:0;}
.view_cont .pro_detail ul li em {display: inline-block; width: 15%;}

.view_cont .left_thum .small_thum {width: 400px;}
.view_cont .left_thum .small_thum .s_thum {display: inline-block; width: 93px !important; margin-right: 6px;}
.view_cont .left_thum .small_thum .s_thum:last-child {margin-right: 0;}
.view_cont .left_thum .small_thum span {display: block; border: 1px solid #dddddd;}

.detail_page {margin-top: 4rem;}
.detail_page h4 {font-size: 2.5rem; color: #121212; font-weight: 500; margin-bottom: 4rem;}
.detail_page h4::after {content:""; display: block; background: #f8f8f8; width: 100%; height: 20px; margin-top: -20px}
.detail_page .list_btn {text-align: center; margin-top: 4rem;}
.detail_page .list_btn button {background: #0070c2;text-align: center;color: #fff;height: 65px;padding: 0 6rem;font-size: 1.7rem; font-weight: 500;}

.left_thum .pagemove {width:400px; height:auto; margin:8px 0 20px;}
.left_thum .pagemove:after {content:''; display:block; clear:both;}
.left_thum .pagemove a {float:left; width:45%; text-align:center; display:block; font-size:1.4rem; color:#6f6f6f; line-height:22px; height:22px; box-sizing:border-box; letter-spacing:1px; font-family: 'Montserrat', sans-serif;}
.left_thum .pagemove a.btnprev {background:url(/product/images/btnprev.png) no-repeat left; padding-left:18px; text-align:left;}
.left_thum .pagemove a.btnlist {border-bottom:1px solid #6f6f6f; display:inline-block; width:10%;}
.left_thum .pagemove a.btnnext {background:url(/product/images/btnnext.png) no-repeat center right; padding-right:18px; text-align:right;}

/*media query*/
@media screen and (max-width:1170px) {
    .view_cont .pro_detail .category button {width: 16%;}
}

@media screen and (max-width:1024px) {
    .view_cont .left_thum {width: 100%; text-align: center;}
    .view_cont .left_thum .big_thum span {width: 300px; height: 300px; margin: 0 auto;}

    .view_cont .left_thum .small_thum {margin:0 auto;}
    .left_thum .pagemove {margin: 8px auto;}

    .view_cont .pro_detail {width: 100%;}
    .view_cont .pro_detail .category select, .view_cont .pro_detail .category input {margin-right: 1%;}
    .view_cont .pro_detail .category button {width: 17%;}
    .view_cont .pro_detail h2 {font-size: 2rem; padding-bottom: 1.5rem; margin-bottom: 3rem;}
    .view_cont .pro_detail .option_cont {padding: 15px;}
    .view_cont .pro_detail .option_cont p {font-size: 1.5rem;}
    .view_cont .pro_detail .estimate button {font-size: 1.6rem;}
    .detail_page h4 {font-size: 2rem;}
}

@media screen and (max-width:585px) {
    .view_cont .pro_detail .category select {width: 59%; height: 55px; line-height: 55px; font-size: 1.5rem; padding-left: 10px;}
    .view_cont .pro_detail .category input, .view_cont .pro_detail .category button {height: 55px; line-height: 55px;}
    .view_cont .left_thum .small_thum .s_thum {width: 60px !important; margin: 5px; padding: 0;}
    .view_cont .pro_detail h2 {font-size: 1.7rem;}
    .view_cont .pro_detail .estimate button {height: 60px; line-height: 60px; font-size: 1.6rem; margin-top: 2rem;}

    .detail_page {margin-top: 2rem;}
    .detail_page h4 {font-size: 1.6rem;}
    .detail_page h4::after {height: 12px; margin-top: -12px; margin-bottom: 2rem;}
}

@media screen and (max-width:500px) {
    .view_cont .left_thum .small_thum, .left_thum .pagemove {width: 100%;}
    .detail_page .list_btn button {height: 55px; font-size: 1.6rem;}
}

@media screen and (max-width:350px) {
    .left_thum .pagemove a {font-size: 1.3rem; width: 43%;}
    .left_thum .pagemove a.btnlist {width: 13%;}
}

/* 장바구니 */
.no_cart {border: 1px solid #ddd; text-align: center; padding: 3rem;}
.no_cart p {font-size: 1.7rem; margin-bottom: 0; color: #666;}

.cart_cont .cart_pro::after {content:""; display: block; clear:both;}
.cart_cont .cart_pro {position: relative; border:1px solid #ddd; padding:2rem 3rem;}
.cart_cont .cart_pro:not(:last-child) {margin-bottom: 2rem;}
.cart_cont .cart_pro .cart_txt {float: left; width: 80%;}
.cart_cont .cart_pro .cart_txt .cart_thum {display: inline-block; width: 90px; height: 90px; border: 1px solid #ddd; vertical-align: middle;}
.cart_cont .cart_pro .cart_txt .cart_detail {display: inline-block; vertical-align: middle; padding-left: 2rem;}
.cart_cont .cart_pro .cart_txt h2 {font-size: 2.5rem; color: #121212; font-weight: 600;}
.cart_cont .cart_pro .cart_txt ul li {position:relative; font-size: 1.4rem; color: #666; padding-left: 1.5rem; margin-bottom: 0.5rem;}
.cart_cont .cart_pro .cart_txt ul li:last-child {margin-bottom: 0;}
.cart_cont .cart_pro .cart_txt ul li::before {content:""; display: block; width: 5px; height: 1px; background:#666; position: absolute; left: 0; top: 11px;}
.cart_cont .cart_pro span {position: absolute; right:2rem; top: 50%; transform: translateY(-50%); font-weight: 500;}
.cart_cont .cart_pro span a {margin-left: 0.5rem;}
.cart_cont .estimate_list_btn {text-align: center; margin-top: 4rem;}
.cart_cont .estimate_list_btn button {background: #0070c2; text-align: center; color: #fff; height: 65px; padding: 0 6rem; font-size: 1.7rem; font-weight: 500;}

@media screen and (max-width:767px) {
    .no_cart p {font-size: 1.4rem;}

    .cart_cont .cart_pro .cart_txt h2 {font-size: 1.7rem;}
    .cart_cont .cart_pro .cart_txt ul li {font-size: 1.3rem; word-break: keep-all;}
}

@media screen and (max-width:605px) {
    .cart_cont .cart_pro .cart_txt .cart_thum {width: 100px; height: 100px;}
    .cart_cont .cart_pro .cart_txt .cart_detail {width: 100%; padding-left: 0; margin-top: 1rem;}
    .cart_cont .cart_pro .cart_txt {width: 100%;}
    .cart_cont .cart_pro span {top: 2rem; transform: none;}
}

@media screen and (max-width:500px) {
    .cart_cont .cart_pro {padding: 2rem;}
    .cart_cont .estimate_list_btn button {height: 55px; font-size: 1.6rem;}
}