/*────────────────────────────────────────────────────────────
    서브 공통
────────────────────────────────────────────────────────────*/
    /*visual*/
        .sub_visual { height:clamp(350px, 52vw, 520px);position: relative;}
        .sub_visual .thumb{width:100%;height:100%;position: absolute;top:0;left:0;background:url('/images/sv_thumb.jpg')no-repeat center / cover;}
		#wrap:has(.sub_prd) .sub_visual .thumb{background:url('/images/sv_product.jpg')no-repeat center / cover;}
		#wrap:has(.sub_board) .sub_visual .thumb{background:url('/images/sv_board.jpg')no-repeat center / cover;}
        .sub_visual .sv_title { text-align: center; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; color: var(--point-white);box-sizing: border-box;position: relative;z-index:3;}
        .sub_visual .sv_title h2 {font-size: var(--text-60);font-weight: 700;line-height:1.4;}

        .sub_nav{ position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.4);z-index:3;}
        .sub_nav .w_custom { width: 100%; }
        .sub_nav .desc{ position: relative; display: flex; height:clamp(50px, 6vw, 60px);font-size: var(--text-18); font-weight: 400; }
        .sub_nav .desc :where(dt, dd){position: relative; height: 100%; box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, 0.2); }
        .sub_nav .desc dt a{display: flex;width:clamp(49px, 6vw, 59px); height: 100%; align-items: center;justify-content: center;font-size: 0;padding: clamp(16px, 2vw, 21px);box-sizing: border-box;}
        .sub_nav .desc dt a img { height: 19px; }
        .sub_nav .desc dd:last-child { border-right: 1px solid rgba(255, 255, 255, 0.2); }
        .sub_nav .desc dd span{position: relative;display: flex;align-items: center;height: 100%;padding:0 clamp(50px, 6vw, 60px) 0 clamp(15px, 2vw, 23px);box-sizing: border-box; font-family: var(--font-type02); font-weight: 300;color: var(--point-white);min-width:clamp(260px, 26vw, 299px); line-height: 1.4;cursor: pointer; letter-spacing: -0.03em;}
        .sub_nav .desc dd span:before{position: absolute; content: ''; width:8px;aspect-ratio:auto 1;border: solid var(--point-white); border-width: 0 0 2px 2px; top: 46%; right:clamp(15px, 2vw, 26px); transform: translateY(-50%) rotate(-45deg); border-radius: 1px; transition: all 0.4s; }
        .sub_nav .desc dd.on span:before{transform: translateY(-50%) rotate(135deg); top: 48%; }
        .sub_nav .desc dd ul{position: absolute;top: calc(100% + 1px);left: 0;width: calc(100% + 2px);padding: 20px 0;background: var(--point-white);border:1px solid var(--border-color01); box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s; z-index: 10; }
        .sub_nav .desc dd.on ul{opacity: 1; pointer-events: all;}
        .sub_nav .desc dd ul li a{display: block;font-weight: 400;color: var(--black-color02);padding: 11px 24px;box-sizing: border-box;line-height: 1.4;}
        .sub_nav .desc dd ul li.on a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}

        @media screen and (max-width: 640px){
            .sub_nav .desc dt { border-left: 0; }
            .sub_nav .desc dt a { width: 49px; }
            .sub_nav .desc { height: 50px; }
            .sub_nav .desc dd:not(:last-child) { display: none; }
            .sub_nav .desc dd { width: calc(100% - 49px); }
            .sub_nav .desc dd:last-child { border-right: 0; }
            
        }

    /*input*/
		#wrap [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: clamp(22px, 3.1vw, 25px);height: clamp(22px, 3.1vw, 25px);border: 1px solid var(--border-color01);flex-shrink: 0;cursor: pointer;appearance:none;}
		#wrap [type="checkbox"]::before{display: inline-flex;content:'';width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1.33;background: url('/images/chk_icon.svg') no-repeat center / 100% auto;filter: var(--filter-black) opacity(0.2);}
		#wrap [type="checkbox"]:checked{border-color: var(--point-color01);background: var(--point-color01);}
		#wrap [type="checkbox"]:checked:before{filter: var(--filter-white);}
		#wrap label:has([type="checkbox"]){display:inline-flex;align-items: flex-start;gap: 10px;font-size: var(--text-18);font-weight: 500;color: var(--black-color03);line-height: clamp(22px, 3.1vw, 25px);cursor: pointer;}
		#wrap label:has([type="checkbox"]) em{font-weight: 600; color: var(--point-red02); display: contents;}

        #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea) { height:clamp(40px, 5vw, 50px); line-height: 1.5; width: 100%; border:1px solid var(--border-color01);color: var(--black-color05); font-weight: 400; font-size: var(--text-18); font-family: var(--font-type02); padding: 0 clamp(10px, 2vw, 20px); text-indent: 0; margin: 0; box-sizing: border-box; vertical-align: middle; text-align: left; outline: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;box-sizing: border-box;}
            #wrap textarea {min-height: 250px; resize: none; padding: 20px;}
        #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea)::placeholder { color: var(--black-color08); font-weight: 400; }
        #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea):focus {background: var(--point-white); border-color: var(--point-color01);}

    /*title*/
        .page_title{text-align: center;font-size: var(--text-50);color: var(--black-color03);font-weight: 500;margin-bottom:var(--row-gap50);}

    /* === sub_btn === */ 
		#wrap .view_btn {position: relative; margin-top: var(--row-gap60);}
		#wrap .btn_wrap {text-align: center;}
			#wrap .btn_wrap.ta_right {text-align: right;}
		#wrap .sub_btn { position: relative; display:inline-flex; align-items:center; justify-content: center; width:clamp(145px, 20vw, 200px); height:clamp(40px, 5vw, 50px); font-size:var(--text-18); font-weight:600; color:var(--point-color01); border:1px solid var(--point-color01); padding:0 var(--col-gap24); transition:all 0.3s ease-out; overflow: hidden; }
		#wrap .sub_btn:before { content:""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--point-color01); transition:all 0.3s ease-out; z-index:-1; }
		#wrap .sub_btn span { font-size: inherit; font-weight: inherit; color: inherit; }
			
		/* over */
			@media (hover:hover) and (pointer:fine) {
				#wrap .sub_btn:hover { color:var(--point-white); border-color:var(--point-color01); }
				#wrap .sub_btn:hover:before { width: 100%; }
			}

		@media (max-width:1023px) {
			#wrap .write_btn {width:clamp(125px, 15vw, 160px);}
		}

