@charset "utf-8";

.gnb-wrap {height: 110px;background: #4f3fa3;}
.offscreen{ overflow: hidden; position: absolute; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ clip: rect(1px, 1px, 1px, 1px); }
#mainGnb{ height: 110px; background: #4f3fa3; }
#mainGnb:hover{ background: rgba(255, 255, 255, 0.1); background-color: #5d56a1; border-bottom: 1px solid #fff; }
.header-top{ height: 110px; line-height: 80px; }
.gnb-wrap h1{ width: 300px; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; top: 12px; }
.drop-wrap{ padding-top: 110px;}
.container{ width: 100%; max-width: 100%; top: 0; }

/* site-navi style */
.site-navi{ display: flex; width: 100%; height: 60px; border-bottom: 1px solid #ddd; }
.site-navi::after{ display: block; content: ''; clear: both; }
.home{ display: block; float: left; width: 60px; border-right: 1px solid #ccc; line-height: 60px; text-align: center; font-weight: 700;  color: #4f3fa3; }
/* The container must be positioned relative: */
.custom-select{ display: block; float: left; position: relative; border-right: 1px solid #ccc; flex: 0 0 auto; }
.custom-select select{ display: none; /*hide original SELECT element: */}
.select-selected{ background-color: #fff; }
.custom-select.depth1{ padding: 0 32px 0 0; min-width: 200px; }
.custom-select.depth1 > .select-selected{ font-weight: 700;  color: #4f3fa3; }
.custom-select.depth2{ padding: 0 32px 0 0; min-width: 200px; }
.custom-select.depth2 > .select-selected{ font-weight: 700;  color: #4f3fa3; }

.custom-select.depth3{ padding: 0 80px 0 0; min-width: 200px; }
.custom-select.depth3 > .select-selected { font-weight: 700; color: #4f3fa3; }

/* Style the arrow inside the select element: */
.select-selected:after{ position: absolute; width: 0; height: 0; content: ""; border: 6px solid transparent; border-color: #222 transparent transparent transparent; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; top: 27px; right: 10px; }

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after{ border-color: transparent transparent #222 transparent; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; top: 21px; }

/* style the items (options), including the selected item: */
.select-items a, .select-selected { display:block; padding: 17px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; color: #333 !important; cursor: pointer; }

/* Style items (options): */
.select-items{ position: absolute; z-index: 99; background-color: #fff; top: 100%; left: 0; right: 0; }

/* Hide the items when the select box is closed: */
.select-hide{ display: none; }

.same-as-selected, .select-items a:hover{ font-weight: 800; background-color: rgb(249, 248, 255); color: #4f3fa3; }

/* page title wrap style*/
.page-title-wrap{ width: 100%; padding: 50px 0 20px; background: #f9f9f9; text-align: center;}
.page-title-wrap > .inner{ margin: 0 auto; width: 1024px;  }
.page-title-wrap > .inner > img{ margin-bottom: 10px; }
.page-title-wrap > .inner > h4{ margin-bottom: 10px; font-size: 2em; font-weight: 900; line-height: 75px; color: #222; }
.page-title-wrap > .inner > .page-subtext{ display: block;  font-size: 17px; line-height: 34px; color: #8c8c8c; }

/* page title wrap : board style */
.page-title-wrap.board-title > .inner > h4{ font-size: 20px; color: #4f3fa3; }
.page-title-wra.board-title > .inner > .page-subtext{ display: none; }
.page-title-wrap.board-title .board-view-title{ color: #666; }
.page-title-wrap.board-title .board-view-title h5{ font-size: 40px; font-family: 'Noto Sans KR', sans-serif !important; color: #333; }

.type-view1 .board-view-title .view-title{ display: block; margin: -20px 0 10px; }
.type-view2 .board-view-title .view-title{ display: block; margin: 10px 0; }
.board-view-title .view-category{ display: inline-block; padding: 0.3em 1em; border-radius: 3px; font-weight: bold; background: #797979; color: #fff; }
.board-view-title .view-date{ margin-right: 2%; color: #666; letter-spacing: 1.5px; }
.board-view-title .view-view{ margin-left: 2%; color: #666; letter-spacing: 1.5px; }
.type-view3 p.company{ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc; font-weight: bold; font-size: 1.5em; text-align: center; }
.type-view3 .view-table dl{ width: 50%; margin: 0 auto; line-height: 2.5em; }
.type-view3 .view-table dl::after{ display: block; content: ''; clear: both; }
.type-view3 .view-table dl dt{ float: left; width: 30%; font-weight: bold; color: #666; text-align: left; }
.type-view3 .view-table dl dd{ float: left; width: 70%; color: #222; text-align: center; }
.type-view3 .view-table dl.recruitment-contents{ width: 100%; }
.type-view3 .view-table dl.recruitment-contents dt{ width: 100%; }
.type-view3 .view-table dl.recruitment-contents dt p{ display: none; }
.type-view3 .view-table dl.recruitment-contents dt > div{ padding: 3%; font-weight: normal; line-height: 2em; background: #fbfbfb; color: #222; }
.type-view3 .view-table dl.recruitment-contents dt > div div{ width: 100% !important; }
.type-view3 .company span{ display: inline-block; margin-left: 10px; padding: 0.3em 0.5em; border-radius: 3px; -webkit-border-radius: 3px; font-size: 0.7em; color: #fff; }
.type-view3 .company span.ing{ background: #E07415; }
.type-view3 .company span.fin{ background: #777; }
.view-table.write input{ width: 100%; height: 40px; padding-left: 15px; border: 1px solid #ccc; font-size: 0.9em; line-height: 40px; }
.view-table.write select{ width: 100%; height: 40px; padding-left: 15px; border: 1px solid #ccc; font-size: 0.9em; line-height: 40px; background: #fff; }
.view-table.write dl{ width: 100%; }
.view-table.write dl.recruitment-contents{ margin-bottom: 20px; }
.view-table.write dl dt{ width: 12%; }
.view-table.write dl dd{ width: 85.5%; }
.view-table.write .half-write{ float: left; width: 50%; }
.view-table.write .half-write dt{ width: 24%; font-size: 0.9em; }
.view-table.write .half-write dd{ width: 71%; }
.view-table.write .recruitment-contents textarea{ width: 97.5%; height: 500px; border: 1px solid #ccc; font-size: 0.8em; font-family: 'NanumSquare','Noto Sans KR','돋움',dotum,sans-serif !important; }
.view-table.write .recruitment-contents span.cke_browser_ie{ width:97.5% !important; }
.type-view3 .view-table.write dl.recruitment-contents dt div{ padding: 0; }
.type-view3 .view-table.write .add{ margin-bottom: 2px; }
.type-view3 .view-table.write .add::after{ display: block; content: ''; clear: both; }
.type-view3 .view-table.write .add > input{ float: left; width: 41.5%; }
.type-view3 .view-table.write .add > a{ float: left; margin-left: 10px; padding: 0 1em; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; line-height: 39px; background: #333; color: #fff; text-align: center; }
.type-view3 .view-table.write dl:last-child dd:last-child input{ margin-left: 14%; margin-top: 3px; }
.view-table.edit{ margin: 0 24%; margin-bottom: 50px; padding: 37px; background: #f1f1f1; }
.view-table.edit dl{ width: 100%; margin: 0 auto; }
.view-table.edit dl input{ width: 80%; height: 40px; padding-left: 15px; border: 1px solid #ccc; font-size: 0.9em; line-height: 40px; }
.edit-tt{ margin-bottom: 30px; font-weight: bold; font-size: 1em; color: #666; }

/* content style */
.content{ width: 1024px; margin: 0 auto; padding: 85px 0; background: #fff; text-align: center; }
.content::after{ display: block; content: ''; clear: both; }
.content .isc{ margin-bottom: 80px; }
.content .isc::after{ display: block; content: ''; clear: both; }
.content .isc:last-child{ margin-bottom: 100px; }
.content .isc h5.sc-title{ display: inline-block; margin-bottom: 25px; background: url('../images/images/sub_text_bg.png') 0 24px repeat-x; font-weight: 900; font-size: 24px; color: #4f3fa3; }
/* 2024 content style */

/* 예술활동증명신청안내 */
/*.txt-box { padding: 18px 19.5px; border: 2px solid #555; border-radius: 10px; color: #222; text-align: left; }
.txt-box.blue { background: #F3F5FF; }
.proof-accor-box { border: 1px solid #ddd; }
.proof-accor-box + .proof-accor-box { border-top: none; }
.proof-accor-title a { display: block; position: relative; width: 100%; padding: 14px 20px; text-align: left; }
.proof-accor-title a::before { display: block; position: absolute; top: 22px; right: 20px; width: 15px; height: 9px; background: url(../images/images/proof-arrow.png) no-repeat; transition: 0.3s; content: ''; }
.proof-accor-title span { font-size: 17px; font-weight: 600; color: #222; }
.proof-accor-con { display: none; width: 100%; padding: 25px 45px; border-top: 1px solid #ddd; background: #f9f9f9; }
.proof-accor-img-wrap img { max-width: 100%; min-height: 100%; }
.proof-accor-ex { text-align: left; }
.proof-accor-ex span { display: inline-block; padding: 4.5px 15px; background: #fff; text-align: left; }
.proof-accor-ex span + span { margin-top: 5px; }
.proof-accor-img-wrap li { display: flex; }
.proof-accor-img-wrap li + li { margin-top: 20px; }
*/
/* 2024 content style end */
.content .isc p.sc-text { /*padding: 0 20px;*/
    font-weight: 700;
    font-size: 16px;
    line-height: 33px;
    color: #494949;
}
#myBtn:hover{ background-color: #fd9802;/* Add a dark-grey background on hover */}
.content .isc h6.btntitle{ display: block; width: 200px; margin: 0 auto; font-weight: bold; font-size: 19px; color: #616161; }
 .content .isc .btnbox{ display: flex; width: 100%; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.content .isc .btnbox::after{ display: block; content: ''; clear: both; }
.content .isc .btnbox h6{ display: block; }
.content .isc .btnbox.col3 > a{ display: inline-block; margin: 0 1% 2%; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; text-align: center; flex: 0 0 40%; }
.content .isc .btnbox.col2 > a{ margin: 0 2% 2%; }
.content .isc .btnbox a.btn-down-grey{ position: relative; width: 235px; height: 60px; margin: 10px; font-size: 14px; background: #666; color: #fff; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; }
.content .isc .btnbox a.btn-down-grey:hover{ background: #222; }
.content .isc .btnbox a.btn-down-grey span{ position: absolute; width: 80%; line-height: 60px; transition: 0.2s linear; left: 3%; }
.content .isc .btnbox a.btn-down-grey span:hover{ text-decoration: underline; }
.content .isc .btnbox a.btn-down-grey span.line2{ margin-top: 8px; line-height: 22px; }
.content .isc .btnbox a.btn-down-grey > i{ display: inline-block; position: absolute; width: 20px; height: 41px; margin-right: 20px; border-bottom: 1px solid #ccc; font-size: 14px; line-height: 60px; right: 0; }
.content .isc .btnbox a.btn-style1 { position: relative; width: 260px; height: 60px; margin: 0 10px 30px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; font-size: 18px; line-height: 60px; background: #4f3fa3; color: #fff; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; }
.content .isc .btnbox a.btn-style1:hover{ background: #d43d56; text-decoration: underline; }
.content .isc .btnbox a.btn-style1 span.line2{ margin-top: 8px; line-height: 22px; }
.content .isc .btnbox a.btn-style2{ position: relative; margin: 1%; padding: 12px 1%; border: 3px solid #afafaf; border-radius: 3px; font-size: 16px; line-height: 30px; background: #777777; color: #fff; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; flex: 0 0 350px; }
.content .isc .btnbox a.btn-style2:hover{ background: #3f3f3f; color: #fdf902; }
.content .isc a.btn-indiv{ display: inline-block; padding: 10px 20px; border-radius: 3px; font-weight: bold; background: #333; color: #fff; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; }
.content .isc .btnbox a.btn-style3{ position: relative; width: 260px; height: 60px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; font-size: 18px; line-height: 60px; background: #6e9c1f; color: #fff; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; }
.content .isc a.btn-indiv:hover{ background: #fd9802; }
.content .isc a.btn-mini{ display: inline-block; padding: 5px 10px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; font-weight: bold; font-size: 0.8em; background: #666; color: #fff; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; }
.content .isc a.btn-mini:hover{ background: #fd9802; }
.board-btn-area{ display: flex; width: 100%; justify-content: center; text-align: center;}
.board-btn-area::after{ display: block; content: ''; clear: both; }
.board-btn-area a.boardbtn{ display: inline-block; margin: 40px 2% 0; padding: 0; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; font-size: 1.1em; line-height: 64px; color: #fff; flex: 0 0 250px; transition: 0.4s linear; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; }
.board-btn-area a.boardbtn.list{ background: #4f3fa3; }
.board-btn-area a.boardbtn.list:hover{ font-weight: bold; background: #6a59bd; }
.board-btn-area a.boardbtn.edit, .del{ background: #808080; }
.board-btn-area a.boardbtn.edit, .board-btn-area a.boardbtn.write, .del:hover{ background: #636363; }
.board-btn-area a.boardbtn.write:hover{ background: #444; }
.board-btn-area a.boardbtn.save{ background: #d43d56; }
.board-btn-area a.boardbtn.save:hover{ background: #bb4b5e; }

/* contents box style */
.content .isc .referencebox{ line-height: 30px; color: #666; }
.linebox{ width: 100%; padding: 30px 20px; border: 2px solid #8b99d8; text-align: left; }
.linebox::after{ display: block; content: ''; clear: both; }
.linebox h6.tt{ font-weight: bold; font-size: 19px; color: #7D8DD4; }
.linebox p{ line-height: 33px; text-align: left; }
.linebox p.innertext{ padding-left: 20px; font-size: 15px; line-height: 28px; color: #555; }
p.text-pdl{ padding-left: 15px; }
.nolinebox{ width: 100%; }
.nolinebox::after{ display: block; content: ''; clear: both; }
.nolinebox h6.tt{ font-weight: bold; font-size: 19px; color: #7780d6; }
.nolinebox p{ font-size: 17px; line-height: 33px; color: #8a8a8a; }
.nolinebox p.innertext{ font-size: 15px; line-height: 28px; color: #222; }
.nolinebox p span{ margin-right: 4px; font-weight: bold; }
.inner-grey-box{ padding: 4%; background: #f9f9f9; text-align: left; color: #696969; }
.inner-grey-box::after{ display: block; content: ''; clear: both; }
.inner-grey-box h6{ font-weight: bold; font-size: 16px; color: #191919; }
.inner-grey-box p{ margin-top: 20px; font-weight: bold; font-size: 15px; }
.inner-grey-box p:first-child{ margin-top: 0; }
.inner-grey-box span{ display: block; margin-top: 9px; padding-left: 2%; font-size: 15px; line-height: 25px; }

/* tab style */
.pc-2dep-tab{ display: flex; position: absolute; width: 1310px; right: 50%; transform: translate(50%,15px); justify-content: center; }
/*.pc-2dep-tab{ display: flex; position: relative; width: 1310px; margin: 20px auto 0; justify-content: center; top: 27px; }*/
.pc-2dep-tab > button{ display: inline-block; padding: 15px 9px; border-bottom: 3px solid #fff; font-weight: bold; font-size: 15px; font-family: 'NanumSquare','Noto Sans KR','돋움',dotum,sans-serif !important; background: #eaeef1; flex: 1; color: #000; word-break: keep-all; }
.pc-2dep-tab > button.active{ font-weight: bold; background: #4f4bae; color: #ffdb21; }
.pc-3dep-tab{ display: flex; width: 1000px; margin: 0 auto 75px; justify-content: center; }
.pc-3dep-tab > a{ display: inline-block; margin: 0 3px; padding: 10px 0; border:3px solid #919191; font-weight: bold; font-size: 15px; color: #919191; flex: 1; }
.pc-3dep-tab > a.active{ border:3px solid #4f4bae; font-weight: bold; color: #4f4bae; }
.aw-ylw-tab{ display: flex; width: 80%; margin: 20px auto 40px; justify-content: center; }
.aw-ylw-tab > button{ display: inline-block; padding-bottom: 10px; border-bottom: 3px solid #fff; font-weight: 700; font-size: 17px; font-family: 'NanumSquare','Noto Sans KR','돋움',dotum,sans-serif !important; color: #444; flex: 0 0 20%; }
.aw-ylw-tab > button.active{ border-bottom: 3px solid #e07415; color: #e07415; }
.aw-ylw-tab-box h6{ font-weight: bold; font-size: 17px; color: #8b99d8; }
.aw-ylw-tab.board{ display: flex; width: 100%; margin: 22px auto 0; flex-wrap: wrap; justify-content: center; }
.aw-ylw-tab.board > button{ display: inline; margin: 1em; padding-top: 0; padding-bottom: 0.8em; border-bottom: 3px solid #f9f9f9; font-weight: 700; font-size: 19px; font-family: 'NanumSquare','Noto Sans KR','돋움',dotum,sans-serif !important; Color: #444; flex: 0 0 4.7em; letter-spacing: -1px; }
.aw-ylw-tab.board > button.active{ border-bottom: 3px solid #e07415; color: #e07415; }
.tab.step{ display: flex; overflow: hidden; border: 2px solid #8b99d8; background-color: #edf0ff; }

/* Style the buttons inside the tab */
.tab.step > button{ float: left; padding: 14px 16px; border: none; border-right: 2px solid #8b99d8; font-weight: bold; font-size: 17px; font-family: 'NanumSquare','Noto Sans KR','돋움',dotum,sans-serif !important; flex: 1;/* outline: none; */background-color: inherit; cursor: pointer; transition: 0.3s; color: #6671d7; }
.tab.step button:last-child{ border-right: none; }
span.step-arrow{ display: block; width: 35px; margin: 0 auto; border-radius: 3px; font-size: 11px; line-height: 20px; background: #777; color: #fff; text-align: center; }

/* Change background color of buttons on hover */
.tab.step button:hover{ background-color: #d9e0ff; }

/* Create an active/current tablink class */
.tab.step button.active{ background-color: #7780d6; color: #fff; }

/* Style the tab content */
.tabcontent.stepbox{ display: none; padding: 30px; border: 2px solid #8b99d8; border-top: none; text-align: left; }
.tabcontent.stepbox > h6{ margin: 0 0 10px; font-weight: bold; text-align: left; color: #7D8DD4; }
.tabcontent.stepbox > p{ line-height: 28px; color: #333; text-align: left; }
p.bgtext{ display: inline-block; margin-bottom: 6px; padding: 0 15px; font-weight: 600; font-size: 14px; line-height: 32px; background: #eeeeee; color: #6d6d6d; }
span.bgtext{ display: inline-block; margin-bottom: 6px; padding: 0 15px; font-weight: 600; font-size: 13px!important; line-height: 32px; background: #eeeeee; color: #f11651; }
p.bgtext span{ display: block; margin-bottom: 4px; font-weight: normal; line-height: 20px; }
p.bgtext > span.nextstep{ display: inline-block; margin: 0 3px; }
.vertical-step-box{ display: flex; flex-wrap: wrap; justify-content: space-around; }
.vertical-step-box > div{ padding: 10px 0; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; flex: 0 0 23%; background: #e3e8ff; }
.vertical-step-box > div > p{ font-weight: bold; }
.arrow-down{ line-height: 60px; color: #777; }

/* toggle */
.faq > ul{ width: 100%; }
.faq ul > li.questionbox{ width: 100%; margin-bottom: 10px; border: 2px solid #4f3fa3; }
.faq ul > li.questionbox > a.que{ display: block; width: 100%; line-height: 60px; }
.faq ul > li.questionbox > a.que::after{ display: block; content: ''; clear: both; }
.faq ul > li.questionbox > a.que:hover > p{ text-decoration: underline; }
.faq ul > li.questionbox > a.que.active > p{ background: #4f3fa3; color: #fff; }
.faq ul > li.questionbox > a.que > span{ display: block; float: left; width: 55px; height: 100%; font-size: 2em; line-height: 60px; background: #4f3fa3; color: #fff; }
.faq ul > li.questionbox > a.que > p{ float: right; width: calc(100% - 55px); padding-left: 15px; font-size: 1.1em; font-weight: 400; text-align: left; }
.faq ul > li.questionbox ul.ans{ display: none; }
.faq ul > li.questionbox ul.ans li.answerbox{ width: 100%; padding: 2%; }
.faq ul > li.questionbox ul.ans li.answerbox::after{ display: block; content: ''; clear: both; }
.faq ul > li.questionbox ul.ans li.answerbox span{ float: left; width: 55px; font-size: 2em; font-weight: bold; color: #4f3fa3; }
.faq ul > li.questionbox ul.ans li.answerbox > div{ float: right; width: calc(100% - 55px); margin-top: 4px; padding-left: 15px; font-size: 1.1em; text-align: left; }

/* sub content table style */
.table-con{ width: 100%; line-height: 30px; }
.table-con.law tbody td{ font-size: 14px; line-height: 21px; }
.table-con caption{ overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(1px, 1px, 1px, 1px); clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ }
.table-con thead{ background: #6374c3; color: #fff; }
.table-con thead th{ padding: .5% 2%; border-right: 1px solid #aebaec; vertical-align: middle; text-align: center; }
.table-con thead th:last-child{ border-right: 1px solid #8b99d8; }
.table-con tbody th{ background: #7D8DD4; border-right: 1px solid #ffffff; border-bottom: 1px solid #aebaec; color: #fff; vertical-align: middle; text-align: center; }
.table-con tbody tr:last-child th{ border-bottom: 1px solid #8b99d8; }
.table-con tbody td{ padding: .5% 2%; border-right: 1px solid #8b99d8; border-top: 1px solid #8b99d8; border-bottom: 1px solid #8b99d8; vertical-align: middle; }
.table-con thead .bdb{ border-bottom: 1px solid #8b99d8; }
.table-con tbody .bdl{ border-left: 1px solid #8b99d8; }
.table-con tbody th.bdl{ border-left: 1px solid #aebaec; }
.table-con span{ font-size: 15px; }
.table-con span.innertext{ display: inline-block; padding-left: 2%; }
.innertable{ display: flex; width: 100%; flex-wrap: wrap; justify-content: center; }
.innertable ul{ flex: 1; }
.innertable ul li{ border: 1px solid #ccc; text-align: center; }
.innertable ul li.th{ font-weight: bold; background: #f1f1f1; }
.innertable .colspan{ height: 64px; }
.innertable .tbody .colspan{ line-height: 64px; }

/* sub1-1-2 */
.art-field > div .art-field-period{ font-weight: bold; color: #8c8c8c; }
.art-field > div .standard{ margin-bottom: 10px; }
.art-field > div .standard > h6{ margin-top: 10px; font-size: 18px; line-height: 30px; text-align: left; }
.art-field > div .standard p{ padding-left: 1%; line-height: 30px; text-align: left; }
.art-field > div .standard p::after{ display: block; content: ''; clear: both; }
.art-field > div .standard p > span{ float: left; }
.art-field > div .standard p span.job{ margin-right: 10px; font-weight: bold; }
.art-field > div .standard p span.innertext{ display: block; padding-left: 1%; clear: both; }

/* sub1-8 */
.bus8-step{ display: flex; margin-bottom: 40px; flex-wrap: wrap; justify-content: space-around; }
.bus8-step::after{ display: block; content: ''; clear: both; }
.bus8-step dl{ flex: 0 0 24%; }
.bus8-step dl dt{ background: #606db3; color: #fff; }
.bus8-step dl dd{ border: 1px solid #606db3; color: #666; }

/* board style */
.board-wrap{ width: 100%; }
.board-wrap::after{ display: block; content: ''; clear: both; }
.board-wrap .board-header{ width: 100%; margin: 0 auto; font-size: 17px; }
.board-wrap .board-header::after{ display: block; content: ''; clear: both; }
.board-wrap .board-header .count{ float: left; width: 10%; font-weight: bold; text-align: left; }
.board-wrap .board-header .board-select-wrap{ float: right; display: flex; width: 50%; flex-wrap: wrap; justify-content: flex-end; }
.board-wrap.type-list3 .board-header .board-select-wrap{ width: 90%; }
.board-wrap .board-header .board-select-wrap .selectbox{ flex: 1; }
.board-wrap .board-header .board-select-wrap .searchbox{ position: relative; }
.board-wrap .board-header .board-select-wrap .searchbox input{ position: absolute; left: 0; }
.board-wrap .board-header .board-select-wrap .searchbox a{ position: absolute; right: 15px; top: 7px; }
.board-wrap .board-header input[type=text]{ width: 90%; margin-left: 1em; padding: 0.5em 0.3em; border-bottom: 1px solid #222; font-weight: bold; font-size: 16px; font-family: inherit; background: #fff; color: #111; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; -moz-transition: width 0.4s ease-in-out; -ms-transition: width 0.4s ease-in-out; -o-transition: width 0.4s ease-in-out; }
/* When the input field gets focus, change its width to 100% */
.board-wrap .board-header input[type=text]:focus{ width: 90%; font-family: inherit; background: #fff; }
.board-wrap .board-header input[type=text]::placeholder{ color: #111; }
.board-wrap .board-header select{ width: 90%; margin-left: 1.1em; padding: 0.5em 0.3em; border: none; border-bottom: 1px solid #222; border-radius: 0; font-weight: bold; font-size: 16px; font-family: inherit; background: url("../images/images/selectbox_icon.png") no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.board-wrap .board-header select::-ms-expand{ display: none; }

/* board - list type1*/
.board-list{ width: 100%; margin-top: 20px; }
.board-list ul li{ width: 100%; padding: 1em 0; border-bottom: 1px solid rgb(209, 209, 209); font-size: .93em; }
.board-list ul li:first-child{ padding: 0; font-size: 1em; }
.board-list ul li::after{ display: block; content: ''; clear: both; }
.board-list ul li p{ float: left; }
.board-list ul li .cg{ font-weight: bold; color: #777; }
.board-list ul li p.number{ width: 8%; text-align: center; }
.board-list ul li p.number span.ctgr{ display: inline-block; padding: 0.3em 0.7em; border-radius: 3px; font-size: .8em; background: #f11651; color: #fff; }
.board-list ul li p.title{ font-family: 'Noto Sans KR', sans-serif !important; text-align: left; }
/* .board-list ul li p.title a {
display: inline-block;
font-size: 1.1em;
} */
.board-list ul li p.date{ width: 15%; text-align: center; color: #777; }
.board-list ul li:hover p.title{ text-decoration:none; color:#777; }
.board-list ul li:hover p.title a{ font-size: 1em; color: #4f3fa3; font-weight: bold; text-decoration:underline ; }
.board-list ul li:first-child{ border-top: 2px solid #777; font-weight: bold; line-height: 50px; background: #f2f2f2; }
.board-list ul li:first-child p{ padding: 0; }
.board-list ul li:first-child p.title{ text-align: center; }

.type-list1 .board-list ul li p.title{ width: 77%; font-size: 1em; }

/* board - list type2*/
.type-list2 .inner-tab .board-tab{ display: flex; width: 100%; margin: 0 0 40px; flex-wrap: wrap; justify-content: center; }
.type-list2 .inner-tab .board-tab button{ margin: 0.4em 0.8em; padding: 0.8em 0.35em; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; font-weight: bold; font-size: 1.2em; line-height: 1em; flex: 0 0 16em; background: #e8e8e8; color: rgb(77, 77, 78); letter-spacing: -1px; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; }
.type-list2 .inner-tab .board-tab button:hover{ font-weight: bold; background: #777; color: #fff; }
.type-list2 .inner-tab .board-tab button.active{ font-weight: bold; background: #4f3fa3; color: #fff; }

/* board - list type1*/
.type-list3 .inner-tab .board-tab{ display: flex; width: 100%; margin: 0 0 40px; flex-wrap: wrap; justify-content: center; }
.type-list3 .inner-tab .board-tab button{ margin: 0.4em 0.8em; padding: 0.8em 6.5em; border-radius: 3px; font-size: 1.2em; line-height: 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; background: #dedede; letter-spacing: -1px; color: rgb(120, 116, 133); flex: 0 0 25em; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; }
.type-list3 .inner-tab .board-tab button:hover{ font-weight: bold; background: #8b99d8; color: #fff; }
.type-list3 .inner-tab .board-tab button.active{ font-weight: bold; background: #4f3fa3; color: #fff; }
.type-list3 .board-list ul li p{ font-size: 1em; }
.type-list3 .board-list ul li p.number{ display: none; }
.type-list3 .board-list ul li p.state{ width: 8%; }
.type-list3 .board-list ul li p.company{ width: 15%; font-weight: bold; }
.type-list3 .board-list ul li p.job{ width: 10%; }
.type-list3 .board-list ul li p.title{ width: 57%; font-size: 1em; }
/* .type-list3 .board-list ul li p.title a {
font-size: 1em;
} */
.type-list3 .board-list ul li p.date{ width: 10%; }
.type-list3 .board-list ul li p.state span{ display: inline-block; padding: 0.3em 0.5em; border-radius: 3px; font-size: 0.8em; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; color: #fff; }
.type-list3 .board-list ul li p.state span.ing{ background: #e07415; }
.type-list3 .board-list ul li p.state span.fin{ background: #777; }

/* board - view type1*/
.board-wrap .view-con{ width: 100%; padding-bottom: 30px; border-bottom: 1px solid #ccc; font-size: 1.1em; text-align: left; }
.board-wrap .view-con::after{ display: block; content: ''; clear: both; }
.view-con .attachment{ margin: 70px 1% 30px; padding: 10px 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; line-height: 1em; background: #eee; }
.view-con .attachment i{ font-size: 0.8em; color: #747474; }
.view-con .attachment a{ margin-left: 10px; font-size: 0.9em; }
.view-con .attachment a:hover{ text-decoration: underline; }
.view-footer{ padding: 50px 0; }
.next, .page-control .prev{ font-size: 1.1em; line-height: 2em; }
.page-control a i{ font-size: 1em; }
.page-control a span{ margin: 0 5px; }
.pagination{ display: flex; width: 50%; margin: 50px auto 0; }
.pagination::after{ display: block; content: ''; clear: both; }
.pagination a{ margin: 0 2%; font-size: 1.1em; flex: 0 0 3%; color: #555; }
.end, .next, .pagination .first, .prev{ color: #777; }
.pagination a:hover{ border-bottom: 3px solid #777; font-weight: bold; color: #777; }
.pagination a.active{ border-bottom: 3px solid #4f3fa3; font-weight: bold; color: #4f3fa3; }

/* sub 1-4 : card type list */
.card-type-list{ display: flex; width: 100%; justify-content: center; flex-wrap: wrap; }
.card-type-list li{ margin: 50px 4%; flex: 0 0 250px; }
.card-type-list li > div > img{ display: block; width: 100%; height: 300px; background: #000; }
.card-type-list li > div > p{ padding: 20px 6%; font-weight: bold; font-size: 18px; transition: 0.5s linear; }
.card-type-list li > div > a{ display: block; width: 100%; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; line-height: 60px; background: #333; color: #fff; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; }
.card-type-list li:hover > div > p{ color: #4f3fa3; }
.card-type-list li:hover > div > a{ background: #4f3fa3; }

/* sub 2-1 style */
.contract-title{ width: 100%; padding: 5%; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; background: #f3f5ff; }
.contract-title .head{ font-style: italic; font-weight: bold; font-size: 2em; color: #5d6db5; }
.contract-title .head span{ color: #afb1bd; }
.contract-title .txt{ margin-top: 15px; padding: 0 35px; font-size: 1em; line-height: 2em; color: #555; }
.contract li{ width: 100%; margin-top: 15px; padding: 0.5em 0; border: 3px solid #ddd; background: #fff; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; }
.contract li:first-child{ margin-top: 0; }
.contract li:hover{ background: #f1f1f1; }
.contract li > div::after{ display: block; content: ''; clear: both; }
.contract li > div > p{ float: left; margin-left: 2%; font-weight: bold; line-height: 2.5em; color: #555; }
.contract li > div > a{ float: right; margin-right: 2%; padding: 0.5em 0.8em; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; background: #555; color: #fff; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; }
.contract li > div > a:hover{ background: #222; }
.contract li > span{ display: block; padding-left: 2em; }
.design-area{ display: flex; width: 100%; margin: 120px auto 50px; justify-content: center; flex-wrap: wrap; }
.des-circle{ height: 250px; margin-left: -32px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border: 6px solid #cdd1e6; background: rgba(151, 160, 204, 0.1); flex: 0 0 250px; }
.design-area div:first-child{ margin-left: 40px; margin-right: -40px; }
.design-area div:nth-child(2){ margin-top: -120px; margin-bottom: 120px; }
.design-area div:nth-child(3){ margin-right: 40px; margin-left: -80px; }
.des-circle p{ padding: 100px 30px; font-weight: bold; font-size: 1.1em; line-height: 1.5em; color: #606db3; }

/* sub 2-2 table style */
.center-info-table{ width: 100%; }
.center-info-table li{ margin-bottom: 20px; }
.center-info-table li:last-child{ margin-bottom: 0; }
.center-info-table li::after{ display: block; content: ''; clear: both; }
.center-info-table li p.th{ font-weight: bold; }
.center-info-table li p.td{ margin-top: 10px; padding-left: 1%; }
.center-info-table li p span.innertext{ padding-left: 1%; font-size: 15px; }

/* sub 2-7 table style */
.isc .edu p{ width: 100%; }
.isc .edu p::after{ display: block; content: ''; clear: both; }
.isc .edu p span{ display: inline-block; }
.isc .edu p span.left{ float: left; margin-right: 3%; }
.isc .edu p span.right{ float: left; }

/* sub 4-1 style */
.intro1 > img{ position: absolute; min-width: 360px; width: 20%; right: 18%; bottom: 50%; transform: translateY(50%); }
.intro1 .ceoN{ position: absolute; right: 22%; bottom: 30%; }
.intro1 .ceoN span{ display: block; margin: 20px auto; font-weight: bold; color: #666; }
.intro1 p.intro{ width: 68%; padding: 2em; font-size: 1.1em; line-height: 1.8em; text-align: left; }
.intro1 p.intro img{ width: 118px; }

/* sub 4-2 style */
.intro2{ padding: 0 5%; }
.intro2 .inner-top span{ font-size: 2.2em; font-weight: bold; color: #4f3fa3; }
.intro2 .inner-top p{ width: 100%; font-size: 1.1em; line-height: 2em; }
.intro2 .mission{ float: left; width: 44%; }
.intro2 .vision{ float: right; width: 46%; }
.intro2 > div > .in{ width: 100%; padding: 4em 2em; background: #f8f8f8; }
.intro2 > div > img{ width: 89px; }
.intro2 > div > .in p{ margin-top: 10px; padding: 0 2.5em; font-size: 1.1em; line-height: 2em; }
.intro2 > div.vision > .in p{ margin-top: 30px; }
.intro2 > div.slogan{ width: 100%; clear: both; }
.intro2 > div.slogan p{ padding: 40px 0; font-size: 2.7em; background: #4f3fa3; color: #fff; }
.intro2 > div.slogan p span{ display: block; font-weight: bold; }
.intro2 > div.slogan > p > span:first-child{ font-weight: normal; }
.intro2 .purpose > div{ display: flex; font-weight: 600; flex-wrap: wrap; justify-content: space-between; }
.intro2 .purpose > div > span{ padding: 1.3em .5em; font-size: 1.1em; background: #f8f8f8; flex: 0 0 22%; }

/* sub 4-3 style */
.intro3 > ul{ margin-left: 50px; }
.intro3 > ul > li p.year{ display: inline-block; width: 60%; margin-top: 40px; margin-bottom: 10px; font-weight: bold; font-size: 1.8em; color: #5d6db5; text-align: left; }
.intro3 > ul > li > ul{ width: 60%; margin: 0 auto; }
.intro3 > ul > li > ul > li{ line-height: 40px; }
.intro3 > ul > li > ul > li::after{ display: block; content: ''; clear: both; }
.intro3 > ul > li > ul > li > span.bl{ float: left; display: block; width: 5px; height: 5px; margin-top: 17px; margin-left: 10px; margin-right: 10px; border-radius: 50%;; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: #afafaf; }
.intro3 > ul > li > ul > li > span.date{ float: left; width: 25%; padding: 10px 0; font-weight: bold; font-size: 1em; line-height: 21px; color: #777; text-align: left; }
.intro3 > ul > li > ul > li > p{ float: left; width: 65%; padding: 10px 0; line-height: 21px; text-align: left; }
.intro3 > ul > li > ul > li > p.nobl{ margin-left: 30%; }
.intro3 .report{ display: flex; flex-wrap: wrap; justify-content: space-around; }
.intro3 .report > div{ margin-bottom: 30px; padding: 2em 1em; background: #f8f8f8; flex: 0 0 19%; }
.intro3 .report > div p{ margin-bottom: 20px; font-weight: bold; font-size: 1.1em; }

/* sub4-4 style */
.intro4 .tabcontent span{ display: block; line-height: 30px; color: #666; }
.intro4 .tabcontent p{ margin: 10px 0; font-weight: bold;  text-align: left; }
.intro4 .tabcontent.stepbox > h6{ font-size: 1.2em; }
.intro4 #tab2 span, .intro4 #tab3 span{ text-align: center; }
.intro4 #tab2 span{ padding-left: 30px; }

/* sub4-5 style */
.orgchart-wrap{ width: 100%; background: url('../images/images/sub4_5_orgbg.png')0 0 no-repeat; background-size: 100%; }
.orgchart{ display: flex; margin-top: 40px; justify-content: space-around; flex-wrap: wrap; }
.orgchart a{ font-weight: bold; background: #fff; transition: .3s linear; -webkit-transition: .3s linear; -moz-transition: .3s linear; -ms-transition: .3s linear; -o-transition: .3s linear; }
.orgchart a:hover{ background: #f1f1f1; }
.orgchart.sc1 a{ display: inline-block; padding: 1em 0; border: 3px solid #b1a0cc; flex: 0 0 28%; }
.orgchart.sc1 a.directorate{ margin-left: 33.3%; border: 3px solid #8a70b4; font-weight: bold; background: #8a70b4; color: #fff; }
.orgchart.sc2{ margin-top: 20px; }
.orgchart.sc2 a{ display: inline-block; padding: 1em 0; border: 3px solid #b1a0cc; flex: 0 0 28%; }
.orgchart.sc3{ margin-top: 20px; }
.orgchart.sc3 a{ display: inline-block; padding: 1em 0; flex: 0 0 28%; }

.orgchart.sc3 #org04Open { margin-left: 33.4%; border: 3px solid #b1a0cc; }
.orgchart.sc3 #org05Open { margin-left: 1%; border: 3px solid #cdcdcd; transform: translateY(52px); }

.orgchart.sc3half{ margin-top: 100px; }
.orgchart.sc3half a{ padding: .5em 0; background: #555; flex: 0 0 24.7%; color:#fff; cursor: unset; }
.orgchart.sc3half a:first-child{ margin-left: 44%; }
.orgchart.sc3half a:last-child{ margin-left: 6%; }
.orgchart.sc4 { margin-top: 45px; }
.orgchart.sc4 a{ display: inline-block; padding: 2.5em 0; border: 3px solid #cdcdcd; line-height: 46px; flex: 0 0 11.5%; color: #777; }
.modal.md-org{ min-width: 800px; }
.org-title{ border-bottom: 1px dashed #ccc; font-size: 1.3em; font-weight: bold; line-height: 44px; color: #4f3fa3; }
.org-title .tel-common{ margin-left: 15px; font-size: .8em; color: #555; }
.md-org table{ font-size: .9em; text-align: center; }
.md-org table.md-table tbody th{ border-bottom: 1px solid #8b99d8; border-right: 1px solid #aebaec; border-left: 1px solid #aebaec; font-weight: bold; background: #fff; color: #333; }

/* sub4-6 style */
.content .isc.intro6 .btnbox > a{ flex: 0 0 50%; }

/* sub4-7 style */
#map{ width: 100%; border: 1px solid #ccc; }
.intro7 .linebox p{ margin-left: 15px; font-weight: bold; }
.intro7 .linebox p span{ display: inline-block; width: 20px; margin-right: 8px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; font-weight: bold; line-height: 20px; text-align: center; }
.intro7 .linebox p span.subway{ background: #0d99da; color: #fff; }
.intro7 .linebox p span.bus{ background: #8d8d8d; color: #fff; }
.intro7 .linebox p.bgtext{ margin-left: 40px; }

/* sitemap */
.sitemap{ width: 100%; }
.sitemap > li{ float: left; width: 33.3%; margin-bottom: 50px; padding: 0 1%; }
.sitemap > li:nth-child(4){ clear: both; }
.sitemap > li > h5{ display: block; width: 100%; font-weight: bold; font-size: 1.1em; line-height: 3em; background: #4f3fa3; color: #fff; }
.sitemap > li > ul > li{ background: #edf0ff; }
.sitemap > li > ul > li:hover{ background: #ffc349; }
.sitemap > li > ul > li > a{ display: block; padding: 0.5em; border-bottom: 1px solid #ccc; font-weight: bold; font-size: 1em; }
.sitemap > li > ul > li > ul{ padding: 0.5em 0; border-bottom: 1px solid #ccc; background: #f1f1f1; }
.sitemap > li > ul > li > ul > li > a{ display: block; padding: 0.3em 0; }
.sitemap > li > ul > li > ul > li > a:hover{ font-weight: bold; text-decoration: underline; }

/* privacy guide */
.guide-align { width: 100%; margin-bottom: 60px; padding: 2em; border: 3px solid #ddd; text-align: left; }
.guide-align h5{ margin-bottom: 10px; font-weight: 600; font-size: 1.5em; }
.guide-align .law-section{ margin-bottom: 20px; }
.guide-align .inner-1depth{ margin: 10px 0; padding-left: 2em; }
.guide-align .inner-1depth h6{ font-weight: bold; }
.guide-align .inner-1depth p{ padding-left: 1.3em; }
.guide-align .inner-2depth p{ padding-left: 2.6em; }
.guide-align table{ width: 100%; margin: 10px 0; border: 1px solid #ccc; text-align: center; }
.guide-align table thead{ background: #eee; color: #555; }
.guide-align table thead th{ border-right: 1px solid #ccc; font-weight: bold; line-height: 30px; vertical-align: middle; }
.guide-align table tbody th{ border-right: 1px solid #ccc; vertical-align: middle; }
.guide-align table tbody tr{ border-bottom: 1px solid #ccc; vertical-align: middle; }
.guide-align table tbody td{ border-right: 1px solid #ccc; line-height: 30px; vertical-align: middle; }
.map{ width: 100%; }
.map a img{ width: 100%; }
.sub1_9 .fL{ width: 50%; padding: 40px; background: #f2f2f2; }
.sub1_9 .fL p{ margin-bottom: 30px; text-align: left; }
.sub1_9 .fR{ width: 50%; }
.sub1_9 .fR ul li{ width: 90%; height: 180px; margin-left: 10%; margin-bottom: 42px; padding: 8%; border: 1px solid #ccc; text-align: center; transition: .3s linear; }
.sub1_9 .fR ul li:hover{ border: 1px solid #5c3ab2; }
.sub1_9 .fR ul li p{ font-weight: bold; font-size: 20px; line-height: 1.6; }
.sub1_9 .fR ul li a{ display: block; width: 60%; margin: 20px auto; border-radius: 3px; line-height: 40px; background: #666; color: #fff; transition: .3s linear; }
.sub1_9 .fR ul li:hover a{ background: #5c3ab2; }
.processbox{ display: flex; width: 100%; justify-content: center; flex-wrap: wrap; }
.processbox li{ font-size:14px; line-height: 22px; text-align: center; flex: 0 0 33%; }
.processbox li::after{ display: block; content: ''; clear: both; }
.processbox li .processbox-top{ display: flex; width: 100%; justify-content: space-between; flex-wrap: inherit; }
.processbox li .processbox-top > p{ position: relative; float: left; width: 100%; border: 2px solid #8b99db; font-weight: bold; color: #8b99db; line-height: 22px; text-align: center; flex: 0 0 48%; }
.processbox li .processbox-top > p > .nextstep{ position: absolute; z-index: 2; width: 20px; height: 20px; border: 2px solid #8b99db; border-radius: 50%; line-height: 14px; background: #fff; top: 13px; right: -16px; }
.processbox li .processbox-top::after{ display: block; content: ''; clear: both; }
.processbox li .processbox-bt{ display: flex; width: 100%; justify-content: space-between; flex-wrap: inherit; }
.processbox li .processbox-bt > p{ float: left; width: 50%; line-height: 22px; background: #8b99db; text-align: center; flex: 0 0 48%; color: #fff; }
.processbox li .processbox-bt > p.w100p{ flex: 0 0 98%; }
.processbox li .processbox-top> p.lh38{ line-height: 38px; }
.processbox li .processbox-bt::after{ display: block; content: ''; clear: both; }

/* 공공누리 이미지 */
.gonggong1{margin:40px 0 0;}
.gonggong2{margin:10px 0 0;}

/* 20211101 추가 */
.table-ethics tbody th, .table-ethics tbody td { width:7.14% !important; }
.table-ethics .bd-none { border: 1px solid #fff !important; background:red; }
.table-ethics .tx-strong { font-weight:bold; }
.table-ethics .tx-left { text-align: left; font-size:14px; }
.table-ethics .bg-strong { background:#edf0ff; }

/* 개인정보 박스 */
.personal-information { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 50px; gap: 20px; }
.personal-information > dl { position: relative; width: 32%; padding: 50px 0; border: 1px solid #E7E7E7; transition: 0.3s; }
.personal-information > dl:hover { border: 1px solid #4f4bae; }

.personal-information-title { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.personal-information-title figure { width: 104px; height: 91px; }
.personal-information-title figure img { width: 100%; height: 100%; }
.personal-information-title p { margin-top: 15px; font-size: 1.3em; font-weight: 600; }

.personal-information-popup { display: none; position: absolute; top: 20px; right: -330px; z-index: 10; width: 400px; border: 1px solid #4f4bae; transition: 0.3s; }
.personal-information > dl:hover .personal-information-popup { display: block; }
.personal-information-popup > p { padding: 10px; background: #4f4bae; font-size: 1.1em; font-weight: 600; color: #fff; text-align: start; }

.personal-information-popup-con { padding: 10px; background: #fff; text-align: left; }
.personal-information-popup-con li { padding: 10px 0; }
.personal-information-popup-con li + li { border-top: 1px solid #e1e1e1; }
.personal-information-popup-con dl { display: flex; }
.personal-information-popup-con dl dt { min-width: 171px; font-weight: 600; color: #4f4bae; }

/* 개인정보 21조 */
.personal-information-select-wrap > form { display: flex; }

#personalInformationSelect { width: 300px; height: 41px; padding: 8px; border: 1px solid #ccc; font-family: inherit; font-size: 16px;  background: url('../images/images/personal-information-arrow.png') no-repeat 98% 50%; }
#personalInformationSelect:focus { border: 1px solid #ccc; outline: none; }
.personal-information-select-btn { padding: 7px 15px; border: 1px solid #ccc; border-left: none; background: #eee; color: #555; font-weight: bold; vertical-align: middle; }

/* 방문예약 페이지 - 예약안내 */
.sc-span { display: block; font-weight: 400; line-height: 18px; }
.sc-text + .sc-text { margin-top: 4px; }

.vertical-step-area.reservation { padding: 10px 0 30px; }
.vertical-step-box.reservation { align-items: center; }
.vertical-step-con { display: flex; align-items: center; justify-content: center; height: 86px; }
.vertical-step-con p { text-align: center; }
.vertical-step-arrow { display: block; color:#888; }

/* .precautions-radio { display: flex; justify-content: flex-end; margin-top: 7px; gap: 30px; }
.visit-information-checkbox { display: flex; align-items: center; gap: 7px; }
.visit-information-checkbox input { width: 17px; height: 17px; border: 1px solid #D9D9D9; border-radius: 100%; }*/

/* 방문예약 페이지 - 예약신청 */
#visitReservationForm legend { display: none; }
#visitReservationForm input, #visitReservationForm button { font: inherit; }

.visit-reservation-con, .message-information-con { display: flex; align-items: center; gap: 48px; row-gap: 10px; }
.visit-reservation-con.btn { flex-wrap: wrap; }
.visit-reservation-con + .visit-reservation-con { margin-top: 26px; }
.visit-reservation-label, .message-information-label { min-width: 140px; font-weight: 700; text-align: start; }
.visit-reservation-label span, .visit-information strong > span, .message-information-label span  { color: #FF6767; }

.visit-reservation-select { position: relative; }
.visit-reservation-select::after { display: block; position: absolute; top: 50%; right: 7px; width: 8px; height: 8px; border-left: 1px solid #888; border-bottom: 1px solid #888; transform: rotate(-45deg) translateY(-50%); content: ''; }
.visit-reservation-select select { width: 269px; padding: 15px 5px; border: none; border-bottom: 1px solid #E2E2E2; background: #fff; color: #000; font: inherit; }

.visit-reservation-input, .message-information-input { display: flex; position: relative; gap: 24px; }
.visit-reservation-input input, .message-information-input input { width: 269px; padding: 15px 5px; border-bottom: 1px solid #E2E2E2; }

.visit-reservation-input-date, .visit-reservation-input-time { position: relative; }
.visit-reservation-input-date::after { display: block; position: absolute; top: 18px; right: 15px; width: 19px; height: 19px; background: url(../images/images/visit-reservation-calendar.png) no-repeat; content: ''; }
.visit-reservation-input-time::after { display: block; position: absolute; top: 18px; left: 15px; width: 19px; height: 19px; background: url(../images/images/visit-reservation-clock.png) no-repeat; content: ''; }
.visit-reservation-input-time input { padding: 15px 0 15px 45px; }

.visit-reservation-btn button { width: 116.38px; padding: 7px 12px; background: #d9e0ff; color: #000; font-weight: bold !important; }
.visit-reservation-span span { display: block; position:absolute; bottom: -30px; left: 0; color: #4f4bae; }
.visit-reasons { width: 563px !important; }

#wrapSrvcCn { display: flex; flex-wrap: wrap; width: 100%; margin-left: 185px; gap: 20px; row-gap: 5px; }
#wrapSrvcCn span { display: flex; align-items: center; width: 220px; color: #444; }
#wrapSrvcCn input { width: 17px; height: 17px; margin-right: 7px; border: 1px solid #D9D9D9; border-radius: 100%; }
#wrapSrvcCn input:checked, .visit-information-title input:checked, .visit-information-checkbox input:checked { border: none; background: url(../images/images/visit-reservation-check.png) no-repeat; }

.visit-information { width: 100%; margin-top: 40px; text-align: start; }
.visit-information strong { font-weight: 700; }

.visit-information-wrap { margin-top: 25px; }
.visit-information-wrap li + li { margin-top: 10px; }

.visit-information-title { display: flex; align-items: center; padding: 20px; border: 1px solid #E2E2E2; gap: 8px; }
.visit-information-con.on .visit-information-title { border: 1px solid #4F4BAE; }
.visit-information-title input { width: 17px; height: 17px; border: 1px solid #D9D9D9; border-radius: 100%; }
#agreeAllLabel { width: 80%; }
.visit-information-a { color: #888; }

.visit-arrow { width: 9px; height: 9px; border: solid #222; margin-left: auto; border-width: 2px 2px 0 0; transform: rotate(135deg); }

.visit-information-box { display: none; padding: 20px; border: 1px solid #E2E2E2; border-top: none; background: #fafafa; }
.visit-information-box span { display: block; margin-left: 10px; color: #888; }
.visit-information-box .precautions-span { margin-left: 0; }

.visit-information-p { margin-top: 8px; }

.bottom-btn-wrap { display: flex; justify-content: center; margin-top: 100px; gap: 40px; }
.bottom-btn-wrap a { display: block; padding: 13px 50px; background: #4F4BAE; color: #fff; font-family: 'NanumSquare'; font-weight: 700; cursor: pointer; }
.bottom-btn-wrap button { display: block; padding: 13px 50px; background: #4F4BAE; color: #fff; font-family: 'NanumSquare'; font-weight: 700 !important; cursor: pointer; }
.bottom-btn-wrap.inquiry { margin-top: 50px; }
#checkBtn, .check-btn { background: #eee !important; color: #222 !important; }

.pop-btn-wrap { display: flex; justify-content: center; margin-top: 15px; }
.pop-btn-wrap a { display: block; padding: 9px 25px; background: #4F4BAE; color: #fff; font-family: 'NanumSquare'; font-weight: 700; cursor: pointer; }

/* 방문예약 페이지 - 예약메세지 */
.linebox.message { margin-top: 20px; }
.sc-title.message { background: none !important; }
.message-information { display: flex; flex-direction: column; align-items: center; }
.message-information-box { margin-top: 30px; }
.linebox .message-information-box li + li { margin-top: 20px; }

.message-information-label { color: #888; font-weight: 400; }
.message-information-input { padding: 0; color: #222; font: inherit; font-size: 16px; font-weight: 700; border-bottom: none; outline: none; }

.message-blank-box { height: 350px; }

/* 예약일시 선택 팝업 */
#reservationPopWrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; margin-top: 0px; }
#reservationPopWrap td { text-align: center; }

.reservation-pop { display: flex; align-items: center; position: relative; padding: 50px; padding-top: 110px; margin-top: 10px; border-radius: 20px; background: #F5F7FA; text-align: center; gap: 50px; }
.reservation-pop-title { display: none; align-items: center; height: 54px; margin: 0 auto; font-size: 20px; font-weight: bold; color: #222; }

.calendar-navigation { display: flex; align-items: center; justify-content: center; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); gap: 80px; }
.calendar-prev, .calendar-next { position: relative; width: 20px; height: 20px; cursor: pointer; }
.calendar-prev::after, .calendar-next::after { display: block; position: absolute; top: 5px; width: 9px; height: 9px; border: solid #acacac; margin-left: auto; border-width: 2px 2px 0 0;  content: ''; }
.calendar-prev::after { left: 0; transform: rotate(225deg); }
.calendar-next::after { right: 0; transform: rotate(45deg); }

.calendar-date { width: auto; height: 386px; }
.calendar { text-align: center; border-collapse: collapse; }
.calendar-title { font-size: 18px; font-weight: bold; }

.calendar-day { background: #E3E9F5; }
.calendar-day th { width: 60px; height: 53px; margin: 0; padding: 0; box-sizing: border-box; font-weight: 600; vertical-align: middle; }
.calendar-day th:first-child { border-radius: 15px 0 0 0; color: #EF1818; }
.calendar-day th:last-child { border-radius: 0 15px 0 0; color: #003893; }

#calendarBody { position: relative;  border: 1px solid #dfdfdf; border-top: none; cursor: default; }
/* #calendarBody::after { display: block; position: absolute; top: -86px; left: -50px; z-index: -1; width: 930px; height: 145%; border-radius: 20px; background: #F5F7FA; content: ''; } */
#calendarBody tr td { height: 55px; margin: 2px; background: #fff; cursor: default;  }
#calendarBody tr td a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; line-height: 45px; transition-duration: .2s; cursor: default; }
#calendarBody tr td:nth-of-type(1) a:hover, .calendar tbody tr td:nth-of-type(7) a:hover { background: #fff; cursor: auto }

.pastDay { color: lightgray !important; }
.today { background: #fff9d2; font-weight: 600; }
.futureDay { background: #fff; }
.futureDay:hover{ background:#eee; cursor: pointer;  }
.futureDay.choiceDay, .today.choiceDay { background: #4e4caa; color: #fff; font-weight: 600; cursor: pointer; }

#frm2, .calendar-time-wrap { width: 350px; height: 270px; margin-top: -40px; }
.calendar-time-date { font-weight: 600; line-height: 53px; }
.calendar-time { display: none; flex-wrap: wrap; justify-content: center; padding-top: 18px; border-top: 1px solid #dfdfdf; gap: 12px; }
.calendar-time li { width: 30.5%; }
.calendar-time li a { display: block; width: 100%; padding: 6px 0; border: 1px solid #e0e0e0; background: #fff; }
.calendar-time li.on a { border: 1px solid #4f4bae; color: #4f4bae; background: #ebeaf7; font-weight: 600; }
.calendar-time li a:hover { border: 1px solid #4f4bae; color: #4f4bae; }
.calendar-time .timeTest {color: #d3d3d3; }
.calendar-time .timeTest:hover { border: 1px solid #e0e0e0; color: #d3d3d3; background: #fff; cursor: default; }
.weekend-sun, .weekend-sun:hover { color:#e60000 ; cursor:  default !important; }
.weekend-sat, .weekend-sat:hover { color:#0065ca ; cursor:  default !important; }

/* 방문예약 페이지 - 예약확인 */
.visit-reservation.inquiry { padding-left: 25px; }

/* 방문예약 페이지 - 예약신청내역 */
.bottom-btn-wrap.reservation { margin-top: 70px; padding-bottom: 10px; }
.tx-strong-hr { background: url('../images/images/sub_text_bg.png') 0 14px repeat-x;  color: #4f3fa3; }



/* ----------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width:1700px) {
  /* 개인정보 박스 */
  .personal-information-popup.left { right: 160px; }
}

@media (max-width:1200px) {
    /* sub 4-1 style */
    .intro1 > img{ position: relative; margin-bottom: 20px; top: -35px; right: 0; bottom: 0; transform: translateY(0); }
    .intro1 .ceoN{ top: 40%; right: 50%; transform: translateX(50%); }
    .intro1 p.intro{ width: 100%; text-align: center; }
}

@media (max-width:1110px) {
  /* 개인정보 박스 */
  .personal-information > dl { width: 31%; }
}

@media (max-width:960px) {
  /* 방문예약 페이지 - 예약안내 */
  .vertical-step-arrow { display: flex; justify-content: center; position: relative; padding-top: 0 !important; }
  .vertical-step-arrow::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 5; background: #fff; content: '▼'; }
}

@media (max-width:930px) {
  /* 개인정보 박스 */
  .personal-information-popup { right: -230px; width: 355px; }
  .personal-information-popup.left { right: 120px; }

  /* 예약일시 선택 팝업 */
  #reservationPopWrap { margin-top: 30px; }
  .reservation-pop { flex-direction: column; padding: 85px 30px 110px 30px; gap: 0; }
  #frm2, .calendar-time-wrap { margin-top: 0; }
  .calendar-navigation { gap: 60px; }
  .calendar-time-wrap.on { margin-top: 10px; }
}

@media (max-width:911px) {
  /* 방문예약 페이지 - 예약안내 */
  .sc-text.info br { display: none; }
}

@media (max-width:840px) {
  /* 방문예약 페이지 - 예약안내 */
  .bottom-btn-wrap { gap: 30px; }
  .bottom-btn-wrap a, .bottom-btn-wrap button { padding: 13px 40px; }

  /* 방문예약 페이지 - 예약신청 */
  .visit-reservation-con { align-items: flex-start; gap: 20px; row-gap: 10px; }
  .visit-reservation-btn.reservation { margin-top: 9px; }
  .visit-reservation-input { flex-wrap: wrap; gap: 10px; }
  .visit-reservation-label { margin-top: 15px; }
  #wrapSrvcCn { margin-left: 155px; }
  .visit-reasons { width: 269px !important; }
}

@media (max-width:812px) {
  /* 방문예약 페이지 - 예약신청 */
  .visit-reservation-input { gap: 5px; }
}

@media (max-width:725px) {
   /* 방문예약 페이지 - 예약신청 */
   .visit-reservation-con.pt { padding-top: 46px !important; }
  .visit-reservation-span span { bottom: -56px; height: 50px; text-align: left; }
}

@media (max-width:700px) {
  /* 방문예약 페이지 - 예약신청 */
  .visit-reservation-con.btn { position: relative; padding-bottom: 50px; }
  .visit-reservation-btn.reservation { position: absolute; left: 160px; bottom: 0; }
  #wrapSrvcCn { width: 60%; }
}

@media (max-width:660px) {
  /* 개인정보 박스 */
  .personal-information { display: none; }

  /* 방문예약 페이지 - 예약신청 */
  .visit-reservation-input { gap: 2px; }
}

@media (max-width:640px) {
  /* sub 4-1 style */
  .intro1 .ceoN{ font-size: 14px; top: 29%; }
}

@media (max-width:550px) {
  /* sub 4-1 style */
  .intro1 .ceoN{ font-size: 14px; top: 29%; }

  /* 예약일시 선택 팝업 */
  #reservationPopWrap { margin-top: 0; }
  .calendar-navigation { gap: 40px; }
  .calendar-date { height: 350px; }
  .calendar-day td { width: 53px; height: 47px; }
  #calendarBody tr td { height: 50px; }

  /* 방문예약 페이지 - 예약확인 */
  .visit-reservation.inquiry .visit-reservation-con { flex-wrap: wrap; }

  /* 방문예약 페이지 - 예약신청내역 */
  .message-information-con { gap: 0; }
  .message-information-label { min-width: 120px; }
}

@media (max-width:480px) {
  /* 개인정보 21조 */
  #personalInformationSelect { width: 220px; height: 40px; }

  .linebox.use-guide .sc-text { padding: 0 !important; }

  /* 방문예약 페이지 - 예약신청 */
  .visit-reservation-con { flex-wrap: wrap; }
  .visit-reservation-label { min-width: 160px; }
  .visit-reservation-select select, .visit-reservation-input input, .message-information-input input, .visit-reservation-input-date, .visit-reservation-select, .visit-reservation-input-time, .visit-reservation-input, .visit-reasons { width: 100% !important; }
  #wrapSrvcCn { width: 100%; margin-left: 0; }
  #wrapSrvcCn span { width: 100%; }

  .visit-reservation-btn.reservation { left: 0; }
  .visit-information-title { position: relative; flex-wrap: wrap; padding: 10px; row-gap: 3px; }
  .visit-information-title a { display: block; width: 100%; margin-left: 30px; }
  .visit-arrow { position: absolute; top: 16px; right: 15px; }
  .visit-information-box { padding: 10px 15px; }

  /* 예약일시 선택 팝업 */
  .reservation-pop { padding: 70px 0 95px 0; }
  .calendar-navigation { top: 20px; gap: 20px; }
  .calendar-date { height: 315px; }
  .calendar-day, #calendarBody tr td p, .calendar-time li a, .pop-btn-wrap a { font-size: 14px; }
  .calendar-day td { width: 43px; height: 41px; }
  #calendarBody tr td { height: 40px; }
  .calendar-time li { width: 26.5%; }
  .pop-btn-wrap.calendar-time-btn { margin-top: 10px; }

  /* 방문예약 페이지 - 예약확인 */
  .visit-reservation.inquiry { padding-left: 0; }
}

@media (max-width:390px) {
  /* 개인정보 21조 */
  #personalInformationSelect { width: 182px; height: 34px; padding: 5px; font-size: 14px; }
  .personal-information-select-btn { display: flex; align-items: center; justify-content: center; padding: 5px; font-size: 14px; }

  /* 방문예약 페이지 - 예약안내 */
  .bottom-btn-wrap a, .bottom-btn-wrap button { padding: 13px 30px; }

  /* 방문예약 페이지 - 예약신청 */
  .visit-information-title { padding: 8px 5px; }
  .visit-arrow { top: 12px; right: 12px; }

  /* 예약일시 선택 팝업 */
  #frm2, .reservation-pop, .calendar-time-wrap { width: 100%; border-radius: 0; }
  .calendar-navigation { gap: 10px; }

  /* 방문예약 페이지 - 예약신청내역 */
  .message-information-label { min-width: 100px; }
}

@media (max-width:375px) {
  .site-navi { font-size: 12px; }
  .select-selected { padding: 20px 10px; }
}
@media (max-width:320px) {
  .select-selected { padding: 20px 4px; }
  .select-selected:after { right: 4px; }
}