@charset "utf-8"; 

/*
  Project _ CSS Init
  FileName _ sub.css - (신규 서브 영역)
  Author _ 쮸양~★
  Date _ 2024. 10. 19
  Last _ 
*/

/******************************************************************************************************************************************
	subVisual CSS (서브비주얼) - 쮸양~★
*******************************************************************************************************************************************/
.subVisual {position:relative; width:100%; height:478px; background: url('/images/main/visual_img01.jpg') center bottom -200px;}
.subVisual::before { content: ""; background: rgba(0,0,0,0.4); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block;}
.subVisual .titleBox {position: relative; max-width:1400px; margin: 0px auto; padding-top: 200px;}
.subVisual .titleBox h2 { color: #fff; font-size: 3.5em; text-align: center; text-shadow: 2px 2px 4px #000; line-height: 1.8; font-family: 'sb-font';}
.subVisual .titleBox .locationBox {display: flex; align-items:center; justify-content:center;}
.subVisual .titleBox .locationBox span {margin: 0px 5px; color: #fff; font-size: 1.5em;}
.subVisual .titleBox .locationBox .ic_home {position: relative; padding-left: 25px;}
.subVisual .titleBox .locationBox .ic_home::before { position: absolute; left: 0px; top: 0px; width: 21px; height: 24px; display:block; background: url('/images/sub/ic_home.png') no-repeat 0px 0px; background-size: contain; content: "";}

.subVisual .titleBox .locationBox .sub01 {position: relative; padding-left: 25px;}
.subVisual .titleBox .locationBox .sub01::before { position: absolute; left: 0px; top: 0px; width: 12px; height: 18px; display:block; background: url('/images/sub/ic_next.png') no-repeat 0px 0px; background-size: contain; content: "";}


/******************************************************************************************************************************************
	subMenuBox CSS (서브메뉴) - 쮸양~★
*******************************************************************************************************************************************/
.subMenuBox { position: absolute; bottom: 0px; background: rgba(0,0,0,0.5); width: 100%;}
.subMenuBox .subTapMenu { display: flex; width:95%; max-width: 1400px; margin: 0px auto;}
.subMenuBox .subTapMenu li {padding:15px 30px; border-radius: 0px 10px 0px 0px;}
.subMenuBox .subTapMenu li a {font-size: 1.3em; line-height: 1.5; font-weight: 400; color: #fff;}
.subMenuBox .subTapMenu li.on {background: #fff;}
.subMenuBox .subTapMenu li.on a {color: #000; font-weight: 500;}


/******************************************************************************************************************************************
	sub_container CSS (서브컨텐츠) - 쮸양~★
*******************************************************************************************************************************************/
#sub_container {position:relative; width:95%; max-width: 1400px; margin: 0px auto; padding: 50px 0px 50px 0px; min-height: 500px;}
#sub_container h3 { font-size: 2.5em; text-align: center; margin-bottom: 50px; color: #000; line-height: 1.8; font-family: 'sb-font','gong-light';}

.b_dot1 {}
.b_dot1 li {position:relative; padding-left:15px; font-size:1.1em; line-height:1.6;}
.b_dot1 li::before {content: ""; width:6px; height: 5px; border-radius:10px 0px; background: #111; display: block; position: absolute; top: 6px; left: 0px;}
.b_dot1 li::after {content: ""; width: 5px; height: 5px; border-radius:0px 10px; background: #f05416; display: block; position: absolute; top: 9px; left: 4px;}

/* 인사말 */
.introduceBox {position: relative;}
.introduceBox >div {margin-bottom: 40px;}
.introduceBox p {font-size: 1.5em; line-height: 1.6; text-align: center; color: #000;}

.introduceBox .imgTxt { position: relative; width: 100%; height:200px; border-radius: 30px 0px; background:url("../images/main/visual_img01.jpg") no-repeat center bottom; background-size:cover; display: flex;align-items: center; justify-content: center;}
.introduceBox .imgTxt p {color: rgba(255,255,255,0.5); z-index: 10; font-size: 3.5em;}
.introduceBox .imgTxt::before {background:rgba(0,0,0,0.5); content: ""; width: 100%; height: 100%; border-radius: 30px 0px; display: block; position: absolute; top: 0px; left: 0px;}

.textBox {position: relative; display: flex; padding: 20px 30px; border-radius: 0px 20px; border: 1px solid #ddd; border-top: 2px solid #111; margin-bottom: 30px; justify-content:space-between; align-items:center;}
.textBox .textCenter {width:100%; text-align: center;}
.textBox .textCenter p {font-size: 1.2em; line-height: 1.6;}
.textBox .textCenter .txt01,
.textBox .textCenter .txt02 {font-size: 1.5em;}
.textBox .textLeft {width: calc(100% - 300px - 40px); border-right: 2px dashed #ddd;}
.textBox .textLeft p {font-size: 1.2em; line-height: 1.6;}
.textBox .textRight {width:300px;}

/* 연혁 */
.historyBox {position:relative;}
.historyBox .yearList {display:flex; margin-bottom:30px; border-bottom:1px solid #ddd;}
.historyBox .yearList p.txt_year {position:relative; width:250px; font-size:1.5em; background:#fafafa; border-radius:0px 30px 0px 0px; border-top:1px solid #ddd; border-right:5px solid #06C; color:#111; text-align:center; padding:30px 20px; box-sizing:border-box;}
.historyBox .yearList .txt_year::before { content:"";}
.historyBox .yearList ul.txtList {padding-left:50px; width:calc(100% - 300px); box-sizing:border-box;}
.historyBox .yearList ul.txtList li {position:relative; line-height:1.8; font-size:1.2em; border-bottom:1px dashed #ccc; padding-bottom:5px; margin-bottom:5px; padding-left:12px;}
.historyBox .yearList ul.txtList li::before { content:""; width:5px; height:5px; background:#656565; border-radius:50px; display:block; position:absolute; left:0px; top:10px;}
.historyBox .yearList ul.txtList li:last-child {border-bottom:none;}

/* 납품실적 */
.result_list { position: relative; display: flex; flex-wrap:wrap; justify-content:space-between; margin-bottom: 30px;}
.result_list .all_list {width:calc(100% / 3 - 20px); margin-right: 10px;}
.result_list .all_list:last-child{margin-right: 0px;}
.result_list .all_list .pic img {width:100%; height: 200px; border-radius: 0px 20px; margin-bottom: 20px;}
.result_list .all_list .txt_list {}
.result_list .all_list .txt_list li {display: flex;}
.result_list .all_list .txt_list .ti {position: relative; width:100px; padding-left: 15px;}
.result_list .all_list .txt_list .ti::before {content: ""; width:6px; height: 5px; border-radius:10px 0px; background: #111; display: block; position: absolute; top: 6px; left: 0px;}
.result_list .all_list .txt_list .ti::after {content: ""; width: 5px; height: 5px; border-radius:0px 10px; background: #f05416; display: block; position: absolute; top: 9px; left: 4px;}
.result_list .all_list .txt_list .stxt {position: relative; width:calc(100% - 115px); color: #111;}
.result_list .all_list .txt_list .stxt::before {content: ""; width:1px; height:8px; background: #959595; display: block; position: absolute; top: 6px; left: -12px;}

/* 제품소개 */
.PBL {display: flex; flex-wrap:wrap;}
.PBL li {width: calc(100% / 4 - 40px); margin: 0px 20px; margin-bottom: 30px; border: 1px solid #ddd; border-radius: 0px 20px;}
.PBL li .thmb img {width:100%; height: 270px; margin-bottom: 10px;border-radius: 0px 20px;}
.PBL li .detail {border-radius: 0px 20px;}
.PBL li .detail .subject {font-size: 1.2em; padding-bottom: 5px; margin-bottom: 5px; background: #ff6600; color: #fff; padding: 10px 20px;}
.PBL li .detail .advrt {padding: 10px 20px;}


/* 게시판 상단탭 */
.BBSlist_tab_menu { position: relative; width: 100%; display: flex; flex-wrap:wrap; padding: 10px 0px 0px 0px; margin-bottom: 20px; border-bottom:1px solid #ddd;}
.BBSlist_tab_menu li {padding: 10px 20px; background: #eee; border-radius: 10px 10px 0px 0px; margin-right: 5px; border: 1px solid #ddd; border-bottom: none;}
.BBSlist_tab_menu li a { font-size: 1.2em; color: #959595;}
.BBSlist_tab_menu .selected {background: #fff;}
.BBSlist_tab_menu .selected a {color: #111;}

.as_table {margin-top: 5px; border-top: 3px solid #f05416;}
.as_table th {padding: 15px 0;border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; text-align: center;color: #565656; font-size: 1.2em;}
.as_table thead th {padding: 20px 10px 20px 10px; border-bottom: 1px solid #eaeaea; background: #f9f9f9; font-weight:500; color: #111;}
.as_table thead th:last-child { border-right:none;}
.as_table thead tr:last-child th {border-bottom: 1px solid #aaa;}
.as_table tbody th {padding: 20px 10px 20px 10px; border-bottom: 1px solid #eaeaea; background: #f9f9f9; font-weight: 500; color: #111;}  
.as_table thead tr:first-child th {  /*border-top: 2px solid #151515;*/ border-bottom: 1px solid #aaa;}

.as_table td { padding: 12px 20px; border-bottom: 1px solid #d9d9d9; text-align: left; border-right: 1px solid #d9d9d9;}
.as_table td .search {position:relative; display:inline-block; color: #fff; height:48px; border-radius:70px; background:#33353A; padding: 0 60px 0px 30px; font-size:1.1em; font-weight:400;}
.as_table td .search:before {content:""; width:20px; height:48px; background:url(../images/sub/btn_find_w.png) no-repeat 0px center; display:block; background-size: contain; position:absolute; top:0px; right:20px;}

.as_table th:last-child.brn {border-right: none;}
.as_table td:last-child {border-right: none;}

/* 패스워드입력 */
.pwcon {position: relative; display: flex; padding: 20px 30px; border-radius: 0px 20px; border: 1px solid #ddd; border-top: 2px solid #111; margin:50px 0px 30px 0px; justify-content:space-between; align-items:center;}
.pwcon .password {width:80%; margin: 0px auto;}
.pwcon .password .ptxt { margin-bottom: 10px; border-bottom: 2px dashed #eee; padding-bottom: 10px; text-align: center; font-size: 1.2em;}
.pwcon .password .passBtn { display: flex; align-items: center; justify-content:center;}
.pwcon .password .passBtn input {margin-right: 10px;}

/******************************************************************************************************************************************
	board CSS (게시판 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
/* 검색 */
.board_search {position:relative; width:100%; margin-bottom:20px; padding:10px 10px; border-radius:10px; background:#fafafa; border:1px solid #eee;}
.board_search .txt {margin-bottom: 10px; border-bottom: 2px dashed #ddd; padding-bottom: 10px; text-align: center;}
.board_search .txt p {font-size: 1.2em; line-height: 1.6;}
.board_search fieldset {display:flex; justify-content:center;}
.board_search input[type=text] {display:inline-block; border:1px solid #ddd; height:48px; border-radius:70px; background:#fff; margin:0px 5px; width:500px;}
.board_search button[type=button], .board_search button[type=submit] { position:relative; display:inline-block; color: #fff; height:48px; border-radius:70px; background:#33353A; padding: 0 60px 0px 30px; font-size:1.1em; font-weight:400;}
.board_search button:before {content:""; width:20px; height:48px; background:url(../images/sub/btn_find_w.png) no-repeat 0px center; display:block; background-size: contain; position:absolute; top:0px; right:20px;}

.board_search select {border:#ddd solid 1px; border-radius:70px; padding:0px 40px 0px 20px; min-width:150px;}
.board_search .search_dropdown {position:relative; padding:0 10px 0 20px;font-weight:500; width:auto; min-width:150px; height:48px; color:#222;background:#fff;border:1px solid #ddd;border-radius:70px; z-index:10;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:content-box}

.board_search .search_dropdown::after {position:absolute; content:""; top:5px; right:20px; width:15px; height:40px; display:block; background:url('../images/board/ico_select_arrow.png') no-repeat 0px center; background-size:contain;}
.board_search .search_dropdown:hover,.board_search .search_dropdown:focus,.board_search .search_dropdown.active { background:#e7e7e7;cursor:pointer;border-right-color:#ccc}
.board_search .search_dropdown > span { position:absolute;top:50%;margin-top:-11px;white-space:nowrap;font-size:1.2em }
.board_search .grap ul { display:none;position:absolute;top:105%;left:-1px;width:200px;padding:7px 0;font-size:1.1em;background:#fff;border:1px solid #ccc;border-radius:3px }
.board_search .grap li { list-style-type:none;margin:0;padding:5px 18px;color:#666;line-height:1.2em;position:relative}
.board_search .grap li:hover, .board_search .search_dropdown li:focus { background:#e7e7e7}
.board_search .grap li.selected { background:#666;color:#fff}
.board_search ::-webkit-input-placeholder {font-weight:400}
.board_search ::-moz-placeholder {font-weight:400}
.board_search :-ms-input-placeholder {font-weight:400}
.board_search ::placeholder {font-weight:400}

.total_articles {margin-bottom:10px;}
.total_articles em {margin:0px 5px; color:#ff661f;}

/* 리스트 */
.basicBBS_list {margin-top: 5px; border-top: 3px solid #ff874f;}
.basicBBS_list th {padding: 15px 0;border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; text-align: center;color: #565656; font-size: 1.1em;}
.basicBBS_list thead th {padding: 20px 10px 20px 10px; border-bottom: 1px solid #eaeaea; background: #f9f9f9; font-weight:500; color: #222;}
.basicBBS_list thead th:last-child { border-right:none;}
.basicBBS_list thead tr:last-child th {border-bottom: 1px solid #aaa;}
.basicBBS_list tbody th {padding: 20px 10px 20px 10px; border-bottom: 1px solid #eaeaea;
     background: #f9f9f9; font-weight: 500; color: #565656;}  
.basicBBS_list thead tr:first-child th {  /*border-top: 2px solid #151515;*/ border-bottom: 1px solid #aaa;}

.basicBBS_list td { padding: 12px 5px; border-bottom: 1px solid #d9d9d9; text-align: center; border-right: 1px solid #d9d9d9;}
.basicBBS_list td.subject {text-align: left;}
.basicBBS_list td .IDcolor {margin-right: 10px; color: #961818;}
.basicBBS_list td img {margin-left: 10px;}

.basicBBS_list th:last-child.brn {border-right: none;}
.basicBBS_list td:last-child {border-right: none;}

.list_ic_new {border-radius:70px; padding:2px 10px; border:1px solid #34a2f7; background:#f9f9f9; color:#34a2f7; margin-left:10px; font-size:0.9em;}
.list_ic_hot {border-radius:70px; padding:2px 10px; border:1px solid #f13b36; background:#f9f9f9; color:#f13b36; margin-left:10px; font-size:0.9em;}

.board_list {margin-top: 5px; border-top: 3px solid #ff874f;}
.board_list th {padding: 15px 0;border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; text-align: center;color: #565656; font-size: 1.1em;}
.board_list thead th {padding: 20px 10px 20px 10px; border-bottom: 1px solid #eaeaea; background: #f9f9f9; font-weight:500; color: #222;}
.board_list thead th:last-child { border-right:none;}
.board_list thead tr:last-child th {border-bottom: 1px solid #aaa;}
.board_list tbody th {padding: 20px 10px 20px 10px; border-bottom: 1px solid #eaeaea;
     background: #f9f9f9; font-weight: 500; color: #565656;}  
.board_list thead tr:first-child th {  /*border-top: 2px solid #151515;*/ border-bottom: 1px solid #aaa;}

.board_list td { padding: 12px 5px; border-bottom: 1px solid #d9d9d9; text-align: center; border-right: 1px solid #d9d9d9;}

.board_list th:last-child.brn {border-right: none;}
.board_list td:last-child {border-right: none;}

/* 데이터없음 */
.nodata td {text-align: center; padding: 30px 0px; border-bottom: 1px solid #ddd;}


/* view_box */
.view_box {overflow:hidden;border-top:2px solid #151515;font-size:1.1em;margin-bottom:30px}
.view_box h4 {margin:0;padding:18px 20px 15px 20px;line-height:1.4;border-bottom: 1px dashed #dedede; font-size:1.8em; font-weight:400; display:block;}
.view_box h4::before {display:none}
.view_box .view_info {padding: 10px 20px 5px 20px;font-size:1em;border-bottom:1px solid #ccc;/* background: #f8f8f8; */}
.view_box .view_info::after {display:block;clear:both;content:''}
.view_box .view_info li {position:relative;float:left;margin:0 20px 5px 0}
.view_box .view_info li strong {display:inline-block;margin-right:5px;padding-right:10px;border-right:1px solid #ccc}
.view_box .data_cont {padding: 10px 20px;min-height:150px;text-align:center;color:#565656;border-bottom:1px solid #ccc;font-size: 15px;line-height:1.5;overflow: scroll;}
.view_box .data_cont p {font-size:1em; text-align:left;}
.view_box .data_cont img {border-radius:10px; margin:10px auto;}
.view_box .data_contStudent {padding: 10px 20px;min-height:150px;text-align:left;color:#565656;border-bottom:1px solid #ccc;font-size: 15px;line-height:1.5;}
.view_box .data_contStudent p {font-size:1em;}

/* 첨부파일 */
.filelist {overflow:hidden;display:table;width:100%;border-bottom:1px solid #ccc}
.filelist dl {display:table-row}
.filelist dl dt {display:table-cell;width:20%; padding:10px 0; font-size:1em;font-weight:400; background:#f8f8f8;vertical-align:middle;text-align:center}
.filelist dl dd {display:table-cell; width:80%;padding: 10px;font-size:0.9em;line-height: 1.6;}
.filelist dl dd a {display:inline-block}
.filelist dl dd span {margin-left:10px; color:#959595;}
.filelist .newBtn {margin-left:10px; color:#959595;}

/******************************************************************************************************************************************
	paging CSS (페이징 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.listPaging {width:100%; margin:30px auto; text-align:center}
.listPaging a {display:inline-block;border-radius: 50%;font-size:1em;border:1px solid #111;width: 40px;height: 40px;line-height: 38px;vertical-align: middle; margin: 0px 2px;}
.listPaging strong {display:inline-block;border-radius: 50%;font-size:1em;border:1px solid #111;width: 40px;height: 40px;line-height: 38px;vertical-align: middle; background: #111; color: #fff;}
.listPaging a {color:#555;border: 1px solid #ccc;}
.listPaging a:hover, .listPaging a:active, .listPaging a:focus {text-decoration:underline}
.listPaging span {visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0; line-height:0} 
.pageBtn:hover, pageBtn:active, pageBtn:focus,.last:hover, .last:active, .last:focus,
.pageprev:hover, .pageprev:active, .pageprev:focus,.prev:hover, .prev:active, .prev:focus {background-color:#f8f8f8}
.pageBtn,.last, .pageprev,.prev {display:inline-block; width:48px; height:48px; vertical-align:middle; border:1px solid #bcbcbc}
.pageBtn {background:url('../images/sub/bbs_next.png') no-repeat 50% 50%}
.last {background:url('../images/sub/bbs_next_end.png') no-repeat 50% 50%}
.pageprev {background:url('../images/sub/bbs_prev.png') no-repeat 50% 50%}
.prev {background:url('../images/sub/bbs_prev_end.png') no-repeat 50% 50%}


/******************************************************************************************************************************************
	사이트맵 스타일
*******************************************************************************************************************************************/
.conWrap {width:100%; padding:0px 5%; margin: 0 auto; box-sizing:border-box;}
.site_map {position:relative; padding:15px 0; border-top:1px solid #ccc}
.site_map::before {position:absolute; top:-1px; left:0; content:""; display:block; width:80px; height:3px; background:#f13b36}
.site_map p {display:inline-block; width:20%; margin-top:20px; margin-bottom:0; vertical-align:top; font-size:1.8em; font-weight:500; color:#222}
.site_map .sub_menu {display:inline-block; overflow:hidden; width:79%}
.site_map .sub_menu li {position:relative; float:left; width:23%; margin:0.9%; border:1px solid #ddd; border-radius:0px 10px;}
.site_map .sub_menu li:hover a {color:#222; text-decoration:none}
.site_map .sub_menu li:hover ul li a {border:none; color:#555}
.site_map .sub_menu li a {display:block; line-height:36px; font-size:1.15em; padding:5px 30px; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.site_map .sub_menu li:nth-child(4n+1) {clear:both}
.site_map .sub_menu li ul {margin:10px 10px 10px 0px; padding:10px 10px; border-radius:20px; border:1px solid #eee; background:#f9f9f9;}
.site_map .sub_menu li ul li {float:none; width:100%; position:relative; margin:0}
.site_map .sub_menu li ul li::before {content:""; position:absolute; left:0; top:15px; width:6px; height:1px; background:#999}
.site_map .sub_menu li ul li a {line-height:20px; text-align:left; border:none; padding-left:14px; font-size: 1em; color: #666;}
.site_map .sub_menu li ul li a:hover {text-decoration:underline}
.site_map .sub_menu li ul li ul {margin-top:0; margin-left:18px; font-size:0.9em}
.site_map .sub_menu li ul li ul li::before {top:11px; width:4px; height:4px; border-radius:50%}
.site_map .sub_menu li ul li ul li a {line-height:15px; padding-left:12px; font-size: 0.9em;}


.txt_c {text-align: center !important;}
.txt_l {text-align: left !important;}
.txt_r {text-align: right !important;}

.txt_org {color:#eb6100 !important;}
.txt_blue {color:#00479d !important;}
.txt_green {color:#009944 !important;}
.txt_gray {color:#666666 !important;}
.txt_red {color:#e60012 !important;}