/*───────────────────────────────────────────────────────────

	Board
	
───────────────────────────────────────────────────────────*/
	/* === search === */
		#wrap .search_wrap{margin-bottom:var(--row-gap40);}
		#wrap .search_wrap .inp_box {display: flex; justify-content:center; gap: 10px; width: 100%;}
		#wrap .search_wrap .inp_box [type="text"]{width: 360px;}
		#wrap .search_wrap .inp_box button{width:clamp(40px, 5vw, 50px);aspect-ratio:auto 1;background:var(--black-color01) url('/images/ico_search.svg') no-repeat center / clamp(16px, 2vw, 22px) auto;box-sizing:border-box;font-size:0;}
	
	/* === paging === */
		#wrap .paging {position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; justify-content: center; align-items: center; width: max-content; text-align:center;}
		#wrap .paging span {display:inline-block;vertical-align:top;}
		#wrap .paging a {box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-17);font-weight: 500;color:var(--black-color08);padding:0;border:0;box-sizing:border-box;width:clamp(30px, 4vw, 40px);height:clamp(30px, 4vw, 40px);line-height:1;min-width:auto;text-align:center;vertical-align:top;margin:0 5px;}
		#wrap .paging :is(.on a, a.on){background:var(--black-color01);color:var(--point-white);font-weight:600;}
		#wrap .paging .arrow a {font-size:0;width:clamp(20px, 3vw, 30px); background:no-repeat center; }
		#wrap .paging .arrow.first a {background-image:url("/images/paging_first.svg");}
		#wrap .paging .arrow.prev a {background-image:url("/images/paging_prev.svg"); margin-right: 10px;}
		#wrap .paging .arrow.next a {background-image:url("/images/paging_next.svg"); margin-left: 10px;}
		#wrap .paging .arrow.last a {background-image:url("/images/paging_last.svg");}

		@media (max-width:860px) {
			#wrap .paging {position: relative; left: inherit; top: inherit; translate: 0; width: 100%;}
			#wrap .paging + .btn_wrap {margin-top: var(--row-gap40);}
		}
	
	
	/* === list === */
		/* 일반 */
			#wrap .nodata {width: 100% !important; text-align:center !important; min-height: clamp(140px, 14.58vw, 280px);}
			#wrap .bbs_table {position: relative; width: 100%; table-layout: fixed; font-size: var(--text-20); border-top: 1px solid var(--black-color01);}
			#wrap .bbs_table :where(th, td){line-height: 1.3;border-bottom: 1px solid var(--border-color01);padding: 26px 10px;text-align: center;}
			#wrap .bbs_table th{font-size:100%; font-weight: 500; color: var(--black-color01);}
			#wrap .bbs_table td{font-size:90%;font-weight: 400; color: var(--black-color08);}
			#wrap .bbs_table td.left{font-size:100%;text-align: left; padding-inline: var(--row-gap20); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all;color:var(--black-color03);font-weight:400;}
			#wrap .bbs_table .notice td.left{font-weight:500;}
			#wrap .bbs_table .notice .tag{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;font-size:var(--text-16);color:var(--point-white);font-weight:600;background:var(--point-color01);padding:10px 20px 9px;line-height:1;}
				#wrap .bbs_table .for_t {display: none;}

                /* over */
                @media (hover:hover) and (pointer:fine) {
                    #wrap .bbs_table tr:not(:has(.nodata)):hover {background: var(--gray-bg01);}
                }

				
			@media (max-width:1023px) {
				#wrap .bbs_table .notice .tag{padding:6px 14px 5px;}
			}
			@media (max-width:860px) {
				#wrap .bbs_table{display: block;}
				#wrap .bbs_table thead{display: none;}
				#wrap .bbs_table :where(tbody, tr, th, td){display: block; width: 100%; border:0; padding:0; text-align: left;}
				#wrap .bbs_table tr{padding:var(--row-gap25);display: flex;flex-wrap: wrap;gap: var(--row-gap10) var(--row-gap20);border-bottom: 1px solid var(--border-color01);}
				#wrap .bbs_table td{width: auto;}
				#wrap .bbs_table td.left{width: 100%; padding: 0;}
				#wrap .bbs_table td.num{display: none;}
					#wrap .bbs_table .for_t {display: inline-block;}
			}
	
		/* 갤러리 */
			#wrap .bbs_gallery .nodata {display: flex; justify-content: center; align-items: center;}
			#wrap .bbs_gallery{width:100%; display:grid; grid-template-columns:var(--grid-array04); gap:var(--col-gap60) var(--col-gap30);}
				#wrap .bbs_gallery:has(.nodata) {grid-template-columns:var(--grid-array01);}
			#wrap .bbs_gallery li {width:100%;position: relative;}
				#wrap .bbs_gallery li.nodata {box-sizing:border-box;border-radius:var(--radius-15);border:1px solid var(--border-color01);padding:var(--row-gap30);}
			#wrap .bbs_gallery li a, #wrap .bbs_gallery li .trigger {display:block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:3;}
			#wrap .bbs_gallery li .thumb{position: relative;overflow:clip;box-sizing:border-box;border-radius:var(--radius-15);border:1px solid var(--border-color01);padding:var(--row-gap30);width:100%;aspect-ratio:auto 0.72;transition:all 0.3s;}
			#wrap .bbs_gallery li .thumb img{width:100%;height:100%;object-fit:cover;}
			#wrap .bbs_gallery li .txt_info{display: flex; flex-direction: column; gap: var(--col-gap20); margin-top: var(--col-gap20);}
			#wrap .bbs_gallery li .txt_info h4{font-size:var(--text-20);color:var(--black-color03);font-weight:500;line-height:1.5;width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
			#wrap .bbs_gallery li .txt_info .date{font-size: var(--text-16); color: var(--black-color08);}
			
			/* over */
				@media (hover:hover) and (pointer:fine) {
					#wrap .bbs_table tr:not(:has(.nodata)):hover {background: var(--gray-bg01);}
				}
			
			#galleryModal {position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; top: 0; left: 0; z-index: 100; opacity: 0; pointer-events: none;}
				#galleryModal.on {opacity: 1; pointer-events: initial;}
			#galleryModal .modal_cont {max-width: 460px; max-height: 85%; width: calc(100% - 60px); background: var(--point-white); border-radius: var(--radius-15); padding: var(--point-white); position: relative; padding: var(--row-gap60); overflow: hidden; overflow-y: scroll;}
			#galleryModal .modal_cont #galleryModalClose {position: absolute; top: var(--row-gap15); right: var(--row-gap15);}
			#galleryModal .modal_cont .cont_box {width: 100%; height: 100%; text-align:center;}
			#galleryModal .modal_cont .cont_box .thumb {width: 100%;}
			#galleryModal .modal_cont .cont_box .thumb img {width: 100%; height: 100%; object-fit: cover;}
			#galleryModalTitle {font-size: var(--text-20);color: var(--black-color03);font-weight: 500;line-height: 1.5;}
			
			@media (max-width:1200px) {
				#wrap .bbs_gallery {grid-template-columns:var(--grid-array03);}
			}
			@media (max-width:860px) {
				#wrap .bbs_gallery {grid-template-columns:var(--grid-array02);}
			}
			@media (max-width:479px) {
				#wrap .bbs_gallery {grid-template-columns:repeat(2, 1fr);}
			}

		/*faq*/
			.faq_box{border-top:2px solid var(--black-color03);}
			.faq_box ul{display: flex;flex-direction: column;}
			.faq_box .faq-toggle{border-bottom:1px solid var(--border-color01);padding:clamp(15px, 2.2vw, 25px) var(--row-gap30);display: flex;align-items: center;gap:var(--row-gap20);width:100%;position: relative;}
			.faq_box .mark{display: inline-flex;border-radius:100%;width:clamp(30px, 4vw, 40px);aspect-ratio:auto 1;align-items: center;justify-content: center;background:var(--point-white);border:1px solid var(--point-color01);font-size:var(--text-20);color:var(--point-color01);font-weight:500;text-align: center;flex-shrink:0;}
				.faq_box .a_box .mark{border-color:var(--point-white);}
			.faq_box .faq-toggle:after{width:clamp(7px, 1vw, 10px);aspect-ratio:auto 1;content:"";border:2px solid var(--black-color06);border-width:2px 2px 0 0;rotate:135deg;display: inline-block;position: absolute;right:var(--row-gap30);top:47%;translate:0 -50%;}
			.faq_box .faq-toggle p{font-size:var(--text-20);color:var(--black-color03);font-weight:400;max-width:calc(100% - var(--row-gap80));text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:1;text-align:left;}
			.faq_box .faq-toggle.on .mark{background:var(--point-color01);color:var(--point-white);}
				.faq_box .faq-toggle.on p{font-weight:500;}
				.faq_box .faq-toggle.on:after{scale:-1 -1;top:53%;border-color:var(--point-color01);}
			.faq_box .a_box{display: none;}
			.faq_content{background:var(--gray-bg01);border-bottom:1px solid var(--border-color01);padding:var(--row-gap30);display: flex;align-items: flex-start;gap:var(--row-gap20);}
			.faq_content div{font-size:var(--text-18);color:var(--black-color04);font-weight:400;line-height:1.8;margin-top:5px;}

		
		
	/* === view === */
		#wrap .bbs_view .view_tit{display: flex;flex-direction: column;gap:var(--row-gap30);box-sizing:border-box;padding-bottom:var(--row-gap40);border-bottom:1px solid var(--border-color01);align-items: flex-start;}
		#wrap .bbs_view .view_tit h4{display: flex;align-items:center;gap:var(--row-gap20);}
		#wrap .bbs_view .view_tit h4 .tag{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;font-size:var(--text-16);color:var(--point-white);font-weight:600;background:var(--point-color01);padding:clamp(6px, 1vw, 10px) clamp(10px, 2vw, 20px) clamp(5px, 0.5vw, 9px);border-radius:6px;line-height:1;}
		#wrap .bbs_view .view_tit h4 strong{color:var(--black-color03);font-weight:600;line-height:1.4;font-size:var(--text-34);}
		#wrap .bbs_view .view_tit .name_box{display: flex;align-items: center;gap:40px;}
		#wrap .bbs_view .view_tit .name_box dl{display: flex;align-items: center;gap:16px;position: relative;}
		#wrap .bbs_view .view_tit .name_box dl + dl:before{width:1px;height:12px;content:"";background:var(--border-color01);display: inline-block;position: absolute;left:-20px;top:50%;translate:0 -50%;}
		#wrap .bbs_view .view_tit .name_box :where(dt, dd) {font-size:var(--text-18);font-weight:500;font-family:var(--font-type03);}
		#wrap .bbs_view .view_tit .name_box dt{color:var(--black-color06);}
		#wrap .bbs_view .view_tit .name_box dd{color:var(--black-color08);}
		#wrap .bbs_view div.view_cont{border-bottom:1px solid var(--border-color01);padding:40px 0;}
		#wrap .bbs_view .extra_editor_wrap{display: flex;box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);align-items: center;padding:clamp(12px, 2.2vw, 27px) 0;border:none;margin-top:40px;}
		#wrap .bbs_view .extra_editor_wrap h5, #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont {display: block;font-size:var(--text-18);padding:0;}
		#wrap .bbs_view .extra_editor_wrap h5 {text-align: center;color:var(--black-color03);font-weight:500;width:clamp(120px, 15vw, 180px);flex-shrink:0;background:none;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont{box-sizing:border-box;padding:0 30px 0 60px;position: relative;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);display: inline-block;position: absolute;left:0;top:50%;translate:0 -50%;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont a{font-size:var(--text-18);color:var(--black-color06) !important;font-weight:400;}
		
	/* === write === */
		#wrap .bbs_write { box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--row-gap30); padding-block: var(--row-gap40); border-top: 1px solid var(--black-color00); border-bottom: 1px solid var(--border-color01); }
		#wrap .bbs_write .line2 { gap: var(--row-gap60); }
		#wrap .bbs_write dl { display: flex; flex-wrap: wrap; width: 100%; align-items: center; box-sizing: border-box; }
		#wrap .bbs_write dl dt { width: clamp(140px, 12vw, 180px); box-sizing: border-box; padding-right: 15px; padding-left: 2px; color: var(--black-color03); font-weight: 500; font-size: var(--text-20); letter-spacing: -0.03em; }
		#wrap .bbs_write dl dd { width: calc(100% - clamp(140px, 12vw, 180px)); display: flex; align-items: center; gap: 10px; }
		#wrap .req .require_dot { color: var(--point-color02); }
		#wrap dl dt:not(.req) .require_dot{display: none;}
		#wrap .bbs_write .bbs_file dd{flex-direction: column;align-items: flex-start;}
		#wrap .bbs_file input[type="file"]{display: none;}
		#wrap .bbs_file .file_box{display: flex;align-items: center;gap:var(--row-gap10);}
		#wrap .bbs_file .file_btn{display: inline-flex;align-items: center;justify-content: center;height:clamp(48px, 6vw, 60px);border:1px solid var(--border-color01);font-size:var(--text-18);color:var(--black-color03);font-weight:500;cursor:pointer;width:clamp(100px, 13vw, 130px);}
		#wrap .captcha_wrap {display: flex; gap: 10px; padding: 10px; width: 170px;box-shadow: inset 0 0 0 1px var(--border-color01);box-sizing: border-box;}
		#wrap .captcha input[type="text"] {width: calc(100% - 180px);}
		#wrap .db-captcha-img {width:100px;}
		#wrap .db-captcha-refresh {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: var(--black-color08);}
		#wrap .db-captcha-refresh svg, .db-captcha-refresh path {stroke: #fff;}
		#wrap .policy_wrap {padding-block: var(--row-gap40) 0;margin:0;}
		#wrap .policy_wrap button {text-decoration: underline; text-underline-offset: 4px;}
		
		@media (max-width:1023px) {
			#wrap .captcha dd {flex-wrap: wrap;}
			#wrap .captcha input[type="text"] {width: 100%;}
		}
		@media (max-width:860px) {
			#wrap .captcha_wrap {width: 151px; height: 50px; padding: 6px; gap: 6px;}
			#wrap .db-captcha-refresh {width: 38px; height: 38px;}
			#wrap .bbs_write .line2 {gap: var(--row-gap30); grid-template-columns: var(--grid-array01);}
			#wrap .bbs_write dl dt { width: clamp(120px, 17.58vw, 180px);}
			#wrap .bbs_write dl dd { width: calc(100% - clamp(120px, 17.58vw, 180px));}
		}
		@media (max-width:479px) {
			#wrap .bbs_write {gap: var(--row-gap35);}
			#wrap .bbs_write dl {align-items: flex-start; flex-direction: column; gap: 10px;}
			#wrap .bbs_write dl dt, #wrap .bbs_write dl dd {width: 100%;}
		}
	
	/* === complete === */
		#wrap .complete_box {width:100%;box-sizing:border-box;border:1px solid var(--border-color01);text-align: center;padding:var(--row-gap60);border-radius:var(--radius-15);}
		#wrap .complete_box .chk_ico{width: var(--row-gap70); height: var(--row-gap70); margin: 0 auto; background-color: var(--gray-bg01);}
		#wrap .complete_box .chk_ico .text-green-600 {color: var(--point-color01);}
		#wrap .complete_box h4 {font-size:var(--text-28);color:var(--black-color03);font-weight:600;margin-top: var(--row-gap30);}
		#wrap .complete_box p {font-size:var(--text-20);color:var(--black-color05);margin-top: var(--row-gap20);}
		#wrap .complete_box .view_btn {margin-top: var(--row-gap50);}
		
		@media (max-width:1023px) {
			#wrap .complete_box .chk_ico {width: var(--row-gap95); height: var(--row-gap95);}
		}
		
		
