@charset "utf-8";

/*-------------------------------------- basic --------------------------------------*/
/* 박스 공통 */
*,
*::before,
*::after { box-sizing: border-box; }

/*제목 등 비노출*/
.ir_pm { font-size: 0 !important; line-height: 0 !important; display: block; overflow: hidden; text-indent: -9999px;}

/*비노출*/
.dpn {display: none;}

/*옵션 화면 고정 슬라이드*/
.over_none {overflow: inherit !important;}
.over_none .left .fixed_area  { position: sticky !important; top: 30px !important; width: 100%; right: auto !important; transition: transform .15s ease-out; will-change: transform;}

/*색상*/
.color_red { color: #F93C3C;}

/*마진, 패딩*/
.mt15 {margin-top: 15px;}

/*기타*/
.line { border-top: 1px solid #ddd; } 

/*a 태그 비활성*/
.detail_v2 a.disabled { pointer-events: none; color: #999; cursor: default; text-decoration: none;}

/*텍스트 입력, 버튼 비활성*/
.detail_v2 .disabled_input { pointer-events: none; color: #999; cursor: default; text-decoration: none; background-color: #F7F7F7; }


/*-------------------------------------- 옵션 레이아웃  --------------------------------------*/
/*옵션 영역 레이아웃*/
.detail_v2 { padding: 50px 0;}
.detail_v2 .option_wrap { width: 1200px; margin: 0 auto;}
.detail_v2 .layout { display: flex; justify-content: space-between; box-sizing: border-box;}
.detail_v2 .layout .left  { flex: 0 0 30%; }
.detail_v2 .layout .right { flex: 0 0 50%; }
.detail_v2 .layout .side { flex: 0 0 15%; }
.detail_v2 .layout > * { min-width: 0; box-sizing: border-box;}

/*서브 네비게이션*/
.detail_v2 .breadcrumb { font-size: 13px; color: #666; margin-bottom: 20px !important;}
.detail_v2 .breadcrumb a { color: #666; text-decoration: none;}
.detail_v2 .breadcrumb a:hover { text-decoration: underline;}
.detail_v2 .breadcrumb .divider { margin: 0 5px; color: #aaa;}


/*-------------------------------------- left --------------------------------------*/
/*left 프리뷰 및 썸네일*/	
.detail_v2 .preview_wrap { width: 100%; margin-bottom: 10px;}	
.detail_v2 .preview_wrap .cont_box { width: 100%!important; height: auto!important;}
.detail_v2 .preview_wrap .cont_box > img { width: 100%;}
.detail_v2 .preview_wrap .tab_btn_wrap { padding: 10px 0 !important; flex-wrap: wrap; justify-content: start; display: flex;}
.detail_v2 .preview_wrap .tab_btn_wrap li { margin: 0 5px 5px 0 !important; border: 1px solid #e6e6e6 !important; transition: 0.3s; width: 47px; height: auto; font-size: 16px;
color: #888; text-align: center; cursor: pointer; box-sizing: border-box; float: none;}
.detail_v2 .preview_wrap .tab_btn_wrap li.active { border: 1px solid #159fda !important; transition: 0.5s;}
.detail_v2 .preview_wrap .tab_btn_wrap li:nth-child(n+7) { margin-right: 0px !important; }
.detail_v2 .preview_wrap .tab_btn_wrap li:nth-child(n+8) { display: none; }
.detail_v2 .preview_wrap .tab_btn_wrap li img { width: 100%; height: auto;}

/*left 안내 박스*/			
.detail_v2 .period_box { width: 100%; border: 1px solid #E5E5E5; background: #fafafa; padding: 20px 20px; margin: 15px 0 0 0 !important; font-size: 12px; color: #666; line-height: 1.6;  border-radius: 5px;}
.detail_v2 .period_box .period_tit { margin-bottom: 15px; align-items: baseline; display: flex; justify-content: space-between;}
.detail_v2 .period_box .period_tit .tit { font-size: 14px; font-weight: 600; color: #333; line-height:1; }
.detail_v2 .period_box .period_tit .sub_tit {font-size: 11px; font-weight: 400; color: #666; margin-left: 10px; line-height:1; display:inline-block; vertical-align:text-bottom; position:relative; top:0px; border-radius: 3px; box-sizing: border-box; }
.detail_v2 .period_box .period_list { list-style: none; margin: 0; padding: 0;}
.detail_v2 .period_box .period_list li { position: relative; padding-left: 12px; margin-bottom: 8px;}
.detail_v2 .period_box .period_list li::before { content: "•"; position: absolute; left: 0; top: 0; color: #333;}
.detail_v2 .period_box .period_list li:last-child {margin-bottom: 0 !important;}


/*-------------------------------------- side --------------------------------------*/
/*side 영역*/
.detail_v2 .side {position: relative;}
.detail_v2 .side .fixed_area{ position: sticky !important; top: 50px !important; width: 100%; right: auto !important; transition: transform .15s ease-out; will-change: transform;}
	
/*가격표*/
.detail_v2 .price_box { width: 100%; border: 1px solid #656565; border-radius: 5px; background: #fff; font-size: 11px; color: #333; overflow: hidden; padding: 6px; margin-top: 0;}
.detail_v2 .price_box .price_tit { background: #444; color: #fff; text-align: center; padding: 8px 0; font-size: 14px; border-radius: 4px; margin-bottom: 8px;}

.detail_v2 .price_box .price_body { background: #f9f9f9; padding: 8px 12px; margin-bottom: 12px;}
.detail_v2 .price_box .row { display: flex; justify-content: space-between; margin: 5px 0;}

.detail_v2 .price_box .price_body .label {color: #666666;}	
.detail_v2 .price_box .price_body .value {font-weight: 600;}	
.detail_v2 .price_box .divider.dotted { border-top: 1px dotted #bbb; margin: 8px 0;}

.detail_v2 .price_box .price_footer { padding: 0 5px 2px 5px;}			
.detail_v2 .price_box .footer_tit { color: #999; font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid #ddd;}
.detail_v2 .price_box .final { font-weight: bold; font-size: 12px; }
.detail_v2 .price_box .final .value {color: #F93C3C;}


/*-------------------------------------- right --------------------------------------*/
/*right 영역*/
.detail_v2 .option_area {width: 100%;}

.detail_v2 .txt_guide { font-size: 12px; color: #999; line-height: 1.4; } 

/*타이틀 영역*/
.detail_v2 .prod_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; border-bottom: 1px solid #e5e5e5; }
.detail_v2 .prod_header .option_tit { padding: 15px 0; margin: 0; font-size: 22px; font-weight: 700; color: #111;}
.detail_v2 .prod_header .header_actions { display: flex; gap: 8px;}
.detail_v2 .prod_header .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; font-size: 12px; color: #333; background: #fff; border: 1px solid #BFBFBF; border-radius: 5px; cursor: pointer; transition: all 0.2s ease;}
.detail_v2 .prod_header .btn:hover { background: #f7f7f7;}	
.detail_v2 .prod_header .icon { display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain;}
.detail_v2 .prod_header .icon_notice { background-image: url('https://www.bizfactory.co.kr/include/img/main/ico_notice.png?t=1'); }
.detail_v2 .prod_header .icon_effect  { background-image: url('https://www.bizfactory.co.kr/include/img/main/ico_effect.png?t=1'); }


/*옵션 버튼 영역 */
.detail_v2 .form_container { /*max-width: 600px;*/ margin: 0 auto; } 
.detail_v2 .form_container .form_row { display: flex; align-items: flex-start; margin-bottom: 8px; gap: 15px; } 
.detail_v2 .form_container .form_label { min-width: 100px; font-size: 13px; color: #333; font-weight: bold; margin-top: 5px;} 
.detail_v2 .form_container .form_buttons { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; } 

/*라벨 노티스 버튼*/
.detail_v2 .form_container .btn_notice { background-image: url(https://s3.ap-northeast-2.amazonaws.com/image.bizfactory.co.kr/common/question_b.png?t=1); width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block; transition: 0.3s; opacity: 0.4; cursor: pointer; vertical-align: middle; margin-left: 4px;}
.detail_v2 .form_container .btn_notice:hover {transition:0.3s; opacity:1; }

/* 버튼 영역 */
.detail_v2 .form_container .custom_select { position: relative; width: 100%; } 

.detail_v2 .form_container .select_button { width: 100%; padding: 6px 35px 6px 12px; border: 1px solid #ddd; border-radius: 2px; font-size: 12px; background-color: white; color: #333; text-align: left; cursor: pointer; background-image: url("https://biz.publog.co.kr/include/img/more_off.png?t=1"); background-position: right 12px center; background-repeat: no-repeat; background-size: 9px; } 
.detail_v2 .form_container .select_button.active { background-image: url("https://biz.publog.co.kr/include/img/more_on.png?t=1"); } 

/*버튼 레이아웃(사이즈 및 너비)*/
.detail_v2 .form_container .custom_btn { --gap: 5px; display: flex; flex-wrap: wrap; gap: var(--gap); width: 100%;}
.detail_v2 .form_container .custom_btn > * { box-sizing: border-box; }

.detail_v2 .form_container .btn_w_full { flex: 0 0 100%; } /* 전체 너비 */
.detail_v2 .form_container .btn_w_half { flex: 0 0 calc((100% - (1 * var(--gap))) / 2);} /* 절반 너비 */
.detail_v2 .form_container .btn_w_third { flex: 0 0 calc((100% - (2 * var(--gap))) / 3);} /* 1/3 너비 */
.detail_v2 .form_container .btn_w_quarter { flex: 0 0 calc((100% - (3 * var(--gap))) / 4);} /* 1/4 너비 */

/* 모서리 옵션 토글버튼 (사이즈 및 너비)*/
.detail_v2 .form_container .btn_w_corner { flex: 0 0 calc((100% - (3 * var(--gap))) / 4);}
.detail_v2 .form_container .btn_w_corner .option_btn { width: 100%; padding: 6px 7px; border: 1px solid #ddd; border-radius: 2px; font-size: 11px; color: #333; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 3px #ddd; border: none;} 
.detail_v2 .form_container .btn_w_corner .option_btn.selected { box-shadow: inset 0 0 0 3px #159fda;}

.detail_v2 .btn_w_corner.corner1 .option_btn {border-top-left-radius: 15px !important;}
.detail_v2 .btn_w_corner.corner2 .option_btn {border-top-right-radius: 15px !important;}
.detail_v2 .btn_w_corner.corner3 .option_btn {border-bottom-left-radius: 15px !important;}
.detail_v2 .btn_w_corner.corner4 .option_btn {border-bottom-right-radius: 15px !important;}

/* 드롭다운 버튼 그룹 */
.detail_v2 .form_container .select_options { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; z-index: 1000; display: none; } 
.detail_v2 .form_container .select_options.show { display: block; } 

/* 드롭다운 버튼 펼침 리스트  */
.detail_v2 .form_container .select_option { padding: 4px 12px; font-size: 12px; color: #333; cursor: pointer; border-bottom: 1px solid #f0f0f0; background: white; transition: background-color 0.2s; } 
.detail_v2 .form_container .select_option:last-child { border-bottom: none; } 
.detail_v2 .form_container .select_option:hover { background-color: #f7f7f7; } 
.detail_v2 .form_container .select_option.selected { background-color: #ecf8fd; } 

/*드롭다운 버튼 내 텍스트 추가(장/건...등)*/
.detail_v2 .form_container .unit { position: absolute; right: 35px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #999; font-size: 12px; } 

/* 토글 버튼 */
.detail_v2 .form_container .option_btn { width: 100%; padding: 6px 12px; border: 1px solid #ddd; border-radius: 2px; font-size: 12px; color: #333; text-align: center; cursor: pointer; } 
.detail_v2 .form_container .option_btn.selected { border-color: #159fda; color: #159fda; } 

/* 텍스트 라벨 */
.detail_v2 .form_container .text_label { width: 100%; display: flex; align-items: center; padding: 0 12px; } 
.detail_v2 .form_container .text_label span { font-size: 12px; color: #666; } 

/* 인풋 영역 */
.detail_v2 .form_container .size_input_group { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px;} 
.detail_v2 .form_container .size_input_group input[type="text"] { width: 100%; text-align: center; padding: 8px 12px; border: 1px solid #ddd; border-radius: 2px; color: #333;} 
.detail_v2 .form_container .size_input_group span { font-size: 18px; color: #666; } 


/* 아코디언 섹션 스타일 */
.detail_v2 .acc_section {} 
.detail_v2 .acc_header { display: flex; padding: 12px 0; /*cursor: pointer;*/ border-bottom: 1px solid #ddd; background: white; } 
/*.detail_v2 .acc_header:hover { background-color: #f9f9f9; } */
.detail_v2 .acc_tit_wrap {flex: 1;display: flex;align-items: flex-start; gap: 15px; }
.detail_v2 .acc_tit { min-width: 100px; font-size: 13px; color: #333; font-weight: bold; line-height: 2; } 
.detail_v2 .acc_description { font-size: 12px; color: #999; line-height: 2.4; } 
.detail_v2 .acc_toggle { display: none; margin-top: 3px; width: 20px; height: 20px; background-image: url("https://biz.publog.co.kr/include/img/more_off.png?t=1"); background-position: center; background-repeat: no-repeat; background-size: 12px; margin-right: 10px;} 
.detail_v2 .acc_header.active .acc_toggle { background-image: url("https://biz.publog.co.kr/include/img/more_on.png?t=1"); } 
.detail_v2 .acc_content {/* display: none; */padding: 15px 0; } 
.detail_v2 .acc_content.show { display: block; }
.detail_v2 .acc_content_list {}


/*추가 옵션 그룹 헤더*/
.detail_v2 .add_option .add_option_hdr { margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; } 
.detail_v2 .add_option .add_option_tit { font-size: 13px; font-weight: bold; color: #333; } 
.detail_v2 .add_option .cancel_btn { padding: 4px 12px; font-size: 12px; color: #666; background-color: white; border: 1px solid #ddd; border-radius: 2px; cursor: pointer; transition: all 0.2s; } 
.detail_v2 .add_option .cancel_btn:hover { background-color: #f0f0f0; border-color: #999; } 

/* 추가 옵션 그룹 */
.detail_v2 .add_option_group { padding: 15px 0; display: flex; align-items: flex-start; gap: 15px; } 

/*추가 옵션 영역 레이아웃*/
.detail_v2 .add_option_left { width: 75%; } 
.detail_v2 .add_option_right { width: 25%; display: flex; flex-direction: column; align-items: self-end; gap: 19px;margin-top: 0; } 

/*추가 옵션 영역 right 영역*/
.detail_v2 .quantity_controls { display: flex; gap: 0; border: solid 1px #ddd; padding: 2px; align-items: center;transition: 0.5s; } 
.detail_v2 .quantity_controls:hover { border: solid 1px #999; transition: 0.5s; } 
.detail_v2 .quantity_controls .pipe { border-right: solid 1px #ddd; height: 20px; } 
.detail_v2 .quantity_controls .pipe:hover { border-right: solid 1px #999; transition: 0.5s; } 
.detail_v2 .quantity_controls .qty_btn { width: 30px; height: 30px; background-color: white; border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 400; color: #666; transition: all 0.2s; } 
.detail_v2 .quantity_controls .price { font-size: 14px; text-align: right; } 

/*추가 옵션 영역 내 가격 영역*/
.detail_v2 .acc_section .price_total { font-size: 14px; color: #666; text-align: right; padding-bottom: 5px; } 
.detail_v2 .acc_section .price_total .strong { font-size: 18px; color: #F93C3C; font-weight: 600; } 


/*체크 버튼*/
.detail_v2 .acc_section .checkbox_item {margin-top: 5px;}
.detail_v2 .acc_section .checkbox_item input[type="checkbox"] { display: inline-block; width: 14px; height: 14px; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #999; border-radius: 3px; background-color: white; cursor: pointer; position: relative; z-index: 1 !important; opacity: 100% !important; margin: 0 6px 0 0; top: 3px; } 
.detail_v2 .acc_section .checkbox_item input[type="checkbox"]:checked { border-color: #00a8d6; background-color: #00a8d6; } 
.detail_v2 .acc_section .checkbox_item input[type="checkbox"]:checked::after { content: ""; position: absolute; width: 6px; height: 9px; border: 1px solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); top: 0px; left: 3px; } 
.detail_v2 .acc_section .checkbox_item label { cursor: pointer; user-select: none; } 


/* final 가격 정보 영역 */
.detail_v2 .price_section { padding: 25px 0; text-align: right; border-top: 1px solid #ddd; margin-top: 30px; padding-top: 20px; } 
.detail_v2 .price_section .price_row { margin-bottom: 3px; font-size: 13px; color: #666; text-align: right; } 
.detail_v2 .price_section .price_row .strong { color : #333; font-weight: 600; font-size: 15px; } 
.detail_v2 .price_section .price_row.final .strong { color: #F93C3C; font-weight: 600; font-size: 24px; } 
.detail_v2 .price_section .price_row.final { margin-top: 15px; } 


/* final 버튼 영역 */
.detail_v2 .action_buttons { margin: 0 auto; display: flex; gap: 10px; } 
.detail_v2 .action_buttons .action_button { flex: 1; padding: 18px 15px; border: none; border-radius: 2px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } 
.detail_v2 .action_buttons .btn_file_upload { background-color: #555; transition: 0.5s; color: white; } 
.detail_v2 .action_buttons .btn_file_upload:hover { background-color: #3f3f3f; transition: 0.5s; } 
.detail_v2 .action_buttons .btn_quote { background-color: #159fda; transition: 0.5s; color: white; } 
.detail_v2 .action_buttons .btn_quote:hover { background-color: #0080b3; transition: 0.5s; }


/* 원고작업 가리기 */
.d_hideform { display: none; }