/* "/_css/bootstrap폴더 필요" */

body > .container {margin-top: 0;}
.content-right {width:100%;}
/*-------------------------------------------------------------*/
/*                           왼쪽메뉴                          */
/*-------------------------------------------------------------*/

#lnb {position:relative; width:100%; float:left; margin-bottom:40px;}
#lnb .title {position:relative; padding:5px; text-align:left; font-size:24px; font-weight:bold; color:#1b1b1b; word-break:break-all; display: none;}

/*메뉴1차*/
.vNav {position:relative; width:100%; margin-bottom:0px; border:none; padding-top:20px;}
.vNav ul {list-style:none; display: flex;}
.vNav ul > li {position:relative; line-height:40px; border-bottom:none; background-color:transparent;}
.vNav ul > li + li {margin-left:10px;}
.vNav li a {display:block; position:relative; text-decoration:none !important; padding:0 20px; color:#333333; font-size:13px; line-height:40px; letter-spacing:-0.5px; border:1px solid #ddd;}
/*.vNav li a:after {content: ''; display: inline-block; width:0; height:2px; position: absolute; left:50%; bottom:0; transform: translate(-50%, 0); background-color:transparent; transition: 0.1152s;}*/
/*.vNav li.active a:after {width:80%; background-color:var(--primary-darker-color); content: '';}*/
.vNav li a:hover {background-color:var(--primary-lighter-color); color:#333;}
/*.vNav li a:hover:after {width:80%; background-color:var(--primary-darker-color); content: '';}*/
.vNav li.active a {color:var(--primary-darker-color); border:1px solid var(--primary-darker-color); background-color:#fff;}
.vNav li.active a:after {content: ''; display: none;}

 /*메뉴1차 선택시 2차메뉴*/
.vNav2  {position: relative; width:100%; margin-top:20px;}
.vNav2 ul {list-style: none; display: flex;}
.vNav2 ul > li {position: relative; line-height: 32px;}
.vNav2 ul > li + li {margin-left:10px;}
.vNav2 li a {display:block; position:relative; text-decoration:none !important; padding:0 20px; color:#666; font-size:13px; line-height:32px; letter-spacing:-0.5px; border:1px solid #eee; transition: 0.1152s;}
.vNav2 li a:hover {background-color:var(--primary-lighter-color);}
.vNav2 li.active a {border-color:var(--primary-darker-color); color:var(--primary-darker-color); background-color:#fff;}


/*-------------------------------------------------------------*/
/*                             ORDER                           */
/*-------------------------------------------------------------*/

/*상품아이콘 2차메뉴*/
.sinb {width: 100%; text-align: center; overflow:hidden;margin-bottom:40px;}
.sinb ul {background: #fff; overflow: hidden; text-align: center; border-bottom:1px solid #999;}
.sinb ul li {text-align: center;  background: #fff;  display: inline-block; padding:30px 10px;border-bottom:2px solid transparent;}
.sinb ul li a {display:inline-block; line-height:54px;color: #888;border: 3px solid transparent;padding:0 20px;}

.sinb ul li:hover {}
.sinb ul li:hover a {border: 3px solid #ddd;}

.sinb ul li.active {border-bottom:2px solid #333;}
.sinb ul li.active a {color: #e82e2e;border: 3px solid #e82e2e;}

/*상품아이콘 3차메뉴*/
.sinb2 {width: 95%; margin:0 auto; text-align: center; overflow:hidden;margin-bottom:40px; vertical-align:middle}
.sinb2 ul {background: #fff; overflow: hidden; text-align: center;}
.sinb2 ul li {text-align: center;  background: #9e9e9e;  display: inline-block; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
.sinb2 ul li a {font-size:12px; display:inline-block; line-height:32px;color: #eee; padding:0 20px;}

.sinb2 ul li:hover {background:#777;}
.sinb2 ul li:hover a {}

.sinb2 ul li.active {background:#333333;}
.sinb2 ul li.active a {color:#fff;}

/*----- 상품리스트 -----*/

.podList {position:relative; width:100%;}
.podList ul {display: flex; flex-wrap: wrap; justify-content: flex-start; padding-top:12.5px;}
.podList ul li {width:18%; height:270px; margin:1%; margin-top:0; position:relative; border:1px solid #dddddd; overflow:hidden;}

.podList ul li > a {display: inline-block; position: relative;}
.podList ul li .pod-img {width:100%; height:210px; display:block; overflow:hidden;}
.podList ul li .pod-img img {min-height:210px; transition: opacity 0.3s;}
.podList ul li .pod-name {display:block;line-height:22px; height:60px; padding:8px; font-size:12px; font-weight:normal; color:#777;overflow:hidden; border-top:1px solid #eee;}

/*.podList ul li:hover .pod-img {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}
.podList ul li:hover .pod-name {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}

.podList ul li .pod-btn {display:block;line-height:39px; border-top:1px solid #ddd;overflow:hidden;}
.podList ul li:hover .pod-btn {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}
*/
.podList ul li .pod-btn {display:none; width:100%; position: absolute; left:0; bottom:58px; line-height:39px; border-top:1px solid #ddd;overflow:hidden; z-index: 9;}

.podList ul li:hover .pod-img {background-color:#333;}
.podList ul li:hover .pod-img img {opacity: 0.7;}
.podList ul li:hover .pod-btn {display: inline-block;}
.podList ul li .pod-btn span {display:block;width:50%; height:39px; float:left; text-align:center; background-color:#f9f9f9; background-repeat:no-repeat; cursor:pointer;background-image:url(/ORDER/img/goods-btn.png);}
.podList ul li .pod-btn span:hover { background-color:#f3f3f3;}

.pod-btn .pod-preview {background-position:16px top; border-right:1px solid #ddd;}
.pod-btn .pod-preview:hover {background-position:16px bottom; }
.pod-btn .pod-oredr {background-position:-88px top; }
.pod-btn .pod-oredr:hover {background-position:-88px bottom; }

.list-top {clear:both; margin-bottom:30px; text-align:center; overflow:hidden;}
.list-foot {clear:both; margin-top:10px;  text-align:center; overflow:hidden;}



/*----- 마이상품 -----*/
.mypodList {position:relative; width:100%;}
.mypodList ul li {width:210px; height:270px; margin-right:12.5px; margin-bottom:20px; float:left; position:relative; border:1px solid #dddddd; overflow:hidden;}
.mypodList ul li:nth-child(5n) {margin-right:0;} 

.mypodList ul li .pod-img {width:100%; height:210px; display:block; overflow:hidden; text-align:center;}
.mypodList ul li .pod-img img {min-height:210px; width:100%;}
.mypodList ul li .pod-name {display:block;line-height:22px; height:60px; padding:8px; font-size:12px; font-weight:normal; color:#777;overflow:hidden; border-top:1px solid #eee;}

/*.mypodList ul li:hover .pod-img {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}
.mypodList ul li:hover .pod-name {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}

.mypodList ul li .pod-btn {display:block;line-height:39px; border-top:1px solid #ddd;overflow:hidden;}
.mypodList ul li:hover .pod-btn {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}
*/
.mypodList ul li .pod-btn {display:block;line-height:39px; border-top:1px solid #ddd;overflow:hidden;}
.mypodList ul li:hover .pod-btn {transform:translatey(-40px); -ms-transform:translatey(-40px); -webkit-transform:translatey(-40px);}
.mypodList ul li .pod-btn span {display:block;width:50%; height:39px; float:left; text-align:center; background-color:#f9f9f9; background-repeat:no-repeat; cursor:pointer;background-image:url(/ORDER/img/goods-btn.png);}
.mypodList ul li .pod-btn span:hover { background-color:#f3f3f3;}

.mypodList ul li .mygoods-del {position:absolute; right:5px; top:5px; z-index:2;}


/*-------------------------------------------------------------*/
/*                          ORDER-POD                          */
/*-------------------------------------------------------------*/

.pgs-title {background:#5798e8; margin: 0; display:inline-block; color:#fff; width:132px; text-align: center; font-size:12px; font-weight:bold;padding:5px 0;}


.podGoods {overflow:hidden; font-size:12px; margin-top:20px;}
.podGoods .pgs-img {width:440px; float:left;}

 /* pgs-guide */
.pgs-guide {position:relative; width:100%; float:left; background:#f3f3f3; margin-top:1px; padding:20px 3px;}
.pgs-guide h2 {font-size:13px; color:#434343; font-weight:bold; padding:0; margin:0; margin-bottom:5px;} 
.pgs-guide ul {font-size:12px; color:#777; margin-bottom:20px; line-height:24px;} 
.pgs-guide ul:last-child {margin-bottom:0px;} 

.pgs-guide.webhard ul {margin-bottom:10px;}
.pgs-guide.webhard span {color:#32336c; font-size:12px; font-weight:bold; line-height:30px; display:inline-block; margin:0;} 

.podGoods .pgs-info {width:calc(100% - 500px); float:right; padding-top:0;margin-bottom: 90px;}
.podGoods .pgs-info h1 {font-size:18px; font-weight:bold; border-bottom:2px solid #1b1b1b; line-height:25px; color:#1b1b1b; margin:0; padding-bottom:5px; margin-bottom:30px;}
.podGoods .pgs-info h1 span {}

/* 상품명 타이틀 */
.podGoods_title {height: 45px;margin-bottom: 28px;font-size: 20px;font-weight: bold;color: #212121;border-bottom: 1px solid #e8e8e8;letter-spacing: -0.6px;}
.podGoods_title .sub_title::before {content: "|";color: #c2c2c2;padding: 0 15px;}
.view_money {margin-top:-22px;}

/* 마이상품 */
.pgs-mygoods {background:#ededed; padding:13px 20px; overflow:hidden; border-radius:10px; margin-bottom:30px;}
.pgs-mygoods ul {float:left; line-height:26px; vertical-align:middle; font-size:12px;}
.pgs-mygoods .name {width:18%; text-align:center;color:#000;}
.pgs-mygoods input[type="text"] {width:60%; line-height:26px; height:26px; padding:0px 10px; background-color:#fff; color:#F00; border:none;}
.pgs-mygoods .btnmy {width:19%; margin-left:1%; background:#43596f; color:#fff; line-height:26px; padding:0 10px; display:inline-block; border-radius:2px;}

/* 프로그램설치, 폴더업로드 버튼 (#ex_bt) */
#ex_bt {width:100%;float:left;}
.pgs-info .btn {width:300px; height:55px; line-height:55px;}


.dir_style {background-color:#FFC; border:1px solid #E7E0C9; line-height:18px; line-height:30px; width:auto; padding:5px 10px; border-radius:5px;} 
.dir_style i {font-size:18px;} 

/*모달팝업*/
.modal-wrap { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; overflow: hidden; width: 700px; }
.modal-wrap .modal-head {padding: 7px 20px 0px 20px; margin: 0; background: #EEE; color: #000; font-size: 17px; font-weight: bold; }
.modal-wrap .modal-body {width:100%; box-sizing:border-box; padding: 0px;}
.modal-wrap .modal-body iframe {width:100%; height:300px; box-sizing:border-box; background:#fff; margin:0; padding:0 10px 20px 10px;}

.button.b-close,
.button.bClose { box-shadow: none; padding: 0 6px 2px 6px; position: absolute; right: 10px; top: 6px; cursor: pointer; }

/*.option-img ul { float: left; width: 20%; padding: 5px; box-sizing: border-box; }
.option-img ul img { max-width: 100%; border: 2px solid transparent; cursor: pointer; }
.option-img ul img:hover { border: 2px solid #e82e2e; box-sizing: border-box; }
.option-img ul p { text-align: center; width: 100%; font-size: 12px; line-height: 18px; color: #555; padding: 5px 0; }*/

/* pgs-table  */ 
.pgs-table {border-collapse:collapse; width:100%; max-width:100%; font-size:12px; border-top:1px solid #e9e9e9; margin:0;}
.pgs-table td,
.pgs-table th {padding:7px; line-height:20px; color:#888; vertical-align:middle; background:#FFF; border-bottom:1px solid #e9e9e9;font-size: 12px;font-weight: 500;padding:10px 0;}
.pgs-table th {width:120px; color:#000; padding-left:0; font-weight:bold; background:#F2F2F2; background:url(/ORDER/img/dot.png) 10px center no-repeat;}
.pgs-table .fa-check {float:right; margin-right:10px; margin-top:5px; color:#ff9966;}

.pgs-table2 {border-collapse:collapse; width:100%; max-width:100%; font-size:11px; border:none; margin:0;border:1px solid #e9e9e9; border-bottom:none;}
.pgs-table2 thead td {font-weight:normal; background:#f3f3f3; text-align:center;}
.pgs-table2 td,
.pgs-table2 th {padding:3px; line-height:18px; color:#888; vertical-align:middle; background:#fff; border:none;border-bottom:1px solid #e9e9e9;}
.pgs-table2 th {width:80px;font-weight:normal; background:#f3f3f3;}

.priceInput {border:0px; background-color:#FFF; font-size:11px; color:#333; text-align:right; float:right }
.priceInput span {color:#F60;}

.pricestr {font-size:18px; font-weight:bold; color:#454545;}

/* 상품옵션 */
.pgs-table td select {background: #f6f6f6;height: 30px;line-height: 30px;padding: 0 5px;font-size: 13px;font-weight: 300;color: #212121;border-radius: 0;}
.pgs-table td, .pgs-table th {line-height: 20px;vertical-align: middle;background: #FFF;}

/* pgs-table .summary-table */
.summary-table {border-top:none;}
.summary-table th {width:80px; color:#fff; padding:0 5px}

.order-btnset  {margin:30px 0;}
.order-btnset span {float:left; margin-right:3px;} 
.order-btnset span:last-child  { margin-right:0px;} 

/*상품상세페이지*/
.pgs-detail {clear:both; margin-top:40px; padding-top:20px; border-top:1px solid #ddd;}

/*-------------------------------------------------------------*/
/*                             cart                            */
/*-------------------------------------------------------------*/

/* cart-table - border없음 */ 
.cart-table {border-collapse: collapse;  width: 100%; max-width: 100%; font-size:11px; border-top:1px solid #ddd; margin:0 auto;}
.cart-table thead td {padding:10px 10px; color:#777; vertical-align:middle;text-align:center; background:#f3f3f3;}
.cart-table td, .cart-table th {padding:0; color:#555; vertical-align:middle;background:#fff; border-bottom:1px solid #ddd;} 
.cart-table th {color:#333; background:#F9f9f9; padding-left:2px;} 
.cart-table .fa-check {float:right; margin-right:10px; margin-top:5px; color:#e82e2e;} 

.cart-table td th {background:#fffeda;}

/* cart-table - border있음 */ 
.cart-table.table-bordered {border:1px solid #ddd;}
.cart-table.table-bordered td, .cart-table.table-bordered th {border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; padding:5px;} 

/* 테이블 탑,바텀 */
.table-top {overflow:hidden; margin-bottom:10px; font-size:13px; color:#555;}

.table-bottom {padding:20px 0; text-align:center;}
.table-bottom ul {float:left; width:30%; text-align:left;}
.table-bottom ul:nth-child(2) {width:40%; text-align:center;}
.table-bottom ul:nth-child(3) {width:30%; text-align:right;}

.table-top.box, 
.table-bottom.box {background:#f8f6f0; padding:15px; border:1px solid #eee; font-size:12px; line-height:28px; color:#555;} 

.bg-skyT {background:#f2f9fb !important; padding:10px; text-align:center}
.bg-sky  {background:#f2f9fb !important; padding:20px; text-align:center}
.bg-sky1 {background:#f2f9fb !important; padding:20px; text-align:center}
.bg-sky2 {background:#f2f9fb !important; padding:20px; text-align:center}

.order-name-box {padding:10px; overflow:hidden; background:#f9f9f9; margin-bottom:10px;}
.order-name-box label {float:left; width:10%; text-align:center; } 
.order-name-box ul {float:right; width:90%; }  


/* table-estimate - 견적서테이블 */ 
.table-estimate {border-collapse: collapse;  width: 100%; max-width: 100%; font-size:12px; margin:0 auto; border:1px solid #333;}
.table-estimate thead td {padding:7px; background:#333; color:#fff; vertical-align:middle;text-align:center;}
.table-estimate td, .table-estimate th {padding:7px; line-height:20px; color:#555; vertical-align:middle;background:#fff; border-right:1px solid #333;border-bottom:1px solid #333;} 
.table-estimate th {color:#333;background:#FFFDDA; padding-left:20px;border-right:1px solid #ddd;} 
.table-estimate .fa-check {float:right; margin-right:10px; margin-top:5px; color:#e82e2e;} 

.table-top .subtitle {font-size:16px; font-weight:bold; padding-bottom:5px; color:#5a3e26; border-bottom:1px solid #b28850;}

.cartprice-box {padding:10px; border:10px solid #eee; background:#f9f9f9; overflow:hidden;}
.cartprice-box table th, .cartprice-box table td {text-align:right; font-size:13px; font-weight:normal; color:#FF0004;}
.cartprice-box table th {color:#555;}

/*모달팝업*/
.modal-wrap { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; overflow: hidden; width: 900px; }
.modal-wrap .modal-head {padding: 7px 20px 2px 20px; margin: 0; background: #EEE; color: #000; font-size: 17px; font-weight: bold; }
.modal-wrap .modal-body { width:100%; box-sizing:border-box; padding: 0px; height: 600px; }
.modal-wrap .modal-body iframe { width:100%; height:600px; box-sizing:border-box; background:#fff; margin:0; /*padding: 15px 13px;*/ }
.modal-wrap .modal-body iframe body { overflow-y: scroll; }
#mp .modal-wrap .modal-body .b-iframe body {margin: 0;}
.modal-footer { width: 100%; height: 70px; background: #eee; position: relative; padding: 10px 0; }
.modal-footer .button_wrap { position: absolute; left: 50%; margin-left: -178px; }
.modal-footer .button_wrap span { display: inline-block; width: 220px; height: 50px; font-size: 18px; font-weight: bold; color: #fff; background: #eb3737; text-align: center; line-height: 50px; }
.modal-footer .button_wrap span:first-child { margin-right: 6px; }
.modal-footer .button_wrap .close { width: 130px; color: #808080; border: 1px solid #808080; background: transparent; }

.modal-wrap .modal-body-set { width:100%; box-sizing:border-box; padding: 0px; height: 670px; }
.modal-wrap .modal-body-set iframe { width:100%; height:670px; box-sizing:border-box; background:#fff; margin:0; /*padding: 15px 13px;*/ }
.modal-wrap .modal-body-set iframe body { overflow-y: scroll; }
#mp-set .modal-wrap .modal-body-set .b-iframe body {margin: 0;}