/* 시스템 내 타 요소와 디자인 충돌 방지를 위한 격리 스타일 */

.issoft-page-wrap {

--issoft-primary: #0056b3;

--issoft-primary-dark: #003d80;

--issoft-secondary: #4a5568;

--issoft-bg-light: #f8fafc;

--issoft-bg-white: #ffffff;

--issoft-text-dark: #0f172a;

--issoft-text-muted: #64748b;

--issoft-border: #e2e8f0;

--issoft-accent: #e0f2fe;

 

font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;

color: var(--issoft-text-dark);

background-color: var(--issoft-bg-white);

line-height: 1.7;

padding: 20px 0;

display: block !important;

opacity: 1 !important;

visibility: visible !important;

}

 

.issoft-page-wrap * {

box-sizing: border-box;

margin: 0;

padding: 0;

}

 

/* 레이아웃 컨테이너 */

.issoft-page-wrap .content-container {

max-width: 1200px;

margin: 0 auto;

padding: 0 24px;

}

 

/* 섹션 공통 */

.issoft-page-wrap .section {

padding: 80px 0;

display: block !important;

}

.issoft-page-wrap .bg-light {

background-color: var(--issoft-bg-light);

}

.issoft-page-wrap .section-title {

font-size: 2.2rem;

font-weight: 800;

margin-bottom: 16px;

position: relative;

display: inline-block;

letter-spacing: -0.5px;

color: var(--issoft-text-dark);

}

