﻿
/* 조직도 */
[class^="box_st"] + .organizationBox {margin-top: 3rem;}
.chartBox {text-align: center;}
.chartBox li {position: relative; padding-top: 0.5rem;}
.chartBox li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 0.5rem; background: #d9d9d9; content: "";}
.chartBox a,
.chartBox p {position: relative; display: flex; margin: 0 auto; width: 100%; max-width: 100%; height: 2.5rem; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid; border-radius: 1.5rem; z-index: 1;}
.chartBox a > span {font-size: 0.85rem; font-weight: 500;}

.chartBox .step01 > li {position: relative; padding-top: 0;}
.chartBox .step01 > li:nth-of-type(1):before {position: absolute;top: auto;bottom: 0;left: 50%;width: 1px;height: 6rem;background: #d9d9d9;content: "";}
.chartBox .step01 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 6rem; background: #d9d9d9; content: "";}
.chartBox .step01 > li > p {margin-bottom: 2.5rem;width: 12.5rem;height: 3.5rem;font-size: 1rem;font-weight: 600;color: #fff;background: #08879d url(/images/web/goeay/sub/step_bg.png) no-repeat right center;border: 4px solid #b8dfff;border-radius: 2rem;}
.chartBox .step01 > li > .dt_wrap {display: inline-flex;flex-direction: column;align-items: center;width: 10rem;height: 10rem;border-radius: 50%;background-color: #e6f8ff;border: none;}
.chartBox .step01 > li > .dt_wrap > .img {width: 100%;max-width: 29.8rem;font-size: 0;line-height: 0;margin: 0 auto;}
.chartBox .step01 > li > .dt_wrap > .img img {text-align:center; margin:0 auto;}
.chartBox .step01 > li > .dt_wrap > .txt {font-size: 1rem;color: #111;font-weight: 700;}

.chartBox .step02 {position: relative;}
.chartBox .step02:before {position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step02:after {clear: both; display: block; width: 100%; content: "";}
.chartBox .step02 > li {position: relative; float: left; padding-top: 2rem; width: 50%;}
.chartBox .step02 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 2rem; background: #d9d9d9; content: "";}
.chartBox .step02 > li:after {position: absolute; top: -0.8rem; left: calc(50% - 0.8rem); width: 1.6rem; height: 1.6rem; text-align: center; line-height: 2; font-size: 10px; color: #006ac0; background: #e4f3ff; border: 0.3rem solid #fff; border-radius: 50%; content: "●";}
.chartBox .step02 > li.half {padding-top: 2rem !important; width: 33.35%;}
.chartBox .step02 > li.half:before {height: 7rem !important;}

.chartBox .step02 > li > p {position:relative; margin-bottom: 1.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; word-break: keep-all; font-weight: 600; color: #fff; background: url(/images/web/goeay/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}
.chartBox .step02 > li > p:before{position: absolute; bottom: calc(-1.5rem - 4px); left: 50%; width: 1px; height: calc(1.5rem + 4px); background: #d9d9d9; content: "";}
.chartBox .step02 > li:nth-of-type(1) > p {background-color: #0272b9; border-color: #bbe3fc;}
.chartBox .step02 > li:nth-of-type(2) > p {background-color: #3f7eff; border-color: #c7d6ff;}
.chartBox .step02 > li:nth-of-type(3) > p {background-color: #008000; border-color: #01a301;}
.chartBox .step02 > li:nth-of-type(4) > p {background-color: #FF5E30; border-color: #f6c99c;}

.chartBox .step03 {position: relative; font-size:0; }
.chartBox .step03:after{position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step03 > li { display:inline-block; width:50%; vertical-align: top; margin-top:1rem; padding: 0 0.25rem; font-size:0.8rem;}
.chartBox .step03 > li:nth-of-type(1):before,
.chartBox .step03 > li:nth-of-type(2):before{ top:-1rem; height:1rem;}
.chartBox .step02 > li.half .step03 {padding-top: 1.5rem;}
.chartBox .step02 > li.half .step03:before {position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step02 > li.half .step03:after {clear: both; display: block; content: "";}
.chartBox .step02 > li.half .step03 > li {float: left; width: 50%;}
.chartBox .step02 > li.half .step03 > li:before {top: -1.5rem; height: 1.5rem;}
.chartBox .step02 > li.half .step03 > li > a ~ a {margin-top: 1rem;}

.chartBox .step04 > li { position:relative; border-radius:1rem; border:1px solid #ccc; background:#fff; padding:0.5rem; font-size:0.75rem; margin-top:0.5rem;}
.chartBox .step04 > li {border : 0px !important; padding:0px !important;}
.step04 > li > a {border-color:#ccc !important;}
.chartBox .step04 > li:before{ top:-0.5rem}

/* 분류별 색상 */
.chartBox .step02 > li:nth-of-type(1) .step03 > li > a {color: #fff; background: #0272b9; border-color: #0272b9;}
.chartBox .step02 > li:nth-of-type(2) .step03 > li > a {color: #fff; background: #3f7eff; border-color: #3f7eff;}
.chartBox .step02 > li:nth-of-type(3) .step03 > li > a {color: #fff; background: #008000; border-color: #008000;}
.chartBox .step02 > li:nth-of-type(4) .step03 > li > a {color: #fff; background: #FF5E30; border-color: #FF5E30;}
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a {border-color: #0272b9;}
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a {border-color: #3f7eff;}
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a {border-color: #008000;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a {border-color: #FF5E30;}
/* hover */
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a:hover {background: #e2f4ff;}
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a:hover {background: #e6eeff;}
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a:hover {background: #e7fffb;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:hover {background: #fff2e6;}

/* 분류별 색상 */
.chartBox .step02 > li:nth-of-type(1) .step03 > li > a {color: #fff; background: #0272b9; border-color: #0272b9;}
.chartBox .step02 > li:nth-of-type(2) .step03 > li > a {color: #fff; background: #3f7eff; border-color: #3f7eff;}
.chartBox .step02 > li:nth-of-type(3) .step03 > li > a {color: #fff; background: #008000; border-color: #008000;}
.chartBox .step02 > li:nth-of-type(4) .step03 > li > a {color: #fff; background: #FF5E30; border-color: #FF5E30;}
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a {border-color: #0272b9;}
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a {border-color: #3f7eff;}
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a {border-color: #008000;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a {border-color: #FF5E30;}
/* hover */
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a:hover {background: #e2f4ff;}
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a:hover {background: #e6eeff;}
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a:hover {background: #e7fffb;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:hover {background: #fff2e6;}

/* 비전 및 방향 */
.vision .txt{ margin:1.5rem 0; font-size:1.1rem; word-break:keep-all;  text-align:center; font-weight:600;}
.vision .txt strong{ font-weight:700; color:#42ba85;}
.vision .img_box{ display: flex; align-items:center; padding:1.5rem;}
.vision .img_box img{ max-width:40%; height:auto;}
.vision .img_box p{ flex:1; padding-left:1.5rem; text-align:left;}
.vision .txt_box{ border:3px solid #2cc1eb; border-radius:1.5rem; padding:2rem; background:#ebf8fb; }
.vision .step_list dl{ word-break:keep-all; background:#fff; border:1px solid; border-radius:1.5rem; overflow:hidden;}
.vision .step_list dl + dl{ margin-top:0.75rem;}
.vision .step_list dt{ height:3rem; display: flex; align-items:center; color:#fff; padding:0.35rem; border-radius:1.5rem; font-weight:700; font-size:1.1rem;}
.vision .step_list dt span{ display: flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; margin-right:1rem; border-radius:50%; background:#fff;}
.vision .step_list dd{ padding:1.5rem 3.5rem; font-size:0.9rem;}
.vision .step_list dl:nth-child(1){ border-color:#D44222;}/* 웹접근성수정 */
.vision .step_list dl:nth-child(1) dt{ background:#D44222;}/* 웹접근성수정 */
.vision .step_list dl:nth-child(1) dt span{ color:#D44222;}/* 웹접근성수정 */
.vision .step_list dl:nth-child(2){ border-color:#e74c3c;}
.vision .step_list dl:nth-child(2) dt{ background:#e74c3c;}
.vision .step_list dl:nth-child(2) dt span{ color:#e74c3c;}
.vision .step_list dl:nth-child(3){ border-color:#09873B;}/* 웹접근성수정 */
.vision .step_list dl:nth-child(3) dt{ background:#09873B;}/* 웹접근성수정 */
.vision .step_list dl:nth-child(3) dt span{ color:#09873B;}/* 웹접근성수정 */
.vision .step_list dl:nth-child(4){ border-color:#3498db;}
.vision .step_list dl:nth-child(4) dt{ background:#3498db;}
.vision .step_list dl:nth-child(4) dt span{ color:#3498db;}
.vision .step_list dl:nth-child(5){ border-color:#005fa5;}
.vision .step_list dl:nth-child(5) dt{ background:#005fa5;}
.vision .step_list dl:nth-child(5) dt span{ color:#005fa5;}

/* 선택과목안내 */
.subjInfo .tab_list{ margin-top:0.5rem;}
.subjInfo .tab_list li a{ font-size:0.8rem;}
.subjInfo .list_box{ display:none; margin-top:2rem;}
.subjInfo .list_box.on{ display: block;}
.subjInfo dl{ margin-bottom:0.75rem;}
.subjInfo dl dt button{ display: block; width:100%; padding:0.75rem 1rem;; margin:0; border-radius:1rem; font-weight:600; background:#eef7ff; color:#007dda; text-align:center; transition: all .2s;}
.subjInfo dl dt button span:after{ content:"\e913"; font-family: 'xeicon'; display: inline-block; margin-left:0.5rem; }
.subjInfo dl dd{ display: none; padding:1.5rem; margin-top:0.5rem; border-radius:1rem; border:2px solid #007dda;}
.subjInfo dl dd .rsp_img { display:none; text-align:center;}
.subjInfo dl.on dt button{ color:#fff; background:#007dda;}
.subjInfo dl.on dt button span:after{ content:"\e91a";}
.subjInfo dl.on dd{ display: block;}

/*웹접근성*/
.btn_mint {color:#fff; background:#007EA3 !important;  }
.btn_mint:hover, .btn_mint:focus { background:#1674A1 !important; }

/* 감사사례집 */
.auditWrap{ position:relative; text-align: center;}
.auditWrap .pageing{ margin-top:1rem;}
.auditWrap .pageing strong{ color:#007dda; font-weight: 700;}
.auditSlider{ position:relative; max-width:37rem; margin:0 auto; padding:0 4.5rem;}
.auditSlider img{ max-width:100%; height:auto;}
.auditSlider .slick-list{ max-height:30rem; overflow:hidden; }
.auditSlider .slick-arrow{ position:absolute; top:calc(50% - 1rem); }
.auditSlider .slick-arrow:before{ font-family: 'xeicon'; font-size:1.45rem; width:3.5rem; height:3.5rem; display: flex; align-items: center; justify-content: center; border-radius:50%; border:1px solid transparent;  transition: all 0.2s;}
.auditSlider .slick-prev{ left:0;}
.auditSlider .slick-prev:before{ content: '\e93b'; }
.auditSlider .slick-next{ right:0;}
.auditSlider .slick-next:before{ content: '\e93e'; }
.auditSlider .slick-arrow:hover:before,
.auditSlider .slick-arrow:focus:before{ border-color:#007dda; color:#007dda;}

.auditChart .bu_info{ position:relative; padding-left:15px; color:#777; margin-top:0.75rem;}
.auditChart .bu_info:before{ content:""; position:absolute; left:0; top:0.15rem; width:5px; height:0.8rem; background:#777;}
.auditList{ display: flex; flex-wrap: wrap; }
.auditList dl{ width:calc(50% - 0.75rem); margin-top:1.5rem;}
.auditList dl:nth-child(even){ margin-left:1.5rem;}
.auditList dt{ display: inline-block; min-width:7rem; text-align: center; padding:0.75rem 1.5em; border-radius:0.5rem 1.5rem 0 0; color:#fff; font-size:0.9rem; font-weight:600; background:#154585;}
.auditList dd{ border-top:2px solid #154585;}
.auditList dd li{ padding:0 1rem;}
.auditList dd li + li a{ border-top:1px dashed #ddd;}
.auditList dd li a{ position:relative; display: block; line-height:1.1rem; padding:0.75rem 1.5rem 0.75rem 0.75rem; font-size:0.85rem;}
.auditList dd li a:before{ content:""; position:absolute; left:0; top:1.25rem; width:5px; height:5px; border-radius:50%; background: #154585;}
.auditList dd li a:after{ content:"\e93e"; position:absolute; right:0; top:0.75rem; font-family: 'xeicon';}
.auditList dd li a:hover,
.auditList dd li a:hover:after{ color:#154585; font-weight:600;}

.auditPopup{ display: none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:999;}
.auditPopup .inner{ position:relative; left:50%; top:50%; max-width:45rem; padding:2rem; border-radius:1.5rem; overflow-y:auto; background:#fff; transform: translate(-50%, -50%);}
.auditPopup .inner .tbl_st{ margin-top:1rem;}
.auditPopup .btnClose{ position:absolute; right:2rem; top:1.6rem; width:2rem; height:2rem; line-height:2.1rem; text-align:center; border-radius:0.5rem; background:#344c91; color:#fff; font-size:1rem;}

/* media query mobile */
@media (max-width: 1440px) {
}



@media (max-width: 1240px) {

	/* 선택과목안내 */
	.subjInfo dl dd{ padding:0.75rem;}
	.subjInfo .tab_st2 li a{ height:2.25rem; padding:0.5rem 0.25rem;}
	.subjInfo .reactTab[class^="tab_st2"] > .select{ display:none;}
	.subjInfo .reactTab[class^="tab_st2"] ul{ display:flex !important;}
	.subjInfo .reactTab[class^="tab_st2"] li{ width:calc(25% - 0.5rem) !important; margin:0.25rem !important; }
}

@media (max-width: 1024px) {

	/* 감사사례집 */
	.auditPopup .inner{ left:1rem; max-width:calc(100% - 2rem); max-height:80vh; transform: translate(0%, -50%);}
}

@media (max-width: 860px) {
	/* 비전 및 방향 */
	.vision .img_box p{ font-size:1rem; font-weight:400;}
}


@media (max-width: 768px) {

	/* 선택과목안내 */
	.subjInfo .tab_st2 li a{ font-size:0.8rem;}
	.subjInfo .reactTab[class^="tab_st2"] li{ width:calc(33.33% - 0.5rem) !important;}

	/* 감사사례집 */
	.auditList { display:block;}
	.auditList dl{ width:100%; }
	.auditList dl:nth-child(even){ margin-left:0;}
}



@media (max-width: 600px) {

	/* 조직도 */
	.chartBox .step02 > li > p{ margin-bottom:0;}
	.chartBox .step03:after{ display:none;}
	.chartBox .step03 > li {width: 100%;}
	.chartBox .step03 > li:nth-of-type(2):before{ display:none;}

	/* 비전 및 방향 */
	.vision .txt br{ display:none;}

	/* 감사사례집 */
	.auditPopup .inner{ border-radius:1rem; padding:1.25rem;}
	.auditPopup .btnClose{ right:1.25rem; top:1.1rem;}
}



@media (max-width: 560px) {
	/* 비전 및 방향 */
	.vision .txt{ font-size:1rem;}
	.vision .img_box p{ font-size:1rem; font-weight:400;}
	.vision .step_list dt{ height:2.5rem; font-size:0.95rem;}
	.vision .step_list dd{ padding:1rem 1.5rem; font-size:0.85rem;}

	/* 선택과목안내 */
	.subjInfo .reactTab[class^="tab_st2"] li{ width:calc(50% - 0.5rem) !important;}
}



@media (max-width: 480px) {

	/* 감사사례집 */
	.auditWrap{ border:0; padding:0 0.5rem;}
	.auditSlider{ padding:0;}
	.auditSlider .slick-arrow{ position:absolute; top:auto; bottom:-3.5rem; padding:0;}
	.auditSlider .slick-arrow:before{ font-family: 'xeicon'; font-size:1.1rem; width:2.5rem; height:2.5rem; }
	.auditSlider .slick-next{ right:calc(50% - 6rem);}
	.auditSlider .slick-prev{ left:calc(50% - 6rem);}
	.auditWrap .pageing{ line-height:2.5rem;}
 
	/* 조직도 */
	.chartBox a, .chartBox p { height:auto; min-height:2.25rem; padding:0.25rem 0.5rem;}
	.chartBox .step01 > li:before{ height:5rem;}
	.chartBox .step01 > li > p{ margin-bottom:1.5rem;}
	.chartBox .step02 > li > p{ height:auto; min-height:3rem; padding:0.25rem 0.5rem; font-size:0.9rem;}
}



@media (max-width: 380px) {
}
