/*------------------------------------------------------------
                            ORDER                           
------------------------------------------------------------*/
/* select tip icon으로 인해 padding늘림 */
select {padding-right:40px !important;}



/*----------------------------------------
      레이아웃                      
------------------------------------------*/

.podGoods {position:relative; width:1200px; /*margin-top:30px;*/}
.podGoods .pod_detail {position:relative; left:0; top:0; width:100%; z-index:2; border:1px solid #ddd;  border-top:2px solid #333;display: inline-block; float:left;}

.podGoods .pod_detail .pgs-info {background:#fff; padding:0; box-sizing: border-box; width:880px; float:left; border-right: 1px solid #ddd;}
.podGoods .pod_detail .pod_item_right {float:right; width:318px; padding:20px; border-bottom:1px solid #ddd;}


/*POD 타이틀*/
.pod_title {display:inline-block;font-size: 20px;line-height:32px;color: var(--major-color);font-weight:500;margin:0;width:100%;margin-bottom: 10px;}
.pod_title .code {font-size:12px; line-height:1; color:#8c8a8b; font-weight:100;}
.pod_title .code:before {content:"(";}
.pod_title .code:after {content:")";}
.pod_title .btn_my {display:inline-block;font-size:13px;line-height: 33px;padding: 0px 16px;color: var(--major-color);border-radius:2px;font-weight:normal;vertical-align:middle;float:right;letter-spacing: 0.02em;border: 1px solid #8c8a8b;background: #fff; transition: 0.1152s ease-out;}
.pod_title .btn_my i {font-size:16px;color: var(--primary-color);margin-right:7px;margin-top:-2px;}
.pod_title .btn_my:hover {background-color:var(--major-lighter-color);}


/*pod_item*/
.pod_item {position:relative; width:100%; border-bottom:1px solid #ddd; /*border-right:1px solid #ddd;*/ padding:0px; display: inline-block;}
.pod_item.border-black {border-color:#000;}

.pod_item .pod_item_left {float:left; width:570px;}
.pod_item .pod_item_right {float:right; width:200px; border: 1px solid #ddd; overflow: hidden;}

.pod_item_title {position: absolute; width:1200px; top:-77px; left:0; border-width:2px; border-left:0; border-right:0;}

.pod_item_wr {padding:0 20px; border:1px solid #ddd; border-top:none; border-left:none; border-bottom:none; min-height:700px;}
.pod_item_wr .pod_item { border:none; border-top:1px solid #ddd; padding-left:0; padding-right:0;}
.pod_item_wr .pod_item:before {content: ''; position: absolute; width:1px; height:100%; background:#eee; left:160px; top:0;}
.pod_item_wr .pod_item:first-child {border-top:none;}

.pod_item .area_title {display: block; font-size:16px; color:#333; line-height: 26px; margin:0; font-weight: 300; padding: 0;margin-bottom: 15px;font-weight: 400;letter-spacing: -1.2px;}
/*.pod_item .area_title.icon-exp {background:url(/_img/goods/icon-opt-exp.png) left center no-repeat; padding-left:27px;}*/
.pod_item .area_title.big_title {}
.pod_item .big_title:before {content:"";display: inline-block;width: 7px;height: 7px;background: var(--major-darker-color);border-radius: 50%;margin-right: 7px;vertical-align: top;margin-top: 11px;}
.pod_item .area_title.big_title > .priceInput {position: relative;display:inline-block;width:100%;height:auto;font-size: 11px;line-height:15px;letter-spacing: -0.3px;color: #777;float:left;font-weight: 100;padding: 3px 5px; background:#eee; border-radius: 3px; top:-2px;}

.pod_item_line {position: relative;}
.pod_item_line:after {content: ''; display: inline-block; width:1px; height:100%; left:630px; top:0; position: absolute; background:#e3e3e3;}
.pod_item_line > div {padding:15px;}
.pod_item .w-left {display: inline-block; width:630px; float:left;}
.pod_item .w-right {display: inline-block; width:249px; float:right;}

.pod_item_ttl {position: relative; padding-top:59px !important;}
.pod_item_ttl .area_title {margin-bottom:0; position: absolute; left:0; top:0; display: inline-block; width:100%; background-color:#fafafa; padding:9px 20px;}

.pod_item_right #slideimg img {width:auto; height:auto; max-width:100%;}

/*----------------------------------------
      상품상세설명                    
------------------------------------------*/
.pod_item_exp {position: relative; overflow: hidden;border:1px solid #ddd; padding:0; margin: 40px 0;}
.pod_item_exp .area_title {text-align: center; border-top:2px solid #333; border-bottom:1px solid #e1e1e1; font-size:18px; color:#333; line-height: 65px; padding:0; display: none;}
.pod_item_exp .explain {padding:40px; }


.explain h2 {position: relative;display:block;text-align: center;font-size: 24px;line-height: 34px;color: #000;margin-bottom: 40px;}
.explain h2 span {position: relative; display:inline-block; text-align: center; font-size: 24px; line-height: 34px; color: #000; }
.explain h2 span:after {content:"";display: block;border-bottom: 1px solid #333;width: 100%;padding-top: 5px;} 
.explain h2 span strong {font-weight: 700;}
.explain h2 small {display: block;font-size: 13px;line-height: 23px;font-weight: 100;color: #888888;}


/*상세내용샘플*/
.book_exp {font-size: 16px; line-height: 1.5;}

.exp_cate {display: block;margin-bottom:70px;padding: 0 100px;}
.exp_cate span {display: inline-block; font-size:1.2em; line-height: 32px;letter-spacing: 2px; color:#555; word-break: keep-all;}
.exp_cate span:after {content: "/";display: inline-block;font-size: 13px;color: #aaa; margin: 0 5px 0 7px; margin-top: -4px;vertical-align: middle;}
.exp_cate span:last-child:after {display: none;}

.exp_table {width: 80%; margin: 0 auto; font-size:12px; border-top: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9;}
.exp_table tr th,
.exp_table tr td {padding:10px 30px; line-height: 30px; vertical-align: middle; background: #fff; border-bottom: 1px solid #e9e9e9;  border-right: 1px solid #e9e9e9; font-size:16px; color: #555; }
.exp_table tr th {font-size: 15px; color: #777; background: #f3f3f3; font-weight: 400;}
.exp_table .small {display: inline-block; font-size: 0.8em; line-height: 22px; color: #888;}



/* ///////////////////////////////////왼쪽메뉴 -  Vertical Navigation/////////////////////////////// */
#leftMenu {position: relative; width: 100%; float: left;}
#leftMenu .title {	position: relative;	text-decoration: none; padding: 10px 7px;	color: #3a4243;	word-break: break-all;	font-size: 25px;	font-weight: normal;	border-bottom: 1px solid #3a4243; margin-top:20px; font-family: 'Nanum Barun Gothic', sans-serif; display: none;}


/*메뉴1차*/
/*.vNav { position: relative; width: 100%; margin-top: 20px; display: block;}
.vNav ul {padding:0; border-bottom:0; margin-bottom:0px; list-style: none; display: inline-block;}
.vNav li {	position: relative;	float:left; width:168.8px; margin-right:3px;; margin-bottom:3px; border:none;}
.vNav li:nth-child(7n) {margin-right:0;}
.vNav li a {display: block;	position: relative;	text-decoration: none !important;	height:55px; line-height: 55px; padding:0 20px; background-color:#f5f5f5; color:#999; font-size:16px; font-family: 'Nanum Barun Gothic', sans-serif;}
.vNav li.active a, .vNav li a:hover {background-color:#1864a2; color:#fff;}
.vNav li.active a:after {display: none;}*/

/*메뉴2차*/
/*.vNav2 { position: relative; width: 100%; margin-top: 3px; display: block;}
.vNav2 ul {	list-style: none; display: inline-block;}
.vNav2 li {	position: relative;	float:left; width:auto; height:50px; box-sizing: border-box; border-bottom:1px solid #ebebeb;}
.vNav2 li a {display: block;	position: relative;	text-decoration: none !important;	height:100%; padding:17px 18px; color:#777; font-size:15px; font-family: 'Nanum Barun Gothic', sans-serif; box-sizing: border-box;}
.vNav2 li a:after {content: ""; display: inline-block; width:1px; height:12px; background-color:#d3d3d3; position: absolute; right:0; top:50%; margin-top:-3px;}
.vNav2 li.active {border-bottom:2px solid #1864a2}
.vNav2 li.active a, .vNav2 li a:hover {color:#1864a2;}
.vNav2 li:last-child a:after {display: none;}*/
/* inc.css 항목과 겹쳐서 구분하기 위해서 부모 ID 삽입 */
#leftMenu .vNav2 {position: relative; width:100%; display: inline-block; padding:0; background:#fff; text-align: left; margin-top: 20px;}
#leftMenu .vNav2 ul {list-style: none; display: inline-block; max-width:100%; padding:0;}
#leftMenu .vNav2 li {position: relative; float:left; width:auto; height:auto; box-sizing: border-box; margin:0;}
#leftMenu .vNav2 li + li {margin-left:10px;;}
#leftMenu .vNav2 li a {display: inline-block; position: relative; text-decoration: none; width:auto; min-width:110px; height:40px; font-size:13px; line-height: 38px; font-weight: 300; color:#333; padding:0px 10px; float:left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border:1px solid #ddd; text-align: center;}
#leftMenu .vNav2 li.active a {color:#fff; background-color:var(--primary-color); border-color:var(--primary-color);}

#leftMenu .vNav3 {position: relative; width:100%; display: inline-block; padding:0; background:#fff; text-align: left; margin-top: 15px;}
#leftMenu .vNav3 ul {list-style: none; display: inline-block; max-width:100%; padding:0;}
#leftMenu .vNav3 li {position: relative; float:left; width:auto; height:auto; box-sizing: border-box; margin:0;}
#leftMenu .vNav3 li + li {margin-left: 5px;}
#leftMenu .vNav3 li a {display: inline-block; position: relative; text-decoration: none; width:auto; min-width:90px; height:30px; font-size:12px; line-height: 28px; font-weight: 300; color:#333; padding:0px 10px; float:left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom:1px solid #ddd; text-align: center;}
#leftMenu .vNav3 li.active a {color:var(--primary-color); border-color:var(--primary-color);}

/*----------------------------------------
               table                           
------------------------------------------*/
.price-wr {display: inline-block; padding: 0px;background: #eee;border-radius: 3px;margin-top: -3px; width:100%;}
.price-wr .priceInput {position: relative;display:block;width:100%;height:auto;font-size: 11px;line-height:15px;letter-spacing: -0.3px;color: #777;float:left;font-weight: 100;padding: 0 5px; padding-top:3px;}
.price-wr .priceInput + .priceInput {padding-top:0;}
.price-wr .priceInput:last-child {padding-bottom:3px;}
.price-wr .priceInput span {color:#F60; vertical-align: top;} 



/*pgs-table*/
.pgs-table {margin:0; width:100%; position: relative; min-height:40px;}
.pgs-table caption {display: block;color:#333;position: relative;width: 100%;padding: 9px 20px;height: auto;background: #fafafa;}
.pgs-table caption .area_title {margin-bottom:0;}
.pgs-table caption .price-wr {display: inline-block; width:80px; height:auto; position: absolute; top:50%; right:100%; margin-right:20px; transform: translate(0, -50%); margin-top:2px;}
.pgs-table caption .price-wr:before {content: ''; display: inline-block; width:10px; height:10px; border:5px solid transparent; border-left:10px solid #eee; border-right:0px; position: absolute; left:100%; top:50%; margin-top:-5px;}

.pgs-table tbody {position: relative; padding: 15px 0; display: block;}
.pgs-table tbody tr th,
.pgs-table tbody tr td  {width:700px;font-size:13px;vertical-align:middle;text-align:left;line-height:30px;font-weight:normal;color:#555;padding:5px 20px 0;}
.pgs-table tbody tr th {width:179px; color:#999; vertical-align: top;}

.pgs-table input[type="text"], 
.pgs-table select {width: auto; height:30px; font-size:13px; line-height:28px; margin-bottom: 5px; text-align: left; vertical-align:middle; border-radius:2px;}
.pgs-table select.disabled {border:none; pointer-events: none; padding-left:0; background-image: none !important;}

/*.pgs-table input[type="text"], 
.pgs-table select {display:inline-block; width:auto; background-color:#ffffff; border:1px solid #ddd; color:#555; margin: 5px 0}
.pgs-table input[type="text"] {min-width:50px;}
.pgs-table select {min-width:120px;}
.pgs-table input.required {background:#FFC;}
.pgs-table textarea {display:block; width:100%; background-color:#ffffff; background-image:none; border:1px solid #dcdcdc; vertical-align:middle; min-height:70px; padding:5px; font-size:12px; line-height:18px; border-radius:0px;color:#333;}
*/

/*pgs-in-table*/
.pgs-in-table {display:block; margin:0;padding: 7px 15px 2px;vertical-align:middle;text-align:left;font-size:12px;line-height:22px;color:#aaa;font-weight:normal;background: #f8f8f8; margin: 5px 0 10px 0; border-radius:5px;}

.pgs-in-table tbody {padding: 0}
.pgs-in-table tbody tr th,
.pgs-in-table tbody tr td  {padding:0; padding-top: 5px; vertical-align:middle;text-align:left;font-size:12px;line-height:22px;color:#aaa;font-weight:normal;background: #f9f9f9;}
.pgs-in-table tbody tr th {min-width:80px; color:#888; }

/*
.pgs-in-table input[type="text"], 
.pgs-in-table select {display:inline-block; width:auto; background-color:#ffffff; background-image:none; border:1px solid #dcdcdc; vertical-align:middle; height:22px; padding:0 5px; font-size:12px; line-height:20px; border-radius:0px;color:#aaa;}*/
.pgs-in-table input[type="text"] {width: 40px;}

/*pgs-table기타*/
.pgs-table .btn-sm {border-radius:0; height:30px; line-height:22px;  padding:3px 10px;}

.uploadTable {position:relative;}

.pgs-table span {display: inline-block;vertical-align: middle;color: #ff4f60;}

/*241101 거북에 디자인 의뢰비가 추가되면서 삼일 표지디자인은 숨김처리*/
/*#coverTemplateStr {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 350px;font-size: 11px;padding: 0;padding-left: 2px;line-height: 22px;vertical-align: middle;}*/
#goods_memo {border: 1px solid #ddd; width: 100%;}

/* tip */
.area_title .tip, 
.pgs-table .tip {display:inline-block; width:auto; height:auto; line-height:16px; font-size:12px; font-weight: 100; color:#8c82d8 !important; padding:5px 5px; background-color:#f2f5fd; margin:3px; border-radius: 5px;  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none; -moz-user-select: none;  -ms-user-select: none;  user-select: none;  float: right; vertical-align: middle;}
.area_title .tip:before, 
.pgs-table .tip:before {content:"\f05a"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 3px; vertical-align: middle; margin-top: -2px;} 

.pgs-table tr:first-child td .tip {float: none;}

.area_title .tip {margin:0;}
.area_title .tip-icon, .pgs-table .tip-icon {display: inline-block; width:20px; height:20px; font-size:12px; font-weight: normal; color:#d1a06e !important; border-radius: 10px; background-color:#fef0e1; float:right; margin:5px 0; text-align: center; line-height: 20px;}

.area_title .tip-icon {margin:0;}

.area_title .tip.warning, 
.pgs-table .tip.warning {color:#a94442 !important; background-color:#f2dede;}
.area_title .tip.warning:before, 
.pgs-table .tip.warning:before {content: "\f071";}

/* 가나인 용 tip : help-c */
.help-c {margin-bottom:5px; margin-left:5px; cursor: pointer;}

.modal_help .bpop_esmodal {border-radius: 20px;}
.modal_help .bpop_eshead {background:#2cb0b7; border-bottom-color:#2cb0b7; color:white; font-size:20px; line-height: 1.6; padding:15px 30px;}
.modal_help .bpop_eshead .button.b-close {background-color:#464646; border-radius: 50%; transform: rotate(45deg); top:18px; right:30px;}
.modal_help .bpop_eshead .button.b-close:before, 
.modal_help .bpop_eshead .button.b-close:after {background-color:#fff; left:50%; top:50%; transform: translate(-50%,-50%); width:2px; height:18px; border-radius: 2px;}
.modal_help .bpop_eshead .button.b-close:after {transform: translate(-50%,-50%); width:18px; height:2px;}
.modal_help .bpop_esbody {padding:15px 30px; background-color:#fafafa;}
.modal_help .bpop_esbody img {width:auto; height:auto; max-width:100%;}

#ea_guide_popup .bpop_esmodal {width:360px;}
#ea_guide_popup .bpop_esbody {padding:30px;}

:root {
	--modal-height: 80vh;
	--modal-conh: calc(var(--modal-height) - 63px);
}

#paper_guide_popup .bpop_esmodal {height:var(--modal-height);}

.paper-guide-popup {display: flex; height:var(--modal-conh);}
.paper-guide-popup .sidebar {width: 170px; height:auto; max-height:var(--modal-conh); overflow: hidden; overflow-y: auto; background-color: #def5f6; color: white; padding: 20px 0; box-sizing: border-box; padding-right:20px;}
.paper-guide-popup img {width:auto; height:auto; max-width:100%;}

.paper-guide-popup .menu-group {margin-bottom: 20px;}
.paper-guide-popup .group-title {padding: 0px 20px; cursor: pointer; color:#0f3e40; background:transparent; border-top-right-radius: 15px; border-bottom-right-radius: 15px; line-height: 30px; transition: 0.3s; font-size:16px; position: relative;}
.paper-guide-popup .group-title:after {content: ''; display: inline-block; width:10px; height:8px; border:5px solid transparent; border-bottom-width:0px; border-top:8px solid #0f3e40; position: absolute; top:50%; right:20px; margin-top:-4px;}
.paper-guide-popup .group-title.active {background-color:#44bfc6; color:#fff;}
.paper-guide-popup .group-title.active:after {transform: rotate(180deg); border-top-color:#fff; transition: 0.3s;}
.paper-guide-popup .sub-menu {list-style: none; margin: 0 0; height:0; overflow: hidden; transition: 0.3s;}
.paper-guide-popup .group-title.active + .sub-menu {height:auto; margin-top:10px;}
.paper-guide-popup .sub-menu .menu-item + .menu-item {margin-top:5px;}
.paper-guide-popup .sub-menu .menu-item a {color: #186C77; text-decoration: none; font-size: 14px; display: block; padding: 0px; padding-left:30px; white-space: normal; line-height: 30px;}
.paper-guide-popup .sub-menu .menu-item a:hover, 
.paper-guide-popup .sub-menu .menu-item a.active {color:#0f3e40;}
.paper-guide-popup .sub-menu .menu-item a.active {font-weight: bold;}

.paper-guide-popup .content {flex: 1; padding: 0px; background: #f9f9f9; box-sizing: border-box; position: relative;}
.paper-guide-popup .content .notice {color: #9c4dd8; font-size: 12px; padding:20px 40px 10px;}

.paper-guide-popup #guide-content {padding:0 40px 40px; height:auto; max-height: calc(100% - 47px); overflow: hidden; overflow-y: auto;}
.paper-guide-popup .paper-card {display: flex; background:transparent; flex-wrap: wrap;}
.paper-guide-popup .paper-card + .paper-card {margin-top:15px;}
.paper-guide-popup .paper-image {width: 200px; min-height:200px; transition: 0.3s; cursor: pointer;}
.paper-guide-popup .paper-image.big {width:100%;}
.paper-guide-popup .paper-image img {width:100%; height:100%; object-fit:cover; object-position: left;}
.paper-guide-popup .paper-info {flex: 1; padding:10px 20px; color:#1a1a1a; background-color:#fff; transition: 0.3s;}
.paper-guide-popup .paper-image.big + .paper-info {width:0; display: none;}
.paper-guide-popup .paper-info h3 {font-size:20px; font-weight: 700; letter-spacing: -0.25px; line-height: 35px; color:inherit;}
.paper-guide-popup .paper-info h3 small {margin-left:20px; font-size:16px; color:inherit; font-weight: 500;}
.paper-guide-popup .paper-info .weight {color:inherit; font-size:13px; letter-spacing: -0.25px; font-weight: 500; line-height: 30px;}
.paper-guide-popup .paper-info .weight:after {content: '(g)'; margin-left:3px;}
.paper-guide-popup .paper-info .desc {font-weight: 400; font-size:12px; line-height: 17px; letter-spacing: -0.25px; color:#50555c; margin-top:10px;}
.paper-guide-popup .paper-info .usage {font-weight: 500; font-size:12px; line-height: 19px; letter-spacing: -0.25px; color:#44bfc6; margin-top:15px;}

.paper-guide-popup .color-toggle {width:100%; text-align: right; font-size:18px; line-height: 20px; letter-spacing: -0.25px; color:#1a6a6e; font-weight: 500; margin-top:10px; margin-bottom:20px; cursor: pointer;}
.paper-guide-popup .color-toggle:before {content: ''; display: inline-block; width:10px; height:10px; border:2px solid #1a6a6e; border-top-width:0px; border-left-width:0px; transform: rotate(45deg); position: relative; top:-4px; margin-right:5px;}
.paper-guide-popup .color-toggle:after {content: ' 보기';}
.paper-guide-popup .color-sample {display: inline-block; width:100%; height:0; overflow: hidden; transition: 0.3s;}
.paper-guide-popup .color-toggle.active:before {transform: rotate(-135deg); top:1px;}
.paper-guide-popup .color-toggle.active:after {content: ' 접기';}
.paper-guide-popup .color-toggle.active + .color-sample {height:auto; margin-top:-10px;}

/* 이미지옵션*/
.opt_set {float:left; padding:10px; border:1px solid #dddddd; margin-right:10px;}
.opt_set {position:relative; cursor:pointer; overflow:hidden; display:inline-block; vertical-align:middle;}
.opt_set .chkbox {float:left; cursor:pointer; display:block; margin-right:10px;}
.opt_set .chkbox:last-child {margin-right:0;}

.chkbox input {position:absolute; top:0; left:0; opacity:0; cursor:pointer; z-index:5;}
.chkbox img {border:1px solid #eee; background:#f5f5f5; padding:0px;}
.chkbox input:checked+img {border:1px solid #8edfeb;background:#bdf5fd;}
.chkbox span {display:block; text-align:center; width:100%; font-weight:normal;} 



/*-------------------------------------------
  Radios
-------------------------------------------*/
.pgs_radio {margin-bottom:0;height:28px;line-height: 28px;vertical-align: middle;position: relative;cursor: pointer;margin-right:10px;display: inline-block;}
.pgs_radio input {display: none;}
.pgs_radio span {position: relative; display: inline-block;width: 18px;height: 18px;border-radius:18px;background-color:#f9f9f9;border:2px solid #ccc; vertical-align: middle;}
.pgs_radio p {display: inline-block;width:auto;height:28px;line-height: 28px;vertical-align: middle;text-transform: uppercase;font-weight: 300; font-size: 15px; color:#aaa;margin: 0;}

.pgs_radio input:checked ~ span {border:2px solid var(--primary-color);}
.pgs_radio input:checked ~ span:after {content: '';position: absolute;left: 2px;top: 2px;width: 10px;height: 10px;border-radius: 50px;border: 0;background-color:var(--primary-color);}
.pgs_radio input:checked ~ p {color:var(--primary-color);}

/*샘플디자인*/
#sample_design_span {display: inline-block;vertical-align: middle;line-height: 28px; margin-top: 2px;}
#sample_design_str {display: inline-block; line-height: 28px;color:#333;font-size: 12px;}

/*------------------------------------------
                  규격선택
------------------------------------------*/
#size_select {display: inline-block; width:100%;}
#size_select input[type="radio"] {display: none;}
#size_select label {display: inline-block; width:100px; float:left; margin-right:20px; cursor: pointer;}
#size_select label:nth-child(7n) {margin-right:0;}
#size_select label .label-img {display: inline-block; width:100px; height:100px; border-radius: 5px; text-align: center; line-height: 100px; background-position: center; background-repeat: no-repeat; }
#size_select label .label-title {display: inline-block;width:100%;font-size:13px;line-height: 18px;margin-top: 5px;color:#777;font-weight: normal;text-align: center;}
#size_select input[type="radio"]:checked + label .label-title {color:var(--primary-color);}
#size_select input[type="radio"]:disabled + label {opacity: 0.5; pointer-events: none;}

/*----------------------------------------
               견적보기                       
------------------------------------------*/
/*.podGoods aside {position:fixed; left:50%; top:232px; width:300px; margin-left:350px;}*/
#sticky {position:absolute; left:880px; margin:0; z-index:-1; overflow: hidden; padding:0; box-sizing: border-box; margin-top:20px; width:318px;}
#sticky.fixed {position:fixed; top:50px; left:50%; margin-left:281px; margin-top:0;}
#sticky > div {padding:0;}

#slideimg.fixed {display: none;}

/*견적서*/
.esti_wrap {position:relative;width:100%;padding: 0;overflow:hidden;}
.esti_wrap h1 {font-size: 13px;line-height: 36px;color: #555; padding: 0 20px; text-align: left; background-color:#f3f3f3; margin-bottom:7px;}

.esti_wrap dl {padding: 0 20px;display: inline-block;width:100%;}
.esti_wrap dl > span {display: inline-block; width:100%;}
.esti_wrap dl dt,
.esti_wrap dl dd {display:inline-block;font-size:12px;line-height: 20px;color:#999999;font-weight:normal;vertical-align:middle;}
.esti_wrap dl dt {position:relative; width:40%; text-align:justify !important; float:left;}
.esti_wrap dl dd {width:60%;text-align:right;float:right;color: #999;}

.esti_wrap dl.opt-info {}

.esti_wrap hr {margin:07px 20px;}

.esti_wrap dl.esti_sum {border-bottom:0; padding-top: 10px; border-top-color:#e3e3e3;}
.esti_wrap dl.esti_sum dt,
.esti_wrap dl.esti_sum dd {font-size:20px; color:#333;}
.esti_wrap dl.esti_sum dt {}
.esti_wrap dl.esti_sum dd {font-size:24px;}

.esti_wrap .bt_fx {position:relative;margin: 0;display:block;width:100%;overflow: hidden;padding: 10px 20px 0;}
.esti_wrap .bt_fx .btn {display: inline-block; width:49%; font-size:15px;  height:40px; line-height:38px; border:1px solid #333;}

.esti_wrap .bt_fx .btn-primary {border-color:var(--major-color); border-radius: 2px; transition: 0.1152s ease-out;}
.esti_wrap .bt_fx .btn-primary:hover {border-color:var(--major-darker-color); background-color:var(--major-darker-color);}

.esti_wrap .btn-make {color:#fff; display:block; background:#333; vertical-align:middle; width:100%;}
.esti_wrap .btn-make:before {content:""; display:inline-block; width:20px; height:20px; background:url(../ORDER_POD/img/icon_make.png) no-repeat; margin-right:7px; margin-top:-6px; vertical-align:middle;}
.esti_wrap .btn-make:hover {background:#555;}

.esti_wrap .bt_fx .btn-editor {color:#fff;display:block;background:#C13DDF;border: 1px solid #af32cc;vertical-align:middle;width:100%;}
.esti_wrap .bt_fx .btn-editor:before {content:""; display:inline-block; width:20px; height:20px; background:url(../ORDER_POD/img/icon_editor.png) no-repeat; margin-right:7px; margin-top:-6px; vertical-align:middle;}
.esti_wrap .bt_fx .btn-editor:hover {background:#8A3296;}

.esti_wrap .btn-order {float:left; background:#555; color:#fff;}
.esti_wrap .btn-order:hover {background:#777;}
.esti_wrap .btn-order.pull-right {background:#fff; color:#333;}
.esti_wrap .btn-order.pull-right:hover {background:#eee;}

.esti_wrap .btn_design_order {position: relative;display: block;border-radius: 5px;line-height: 22px;text-decoration: none;background: #faf3fe;color: #5b3072;cursor: pointer;font-size: 15px;padding: 10px;text-align: center;border: 1px solid #5b3072;margin: 0;}
.esti_wrap .btn_design_order:before {content:"";display: inline-block;width: 21px;height: 20px;vertical-align: middle;background-image:url("../_img/goods/icon_edit.png");background-position: 0 0;margin-right: 10px;}
.esti_wrap .btn_design_order:hover {box-shadow: 2px 2px 7px rgb(0 0 0 / 20%);transform: translateY(-2px); transition:0.3s all; }

/*견적서하단버튼*/
.esti_btn {position:relative;width:100%;padding: 0 20px 10px;background:#fff;overflow:hidden;}
.esti_btn li {margin-top:1px;}
.esti_btn li span {display: inline-block; width:100%; text-align: center; cursor: pointer; font-size:14px; padding:10px 0; color:var(--primary-color);}
.esti_btn .btn-primary {border-color:var(--major-color); border-radius: 2px; transition: 0.1152s ease-out;}
.esti_btn .btn-primary:hover {border-color:var(--major-darker-color); background-color:var(--major-darker-color);}
.esti_btn .btn-primary-b {border-radius: 2px;}

/*견적서-게스트*/
.esti_guest {padding:30px 0;font-size:13px; line-height:1;text-align:center; color:#999;}
.esti_guest a {color:#ff1a56;}

/*견적서-표지디자인*/
.cover_design_opt_wr {display: inline-block; width:100%; padding:7px 20px; text-align: center;}
.esti_wrap .cover_design_opt_wr > span {display: flex;}
.esti_wrap .cover_design_opt_wr dt {vertical-align: middle; width:60%;}
.cover_design_opt_wr dt span {display: inline-block; width:100%;}
.cover_design_opt_wr .theme_ttl {font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.esti_wrap .cover_design_opt_wr dd {position: relative; width:40%;}
.cover_design_opt_wr img {width:auto; height:auto; max-width:100%; max-height:42px; float:right;}
.cover_design_opt_wr .theme_img {display: inline-block; position: relative; float:right; border:1px solid #eee; box-sizing: border-box;}
.cover_design_opt_wr .btn-preview {border:none; position: absolute; width:100%; height:100%; background-color:#333; color:#fff; opacity: 0; transition: 0.15s; left:0; top:0; line-height: 0; font-size:1.5em;}
.cover_design_opt_wr .btn-preview:hover {opacity: 0.33;}

/*------------------견적서 모달팝업 공통-------------------------*/

.bpop_esmodal {position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 1; display: block; opacity: 1; width:800px; height:auto; background-color:#fff; overflow-y: auto; padding:0;}
.bpop_eshead {border-bottom: 1px solid #ddd;padding: 15px;background: #f9f9f9;font-size: 15px;font-weight: 400;color: #555;} 
.bpop_eshead .button.b-close {width: 24px;height: 24px;right: 15px;top: 14px;}
.bpop_eshead .b-close:before,
.bpop_eshead .b-close:after {position: absolute;left: 15px;content:' ';height: 24px;width: 2px;background-color: #555;}
.bpop_eshead .b-close:before {transform: rotate(45deg);} 
.bpop_eshead .b-close:after {transform: rotate(-45deg);}

/*주문시 팝업 _ 주문방식선택*/
#order_popup .bpop_esmodal {}
.order_select {padding: 30px;padding-bottom: 31px;display: flex;justify-content: space-between;flex-wrap: nowrap;}

.order_select a {position: relative;width: 32%;padding: 20px;text-align: center;display: block;border: 1px solid #ddd;border-radius: 10px;height: 100%;text-decoration: none;background: #fff;}
.order_select .icon {display: block;width: 90px;height: 90px;background-image:url("../_img/goods/icon_poporder.png");background-position: 0 0;margin: 0 auto;}
.order_select .icon_self {background-position-x:0px;}
.order_select .icon_design {background-position-x:-90px;}
.order_select .icon_upload {background-position-x:-180px;}
.order_select .icon_cart {background-position-x:-270px;}

.order_select a .ttl {display: block;color: #333;font-size: 17px;margin-top: 20px;}
.order_select a .desc {display: block;font-size: 13px;line-height: 24px;color: #999;margin-top: 5px;}

.order_select a:hover {border:1px solid #49a3ce;}
.order_select a:hover .icon {background-position-y:-90px;}
.order_select a:hover .ttl {color: #49a3ce;}


.order_select .calenader_self {position: relative;} 
.order_select .calendar_sel {display: block;padding: 15px;border-radius: 10px;background: #f6f6fd;border: 1px solid #e6e6ef;position: absolute;right: 0;top: 0;width: 45%;height: 80%;margin: 10px;}
.order_select .calendar_sel label {display: block;font-size: 13px;line-height: 15px;font-weight: 400;color: #a9a9c2;margin: 0;margin-bottom: 5px;}
.order_select .calendar_sel select {width: 37%;height: 32px;line-height: 30px;padding: 0 10px;font-size: 15px;color: #a053ff;}


/* 주문방식에 편집기가 없는 경우 */
.not_editor {width: 600px;}
.not_editor .order_select a {width:48%;}

/*셀프편집*/
.self_head {border: 1px solid #ddd; position: relative; margin-top:50px; padding: 30px; margin-bottom: 30px;}
.self_head h1 {display:block;font-size: 22px;margin-bottom: 30px;font-weight: 400;letter-spacing: -1px;}
.self_head h1 strong {font-weight: normal; color:var(--major-color);}
.self_filter {}
.self_filter ul {position: relative;display: flex;width: 100%;margin-bottom: 13px;flex-wrap: wrap;}
.self_filter ul label {display: block;width: 60px;font-size: 14px;font-weight: 400;color: #555;line-height: 32px;margin: 0;}
.self_filter ul li {display: block; width:calc(100% - 80px);}
.self_filter ul li span {background: #fff;border: 1px solid #e3e3e3;padding: 5px 12px;border-radius: 3px;font-size: 13px;line-height: 20px;color: #777;cursor: pointer;display: inline-block;vertical-align: middle;margin-bottom: 5px;letter-spacing: -0.5px;}

.self_filter ul li span:hover,
.self_filter ul li span.on {border: 1px solid #c49fd8;color: #52256a;background: #fcf7ff;}

.self_filter ul li span.customer_name,
.self_filter ul li span.customer_name:hover {background:#fff; border-radius: 0; border-color:transparent; border-bottom-color:var(--primary-border-color); color:var(--primary-color); cursor: default; letter-spacing: 0;}

.self_filter #sch_self {display: block;width: 300px;line-height: 30px;border: 1px solid #e3e3e3;}
.self_filter #sch_self_btn {min-width:60px; margin-left:5px;}

.selfList {position: relative;}
.selfList ul {display: flex;justify-content: flex-start;flex-wrap: wrap;}
.selfList ul li {display: block;width: 25%; padding:10px;}
.selfList ul li .img {position: relative; display: block;}
.selfList ul li .img img {display: block; width: 100%;}
.selfList ul li .design_name {display: block;text-align: center;padding: 10px 0;}    
.selfList ul li .design_name strong {display: inline-block;text-align: center;padding: 0;font-size: 12px;background: #edf0f4;color: #52256a;border-radius: 50px;font-weight: 300;padding: 3px 8px; margin-bottom: 7px;} 
.selfList ul li .design_name span {display: block;font-size: 13px;}
.selfList ul li:hover .img {box-shadow: 2px 2px 7px rgb(0 0 0 / 20%);transform: translateY(-5px); transition:0.3s all; }

.selfList ul li .img .over_div {position: absolute;left: 0;top: 50%;transform: translateY(-50%);display:none;text-align: center;width: 100%;}
.selfList ul li:hover .img .over_div {display: block;}
.over_div a {width: 80px;height: 80px;background: rgb(48 48 48 / 70%);display: inline-block;border-radius: 50%;text-align: center;line-height: 80px;color: #fff;margin: 0 1px;font-size: 13px;}
.over_div a:hover {background:#52256a;} 

/*디자인의뢰하기 팝업*/
#design_popup .bpop_esmodal {}

.design_order {display: block;}
.design_order ul {display: block;font-size: 12px;color: #555;border-right: 1px solid #eee;padding: 0;}
.design_order ul li {padding: 30px;padding-bottom: 0;}
.design_order ul li label {display:inline-block;font-size: 15px;font-weight: 400;color: #333;margin-bottom: 10px;}
.design_order ul li label:before {content:"";width: 5px;height: 5px;display: inline-block;background: #a43fdb;vertical-align: middle;margin-right: 7px;margin-top: -2px;}

.design_order ul .do1 {}
.design_order ul .do1 label {display:block;}
.design_order ul .do1 textarea {display:block;width: 100%;height: 150px;font-size: 12px;padding: 5px;border: 1px solid #ddd;}

.design_order ul .do3 {}
.design_order ul .do3 span {display: block;line-height: 18px;margin-bottom: 5px;color: #777;font-weight: 300;}
.design_order ul .do3 span:before {content:"";width: 5px;height: 1px;display: inline-block;background: #999;vertical-align: middle;margin-top: -3px;margin-right: 4px;}

.design_order ul .do4 {display: flex;justify-content: space-between;padding: 15px;background: #f5f5f5;margin: 0;margin-top: 30px;}
.design_order ul .do4 label {font-size: 13px;line-height: 42px;margin: 0;}
.design_order ul .do4 label:before {display: none;}
.design_order ul .do4 label input {margin-right: 5px;}


/*파일업로드 팝업*/
#fileup_popup .bpop_esmodal {min-height:700px;}
.file_order {display: block;padding: 20px;}
.file_order .alert-danger {margin-bottom: 20px;padding: 10px 20px;border-radius: 50px;}
.file_order .file_up_select {position: relative;border: 1px solid #ddd;display: flex;padding: 20px;border-radius: 5px;}

.file_order .file_up_select .file_icon {overflow: hidden;position: relative;padding: 15px;margin: 0 10px;border-radius: 5px; cursor: pointer;}
.file_icon .img {width: 55px;height: 55px;display: block;background-repeat: no-repeat;margin:0 auto;background-position: center center;cursor: pointer;border-radius: 5px;}
.file_icon .name {display:block;font-size: 13px;line-height: 20px;color: #999;margin:0;padding:0;margin-top: 10px;text-align: center;font-weight: normal;white-space: nowrap;}
.file_icon:hover {background-color:#f5f5f5;}
.file_icon:hover .name {color:#333;}
.file_icon.checked,
input[type="radio"]:checked + label.file_icon, 
label.file_icon input[type="radio"]:checked {background-color:#f5f5f5;}
.file_icon.checked .name,
input[type="radio"]:checked + label.file_icon .name, 
label.file_icon input[type="radio"]:checked ~ .name, 
input[type="radio"]:checked + label.file_icon .label-title, 
label.file_icon input[type="radio"]:checked ~ .label-title {color:#333;}

.file_contents {padding-top:20px;}

#myfile_popup {z-index: 99999;}
.myfile_selected {display: block;background: #f5f5f5;margin-top: 10px;padding: 10px;color: #888;text-align: center;}


/* 테마 미리보기 팝업 */
#theme-popup .bpop_esmodal {background-color: transparent}
#theme-popup .bpop_esmodal img + img {margin-top:10%;}

/* 옵션아이콘 & radio button */

/*.radio_icon {width:auto; height:auto; margin-right:3px;}
.radio_icon span {width:100%;}
.radio_icon > .icon_img{width:50px; height:50px; display: block; border:1px solid #eee; background-color:#f5f5f5; background-repeat: no-repeat; margin:0 auto; background-position: center center;}
.radio_icon > .icon_name {text-align: center; display: inline-block; margin:0; padding:0;}
input[type="radio"]:checked + label.radio_icon > .icon_img {background-color:#bdf5fd; border-color:#8edfeb}
*/

.opt-icon {width:50px; height: auto; overflow: hidden; float: left; margin-right: 6px; margin-bottom: 10px; position: relative;}
.opt-icon:last-child {margin-right:0;}
.opt-icon .opt-icon-img {width:100%; height:auto; padding-top:100%; display: block; background-color:#fafafa; border:1px solid #fafafa; background-repeat: no-repeat; margin:0 auto; background-position: center center; cursor: pointer; border-radius: 5px;}
.opt-icon .opt-icon-name {display:block; font-size: 13px; line-height: 19px; color: #777; margin:0; padding:0; margin-top: 5px; text-align: center; font-weight: normal; width: 100%; overflow: hidden; height:19px; text-overflow: ellipsis; white-space: nowrap;}
.opt-icon:hover {overflow: visible; z-index: 9;}
.opt-icon:hover .opt-icon-name, .opt-icon .opt-icon-name:hover {overflow:
visible; white-space: inherit;}
.opt-icon:hover .opt-icon-img, .opt-icon .opt-icon-img:hover {border-color:var(--primary-lighter-color); background-color:var(--primary-lighter-color);}
.opt-icon.checked .opt-icon-img,
input[type="radio"]:checked + label.opt-icon .opt-icon-img, label.opt-icon input[type="radio"]:checked ~ .opt-icon-img {border-color: var(--primary-color); background-color:var(--primary-lighter-color);}
.opt-icon.checked .opt-icon-name,
input[type="radio"]:checked + label.opt-icon .opt-icon-name, label.opt-icon input[type="radio"]:checked ~ .opt-icon-name, input[type="radio"]:checked + label.opt-icon .label-title, label.opt-icon input[type="radio"]:checked ~ .label-title {color:var(--checked-color);}

/* 제본 */
.pod_jb .opt-icon {width:100px; margin-right: 20px;}


.pod_jb .opt-icon .opt-icon-img {width:100px; height:100px;}
.pod_jb .opt-icon .opt-icon-name {padding:0; margin-top:8px;}

/* 사용유무 옵션 */
.opt-check {position: absolute;top: 6px;right: 20px;z-index: 1;}
.opt-check input {display: none;}
.opt-check label {font-size:13px; line-height: 30px; color:#aaa; font-weight: normal; margin:0; cursor: pointer;}
.opt-check label span {display: inline-block; width:18px; height:18px; border:1px solid #ddd; background:#fafafa url(/ORDER_POD/img/icon-check-gray.png) center no-repeat; float:left; margin-top:6px; margin-right:5px;}
.opt-check input:checked + label {color:var(--primary-color);}
.opt-check input:checked + label span {border-color:var(--primary-color); background-color:var(--primary-color); background-image:url(/ORDER_POD/img/icon-check.png)}
.opt-select {position: absolute; top:25px; right:0; z-index: 1;}

/* 사용유무옵션-반전 */
.opt-check-reverse label {color:var(--primary-color);}
.opt-check-reverse label span {border-color:var(--primary-color); background-color:var(--primary-color); background-image:url(/ORDER_POD/img/icon-check.png);}
.opt-check-reverse input:checked + label {color:#aaa;}
.opt-check-reverse input:checked + label span {border-color:#ddd; background-color:#fafafa; background-image:url(/ORDER_POD/img/icon-check-gray.png);}

/*.opt-check ~ table > tbody > tr:first-child > td {padding-right:100px;}*/

/* 두번째 옵션
#cover_printer_span, #in_printer_span, #in2_printer_span {display: inline-block; margin-left: 40px;} */

/* 옵션 추가 제거 */
.opt-plus-icon, .opt-minus-icon {display: inline-block; width:16px; height:16px; border-radius: 1px; background:#bbb; color:#fff; text-align: center; font-size:10px; line-height: 16px;}
.opt-plus-icon i, .opt-minus-icon i{ margin-top:-4px;}
.opt-plus-icon:focus, .opt-minus-icon:focus, .opt-plus-icon:active, .opt-minus-icon:active, .opt-plus-icon:hover, .opt-minus-icon:hover {color:#fff; background:#999;}

/* 상세설명 */
.explain img {width:auto; height:auto; max-width:100%;}

/* 선택 팝업 관련 */
.tip_btn, a.tip_btn {display: inline-block; width:16px; height:16px; border-radius: 50%; background:#d6d6d6; text-align: center; line-height: 16px; color:#fff; position: relative; z-index: 9; font-size:13px; top:-5px; margin-left:-40px;}
.tip_btn:hover, .tip_btn:active, a.tip_btn:hover, a.tip_btn:active {color:#fff; background-color:#ccc; text-decoration: none;}

a.tip_btn {font-size:0; background-image:url(/_img/goods/opt-preview.png); background-size:80%; background-position: center; background-repeat: no-repeat;}

.priceInput ~ .tip_btn, .priceInput ~ a.tip_btn {margin-left:0;}

.modal-wrap { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; overflow: hidden; width: 900px; }
.modal-wrap .modal-head {padding: 0 20px; margin: 0; background: #1864a2; color: #fff; font-size: 20px; font-weight: normal; line-height: 50px;}
.modal-wrap .modal-head .button.b-close {padding:0; overflow: hidden; right:20px; top:10px; display: inline-block; width:30px; height:30px; font-size:0;}
.modal-wrap .modal-head .button.b-close:before, .modal-wrap .modal-head .button.b-close:after {content: ''; display: inline-block; position: absolute; background:#fff; transform: rotate(45deg);}
.modal-wrap .modal-head .button.b-close:before {width:100%; height:2px; left:0; top:50%; margin-top:-1px;}
.modal-wrap .modal-head .button.b-close:after {width:2px; height:100%; left:50%; top:0; margin-left:-1px;}
.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;}


/*----------------------- HALF_goods ------------------------*/

.podGoods .pod_detail.podmall {display: flex;}
.podmall_left {width:400px; padding:10px; }
.podmall_right {width:calc(100% - 400px); background:#fff; padding:10px; box-sizing: border-box; border-left: 1px solid #ddd;}

.podmall .pod_item {border: 0;}
.podmall .pgs-table {margin-left:0px; width: 100%;}
.podmall .pgs-table tbody {padding:0px;display: table-row-group;}
.podmall .pgs-table caption {display: none;}

.podmall .pgs-table tbody tr th {width: 100px; padding: 7px 15px;}
.podmall .pgs-table tbody tr td {width:calc(100% - 100px);padding: 7px 15px;}
.podmall .esti_wrap {border-top: 1px solid #ddd;}
.podmall .esti_wrap dl.esti_sum dt {font-size: 18px;}
.podmall .esti_wrap dl.esti_sum dd {font-size: 18px;color: var(--checked-color);}



/*----------------------- 견적상세  후가공옵션 추가 22.08.29 ------------------------*/

/*후가공*/
/*.td_last {vertical-align: top !important;}
.last_chk {margin-right:20px; font-weight: normal; cursor: pointer;}
.last_chk input[type="checkbox"] {display: none;}
.last_chk span {}
.last_chk span {display: inline-block; width:18px; height:18px; border:1px solid #ddd; background:#fafafa url(/ORDER_POD/img/icon-check-gray.png) center no-repeat; float:left; margin-top:6px; margin-right:5px;}
.last_chk input:checked + span {border-color:var(--primary-color); background-color:var(--primary-color); background-image:url(/ORDER_POD/img/icon-check.png)}
.last_div {display: inline-block; width:100%;position: relative;padding: 10px;background: #f5fcfd;border: 1px solid #e5f3f6;margin-bottom: 10px;}
.last_div select {}
.last_div .ttl {display: inline-block; width:80px; height:100%; position: absolute; background:#efefef; left:0; top:0; text-align: center; font-weight: normal; vertical-align: middle;}
.last_div .ttl span {color:inherit; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:100%;}
.last_div > select {}
.last_div .content_wrap {display: inline-flex; width:100%; flex-wrap: wrap;}
.last_div .content_wrap li {display: inline-block;margin: 1% 2%;cursor: pointer;}
.last_div .content_wrap li .img {width: 64px; border:1px solid #ddd;border-radius: 2px;box-sizing: border-box; margin:0 auto;}
.last_div .content_wrap li .img img {width:100%;}
.last_div .content_wrap li .img.no_img {overflow: hidden;}
.last_div .content_wrap li .img.no_img img {transform: scale(3);}
.last_div .content_wrap li input {display: none;}
.last_div .content_wrap li label {margin-bottom:0; float:left; cursor: pointer;}
.last_div .content_wrap li h3 {font-size: 12px;text-align: center; margin-top:5px;letter-spacing: -0.3px;color:#bbb;}
.last_div .content_wrap li:hover .img {border-color:var(--primary-color);}
.last_div .content_wrap li:hover h3 {color:var(--primary-color);}
.last_div .content_wrap input:checked + label .img {border-color:var(--primary-color);}
.last_div .content_wrap input:checked + label h3 {color:var(--primary-color);}
.last_div .opt-btn-wrap {display: inline-block; width:80px; height:40px; line-height: 20px; padding:10px; position: absolute; left:0; bottom:0; text-align: center; margin-bottom:10px;}
.last_div .opt-btn-wrap a + a {margin-left:5px;}
.last_div .pgs-in-table {margin:5px;padding:5px;}


.post-processing {}
.post-processing .priceInput {}
.post-processing .last_chk {width: 100%;position: relative;margin-bottom: 0;}
.post-processing .post_item {position: relative;}

.post_item .priceInput {background: #eee;border-radius: 3px;position: absolute;display: inline-block;right: 0;top: 6px;height:auto;font-size: 11px;line-height:15px;letter-spacing: -0.3px;color: #777;font-weight: 100;padding: 2px 5px;}
.post_item .priceInput + .priceInput {padding-top:0;}
.post_item .priceInput:last-child {padding-bottom:3px;}
.post_item .priceInput span {color:#F60; vertical-align: top;} 
*/


.td_last {vertical-align: top !important;}
.td_last .price-wr {border: 1px solid #caeef5;background: #f3fdff;padding: 5px 10px 0px;}
.td_last .price-wr .priceInput {padding: 0;}

.td_last > .priceInput {min-width: 130px;background: #eee;font-size: 10px;padding:0 5px;font-size: 11px;line-height: 15px;letter-spacing: -0.3px;color: #777;font-weight: 100;z-index: 99;margin-left: 0 !important;margin-right: 2px;}

.last_chk {margin-right:20px; font-weight: normal; cursor: pointer;}
.last_chk input[type="checkbox"] {display: none;}
.last_chk span {}
.last_chk span {display: inline-block; width:18px; height:18px; border:1px solid #ddd; background:#fafafa url(/ORDER_POD/img/icon-check-gray.png) center no-repeat; float:left; margin-top:6px; margin-right:5px;}
.last_chk input:checked + span {border-color:var(--primary-color); background-color:var(--primary-color); background-image:url(/ORDER_POD/img/icon-check.png)}
.last_chk.disabled {opacity: 0.5; cursor: default; pointer-events: none;}


.last_div {display: inline-block; width:100%;border: 1px solid #caeef5;padding: 0px;position: relative; margin-top:-1px;}
.last_div select {}
.last_div .ttl {display: inline-block; width:80px; height:100%; position: absolute; background:#efefef; left:0; top:0; text-align: center; font-weight: normal; vertical-align: middle;}
.last_div .ttl span {color:inherit; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:100%;}
.last_div > select {}
.last_div .content_wrap {display: inline-flex; width:100%; flex-wrap: wrap;}
.last_div .content_wrap li {display: inline-block; /*width:18%; */margin:1%; cursor: pointer;}
.last_div .content_wrap li .img {width: 64px;border: 1px solid #fafafa;border-radius: 2px;box-sizing: border-box; margin:0 auto; background-color:#fafafa;}
.last_div .content_wrap li .img img {width:100%;}
.last_div .content_wrap li .img.no_img {overflow: hidden;}
.last_div .content_wrap li .img.no_img img {transform: scale(3);}
.last_div .content_wrap li input {display: none;}
.last_div .content_wrap li label {margin-bottom:0; float:left;cursor: pointer;padding: 5px;}
.last_div .content_wrap li h3 {font-size: 12px;text-align: center;margin-top: 3px; color:#999;}
.last_div .content_wrap li:hover .img {border-color:var(--primary-lighter-color); background-color:var(--primary-lighter-color);}
.last_div .content_wrap li:hover h3 {}

.last_div .content_wrap input:checked + label {}
.last_div .content_wrap input:checked + label .img {border-color:var(--primary-color); background-color:var(--primary-lighter-color);}
.last_div .content_wrap input:checked + label h3 {color:var(--checked-color);}

.last_div .opt-btn-wrap {display: inline-block; width:auto; height:auto; line-height: 20px; padding:5px; position: relative; left:0; bottom:0;}
.last_div .opt-btn-wrap a {float:left;}
.last_div .opt-btn-wrap a + a {margin-left:5px;}
.last_div .opt-btn-wrap code {margin-left:5px; float:right; padding:0 4px; line-height: 16px; color:#aaa;}
.last_div .pgs-in-table {margin:5px;padding:5px;}

.last_div .tip {position: relative; margin:5px; padding:3px; font-size:11px; line-height: 14px;}
.last_div .btn-detail {padding:0 3px; font-size:11px; line-height: 16px; color:#666; border:1px solid #ccc; height:20px; margin:0 5px; margin-top:-2px;}
.last_div .tip_img {border-top:1px dashed #caeef5; text-align: center;}
.last_div .tip_img img {width:auto; height:auto; max-width:670px;}


/* custom-input */
.cst-input {display: inline-flex; width:auto; height:30px; font-size:13px; line-height: 28px; margin-bottom:5px; text-align: left; vertical-align: middle; border-radius: 2px; border:1px solid #ddd; font-weight: normal; color:inherit;}
.cst-input:focus-within {border-color:#66afe9;}
.cst-input span {padding:0 5px; color:inherit; opacity: 0.8;}
.cst-input input[type="text"] {border:none; margin-bottom:0; height:28px; text-align: right;}
.cst-input input[type="text"]:focus {box-shadow: none;}