.issoft-page-wrap .section-title::after {

content: '';

position: absolute;

bottom: -8px;

left: 0;

width: 44px;

height: 4px;

background-color: var(--issoft-primary);

border-radius: 2px;

}

.issoft-page-wrap .section-desc {

color: var(--issoft-text-muted);

font-size: 1.1rem;

margin-bottom: 50px;

}

 

/* 상단 타이틀 섹션 */

.issoft-page-wrap .intro-wrapper {

display: flex;

gap: 60px;

align-items: flex-start;

}

.issoft-page-wrap .intro-title-area {

flex: 1;

}

.issoft-page-wrap .intro-desc-area {

flex: 1.5;

}

.issoft-page-wrap .sub-title {

font-size: 0.95rem;

color: var(--issoft-primary);

text-transform: uppercase;

font-weight: 700;

letter-spacing: 1px;

display: block;

margin-bottom: 12px;

}

.issoft-page-wrap .main-heading {

font-size: 3.8rem;

line-height: 1.2;

font-weight: 800;

color: var(--issoft-text-dark);

letter-spacing: -1.5px;

}

.issoft-page-wrap .highlight-text {

font-size: 1.3rem;

font-weight: 600;

color: #1e293b;

margin-bottom: 24px;

line-height: 1.7;

}

 

