/* common */
.error {color:red; font-size:15px; font-weight:500;}
input.error {border:1px solid red !important;}
textarea:read-only {background-color:#f5f5f5}
.fvn {font-variant-numeric: tabular-nums;}
.ta_l {text-align:left !important;}

/* login */
.login { display: flex; justify-content: center; align-items: center; min-height: 100vh;}
.login .login_wrap {box-sizing: border-box; width: 460px; margin: 0 auto;}
.login .login_wrap .panel_item { border: 1px solid #dadce0; border-radius: 20px; background-color: #fff; padding: 2rem;}
.login .login_wrap .panel_item .id_pw_wrap input {font-size:16px;}
.login .login_wrap .panel_item .id_pw_wrap .input_row {position: relative; display: table; table-layout: fixed; width: 100%; height: 100%; padding: 14px 17px 13px; box-sizing: border-box; border: 1px solid #dadce0; text-align: left; }
.login .login_wrap .panel_item .id_pw_wrap .input_row:first-child {border-radius: 6px 6px 0 0; box-shadow: none;}
.login .login_wrap .panel_item .id_pw_wrap .input_row:last-child {border-radius: 0 0 6px 6px;}
.login .login_wrap .panel_item .id_pw_wrap .input_row+.input_row {margin-top: -1px;}
.login .login_wrap .panel_item .id_pw_wrap .input_row:focus {border: 1px solid #1d2088; z-index:5;}

.login_btn_wrap {margin-top: 40px;} 
.login_btn_wrap .login_btn {display: block; width: 100%; padding: 13px 0 13px; border-radius: 6px; border: solid 1px rgba(0,0,0,.15); background-color: #1d2088; box-sizing: border-box; cursor:pointer;}
.login_btn_wrap .login_btn .btn_text {font-size: 20px; font-weight: 600; line-height: 24px; color: #fff;}

.login_header {padding-bottom:40px; margin-top:20px;}
.login_header .logo {background:url(../images/logo/login_logo.png) no-repeat; background-size:180px 75px; width:180px; height:75px; display:block; margin:0 auto;}

/* article2 */
.article { padding:0 0 120px; }
.article_body{ width:100%; padding-top:10px;}
.article_inner{ width:100%; height:100%; position:relative; max-width:1400px; margin:0 auto; box-sizing:border-box}
.article_header .menu_name {padding:70px 0 50px; position: relative; background-color:#006ebd; background-image: url(/asset2/images/sub/sub_bg.jpg); background-position: center center; background-size: cover; background-attachment: fixed;}
.article_header .menu_name .wrap-narrow p {color: #FFFFFF; font-size: 40px; font-weight: bold; line-height: 58px;}
.article_header .page_name {background-color: #f6f6f6;}
.article_header .page_name .list_item_category {min-height:64px; overflow-x:auto;}
.article_header .page_name .list_item_category ul {display:flex; width: max-content;}
.article_header .page_name .list_item_category ul li a {line-height:64px; padding:0 18px; display:block; font-size:16px; font-weight:500; position:relative;}
.article_header .page_name .list_item_category ul li.active a {background-color:#fff; font-weight:600;}
.article_header .cate_name {text-align: center; font-size: 35px; padding-top: 20px; font-weight: 600;}
.article_header .cate_name .cate_sub_name {font-size: 30px; font-weight: 500;}

@media screen and (max-width:1600px){
	.article_inner { padding:0 5%;}
}

@media screen and ( max-width:959px ){
	.article { padding:0 0 60px; }
	.article_inner { padding:0 24px;}
/* 	.article_header .list_item_category li {width:auto;} */
/* 	.article_header .list_item_category li:not(.active) {display:none;} */
	.article_header .page_name .list_item_category ul li.on a:after {display:none;}
	.article_header .cate_name {font-size:36px;}
}
@media screen and ( max-width:479px ){
	.article_body{ padding-top:40px;}
	.article_inner { padding:0 16px;}
	.article_header .menu_name .wrap-narrow p {font-size:28px;}
	.article_header .cate_name {font-size:28px;}
	.article_header .cate_name .cate_sub_name {font-size: 22px;}
}

.controll_box2 {display:flex; background-color:#e5e5e5;}
.controll_box2 .ctr_head {width:50%; height:100px; line-height:100px; text-align:center; font-weight:500;}
.controll_box2 .ctr_head:hover {background-color:#c5c5c5;}
.controll_box2 .ctr_head a {display:block;}

@media screen and (max-width:1024px){
	.controll_box2 .ctr_head {height:60px; line-height:60px;}
	.controll_box2 .ctr_head a {font-size:16px;}
}

.dp_none {display:none;}
.hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
/* =========== */

/* ctr_wrap */
.ctr_wrap {display:flex; justify-content: space-between;}
.ctr_wrap .tot_page p {float:left; height: 38px; line-height: 38px; font-size: 16px; color: #111; margin-bottom:10px;}
.ctr_wrap .tot_page p span {font-weight:500; font-size:18px; color: #000;}
.ctr_wrap .search_wrap {width: auto; display: flex; justify-content: flex-end;}
.ctr_wrap .search_wrap .search_box {width: 200px; height: 38px; border: 1px solid #d1d1d1; box-sizing: border-box; border-radius: 50px; padding: 0 10px 0 16px; display: flex; align-items: center; background-color: #fff;}
.ctr_wrap .search_wrap .search_box input {width: calc(100% - 20px); margin-right: 10px; height: 36px; border: none; box-sizing: border-box; display: inline-block; font-size: 15px;}
.ctr_wrap .search_wrap .search_box .search_button { width: 38px; height: 38px; margin-right: 0; border: 0; background-color: transparent; text-align: center; line-height: 38px; }
.ctr_wrap .search_wrap .search_box .search_button:before {content: ""; width: 36px; height: 36px; display: block; background: url(../images/common/icon_search.svg) no-repeat center;}
.ctr_wrap .search_wrap .sel_box select {width: auto;  margin-right: 7px; font-size: 15px; color: #333; font-weight: 400; padding: 0 60px 0 16px; height: 38px; line-height: 38px; box-sizing: border-box; border: 1px solid #d1d1d1; background: url(../images/common/selArrow.png) no-repeat center right 15px #fff; border-radius: 50px; appearance: none;}
.ctr_wrap .search_wrap .sel_box select option {border-radius:0;}

.ctr_wrap2 {margin-bottom:30px; text-align:center;}
.ctr_wrap2 .search_wrap .sel_box {background-color:#1d2088; padding:4px; display:flex; justify-content:space-around; align-items:center;}
.ctr_wrap2 .search_wrap .sel_box select {padding:15px 40px 15px 15px; flex:1; font-size: 16px; font-weight:500; border:none; background: url(../images/common/selArrow.png) no-repeat center right 15px #fff; appearance: none; border-right:1px solid #ddd;}
.ctr_wrap2 .search_wrap .sel_box button {width:49px; height:49px; background-color:#1d2088; cursor:pointer; color:#fff; font-size:20px; display:flex; justify-content:center; align-items:center;}
.ctr_wrap2 .search_wrap .sel_box button i {color:#fff;}
.ctr_wrap2 .search_wrap input {padding:15px 40px 15px 15px; border-right: 1px solid #ddd; flex:1;}

.search_tb {border:1px solid #dedede; }
.search_tb th {background-color:#1d2088; color:#fff; font-weight:500; border:1px solid #1d2088; min-width:90px; vertical-align: middle;}
.search_tb td {padding:8px; border-bottom:1px solid #ededed;}
.search_tb tr:last-child td {border-bottom:none;}
.search_tb input {padding:0 8px; border:1px solid #ededed; height:36px;}
.search_tb select {padding:0 10px; border:1px solid #ededed; height:36px;}
.search_bt {display:flex; justify-content:center; margin:15px 0;}
.search_bt button:not(.excel_btn) {width:60px; height:40px; background-color:#1d2088; cursor:pointer; color:#fff; font-size:14px; display: inline-block; text-align: center; line-height: 40px; margin-right:5px; border-radius:20%;}
.search_bt button:hover:not(.excel_btn) {background-color:#4d50a7;}
.search_bt button i {color:#fff;}

@media screen and (max-width:1024px){
	.ctr_wrap .search_wrap .search_box { height:36px;}
	.ctr_wrap .search_wrap .search_box input { height:34px;}
	.ctr_wrap .search_wrap .search_box .search_button { width: 36px; height: 36px; }
	.ctr_wrap .search_wrap .search_box .search_button:before {width: 36px; height: 36px;}
	.ctr_wrap .search_wrap .sel_box select { height:36px; line-height:36px;}
}
@media screen and (max-width:780px){
	.ctr_wrap {display:flex; flex-direction: column;}
	.ctr_wrap .tot_page {order:2}
	.ctr_wrap .search_wrap {justify-content: flex-start; margin-bottom:10px; background-color:#f6f6f6; padding:15px; border-radius:20px;}
	.ctr_wrap .search_wrap .search_box {flex:1;}	
	.ctr_wrap .search_wrap .sel_box select {padding-right:40px;}
}
@media screen and (max-width:479px){
	.ctr_wrap .tot_page p {font-size:14px;}
	.ctr_wrap .search_wrap {border-radius:2px;}
	.ctr_wrap .search_wrap .sel_box select {border-radius:999px; margin-right:2px;} /* CR-010(C-2): 휴대폰 선택상자도 PC처럼 알약 (2px→) */
	.ctr_wrap .search_wrap .search_box {border-radius:999px;} /* CR-010(C-2): 휴대폰 검색창도 PC처럼 알약 (2px→) */
	.search_tb input {width:100%;}
}

/* comm_view */
.comm_view .view.bor_b {width:100%; border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;}
.comm_view .view .view_top {border-bottom: 1px solid #e2e2e2; padding: 26px 30px; position: relative; border-top: 2px solid #b6b6b6;}
.comm_view .view .view_top .view_tit {display: block; margin-bottom:8px; font-size: 26px; font-weight:600; line-height: 1.25; word-break: keep-all;}
.comm_view .view .view_top .view_etc {position:relative;}
.comm_view .view .view_top .view_etc p {color:#888; display:inline-block; margin-right:8px; padding-right:13px; position:relative;}
.comm_view .view .view_top .view_etc p:not(:last-child):after {content: ""; position: absolute; width: 1px; height: 11px; background:#b9b9b9; right: 0; transform: translateY(50%); }

.comm_view .view .view_con {padding:0 30px 45px 30px; min-height:400px;}
.comm_view .view .view_con .img_box {max-width: 900px; text-align: center; margin: 0 auto 10px auto;}
.comm_view .view .view_con .img_box:first-child {padding-top: 45px;}
.comm_view .view .view_con .txt_box {padding-top: 10px; font-family:"Noto Sans KR"; font-weight:300; line-height:28px;} 
.comm_view .view .view_con .txt_box:first-child {padding-top: 45px;} 

.comm_view .view .attach {position: relative; padding: 25px 50px 25px 180px; background: #f6f6f6; border-radius: 8px;}
.comm_view .view .attach:before {display: inline-block; width: 180px; content: "첨부파일"; text-align: center; left: 0px; top: 50%; transform: translate(0px, -50%); color: rgb(17, 17, 17); font-weight: 700; position: absolute;}
.comm_view .view .attach .attach_wrap {padding-left: 35px; border-left: 1px solid #e0e0e0; display: flex; gap:10px; line-height:30px;} 
.comm_view .view .attach .attach_wrap a:hover {text-decoration: underline;}
.comm_view .view .attach .attach_wrap input {border: none; background: none; color: #0f80fe; font-size: 16px; cursor: pointer;} 
.comm_view .view .attach .attach_wrap .attach_name img {margin-left: 10px; vertical-align: -2px;} 

.comm_view .view .controll_box {position:relative; margin-top: 30px; border-top: 1px solid #b6b6b6; border-bottom: 1px solid #b6b6b6; display:flex; flex-direction:column;}
.comm_view .view .controll_box .ctr_prev {border-bottom:1px solid #e2e2e2;}
.comm_view .view .controll_box .ctr_prev, .comm_view .view .controll_box .ctr_next {display: flex; align-items: center;}
.comm_view .view .controll_box .ctr_head {width: 20%; text-align:center;line-height:75px; font-weight:600; font-size:15px; position:relative; background-color:#fbfbfb;}
/* .comm_view .view .controll_box .ctr_head:after {content: ""; width: 1px; height: 27px; background: #e0e0e0; display: block; position: absolute; right: 0; top: 50%; margin-top: -12.5px; } */
.comm_view .view .controll_box .ctr_body {width: 80%; height:100%; }
.comm_view .view .controll_box .ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.comm_view .view .controll_box .ctr_body a {display:block; line-height:75px; padding-left: 24px; padding-right:80px;}
.comm_view .view .controll_box .ctr_body a:hover {text-decoration:underline;}

@media screen and (max-width:959px){
	.comm_view .view .view_top {padding: 24px 10px;}
	.comm_view .view .view_top .view_tit {font-size:24px;}
	.comm_view .view .view_con {padding:0 10px 24px 10px;}
	.comm_view .view .view_con .img_box:first-child {padding-top: 24px;}
	.comm_view .view .view_con .txt_box:first-child {padding-top: 24px;} 
	.comm_view .view .attach:before {left: 20px; top: 30px; width: 100%; text-align: left;}
	.comm_view .view .attach {padding: 45px 20px 20px 20px;}
	.comm_view .view .attach .attach_wrap {padding:5px 0; font-size: 16px; line-height: 18px; border:none;}
	.comm_view .view .controll_box .ctr_head {line-height:60px;}
	.comm_view .view .controll_box .ctr_body a {line-height:60px;}
}
@media screen and (max-width:479px){
	.comm_view .view .view_con {padding:0 5px 20px 5px;}
	.comm_view .view .view_top {padding: 20px 5px;}
	.comm_view .view .view_top .view_tit {font-size:22px; margin-bottom:5px;}
	.comm_view .view .view_con .img_box:first-child {padding-top:20px;}
	.comm_view .view .view_con .txt_box:first-child {padding-top:20px;}
}

/* const_view */
.const_view .view.bor_b {width:100%; border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;}
.const_view .view .view_top {/*border-bottom: 1px solid #e2e2e2;*/ padding: 26px 0 64px; margin-bottom:50px; position: relative; text-align:center;}
.const_view .view .view_top:after {content:""; position:absolute; width:1px; height:30px; background-color:#555; bottom:0; transform: translateX(-50%);}
.const_view .view .view_top .view_tit {display: block; margin-bottom:10px; font-size: 40px; font-weight:600; line-height: 1.25; word-break: keep-all;}
.const_view .view .view_top .view_etc {position:relative;}
.const_view .view .view_top .view_etc p {color:#888; display:inline-block; position:relative;}
.const_view .view .view_top .view_etc p:not(:last-child) {margin-right:8px; padding-right:13px;}
.const_view .view .view_top .view_etc p:not(:last-child):after {content: ""; position: absolute; width: 1px; height: 11px; background:#b9b9b9; right: 0; transform: translateY(50%); }

.const_view .view .view_con {padding:0 30px 45px 30px;}
.const_view .view .view_con .img_box {max-width: 900px; text-align: center; margin: 0 auto 10px auto;}
/* .const_view .view .view_con .img_box:first-child {padding-top: 45px;} */
.const_view .view .view_con .txt_box {padding-top: 10px;} 
.const_view .view .view_con .txt_box:first-child {padding-top: 45px;} 

.const_view .view .attach {position: relative; padding: 25px 50px 25px 180px; background: #f6f6f6; border-radius: 8px;}
.const_view .view .attach:before {display: inline-block; width: 180px; content: "첨부파일"; text-align: center; left: 0px; top: 50%; transform: translate(0px, -50%); color: rgb(17, 17, 17); font-weight: 700; position: absolute;}
.const_view .view .attach .attach_wrap {padding-left: 35px; border-left: 1px solid #e0e0e0; display: flex; gap:10px; line-height:30px;} 
.const_view .view .attach .attach_wrap a:hover {text-decoration: underline;}
.const_view .view .attach .attach_wrap input {border: none; background: none; color: #0f80fe; font-size: 16px; cursor: pointer;} 
.const_view .view .attach .attach_wrap .attach_name img {margin-left: 10px; vertical-align: -2px;} 

.const_view .controll_box {position:relative; margin-top: 30px; border-top: 1px solid #b6b6b6; border-bottom: 1px solid #b6b6b6; display:flex; flex-direction:column;}
.const_view .controll_box .ctr_prev {border-bottom:1px solid #e2e2e2;}
.const_view .controll_box .ctr_prev, .const_view .controll_box .ctr_next {display: flex; align-items: center;}
.const_view .controll_box .ctr_head {width: 20%; text-align:center;line-height:75px; font-weight:600; font-size:15px; position:relative; background-color:#fbfbfb;}
/* .const_view .controll_box .ctr_head:after {content: ""; width: 1px; height: 27px; background: #e0e0e0; display: block; position: absolute; right: 0; top: 50%; margin-top: -12.5px; } */
.const_view .controll_box .ctr_body {width: 80%; height:100%; }
.const_view .controll_box .ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.const_view .controll_box .ctr_body a {display:block; line-height:75px; padding-left: 24px; padding-right:80px;}
.const_view .controll_box .ctr_body a:hover {text-decoration:underline;}

@media screen and (max-width:959px){
	.const_view .view .view_top {padding: 24px 10px;}
	.const_view .view .view_top .view_tit {font-size:24px;}
	.const_view .view .view_con {padding:0 10px 24px 10px;}
	.const_view .view .view_con .img_box:first-child {padding-top: 24px;}
	.const_view .view .view_con .txt_box:first-child {padding-top: 24px;} 
	.const_view .view .attach:before {left: 20px; top: 30px; width: 100%; text-align: left;}
	.const_view .view .attach {padding: 45px 20px 20px 20px;}
	.const_view .view .attach .attach_wrap {padding:5px 0; font-size: 16px; line-height: 18px; border:none;}
	.const_view .controll_box .ctr_head {line-height:60px;}
	.const_view .controll_box .ctr_body a {line-height:60px;}
}
@media screen and (max-width:479px){
	.const_view .view .view_con {padding:0;}
	.const_view .view .view_top {padding: 20px 5px;}
	.const_view .view .view_top:after {bottom:-35px;}
	.const_view .view .view_top .view_tit {font-size:22px; margin-bottom:5px;}
	.const_view .view .view_con .img_box:first-child {padding-top:20px;}
	.const_view .view .view_con .txt_box:first-child {padding-top:20px;}
}

/* btn_box */
.btn_box {width: auto; margin-top: 30px; display: flex; justify-content: center;}
.btn_box .btn {height: 50px; line-height: 50px; margin-right: 7px; width: 155px; padding: 0 20px; font-size:16px; border-radius: 4px; border:1px solid #ddd; display: inline-block; text-align: center;}
.btn_box .btn:last-child {margin-right:0;}
.btn_box .btn:hover {background-color:#f6f6f6;}

/* btn_wrap */
.btn_wrap {display: flex; justify-content: center; margin-top: 30px; gap:7px;}
.btn_wrap button.btn {display: inline-block; padding: 0 22px; height: 40px; line-height: 40px; font-size: 16px; color: #fff; background-color: #0f62fe; border-radius: 999px; /* CR-010: 4px→알약 */ font-weight: 500; transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;}
.btn_wrap button.btn_list {display: inline-block; outline: none; font-weight: 500; border: 1px solid transparent; border-radius: 999px; /* CR-010: 2px→알약 */ height: 40px; line-height: 38x; font-size: 16px; color: #241c15; background-color: #efeeea; transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; padding: 0 22px;}
.btn_wrap button.btn:hover {background: #0054cf;}
.btn_wrap button.btn_list:hover {background: #d5d5d5;}

.btn_wrap2 {display:flex; justify-content:flex-end; margin-bottom:10px;}
.btn_wrap2 button.btn {display: inline-block; border-radius: 999px; /* CR-010: 4px→알약 */ box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%); background: #1d2088; padding: 7px 11px; min-width: 200px; font-size: 16px; font-weight: 500; color: #fff;}
.btn_wrap2 button.btn:hover{background: #0090d7; box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);}                

.btn_wrap3 {display: flex; justify-content: flex-end;}
.btn_wrap3 button.btn3 {display: inline-block; padding: 0 22px; height: 40px; line-height: 40px; min-width: 100px; color: #fff; background-color: #074EAD; /* CR-068(2차 18번 · 📷 승인): 남색 #1d2088 → 회사 파랑 */ border-radius: 999px; /* CR-010: 4px→알약 */ font-weight: 500; font-size: 16px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset; transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;}    
.btn_wrap3 button.btn3:hover {background: #073ebf;}

/* paging */
.paging_wrap {text-align:center;}
.paging_wrap ul { display: flex; justify-content: center; align-items: center;}
.paging_wrap ul li:not(:first-child) { margin-left: 10px;}
.paging_wrap ul li a { display: inline-block; text-align: center; width: 2rem; height: 2rem; line-height: 2rem; }
/* color:#b2b4b7 */
.paging_wrap ul li.active a { background-color: #000; color: #fff; border-radius:50px;}

/*pagination*/
.paginate {display:flex; justify-content: center; align-items: center; position:relative; overflow:hidden; margin-top:80px; gap:0 10px;}
/* #gall_page .paginate {width:30%; text-align:center; margin-top:300px; margin-left:360px; position:relative; overflow:hidden;} */
.paginate * {display:inline-block; vertical-align:middle; margin:0;}
.paginate a {padding:0 11px; color:#555;}
/* .paginate a, strong {margin-left:7px;} */
/* .paginate a.first {display:inline-block; margin-right:15px;} */
/* .paginate a.last{display:inline-block; margin-left:15px;} */
.paginate a:hover, .paginate a:active, .paginate a:focus {color:#ccc;}
.paginate strong {color:#fff; background:#000; width:30px; height:30px; line-height:30px; border-radius:50%; text-align:center; cursor: pointer;}
.paginate .dir {width:28px; height:28px; padding:0;}
.paginate .dir img {display:block;}

@media screen and (max-width:959px){
	.paginate {margin-top:60px;}
}
@media screen and (max-width:479px){
	.paging_wrap ul li:not(:first-child) { margin-left: 7px;}
	.paging_wrap ul li a { display: inline-block; text-align: center; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; }
	.paginate {margin-top:60px;}
}


/* ===================================================================================================== */
/* js_company */
.intro_box h2 {font-size:24px; font-weight:600; margin-bottom:30px; word-break:keep-all; line-height:1.4;}
.intro_box span {color:#031aba;}
/* 6-3 추가 1번(대표님 승인 10/1 · 수아 시안 greet halfleft): PC(960 이상) 인사말 글 칸을 지금 폭의 50% 로 · 왼쪽 정렬(가운데 아님) — 휴대폰은 그대로 */
@media screen and (min-width:960px){ .article_body .intro_box {max-width:50%;} }
.intro_box .stamp {margin-top:30px;}
.intro_box .stamp p {font-weight:500; display:inline-block; margin-left:5px;}
.js_company {position: fixed;
  top: 0;       
  left: 0;    
  width: 100%; 
  height: 100%; 
/*   background-image: url("img.jpg");  */
  background-size: cover;   
  background-position: center center;
  transform: translateZ(0);
  will-change: transform;}


@media screen and (max-width:1024px){
	.intro_box {flex-direction: column-reverse;}
	.intro_box .intro_cont {width:100%; margin:3rem 0 0 0;}
}
@media screen and (max-width:959px){
	.intro_box h2 {font-size:22px;}
}
@media screen and (max-width:479px){
	.intro_box h2 {font-size:20px;}
}

/* cop2 */
.brand_box .img_box img {width:100%;}
/* CR-036: PC(960px 이상)에서만 브랜드 사진을 본문 폭의 50%로 줄여 가운데. 959px 이하는 위 규칙 그대로(휴대폰은 화면 폭 — 사용자 결정).
   규칙을 사진이 아니라 사진 자리(상자)에 걸어, 편집 메뉴(CR-033)로 어떤 사진을 올려도 같게 동작한다.
   사진은 width:auto + max-width:100% 라 원본보다 크게 늘리지 않는다(작은 사진은 원래 크기로 가운데). 수아 명세 docs/design/ui-brand-resize.md */
@media screen and (min-width:960px){
	.brand_box .img_box {max-width:50%; margin-left:auto; margin-right:auto;}
	.brand_box .img_box img {width:auto; max-width:100%; height:auto; margin-left:auto; margin-right:auto;}
}

/* certi_list */
.gal_list3 {display:flex; flex-wrap:wrap; width:100%; gap: 100px 45px;}
.gal_list3 .certi_list_box {width:calc((100% - 180px)/5);}
.gal_list3 .certi_list_box:nth-child(4n) {margin-right:0;}
.gal_list3 .certi_list_img {width:100%;box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.gal_list3 .certi_list_img img {width:100%; height:auto; display:block; }
.gal_list3 .certi_list_tBox {margin-top:26px; text-align:center;}
.gal_list3 .certi_list_tit {overflow: hidden; word-break: keep-all;}
.gal_list3 .certi_list_box_link {display:block;}

@media screen and (max-width:1200px){
	.gal_list3 {gap: 80px 40px;}
	.gal_list3 .certi_list_box {width: calc((100% - 120px)/4);}
}
@media screen and (max-width:959px){
	.gal_list3 {gap: 60px 40px;}
	.gal_list3 .certi_list_box {width: calc((100% - 80px)/3);}
}
@media screen and (max-width:479px){
	.gal_list3 {gap: 50px 30px;}
	.gal_list3 .certi_list_box {width: calc((100% - 30px)/2);}
}

/* map */
/* CR-034 오시는길 지도 30%↓(수아 명세 2번 권장): 가로 최대 879px(=지금 1256의 70%)·가운데 — 주소·전화 줄도 지도 왼쪽 끝을 따라감. 휴대폰은 화면이 879보다 좁아 폭 그대로, 높이 560 은 js_location.jsp iframe 속성 */
.map {max-width:879px; margin:0 auto;}
.map iframe {width:100%;}
.map dl {display:flex; margin-top:20px;}
.map dt {font-weight: 600; color: #8caaf2;}
.map dd {padding:0 20px;}
.map .xi-maker {padding-right:3px; font-size:18px; top:1px; position:relative; color: #8caaf2;}
.map .xi-call {padding-right:3px; font-size:18px; top:2px; position:relative; color: #8caaf2;}

@media screen and (max-width:780px){
	.map dl{flex-direction: column;}
	.map dd {margin:10px 0;}
}

/* 議곕떖 젣 뭹 */
/* pd_list */
.gal_list {display:flex; flex-wrap:wrap; gap:100px 30px;}
.gal_list .pd_list_box {width: calc((100% - 90px)/4);}
.gal_list .pd_list_box:nth-child(4n) {margin-right:0;}
.gal_list .pd_list_box .pd_list_img {position: relative; overflow:hidden; width:100%; background-color: #f6f6f6; /*border: 1px solid #dadadd;*/ background-size: contain; border-radius:16px;}
.gal_list .pd_list_box .pd_list_img::after {content: ''; display: block; padding-bottom: 100%;}
.gal_list .pd_list_box .pd_list_img img {width:100%; position: absolute; left: 50%; top: 50%; object-fit: cover; transform: translate(-50%, -50%); padding: 16px;}
.gal_list .pd_list_box .pd_list_tBox {padding-top:42px; position:relative; width:100%;}
.gal_list .pd_list_box .pd_list_tBox p {position:absolute; top:0; left:0; color:#555; font-size:14px; line-height: 47px;}
.gal_list .pd_list_box .pd_list_tBox .pd_list_tit {font-size: 18px; font-weight: 500; overflow: hidden; word-break: keep-all; border-top:1px solid #dadadd; padding-top:6px;text-overflow: ellipsis; white-space: normal;}
.gal_list .pd_list_box .pd_list_tBox .pd_list_tit:after { content: ''; width: 0; height: 2px; position: absolute; top: 42px; right: 0; background: #222; transition: 0.4s;}
.gal_list .pd_list_box:hover .pd_list_tBox .pd_list_tit:after { width: 100%; right: auto; left: 0;}
.gal_list .pd_list_link {display:block;}

@media screen and (max-width:1200px){
	.gal_list .pd_list_box .pd_list_tBox .pd_list_tit {font-size: 16px; padding-top: 6px;}
}
@media screen and (max-width:959px){
	.gal_list .pd_list_box {width: calc((100% - 30px)/2);}
}
@media screen and (max-width:479px){
	.gal_list {gap:40px 14px;}
	.gal_list .pd_list_box {width:calc(50% - 7px); /*padding-bottom:26px; border-bottom:1px solid #ddd; margin-bottom:26px;*/}
	.gal_list .pd_list_box:last-child {padding-bottom:0; border-bottom:none; margin-bottom:0;}
	.gal_list .pd_list_box .pd_list_img {border-radius: 5px;}
	.gal_list .pd_list_box .pd_list_tBox {padding-top:28px; }
	.gal_list .pd_list_box .pd_list_tBox p {font-size:13px; line-height:45px;}
	.gal_list .pd_list_box .pd_list_tBox .pd_list_tit {font-size: 14px; padding-top: 6px; border:none;}
	.gal_list .pd_list_box .pd_list_tBox .pd_list_tit:after { content:none; }
}

/* cn_list */
.gal_list2 {display:flex; flex-wrap:wrap; gap:100px 30px;}
.gal_list2 .pd_list_box {width: calc((100% - 90px)/4);}
.gal_list2 .pd_list_box:nth-child(4n) {margin-right:0;}
.gal_list2 .pd_list_box .pd_list_img {position: relative; overflow:hidden; width:100%; background-color: #f6f6f6; background-size: contain; border-radius:12px;}
.gal_list2 .pd_list_box .pd_list_img::after {content: ''; display: block; padding-bottom: 65%;}
.gal_list2 .pd_list_box .pd_list_img img {width:100%; position: absolute; left: 50%; top: 50%; object-fit: cover; transform: translate(-50%, -50%);}
.gal_list2 .pd_list_box .pd_list_tBox {padding-top:42px; position:relative;}
.gal_list2 .pd_list_box .pd_list_tBox p {position:absolute; top:0; left:0; color:#555; font-size:14px; line-height: 47px;}
.gal_list2 .pd_list_box .pd_list_tBox .pd_list_tit {font-size: 18px; font-weight: 500; overflow: hidden; word-break: keep-all; border-top:1px solid #dadadd; padding-top:6px;text-overflow: ellipsis; white-space: normal;}
.gal_list2 .pd_list_box .pd_list_tBox .pd_list_tit:after { content: ''; width: 0; height: 2px; position: absolute; top: 42px; right: 0; background: #222; transition: 0.4s;}
.gal_list2 .pd_list_box:hover .pd_list_tBox .pd_list_tit:after { width: 100%; right: auto; left: 0;}
.gal_list2 .pd_list_link {display:block;}

@media screen and (max-width:1200px){
	.gal_list2 .pd_list_box .pd_list_tBox .pd_list_tit {font-size: 16px; padding-top: 6px;}
}
@media screen and (max-width:959px){
	.gal_list2 .pd_list_box {width: calc((100% - 30px)/2);}
}
@media screen and (max-width:479px){
	.gal_list2 {gap:60px 0;}
	.gal_list2 .pd_list_box {width: 100%;}
	.gal_list2 .pd_list_box:last-child {padding-bottom:0; border-bottom:none;}
}

/* pd_det */
.pd_det {display:flex; justify-content:space-between; flex:1; gap:60px;}
.pd_det .pd_int_tBox {width:100%;}
.pd_det .pd_int_tBox p {font-size: 22px; font-weight: 700; color: #031aba; position: relative; z-index: 1; padding-bottom: 13px;}
.pd_det .pd_int_tBox p:before {content: ""; display: inline-block; width: 20px; height: 2px; left: 0; bottom: 0; background: #031aba; position: absolute; z-index: -1;}
/* .pd_det .pd_int_tBox span {display:block; font-weight:600; padding-bottom:18px; font-size:22px;} */
.pd_det .pd_int_tBox .pd_int_tit {font-size: 36px; font-weight: 700; line-height: 110%; margin-top: 40px; }
.pd_det .pd_int_tBox .pd_int_txt tr th {word-break:keep-all; text-align:left; font-weight:600; padding-bottom:6px; font-size:18px; padding-top:60px;}
.pd_det .pd_int_tBox .pd_int_txt tr td {word-break:keep-all; white-space: pre-wrap; font-family:"NanumSquare";}
/* CR-013(C-5 1안): 제품사양 두 칸 줄무늬 표 — 수아 사진 값(항목 46%·글자 15px·줄마다 #F4F6F9 번갈아). 폭은 휴대폰에서 넘치지 않게 최대 600px */
.pd_det .pd_int_tBox .pd_int_txt td.spec_td {white-space:normal;}
.pd_det .pd_int_tBox .pd_int_txt .spec_tbl {width:100%; max-width:600px; border-collapse:collapse; border-top:2px solid #222; margin-top:6px;}
.pd_det .pd_int_tBox .pd_int_txt .spec_tbl tr th, .pd_det .pd_int_tBox .pd_int_txt .spec_tbl tr td {padding:8px 14px; font-size:15px; text-align:left; vertical-align:top; border-bottom:1px solid #EBEBEB; white-space:pre-line; line-height:1.5;}
.pd_det .pd_int_tBox .pd_int_txt .spec_tbl tr th {width:46%; font-weight:500; color:#555;}
.pd_det .pd_int_tBox .pd_int_txt .spec_tbl tr td {color:#111;}
.pd_det .pd_int_tBox .pd_int_txt .spec_tbl tr:nth-child(odd) {background:#F4F6F9;}
.pd_det .pd_det_right {width:80%;}
.pd_det .pd_det_img {position: relative; overflow:hidden; width:100%; background-color: #f8f8f8; background-size: contain; border-radius:20px;}
.pd_det .pd_det_img::after{content: ''; display: block; padding-bottom: 100%;}
.pd_det .pd_det_img img {width:100%; position: absolute; left: 50%; top: 50%; object-fit: cover;transform: translate(-50%, -50%); padding:20px; background-color:#f8f8f8;}

@media screen and (max-width:1400px){
	.pd_det {gap:40px;}
}

@media screen and (max-width:959px){
	.pd_det {flex-wrap: wrap;}
	.pd_det .pd_int_tBox .pd_int_tit {font-size: 36px; word-break: keep-all;}
}
@media screen and (max-width:479px){
	.pd_det .pd_int_tBox p {font-size: 19px;}
	.pd_det .pd_int_tBox .pd_int_tit {font-size: 28px;}
}

.tabmenu {display: flex; flex-flow: row wrap; justify-content: center; margin-top:20px; gap:10px;}
.tabmenu li {/*background-color: #49ccab;*/ border:1px solid #ddd; border-radius: 7px; text-align: center;}
.link-ani {position: relative; padding: 10px 20px; display:block;}

/*  떆怨듭궗濡  */
/* ex_list */
.ex_list {display:flex; flex-wrap:wrap; width:100%;}
.ex_list .ex_list_box {width: calc((100% - 48px)/3); margin-right:24px; margin-bottom:80px;}
.ex_list .ex_list_box:nth-child(3n) {margin-right:0;}
.ex_list .ex_list_img {width:100%; border-radius:20px; overflow:hidden; max-height:280px;}
.ex_list .ex_list_img img {width:100%; height:auto; border-radius:20px; display:block;}
.ex_list .ex_list_tBox {margin-top:20px;}
.ex_list .ex_list_tit {font-size: 21px; font-weight: 500; line-height: 1.52; overflow: hidden; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;}
.ex_list .ex_list_link {display:block;}

@media screen and (max-width:780px){
	.ex_list .ex_list_box {width: calc((100% - 24px)/2); margin-bottom:100px;}
	.ex_list .ex_list_box:nth-child(3n) {margin-right:24px;}
	.ex_list .ex_list_box:nth-child(2n) {margin-right:0;}
}
@media screen and (max-width:479px){
	.ex_list {margin-top:10px; border-top:3px solid #1d2088; padding-top:30px;}
	.ex_list .ex_list_box {width: calc(100%); margin-bottom:60px; margin-right:0;}
	.ex_list .ex_list_tBox {margin-top:24px;}
}


/* 怨좉컼吏  썝 */

/* AS */
.as_tit {position: relative; padding: 20px 30px; background: #f6f6f6; border-radius: 8px;}
.as_tit p {font-weight:600; margin-bottom:8px;}
/* .as_cont dl {padding-left:30px;} */
.as_cont dt {font-weight:600; margin:20px 0 10px 0;}
.as_cont dd {padding-left: 20px; margin-bottom: 10px;}
.as_cont dd.dd_hypen {padding-left: 40px; margin-bottom: 10px;}
.as_cont dd span {color:#031aba}
.as_cont dd a.as_link {color: #ff9a7b; font-weight: 500; text-decoration: underline;}

.as_cont .as_step {width: 100%; max-width:879px; height: 100%; background:#41578a; padding:30px 15px; box-sizing: border-box; margin:15px 0 8px 0; border-radius:20px;} /* CR-035: 파란 상자 폭 70%(1256→879) + 왼쪽 정렬(margin-left 0). 휴대폰은 화면이 879보다 좁아 폭 그대로 */
.as_cont .as_step ul{display: flex; width: 100%; flex-wrap:wrap; position: relative; justify-content: space-around;  }
.as_cont .as_step li {text-align:center; width: 25%; }
.as_cont .as_step li .step_pic{ border-radius: 50%; width: 119px; height: 119px; position: relative;  font-size: 0;margin: 0 auto;} /* CR-035: 동그라미 지름 170→119px(70%) */
/* CR-035: 동그라미 속 아이콘(배경 그림)도 원본별 0.7배 — 동그라미만 줄이면 아이콘은 원래 크기로 남으므로 */
.as_cont .as_step li .step_pic.step01{ background: url("/asset2/images/sub/step01.png") center center no-repeat #fff; background-size:63px 50px;}
.as_cont .as_step li .step_pic.step02{ background: url("/asset2/images/sub/step02.png") center center no-repeat #fff; background-size:57px 48px;}
.as_cont .as_step li .step_pic.step03{ background: url("/asset2/images/sub/step03.png") center center no-repeat #fff; background-size:61px 51px;}
.as_cont .as_step li .step_pic.step04{ background: url("/asset2/images/sub/step04.png") center center no-repeat #fff; background-size:61px 39px;}
/*.as_cont .as_step li .step01::before,.step02::before,.step03::before{ background: url("/asset2/images/step_arr.png") center 0 no-repeat; position:  absolute; content: ""; top: 50%; right:-50%; width: 28px; height: 28px;}*/
.as_cont .as_step li .step_txt {margin-top: 8px; color: #fff;}
.as_cont .as_step li .step_txt .step_tit {font-weight: 500; color:#fff;} 
.as_cont .as_step li .step_txt .step_tit span { font-size: 14px; letter-spacing: 0; color:#ff9a7b ;}
.as_cont .as_step li .step_txt div{ font-size: 16px; margin-top: 8px; line-height: 1.5; color:#fff;}
.as_cont .as_step li .step_txt .atag a:hover, .atag a:link{color:#ff9a7b; font-weight: 500; text-decoration:underline;}
.as_cont .as_step li div p{ position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 15px; font-weight: 500; color: #41578a; }

@media screen and (max-width:1200px){
	.as_cont .as_step li {width:50%;}
	.as_cont .as_step li:nth-child(1), .as_cont .as_step li:nth-child(2) {margin-bottom:30px;}
}
@media screen and (max-width:600px){
	.as_cont .as_step li {width:100%;}
	.as_cont .as_step li:not(:last-child) {margin-bottom:40px;}
}

/* table */
.table_box {width:100%; overflow:auto;}
.table_box .table1 {width: 100%; border-top: 2px solid #111; table-layout: fixed;}
.table_box .table1 thead tr th {padding: 22px 0; font-size: 18px; font-weight: 600; color: #111; border-bottom: 1px solid #111;}
.table_box .table1 tbody tr {cursor:pointer;}
.table_box .table1 tbody tr:hover {background: #f7fbff;}
.table_box .table1 tbody tr td {padding: 22px 0; text-align: center; border-bottom: 1px solid #e7e7e7; font-weight: 400;}
.table_box .table1 tbody tr td.td_history {text-align:left !important; white-space:pre-wrap;}
.table_box .table1 tbody tr td.tb1_tit {padding: 22px 20px; text-align:left;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.table_box .table1 tbody tr td a {display: inline-block; width: auto; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; margin-right: 10px;}

@media screen and (max-width:780px){
	.table_box .table1 col, .table1 thead {display:none; }
	.table_box .table1 tbody tr {display: block; width: 100%; position: relative; border-bottom: 1px solid #ddd; padding: 20px 0; max-height: 100px;}
	.table_box .table1 tbody tr td.board_no {display:none; }
	.table_box .table1 tbody tr td.tb1_tit {display: block; padding:0; margin:0; width:100%; font-weight:500; color:#000;}
	.table_box .table1 tbody tr td {display: inline-block; padding: 0 10px 0 0; position: relative; color: #888; border-bottom: 0; margin-right: 10px;}
	.table_box .table1 tbody tr td.af:after {content: ""; display: block; width: 1px; height: 15px; position: absolute; border-right: 1px solid #c5c5c5; right: 0; top: 6px;}
    .table_box .table1 tbody tr td:last-child:after {display:none;}
    .table_box .table1 tbody tr td.td_history {display:none;}
	.table_box .table1 tbody tr td a {margin:10px 0; max-width: 80%;}
}

.table_box .table2 {width: 100%;}
.table_box .table2 thead tr th {font-weight:600; padding: 10px 7px; background-color:#f9f9f9; border:1px solid #ededed; vertical-align: middle;}
.table_box .table2 tbody tr td {padding: 14px 10px; min-width:54px; text-align:center; border: 1px solid #ededed; vertical-align:middle; word-break:break-word; line-height:1.4;}
/*table tr td{text-overflow: ellipsis; white-space: nowrap; max-width: 140px;}*/
.table_box .table2 tbody tr td .blue {background-color: #3da5f4; color:#fff; font-weight: 500; padding: 5px 10px; border-radius: 5px;}
.table_box .table2 tbody tr td .green {background-color: #00c689; color:#fff; font-weight: 500; padding: 5px 10px; border-radius: 5px;}

.table_box .total_tb {width: 100%;}
.table_box .total_tb tbody tr td {padding: 14px 10px; min-width:54px; text-align:center; border: 1px solid #ededed; vertical-align:middle; word-break:break-word; line-height:1.4;}
.table_box .total_tb tbody tr td .blue {background-color: #3da5f4; color:#fff; font-weight: 500; padding: 5px 10px; border-radius: 5px;}
.table_box .total_tb tbody tr td .green {background-color: #00c689; color:#fff; font-weight: 500; padding: 5px 10px; border-radius: 5px;}
.table_box.dp_mobile {display:none;}

.js th:first-child {background-color:#f9f9f9; color:#1d2088; font-weight:600; vertical-align : middle;}

.js td:first-child {background-color:#e6ecf7; color:#1d2088; font-weight:600;}
.js td:nth-child(2n) {background-color:#f9f9f9;}
.js1 td:first-child {background-color:#e6ecf7; color:#1d2088; font-weight:600;}
.js1 td:nth-child(2n) {background-color:#f9f9f9;}
.js2 td:first-child {background-color:#ddfbe3; color:#1d9737; font-weight:600;}
.js2 td:nth-child(2n) {background-color:#f9f9f9;}
.js3 td:first-child {background-color:#ffebeb; color:red; font-weight:600;}
.js3 td:nth-child(2n) {background-color:#f9f9f9;}


@media screen and (max-width:1440px){
	.table_box .table2.mw1400 {min-width:1400px;}
}
@media screen and (max-width:1200px){
	.table_box .table2.mw1200 {min-width:1200px;}
}
@media screen and (max-width:959px){
	.table_box.dp_pc {display:none;}
	.table_box.dp_mobile {display:block;}
	.table_box .total_tb tr:nth-child(3n-1) {background-color: #f9f9f9;}
	.table_box .table2.mw800 {min-width:800px;}
}




/* JLOG */

/* admin */
.board_Reg table tr {border-bottom:1px solid #eceff0;}
.board_Reg table tr:first-child {border-top:2px solid #666;}
.board_Reg table th {background-color:#f6f6f6; vertical-align:middle; width:140px;}
.board_Reg table td {padding: 7px; position:relative; }
.board_Reg table .input_wrap {display:flex; justify-content:space-between; align-items:center;}
.board_Reg table .board_input {display: block; border-radius: 8px; /* CR-010: 입력칸 0→8px */ width: 100%; min-height: 40px; padding: 10px 12px; border: 1px solid #ebecef; box-sizing: border-box; overflow: hidden; resize: none; word-break: break-all; font-size: 16px; line-height: 17px; outline: none;}
.board_Reg table .board_input_date {width:47%; border-radius: 8px; /* CR-010 보완1(수아 판단): 날짜 입력칸도 입력칸처럼 8px */ min-height: 40px; padding: 10px 12px; border: 1px solid #ebecef; box-sizing: border-box; overflow: hidden; resize: none; word-break: break-all; font-size: 16px; line-height: 17px; outline: none;}
.board_Reg table .api_button {position:absolute; top:7px; right:10px; width: 40px; height: 40px; margin-right: 0; border: 0; background-color: transparent; text-align: center; }
.board_Reg table .api_button:before {position:relative; content: ""; width: 40px; height: 40px; display: block; background: url(../images/common/icon_search.svg) no-repeat center;}
.board_Reg table .board_textarea {display: block; border-radius: 8px; /* CR-010: 글 내용칸 0→8px */ width: 100%; min-height: 100px; padding: 11px 12px 10px; border: 1px solid #ebecef; box-sizing: border-box; overflow: hidden; resize: none; word-break: break-all; font-size:16px; outline: none; overflow-y:auto; font-family:'NanumSquare';}
.board_Reg table .board_select {display: block; height: 40px; position: relative; padding: 0 25px 0 11px; border: 1px solid #ebecef; background: #fff; text-align: left; box-sizing: border-box; color: #000; font-size:16px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.notice {font-size:16px; color:red;}
.noticeSlide {font-size:16px; color:red;}

.file_wrap {display:flex;}
.file_wrap .upload_box {position:relative; width: calc(50% - 15px); box-sizing: border-box; margin-right: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px dashed #cdcdcd}
.file_wrap .upload_box .drag-file {width: 100%; height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:center;} 
.file_wrap .upload_box .input_file {opacity: 0 ;position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer;}	
.file_wrap .file_box {width: calc(50% - 15px); box-sizing: border-box; overflow: auto; height: 160px;}
.file_wrap .file_box .file {display: flex; padding: 20px; border: 1px solid #dbdbdb; margin-bottom:10px;} 
.file_wrap .file_box .file:last-child {margin-bottom: 0px;}
.file_wrap .file_box .file .details { flex: 1; display: flex; flex-direction: row; justify-content: space-between; }
.file_wrap .file_box .file .details .btn_remove {border:none; background:none; color:#0f80fe; font-size:17px;cursor:pointer;}

.file_wrap1 {display:flex;}
.file_wrap1 .upload_box1 {position:relative; width: calc(50% - 15px); box-sizing: border-box; margin-left: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px dashed #cdcdcd}
.file_wrap1 .upload_box1 .drag-file1 {width: 100%; height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:center;} 
.file_wrap1 .upload_box1 .input_file1 {opacity: 0 ;position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer;}	
.file_wrap1 .file_box1 {width: calc(50% - 15px); box-sizing: border-box; overflow: auto; height: 212px;}
.file_wrap1 .file_box1 .file1 {display: flex; padding: 5px; border: 1px solid #dbdbdb; margin-bottom:2px;} 
.file_wrap1 .file_box1 .file1:last-child1 {margin-bottom: 0px;}
.file_wrap1 .file_box1 .file1 .details1 { flex: 1; display: flex; flex-direction: row; justify-content: space-between; color:#009fe2; }
.file_wrap1 .file_box1 .file1 .details1 .btn_remove1 {border:none; background:none; color:#0f80fe; font-size:17px;cursor:pointer;}
/* 6-3 4번·f4b(대표님 승인 10/1 · 수아 시안 after4b): 계약 첨부 줄 — 이름 · [미리보기](pdf·xls·xlsx) · 오른쪽 끝 작은 회색 [삭제]. 휴대폰(600 미만)은 [미리보기] 부터 이름 아래 줄로 */
.file_wrap1 .file_box1 .file1 .details1:has(.crt_del_btn) {flex-wrap:wrap; align-items:center; gap:8px;}
.file_wrap1 .file_box1 .file1 .details1 .crt_preview_btn {height:28px; padding:0 10px; border:1px solid #074EAD; border-radius:6px; background:#fff; color:#074EAD; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0;}
.file_wrap1 .file_box1 .file1 .details1 .crt_del_btn {margin-left:auto; height:24px; padding:0 8px; border:1px solid #c9ced6; border-radius:5px; background:#f4f5f7; color:#777; font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0;}
@media (max-width:599px) {
	.file_wrap1 .file_box1 .file1 .details1 .crt_preview_btn {flex-basis:100%; max-width:max-content;}
}


/* progres */
.load {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed; /* 화면 전체를 덮도록 고정 */
    opacity: 0.8;
    background: white; /* 반투명 흰색 배경 */
    z-index: 9999; /* 다른 요소들 위에 표시 */
    text-align: center;
    display: flex; /* 이미지를 중앙 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 가로 방향 중앙 정렬 */
    align-items: center; /* 세로 방향 중앙 정렬 */

    /* 초기에는 숨김 */
    /* display: none; <-- JavaScript에서 .display-none 클래스를 토글하므로 여기서는 필요 없습니다. */
}

/* 로딩 이미지 스타일 (예시) */
/* .load > img 대신 .load .spinner-image 등으로 구체적으로 지정할 수 있습니다. */
.load img {
    max-width: 100px; /* 이미지 크기 제한 */
    max-height: 100px; /* 이미지 크기 제한 */
    /* margin: 20% auto; <-- display:flex를 사용했으므로 margin auto는 필요 없습니다. */
    z-index: 10000; /* 로딩 컨테이너 위에 표시 */
}

/* 요소를 숨기는 유틸리티 클래스 */
.display-none {
    display: none !important; /* 다른 스타일보다 우선하도록 !important 사용 */
}

.wrap-loading { /*화면 전체 어둡게*/
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.2); /*not in ie */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
}

.wrap-loading > div{ /*로딩 이미지*/
    position: fixed;
    top:50%;
    left:50%;
    margin-left: -21px;
    margin-top: -21px;
}


@media screen and (max-width:1024px){
	.file_wrap {flex-direction: column;}
	.file_wrap .upload_box {width:100%; margin:0;}
	.file_wrap .file_box {width:100%; margin-top:10px;}
	.file_wrap .upload_box .drag-file {height:300px;}
}
@media screen and (max-width:959px){
	.file_wrap .file_box .file {padding:14px;}
	.file_wrap .file_box .file .details {flex-direction: column; align-items: flex-start;}
	.board_Reg table .board_select {width:100%;}
	.board_Reg table th {display:block; width:100%; padding:7px 0;}
	.board_Reg table td {display:block; padding: 7px 0;}
}

/* api */
.field_box {border:1px solid #ccc; padding:20px; border-radius:7px;}
.field_tit {font-size:36px; font-weight:600; text-align:center; margin-bottom:10px;}
.proApiList .hov:hover {cursor:pointer; background-color:#f7fbff}
.proApiList input{width:80px; border:1px solid #ccc; border-radius:4px; padding:3px 8px;}
.proApiList .adjust{width:150px; border:1px solid #ccc; border-radius:4px; padding:3px 8px; text-align:right}
.yn_btnY{background-color:#00BFFF !important;}
.yn_btnN{background-color:#CCC !important;}

.excel_btn {
	margin-right:5px;
    background-color: #03c13e;
    color: #ffffff;
    padding: 5px 10px 5px 34px; 
    cursor: pointer;
    border-radius: 10px;
    height: 40px;
    width: auto;
    background-image: url(/images/excel_images.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 25px 25px;
}
.excel_btn:hover {background-color: #8df58d;}

/* CR-042(4번): 제품 상세 '이 제품 문의하기' 버튼 — 수아 시안 ask-prd(남색 알약, 이전·목록·다음 줄 바로 위, 휴대폰은 폭 가득) */
.prd_ask {display:flex; justify-content:center; max-width:1256px; margin:32px auto 8px; padding:0 16px; box-sizing:border-box;}
.prd_ask .prd_ask_btn {flex:1 1 220px; max-width:320px; text-align:center; padding:16px; border-radius:40px; background:#1e2a8c; color:#fff; font-weight:600; font-size:17px; line-height:1.4;}
.prd_ask .prd_ask_btn:hover {background:#16206b;}

/* CR-047(13번): 설계의뢰 목록 위 안내 — 수아 시안 guide-list(연파랑 상자 + 왼쪽 남색 줄) */
.board_guide {background:#eef4ff; border-left:4px solid #1e2a8c; border-radius:6px; padding:14px 18px; margin:0 0 20px; font-size:15px; line-height:1.7; color:#222;}
.board_guide b {display:block; margin-bottom:4px; font-weight:700;}

/* CR-048(5번): 설계의뢰 글쓰기 동의 상자(수아 시안 consent-form) · 개인정보 처리방침 화면 */
.consent_box {border:1px solid #ddd; border-radius:8px; padding:20px 22px; background:#fafafa;}
.consent_box .consent_tit {font-weight:700; font-size:17px; margin-bottom:8px;}
.consent_box .consent_lead {font-size:15px; margin-bottom:10px; line-height:1.6;}
.consent_box .consent_tbl {width:100%; border-collapse:collapse; font-size:15px; margin-bottom:10px;}
.consent_box .consent_tbl th {text-align:left; width:120px; padding:8px; vertical-align:top; border-bottom:1px solid #e5e5e5; background:#f1f3f5;}
.consent_box .consent_tbl td {padding:8px; line-height:1.5; border-bottom:1px solid #e5e5e5;}
.consent_box .consent_body {font-size:14px; color:#555; line-height:1.6;}
.consent_box .consent_chk {display:flex; gap:8px; align-items:center; margin-top:14px; font-size:16px; font-weight:600; cursor:pointer;}
.consent_box .consent_chk input {width:22px; height:22px; flex:none;}
.consent_box .consent_note {font-size:13px; color:#666; margin-top:8px;}
.privacy_doc {max-width:900px; font-size:15px; line-height:1.8; color:#222;}
.privacy_doc h2 {font-size:24px; font-weight:700; margin-bottom:16px;}
.privacy_doc h3 {font-size:17px; font-weight:700; margin:28px 0 8px;}
.privacy_doc ol {list-style:decimal; padding-left:22px;}
.privacy_doc ul {list-style:disc; padding-left:22px;}
.privacy_doc li {margin:2px 0;}

/* CR-049(9번 · 대표님 B안): 휴대폰(767px 이하)에서 기업정보 탭 5개를 3칸씩 두 줄로 — 한 줄이면 '인증등록현황·오시는 길'이 잘려 보였다(수아 시안 tabB).
   기업정보 탭 띠(오시는 길 idx 0105 가 들어 있는 띠)에만 건다 — 조달제품·고객지원 등 다른 탭 띠는 한 줄에 다 들어가서 그대로(360·390 실측).
   :has() 를 모르는 옛 브라우저는 이 규칙을 건너뛰어 지금 모양(옆으로 밀기) 그대로. PC 는 변화 없음 */
@media screen and (max-width:767px){
	.article_header .page_name .list_item_category ul:has(> li > a[class~="0105"]) {display:grid; grid-template-columns:repeat(3, 1fr); width:100%;}
	.article_header .page_name .list_item_category ul:has(> li > a[class~="0105"]) li a {line-height:48px; padding:0 4px; text-align:center; font-size:15px;}
}

/* CR-066(2차 13번 · 📷 승인 prdimg): 휴대폰 제품 상세 — 사진 틀이 80% 로 남아 오른쪽이 비던 것을 본문 폭 전체로(시방서·사양서 버튼도 따라 가운데). PC·태블릿 가로(768+)는 그대로 */
@media screen and (max-width:767px){
	.pd_det .pd_det_right {width:100%;}
}

/* CR-069(2차 15번 · 📷 승인 loc): 오시는 길 길찾기 버튼 — 네이버(초록 #03C75A · 흰 글자) · 카카오(노랑 #FEE500 · #191919 글자) · 높이 48 · PC 나란히 · 좁은 휴대폰 위아래 */
.route_btns {display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.route_btns .route_btn {flex:1 1 180px; max-width:260px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 16px; border-radius:10px; font-weight:700; font-size:16px; text-decoration:none; box-sizing:border-box;}
.route_btns .route_naver {background:#03C75A; color:#fff;}
.route_btns .route_naver .route_mark {font-weight:900;}
.route_btns .route_kakao {background:#FEE500; color:#191919;}

/* CR-070(메모 · 📷 승인 idnt070): 조달제품 상세 물품식별번호 상자 — 문의 버튼 바로 위 · 옅은 파랑 · 휴대폰은 좌우 16px(시안에서 화면 끝에 닿던 것) */
.prd_idnt {max-width:600px; margin:0 auto 24px; padding:16px 18px; border:1px solid #d7deea; border-radius:12px; background:#f6f8fc; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:center; text-align:center; box-sizing:border-box;}
.prd_idnt .prd_idnt_line {flex-basis:100%; margin:0; font-size:15px; color:#222;}
.prd_idnt .prd_idnt_no {font-size:17px; letter-spacing:.02em;}
.prd_idnt .prd_idnt_btn {display:inline-flex; align-items:center; gap:6px; padding:12px 22px; border-radius:40px; border:1px solid #074EAD; color:#074EAD; background:#fff; font-weight:600; font-size:16px; word-break:keep-all;} /* 6-3(대표님 권장안 10/1): 320 에서 '찾 / 기' 로 끊기던 것 — 낱말 단위로만 줄바꿈(버튼 모양 그대로) */
.prd_idnt .prd_idnt_help {flex-basis:100%; margin:0; font-size:13px; color:#666; word-break:keep-all;} /* 6-3 1번(팀장 10/1 · 수아 대조): 휴대폰에서 끝 글자 '요'만 혼자 줄바꿈 → 낱말 단위로만 줄바꿈(글자 크기·문구 그대로) */
/* 6-3 1번(대표님 승인 10/1 · 수아 시안 after1): [번호 복사] — 쇼핑몰 버튼 왼쪽 · 누른 뒤 초록 '복사했어요 ✓' */
.prd_idnt .prd_idnt_copy {display:inline-flex; align-items:center; gap:6px; padding:12px 20px; border-radius:40px; border:1px solid #9aa6b8; background:#fff; color:#333; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer;}
.prd_idnt .prd_idnt_copy.is_copied {border-color:#1b7f4b; color:#1b7f4b;}
@media screen and (max-width:767px){ .prd_idnt {margin:0 16px 24px;} }