/* ===================================================

모던 하이엔드 버티컬 타임라인 (Vertical Timeline) CSS

=================================================== */

.issoft-page-wrap .timeline-container {

position: relative;

padding-left: 40px;

margin-top: 20px;

}

 

/* 중앙 중심축 버티컬 라인 */

.issoft-page-wrap .timeline-container::before {

content: '';

position: absolute;

left: 6px;

top: 10px;

bottom: 10px;

width: 3px;

background: linear-gradient(to bottom, var(--issoft-primary) 0%, var(--issoft-border) 100%);

border-radius: 2px;

}

 

/* 타임라인 개별 연도 노드 블록 */

.issoft-page-wrap .timeline-node {

position: relative;

margin-bottom: 48px;

}

.issoft-page-wrap .timeline-node:last-child {

margin-bottom: 0;

}

 

/* 라인 위의 정밀 인디케이터 점(Dot) */

.issoft-page-wrap .timeline-dot {

position: absolute;

left: -40px;

top: 8px;

width: 15px;

height: 15px;

background-color: var(--issoft-bg-white);

border: 4px solid var(--issoft-primary);

border-radius: 50%;

z-index: 2;

}

/* 최신 연도 도트 강조 효과 */

.issoft-page-wrap .timeline-node:first-child .timeline-dot {

background-color: var(--issoft-primary);

box-shadow: 0 0 0 5px var(--issoft-accent);

}

 

/* 내부 콘텐츠 구조 바디 */

.issoft-page-wrap .timeline-body {

display: flex;

align-items: flex-start;

gap: 32px;

}

 

/* 연도 텍스트 뱃지 */

.issoft-page-wrap .timeline-year {

font-size: 1.8rem;

font-weight: 900;

color: var(--issoft-primary);

width: 140px;

flex-shrink: 0;

line-height: 1.2;

letter-spacing: -0.5px;

}

.issoft-page-wrap .timeline-node:first-child .timeline-year {

color: var(--issoft-primary-dark);

position: relative;

}

 

/* 성과 내역 카드 내부 박스 */

.issoft-page-wrap .timeline-card {

background: var(--issoft-bg-white);

border: 1px solid var(--issoft-border);

border-radius: 14px;

padding: 24px 32px;

flex-grow: 1;

box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01), 0 2px 4px -1px rgba(0,0,0,0.005);

text-align: left;

}

 

/* 성과 불릿 리스트 */

.issoft-page-wrap .achievement-list {

list-style: none;

}

.issoft-page-wrap .achievement-item {

position: relative;

padding-left: 16px;

margin-bottom: 10px;

font-size: 1.05rem;

color: var(--issoft-secondary);

font-weight: 500;

word-break: keep-all;

}

.issoft-page-wrap .achievement-item:last-child {

margin-bottom: 0;

}

/* 항목 커스텀 불릿 스퀘어 */

.issoft-page-wrap .achievement-item::before {

content: '';

position: absolute;

left: 0;

top: 11px;

width: 5px;

height: 5px;

background-color: var(--issoft-text-muted);

border-radius: 1px;

}

.issoft-page-wrap .timeline-node:first-child .achievement-item::before {

background-color: var(--issoft-primary);

}

.issoft-page-wrap .timeline-node:first-child .achievement-item {

color: var(--issoft-text-dark);

}

 

/* 반응형 디바이스 화면 설정 */

@media (max-width: 992px) {

.issoft-page-wrap .intro-wrapper { flex-direction: column; gap: 32px; }

.issoft-page-wrap .main-heading { font-size: 3rem; }

}

@media (max-width: 768px) {

.issoft-page-wrap .section { padding: 50px 0; }

.issoft-page-wrap .timeline-body { flex-direction: column; gap: 8px; }

.issoft-page-wrap .timeline-year { width: auto; font-size: 1.6rem; }

.issoft-page-wrap .timeline-card { padding: 20px 24px; }

}

@media (max-width: 576px) {

.issoft-page-wrap .main-heading { font-size: 2.4rem; }

.issoft-page-wrap .timeline-container { padding-left: 28px; }

.issoft-page-wrap .timeline-dot { left: -28px; }

.issoft-page-wrap .timeline-container::before { left: 4px; }

}

/* 개별 사업장 카드 컴포넌트 */

.issoft-page-wrap .location-card {

background: var(--issoft-bg-white);

border-radius: 16px;

padding: 40px;

box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.01);

border: 1px solid var(--issoft-border);

}

.issoft-page-wrap .card-header-zone {

margin-bottom: 24px;

}

.issoft-page-wrap .loc-badge {

background-color: var(--issoft-accent);

color: var(--issoft-primary);

font-weight: 700;

font-size: 0.85rem;

padding: 4px 12px;

border-radius: 20px;

display: inline-block;

margin-bottom: 14px;

}

.issoft-page-wrap .location-card h3 {

font-size: 1.6rem;

font-weight: 800;

color: var(--issoft-text-dark);

letter-spacing: -0.5px;

}

 

/* 주소 및 연락처 상세 안내 바 */

.issoft-page-wrap .info-list {

list-style: none;

margin-bottom: 30px;

}

.issoft-page-wrap .info-item {

display: flex;

padding: 12px 0;

border-bottom: 1px dashed var(--issoft-border);

align-items: flex-start;

font-size: 1.05rem;

}

.issoft-page-wrap .info-item:last-child {

border-bottom: none;

}

.issoft-page-wrap .info-item .label {

width: 120px;

font-weight: 700;

color: var(--issoft-text-dark);

flex-shrink: 0;

}

.issoft-page-wrap .info-item .value {

color: var(--issoft-secondary);

word-break: keep-all;

}

/* 웹사이트 링크 버튼 */

.issoft-page-wrap .web-link {

display: inline-block;

margin-top: 8px;

color: var(--issoft-primary);

font-weight: 700;

text-decoration: none;

}

.issoft-page-wrap .web-link:hover {

text-decoration: underline;

}

 

/* 지도 영역 박스 레이아웃 */

.issoft-page-wrap .map-container-box {

width: 100%;

height: 340px;

background-color: #f1f5f9;

border-radius: 12px;

border: 1px solid var(--issoft-border);

overflow: hidden;

position: relative;

}

.issoft-page-wrap .map-container-box iframe {

display: block;

width: 100%;

height: 100%;

border: 0;

}

 

/* ===================================================

Pure CSS 5단 Tab System 구조 스타일링 (No Javascript)

=================================================== */

.issoft-page-wrap input[name="branch-tabs"] {

display: none !important;

}

 

/* 5칸 균등 배분을 위한 그리드 메뉴 */

.issoft-page-wrap .tab-menu-wrapper {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

margin-bottom: 32px;

}

 

.issoft-page-wrap .tab-label {

display: flex;

align-items: center;

justify-content: center;

padding: 18px 8px;

background-color: var(--issoft-bg-white);

border: 1px solid var(--issoft-border);

border-radius: 10px;

font-weight: 700;

font-size: 1rem;

color: var(--issoft-secondary);

cursor: pointer;

text-align: center;

transition: all 0.3s ease;

word-break: keep-all;

}

 

.issoft-page-wrap .tab-label:hover {

background-color: #f1f5f9;

color: var(--issoft-text-dark);

}

 

/* 탭 콘텐츠 컨테이너 */

.issoft-page-wrap .tab-panels-container {

position: relative;

width: 100%;

}

 

.issoft-page-wrap .tab-panel-item {

display: none;

width: 100%;

}

 

/* 라디오 탭 활성화 매핑 코드 */

#branch-tab-1:checked ~ .tab-menu-wrapper label[for="branch-tab-1"],

#branch-tab-2:checked ~ .tab-menu-wrapper label[for="branch-tab-2"],

#branch-tab-3:checked ~ .tab-menu-wrapper label[for="branch-tab-3"],

#branch-tab-4:checked ~ .tab-menu-wrapper label[for="branch-tab-4"],

#branch-tab-5:checked ~ .tab-menu-wrapper label[for="branch-tab-5"] {

background-color: var(--issoft-primary);

color: var(--issoft-bg-white);

border-color: var(--issoft-primary);

box-shadow: 0 4px 12px rgba(0, 86, 179, 0.15);

}

 

#branch-tab-1:checked ~ .tab-panels-container .panel-1,

#branch-tab-2:checked ~ .tab-panels-container .panel-2,

#branch-tab-3:checked ~ .tab-panels-container .panel-3,

#branch-tab-4:checked ~ .tab-panels-container .panel-4,

#branch-tab-5:checked ~ .tab-panels-container .panel-5 {

display: block !important;

}

 

/* 해상도별 반응형 레이아웃 분기 */

@media (max-width: 1024px) {

.issoft-page-wrap .tab-menu-wrapper { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 992px) {

.issoft-page-wrap .intro-wrapper { flex-direction: column; gap: 32px; }

.issoft-page-wrap .main-heading { font-size: 3rem; }

}

@media (max-width: 768px) {

.issoft-page-wrap .section { padding: 50px 0; }

.issoft-page-wrap .location-card { padding: 28px; }

.issoft-page-wrap .map-container-box { height: 260px; }

.issoft-page-wrap .tab-label { font-size: 0.95rem; padding: 14px 6px; }

.issoft-page-wrap .tab-menu-wrapper { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 576px) {

.issoft-page-wrap .main-heading { font-size: 2.4rem; }

.issoft-page-wrap .info-item { flex-direction: column; gap: 4px; }

.issoft-page-wrap .info-item .label { width: 100%; }

.issoft-page-wrap .tab-menu-wrapper { grid-template-columns: 1fr; }

}

/*───────────────────────────────────────────────────────────
	제품
───────────────────────────────────────────────────────────*/
    /*list*/
        .search_top{display: flex;align-items: center;justify-content:flex-end;gap:var(--row-gap20);}
        .search_top .goods_down{display: flex;gap:var(--row-gap10);flex-shrink:0;}
        .search_top .goods_down a{display: inline-flex;align-items: center;justify-content: center;height:clamp(42px, 5vw, 50px);padding-inline:var(--row-gap20);gap:clamp(10px, 1.2vw, 14px);font-size:var(--text-18);color:var(--black-color03);font-weight:500;border:1px solid var(--black-color00)}
        .search_top .goods_down a:after{width:clamp(14px, 1.8vw, 18px);aspect-ratio:auto 1;content:"";background:url('/images/ico_down.svg')no-repeat center / auto 100%;display: inline-block;}

        .search_container{justify-content: flex-end;}
        .search_box{width:clamp(200px, 38vw, 380px);border:1px solid var(--border-color01);height:clamp(42px, 5vw, 50px);display: flex;align-items: center;}
        .search_box input[type="text"]{height:100%;border:none;width:100%;}
        .search_box button{width:clamp(40px, 5vw, 50px);aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;flex-shrink:0;background:var(--point-color01);}
        .search_box button img{width:clamp(20px, 2.4vw, 24px);}
        

            /* over */
            @media (hover:hover) and (pointer:fine){
                .search_top .goods_down a:hover{background:var(--point-color01);;border-color:var(--point-color01);color:var(--point-white);}
                .search_top .goods_down a:hover:after{filter:var(--filter-white);}
            }

        @media (max-width:640px) {
            .search_top{flex-direction: column;align-items: flex-start;gap:var(--row-gap40);}
            .search_container{width:100%;justify-content: flex-start;}
            .search_box{width:100%;}
            .search_box button img{translate:0;}
        }
        @media (max-width:350px) {
            .search_top .goods_down{flex-direction:column;width:100%;}
            .search_top .goods_down a{width:100%;}
        }

        .prd_cate{margin-top:var(--row-gap30);padding-top:var(--row-gap50);border-top:1px solid var(--border-color01);}
        .prd_cate ul{display:flex;flex-wrap:wrap;justify-content: center;}
        .prd_cate ul li{width:calc(100% / 9);}
        .prd_cate ul li a{display: flex;flex-direction: column;gap:var(--row-gap10);align-items: center;padding:clamp(12px, 1.5vw, 18px) var(--row-gap10);font-size:var(--text-18);color:var(--black-color00);font-weight:400;line-height:1.4;}
        .prd_cate ul li a img{height:clamp(50px, 7vw, 70px);}

            /*on*/
            .prd_cate ul li.on{background:var(--point-color01);}
            .prd_cate ul li.on a{filter:var(--filter-white);font-weight:600;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .prd_cate ul li:not(.on):hover{background:var(--point-color01);}
                .prd_cate ul li:not(.on):hover a{filter:var(--filter-white);font-weight:600;}

            }
        
        @media (max-width:1023px) {
            .prd_cate ul li{width:calc(100% / 5);}
        }
        @media (max-width:479px) {
            .prd_cate ul li{width:calc(100% / 3);}
        }

        .prd_list{display: grid;gap:var(--row-gap60) clamp(15px, 3vw, 32px);grid-template-columns:repeat(4, 1fr);margin-top:var(--row-gap70);}
        .prd_list li .thumb{width:100%;aspect-ratio:auto 1;overflow:hidden;}
            .prd_list li .thumb img{transition:all 0.3s;}
        .prd_list li .info{margin-top:var(--row-gap20);display: flex;flex-direction: column;align-items: flex-start;gap:clamp(10px, 1.5vw, 16px);}
        .prd_list li .cate{display: inline-flex;border:1px solid var(--black-color08);height:clamp(24px, 3vw, 30px);padding-inline:clamp(4px, 0.6vw, 8px);font-size:var(--text-16);color:var(--black-color06);font-weight:400;align-items: center;justify-content: center;}
        .prd_list li .txt{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap10);}
            .prd_list li .txt .tit{font-size:var(--text-22);color:var(--black-color01);font-weight:500;line-height:1.6;}
            .prd_list li .txt .desc{font-size:var(--text-18);color:var(--black-color03);font-weight:400;line-height:1.6;text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
        .prd_list li .field_1{margin-top:4px;font-size:var(--text-17);color:var(--black-color07);font-weight:400;line-height:1.6;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .prd_list li:hover .thumb img{scale:1.1;}
            }

        @media (max-width:860px) {
            .prd_list{grid-template-columns:repeat(3, 1fr);}
        }
        @media (max-width:640px) {
            .prd_list{grid-template-columns:repeat(2, 1fr);}
        }

    /*view*/
        .prd_detail_top{display: flex;gap:var(--row-gap100);}
        .prd_thumb_box{width:45.7%;flex-shrink:0;}
        .prd_thumb_box .thumb{display: flex;flex-direction:column;gap:var(--row-gap20);}
        .prd_thumb_box .detail_img{width:100%;aspect-ratio:auto 1;border:1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;}
        .prd_thumb_box .swiper_box{position: relative;}
        .prd_thumb_box .detail_swiper{overflow:hidden;}
        .prd_thumb_box .swiper-slide{width:calc(20% - 8px);}
        .prd_thumb_box .swiper-slide button{width:100%;aspect-ratio:auto 1;border:1px solid transparent;}
            .prd_thumb_box .swiper-slide button.is-active{border-color:var(--black-color00)}
        .prd_thumb_box .swipe_arw{width:clamp(30px, 4vw, 40px);aspect-ratio:auto 1;position: absolute;top:50%;translate:0 -50%;left:-50px;display: flex;align-items: center;justify-content: center;}
            .prd_thumb_box .swipe_arw:before{width:40%;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color00);border-width:2px 2px 0 0;rotate:-135deg;translate:5px;}
        #wrap .prd_thumb_box .next{scale:-1 -1;left:auto;right:-50px;}

        .prd_detail_info{width:100%;display: flex;flex-direction:column;align-items: flex-start;gap:var(--row-gap30)}
        .prd_detail_info .title_box{display: flex;flex-direction:column;align-items: flex-start;gap:var(--row-gap30);gap:var(--row-gap10);}
            .prd_detail_info .title_box .cate{font-size:var(--text-16);color:var(--black-color06);font-weight:400;line-height:1.4;padding:4px clamp(5px, 0.6vw, 8px);border:1px solid var(--black-color08);}
            .prd_detail_info .title_box h3{margin-top:var(--row-gap10);font-size:var(--text-36);color:var(--black-color01);font-weight:500;line-height:1.6;}
            .prd_detail_info .title_box .desc{font-size:var(--text-20);color:var(--black-color03);font-weight:400;line-height:1.6;}
            .prd_detail_info .title_box .cnt{margin-top:var(--row-gap10);display: block;font-size:var(--text-17);color:var(--black-color07);font-weight:400;line-height:1.6;}
        .prd_detail_info .info_box{padding-top:var(--row-gap30);border-top:1px solid var(--black-color01);display:grid;gap:var(--row-gap20);width:100%;}
        .prd_detail_info .info_box dl{display: flex;align-items: center;gap:var(--row-gap20);font-size:var(--text-17);color:var(--black-color06);font-weight:400;line-height:1.5;}
        .prd_detail_info .info_box dl dt{width:clamp(80px, 10vw, 120px);flex-shrink:0;color:var(--black-color03);}

        @media (max-width:1500px) {
            .prd_thumb_box .swiper_box{padding-inline:30px;}
            .prd_thumb_box .swipe_arw{left:-10px;}
            #wrap .prd_thumb_box .next{right:-10px;}
        }
        @media (max-width:1023px) {
            .prd_detail_top{gap:var(--row-gap50)}
            .prd_thumb_box .swiper-slide{width:calc(100% / 3 - 7px);}
        }
        @media (max-width:640px) {
            .prd_detail_top{flex-direction:column;}
            .prd_thumb_box{width:100%;}
            .prd_thumb_box .swiper-slide{width:calc(25% - 8px);}
        }
    
        .detail_content_box{display: flex;flex-direction:column;gap:var(--row-gap60);}
        .detail_content_box h4{padding-bottom:var(--row-gap30);border-bottom:1px solid var(--border-color01);font-size:var(--text-36);color:var(--black-color00);font-weight:500;line-height:1.4;}
        .goods_detail_content{text-align: center;}