@charset "utf-8";
@import url("layout.css?ver=20220113");

/*----------------------------------------------------------------------------
 * 반응형 서브 스타일 정의
 * Author	: (주)플랜아이 http://plani.co.kr
 * 2017-11-16 (조민지)	: 최초작성
 * -------------------------------------------------------------------------*/

@media screen and (max-width:1080px)
{
	#content, 
	#contents-title,
	#detail_content {padding:0 20px;}
	
	.title-ring:after {border-width:100px;}
	
	.table01 .table-unfixed td {min-width:90px !important;}
	.table01 .txt_right input[type='text'].input_long02,
	.table01 .txt_right input[type='text'].input_long04,
	.table01 .txt_right input[type='text'][size='3'] {width:30px;}
	
	.box02 {margin-top:20px; padding:15px 20px;}
	
	.charge {margin-left:-20px; margin-right:-20px; padding-right:40px;}
	
	.list01 .contents {padding-left:480px;}
	.list01 li:nth-child(2n) .contents {padding-right:480px;}
	
	.howto {padding-left:250px;}
	.howto .group.first {width:180px;}
	.howto .arr {left:162px; width:105px;}
	
	.bul-dot.menual {width:108%;}
	.bul-dot.menual .arr:after {right:40px;}
	
	.apply_btn.fixed {left: 0; width: 100%; margin: 0;}
}

@media screen and (max-width:1000px)
{
	.title-ring:after {display:none;}
	
	/*
	.table01 table {table-layout:fixed;}
	.table01 col[width="10%"] {width:90px;}
	.table01 tbody th[scope="row"] {padding:10px 20px;}
	.table01 td input[type="text"][size="5"] {width:60%;}
	.table01 .txt_left .form_list input[type="text"][size='6'] {width:35px;}
	*/
	
	.box03 .contents {padding-right:0;}
	.box03 .btn {display:inline-block; position:relative; right:0; top:0; width:auto; height:40px; margin-top:20px; padding:0 30px; line-height:38px;}
	.box03 .btn br {display:none;}
	.box04.form_list.block .form_list input[type="text"] {width:150px;}
	
	.charge {margin-top:30px;}
	.charge .bul-dot li {float:left; width:50% !important;}
	.charge .bul-dot + .bul-dot {margin-top:10px; padding-top:10px; border-top:1px solid #ddd;}
	
	.lmogmo {padding:20px;}
	.lmogmo .group {width:30%; padding-right:0;}
	.lmogmo .group ul {width:100%;}
	.lmogmo .group li span {line-height:1.2;}	
	.lmogmo .lmo {width:70%; padding-right:20px;}
	
	.list01 li {padding:20px 0;}
	.list01 li:first-child {padding-top:0;}
	.list01 .img {position:relative; top:0; margin-bottom:15px;}
	.list01 .contents {padding:0 !important;}
	.list01 .contents p {margin-top:10px;}
	
	.list02 .group {padding:20px 0 20px 110px;}
	.list02 .group:last-child {padding-bottom:0;}
	
	.list_card strong {line-height:1.2;}
	
	.law_history {padding:20px 30px; background-position:96% center;}
	.law_org {padding:30px 15px;}
	
	.indicate h4 {left:20px;}
	.indicate .item {padding-left:120px;}
	.indicate .item li {float:none; width:100%;}
	.indicate .item > ul > li + li {margin-top:10px;}
	.indicate .group.img {width:280px;}
	.indicate .contents {margin-right:280px; padding-left:20px; padding-right:0;}
	
	.org {margin:20px 0;}
	
	.edu_search .contents {padding:35px 40px;}
	.edu_search .btn .btn-b {max-width:45%;}
	
	.apply_state ul.clear li {width:25%;}
	
	.howto {margin:10px 0; padding:0;}
	.howto .group {height:auto; padding-bottom:10px;}
	.howto .group.first {position:relative; width:100%; padding:20px;}
	.howto .group.first span {margin:0 0 5px;}
	.howto .group.last {padding-left:45px;}
	.howto .arr {position:relative; top:0; left:0; width:100%; height:50px; margin:-10px 0 8px; padding-right:100px; line-height:55px;}
	.howto .arr:before {position:absolute; left:50%; top:0; width:12px; height:92%; margin-left:-6px;}
	.howto .arr:after {right:50%; top:auto; bottom:-9px; margin-right:-15px; transform:rotate(180deg);}
	.howto.type02 .group.last {height:240px;}
	
	.bul-dot.menual {width:104%;}
	.bul-dot.menual .arr:after {display:none;}
	.bul-dot.menual + .howto {margin:25px 0;}
	.bul-dot.menual + .howto .group ul {margin:0; padding-bottom:60px;}
}

@media screen and (max-width:768px)
{
	.title-box,
	.title-sky {font-size:1.4em;}
	.tit_agree {font-size:1.2em;}
	.title01 {margin-top:20px; font-size:1.4em; line-height:1.2;}
	
	.title-ring > span.img:first-child + span.txt {padding: 0 0 0 25%;}
	
	.table01 {overflow-x:auto;}
	.table01 table {table-layout:fixed !important;}
	.table01 colgroup,
	.table01 th br {display:none;}
	.table01 tbody th[scope='row'] {clear:both; float:left; width:100%; white-space:normal;}
	.table01 tbody th[scope='row'] + td {clear:both; float:left; width:100%; padding:10px;}
	.table01 td + td.txt_left label {display:block; width:110px;}
	.table01 td.txt_left {padding: 10px;}
	/*
	.table01 th[rowspan] {padding:10px 15px !important;}
	.table01 th,
	.table01 td {clear:both; float:left; width:100%; padding:5px 15px !important; box-sizing:border-box; white-space:normal;}
	.table01 thead tr[class='txt_center'] {display:table-row;}
	.table01 thead tr[class='txt_center'] th {display:table-cell; clear:none; float:none; width:auto; padding:10px 15px !important;}
	*/
	.table01 .table-inner th[rowspan] {display:block;}
	.table01 .table-inner th {display:none;}
	.table01 .table-inner + .table-inner {display:block; overflow:hidden; position:relative; padding:5px 15px 5px 40px; border-bottom:1px solid #e3e2e2;}
	.table01 .table-inner + .table-inner td {padding:0 !important; border:0 none; text-align:left;}
	.table01 .table-inner + .table-inner input[type='radio'] {position:absolute; left:15px; top:8px;}
	.table01 .table-cell th,
	.table01 .table-cell td,
	.table01 .table-cell + tfoot th,
	.table01 .table-cell + tfoot td {display:table-cell; clear:none; float:none; width:auto;}
	.table01 .txt_left p input[type="text"] {display:block; width:95%; max-width:95%; margin-top:5px;}
	.table01 .txt_left select {margin:2px 0;}
	.table01 tr:first-child td .box_tip div {bottom:auto; top:0; line-height:1.5;}
	.table01 tr:first-child td .box_tip div:after {bottom:auto; top:-6px; transform:rotate(225deg);}
	.table01 tr:first-child td .box_tip div .img {display:block; float:none; padding:0; text-align:center;}
	.table01 tr:first-child td .box_tip div .img + p {padding:5px;}
	.table01 tr:first-child td .box_tip a:hover + div,
	.table01 tr:first-child td .box_tip a:focus + div,
	.table01 tr:first-child td .box_tip a:active + div {top:30px; width:100px; margin:0 0 0 -50px; padding:5px;}
	
	.table01 .table-unfixed {min-width: 500px; table-layout:auto !important;}
	.table01 .table-unfixed colgroup {display:table-column-group;}
	.table01 .table-unfixed thead th {display:table-cell; clear:none; float:none;}
	
	.form_list li {display:block; position:relative; padding-left:25px; white-space:normal;}
	.form_list input[type="text"] {width:70%;}
	.form_list input[type="text"][size='1'] {width:20px;}
	.form_list input[type="text"][size='6'] {width:70px;}
	.form_list input[type="radio"], 
	.form_list input[type="checkbox"] {position:absolute; left:0; top:4px;}
	.form_list.block > li > input[type='radio'] + label:after {display:block; content:'';}
	
	.box04.form_list.block .form_list {display:block; margin-bottom:-21px;}
	.box04.form_list.block .form_list li {display:block; background-color:#fff;}
	.box04.form_list.block .form_list li:last-child:after {content:')';}
	.box04.form_list.block a.icon-calenter + label:before {display:block; content:'';} 
	
	.charge {margin-top:20px; padding:7px 10px 7px 95px;}
	.charge:after {width:80px;}
	.charge h2 {width:80px; padding:0 10px;}
	.charge .bul-dot li {display:block; float:none; width:auto !important;}
	.charge .bul-dot + .bul-dot  {margin-top:7px; padding-top:5px;}
	
	.list_card li {width:49%;}
	
	.process01 li {display:inline-block; width:100%; padding:40px 0 0 !important;}
	.process01 li:first-child {width:200px; margin:0 auto; padding-top:0 !important;}
	.process01 li:first-child p:first-child {float:left; padding:0;}
	.process01 li:first-child p:first-child + p {float:right; padding:0;}
	
	.process02 li {display:inline-block; width:100%; padding:20px 0 0 0;}
	.process02 h4 span:first-child + span {width:auto; text-align:right;}
	.process02 .item:before {top:-200%; z-index:-1; height:200%;}
	.process02 .label {position:relative; float:right; width:40%; height:auto; margin:10px 0 -10px; padding:10px; line-height:1.2;}
	.process02 .label:before,
	.process02 .label:after  {left:-20%; width:20%;}
	
	.lmogmo {margin-top:20px; padding-bottom:0;}
	.lmogmo .title {margin-bottom:10px;}
	.lmogmo .group {float:none; width:100%; padding:20px 20px 30px;}
	.lmogmo .group ul {width:320px; max-width:100%;}
	.lmogmo .lmo ul {width:100%;}
	
	.law_history {background:none #f8fafe;}
	.law_chart {padding:20px;}
	.law_chart ul {padding-top:50px;}
	.law_chart li {display:block; margin-top:5px;}
	.law_chart + .tit_agree + p + .bul-dot {margin:10px 0 20px;}
	
	.law_org .depth01 .label {width:100%;}
	.law_org .depth01:before {left:30px; height:220px;}
	.law_org .depth01 + .depth02:before {left:30px; width:120%; margin-top:10px;}
	.law_org .depth01 + .depth02:after {margin-left:25px;}
	.law_org .depth02 + .depth02 {width:45%; padding-left:0;}
	.law_org .depth02 {position:relative; padding-left:10%; padding-top:10px; width:55%;}
	.law_org .depth02 .label.sub {margin-top:5px;}
	.law_org .depth03 {position:relative; padding:15px 0 0 70px;}
	.law_org .depth03:before {position:absolute; left:30px; top:35px; width:20px; height:88.3%; background:none; border-top:1px solid #d3d3d3; border-right:1px solid #d3d3d3;}
	.law_org .depth03 li {display:table; width:100%; margin-top:10px; padding:0 0 0 70px;}
	.law_org .depth03 li:before {display:block !important; left:-20px; top:50%; width:20px; height:1px;}
	.law_org .depth03 li:first-child {margin-top:0;}
	.law_org .depth03 p {position:absolute; left:0; top:0;}
	.law_org .depth03 span {display:table-cell; width:100%; max-width:100%; height:75px; padding:10px 10px 10px 60px; border-radius:0 30px 30px 0; text-align:left; vertical-align:middle;}
	
	.safety {padding:20px 15px;}
	
	.indicate h4 {position:relative; right:0; left:0; top:0; height:auto; padding:10px 20px 5px;}
	.indicate .contents {margin:0; padding:0 20px 35px;}
	.indicate .group h5 {height:30px; line-height:30px;}
	.indicate .group.img {position:relative; width:100%; padding:15px 0 40px;}
	.indicate .item {padding:10px 0 10px 120px;}
	
	.vision > li {float:none; width:100%; min-height:105px; padding-right:0;}
	.vision > li + li {margin-top:10px;}
	
	.history {padding:0;}
	.history p {padding:5px 10px !important;}
	.history p strong {display:block; position:relative; left:0 !important; right:0;}
	
	.edu_search {height:auto; padding-left:0; background-color:#000;}
	.edu_search .calender {position:relative; max-width:100%; height:auto; margin:0 auto;}
	.edu_search .contents {padding:30px; background-color:#f9f9f9;}
	.edu_list {padding-left:0;}
	.edu_list .notice {position:relative; z-index:0; width:100%;}
	.edu_list .notice:before {position:absolute; lefT:0; top:0; z-index:-1; width:100%; height:315px; background-color:#d5d5d5; content:'';}
	.edu_list .map {max-width:100%; margin:0 auto; background-position:center 0;}
	.edu_list .contents {padding:5px 0 0;}
	.edu_list .btn {margin-top:15px;}
	
	.apply_state ul.clear li {width:50%;}
	
	.apply_org {width:102%; margin-left:-2%;}
	.apply_org li {width:23%; margin-left:2%;}
	.apply_org label {font-size:1em;}
	
	.apply_btn {position:relative; z-index:0; margin-top:-1px; padding-top:10px;}
	
	.search-form .form {padding:0;}
	.search-form .form select,
	.search-form .form input[type="submit"] {position:relative; width:100%;}
	.search-form .form input[type="text"] {margin:10px 0;}
	
	.table {margin-bottom:10px;}
	.table th,
	.table td {padding:5px 10px;}
	
	.title-ring br {display:none;}
	
	.howto .group:last-child {padding:0 0 10px;}
	.howto .group ul {padding-top:40px;}
	.howto .group li {float:none; padding:0 0 25px;}
	.howto .group li span:before {left:50%; right:auto; top:45px; width:1px; height:15px;}
	.howto .group li span:after {top:100%; right:50%; margin:-23px -8.5px 0 0; transform: rotate(135deg);}
	.howto .group li:last-child span {top:0;}
	.howto .group li:last-child span:before {display:none;}
	.howto .group .top {top:35px; left:100%; margin-left:10px;}
	.howto .group .top:before {left:-4px; top:-20px; right:auto; width:50%; height:79px; border:1px solid #006cc8; border-left:0 none;}
	.howto .group .top:after {right:100%; margin:10px -15px 0 0; transform: rotate(225deg);}
	.howto .group .bottom {top:-30px; bottom:auto; left:-100px;}
	.howto .group .bottom:before {left:50%; top:-25px; right:auto; width:50%; height:79px; border:1px solid #f27728; border-right:0 none;}
	.howto .group .bottom:after {left:auto; right:1px; top:100%; margin:10px 0 0 0; transform: rotate(45deg);}
	.howto.type02 .group.last {height:auto; padding-bottom:20px;}
	.howto.type02 .group.last .top {top:100%;}
	.howto.type02 .group.last .top:before {left:-4px; right:auto; top:-115%; height:320%;}
	.howto.type02 .group.last .top:after {right:100%; top:160%;}
	.howto.type02 .group.last .bottom {left:-100%; top:0; margin-left:-10px;}
	.howto.type02 .group.last .bottom:before {top:-115%; right:auto; left:50%; height:320%;}
	.howto.type02 .group.last .bottom:after {left:auto; top:170%;}
		
	.bul-dot.menual + .howto .group ul {padding-bottom:0;}
	.bul-dot.menual + .howto .group li:last-child span:before,
	.bul-dot.menual + .howto .group li:last-child span:after {display:none;}
	
	.layerpopup > .img .close {right: 10px; top: 10px;}
	.layerpopup > .img .close:before {height: 10px; margin-top: -5px;}
	.layerpopup > .img .close:after {width: 10px; margin-left: -5px;}
}

@media screen and (max-width:640px)
{
	.path_nav {}
	.path_nav .home {position:absolute; left:0; top:0;}
	.path_dropdown > li:first-child {display:none;}
	.path_dropdown > li {max-width:50%;}
	.path_dropdown > li > a {overflow:hidden; min-width:0; width:180px; padding:0 10px; max-width:100%;}
	.path_dropdown > li > a:after {right:5px; font-size:1.2em;}
	.path_dropdown .level > li > a {padding:10px;}
	
	#content {font-size:1em;}
	#contents-title {margin:0 auto 10px;}
	
	.title-ring {margin-bottom:20px; padding:15px 0; line-height:1.2;}
	.title-box {margin:20px 0 10px; line-height:1.2;}
	.title-sky {margin:20px 0 10px; line-height:1.2;}
	.title_btn .btn_small {padding:0 10px; font-size:.928em; letter-spacing:-1px;}
	.tit_agree {margin:15px 0 10px; line-height:1.2;}
	
	.title-ring > span.img:first-child {display: block; position: static; top: auto; bottom: auto; width: 100%; padding-top:5px;}
	.title-ring > span.img:first-child img {top: 0; transform: translateY(0);}
	.title-ring > span.img:first-child + span.txt {padding: 10px 0; text-align: center;}
	
	#subTabMenu {position:relative; margin-bottom:15px;}
	#subTabMenu:before {position:absolute; right:20px; top:10px; z-index:1; width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; content:''; transform:rotate(45deg); transition:all .5s;}
	#subTabMenu li {display:block; visibility:hidden; overflow:hidden; height:0; transition:all .5s;}
	#subTabMenu li + li,
	#subTabMenu li:first-child a {border:0 none;}
	#subTabMenu a {padding:0 20px; border-top:1px solid #d2d2d2; text-align:left; line-height:35px;}
	#subTabMenu .on a {border:0 none;}
	#subTabMenu .on,
	#subTabMenu.active li {visibility:visible; height:35px;}
	#subTabMenu.active:before {top:15px; transform:rotate(225deg);}
	
	.foot_link {margin-top:40px;}
	
	.box01 {margin: 10px auto 30px; padding:20px;}
	.box02 + .table01 {margin-top:15px;}
	.box03 {padding:20px 0;}
	.box03 .spot {line-height:1.5;}
	.box04 {padding:15px;}
	
	.btn-b {height:40px; padding:0 20px !important; line-height:38px;}
	
	.process01 li {padding-top:20px !important;}
	.process02 h4 span {font-size:1em;}
	.process02 .label {border-radius:10px; font-size:.928em; letter-spacing:-1px;}
	
	.lmogmo .group {padding-bottom:10px;}
	.lmogmo .group ul {width:245px;}
	.lmogmo .group li {float:left; width:50%; padding-bottom:20px;}
	.lmogmo .group li span {margin-top:5px;}
	
	.list02 .group {padding:20px 0;}
	.list02 .group .bul-dot > li:first-child {margin-left:110px;}
	.list02 .group h4 {margin-bottom:5px;}
	.list02 .bul-dot > li + li {margin-top:15px;}
	
	.list_card a {height:270px; padding:15px;}
	
	.law_history {padding:15px 20px;}
	.law_history strong {display:block;}
	.law_chart ul {padding-top:30px; background-size:250px auto;}
	.law_org {padding:15px;}
	.law_org .depth01:before {height:288px;}
	.law_org .depth01 + .depth02:before {width:30px; top:30px;}
	.law_org .depth02 {float:none; width:100% !important; margin-top:15px; padding:0 0 0 50px !important;}
	.law_org .depth02:before {position:absolute; left:30px; top:50%; width:30px; height:1px; content:'';}
	.law_org .depth02 .label.sub {margin-top:10px;}
	.law_org .depth02 .label {width:100%; height:auto; line-height:1.2;}
	.law_org .depth02 .label strong {height:auto; padding:10px; line-height:1.2;}
	.law_org .depth03 li {padding:25px 0 0 0;}
	.law_org .depth03 p {width:100%; height:50px; max-width:100%; margin:0; line-height:50px;}
	.law_org .depth03 span {display:block; height:auto; padding:35px 10px 10px; border-radius:0 0 30px 30px; text-align:center;}
	
	.safety .depth01 .item {width:100%;}
	.safety .depth01 {padding-bottom:0;}
	.safety .depth01:before {left:30px; bottom:auto; top:0; height:705px;}
	.safety .depth02:before {display:none; left:30px;}
	.safety .depth02 > ul > li {display:block; position:relative; margin-top:20px; padding-left:50px;}
	.safety .depth02 > ul > li:before {position:absolute; left:30px; top:25px; width:50%; height:1px; content:'';}
	.safety .depth02 .item,
	.safety .depth03 {width:100%; max-width:100%;}
	.safety .depth03 > li {width:49%;}
	.safety .depth03 li li {width:100%; padding-top:10px;}
	
	.indicate .item {padding:10px 0;}
	.indicate .item .img {position:relative; margin-bottom:10px; text-align:center;}
	
	.vision {margin-top:10px;}
	.vision h4 {padding:0;}
	
	.org {margin:10px 0; padding:20px;}
	.org .depth01 .item {margin-top:10px;}
	.org .depth02 {background-size:250px auto; background-position:center 0;}
	.org .depth02 li {float:none !important;}
	.org .depth02 li + li {margin-top:10px;}
	
	.history:before {left:25px;}
	.history h4 {left:0; margin:0;}
	.history li {float:none !important; width:100%; margin:10px 0 0; padding:0 0 0 25px !important; text-align:left;}
	.history p {margin-left:20px;}
	.history p:before {right:auto !important; left:-23px !important; margin:-2.5px 0 0 !important;}
	.history p:after {right:auto; left:-8px; border:0 none; border-bottom:1px solid #d9dfed; border-left:1px solid #d9dfed;}
	
	.edu_search .calender {padding:20px;}
	.edu_search .legend {right:25px; top:30px;}
	.edu_search .contents {padding:20px;}
	.edu_search .btn {margin-top:10px; padding-top:20px;}
	.edu_list .table01 .txt_left {min-width:100px;}
	
	.apply_state .title-sky.float_left {float:none; margin-bottom:0;}
	.apply_state select.float_right {float:none; width:100%; margin:10px 0;}
	
	.apply_org li {width:48%; margin-top:10px;}
	.apply_org label {height:150px; padding-top:10px;}
	
	.bul-dot.menual {margin-bottom:-10px;}
	.bul-dot.menual li {float:none !important; width:100% !important; margin-bottom:15px;}
	.bul-dot.menual li img {position:relative; left:-15px; margin:5px auto 0 !important;}
	.bul-dot.menual .title02.point05, 
	.bul-dot.menual .title02.point01 {padding-right:0;}
	.bul-dot.menual.type2 li img {left:0;}
	
	#contents-title .icon05 {display:block; margin:0;}
	
	.board-fis {margin-top:65px;}
	.board-fis .go-link {width:100%;}

    .board-fis .go-link a {
        float: left;
    }

    .board-fis .go-link select {
        float: right;
    }
	.board-fis .list {width:100%;}
	.board-fis .list li {float:none; width:100%; margin-right:0;}
}
@media screen and (max-width: 480px){
.apply_state + .btn_wrap a {
	width: 100%;
	margin-bottom: 5px;
	text-align: center;
	}
	
	p.box04.point03 {padding-left:25px;}
	p.box04.point03 > span {display:block; position:relative; left:0; top:0;}
	.box06 {padding:10px 20px;}
	
	.box01 > span.img:first-child {display: block; position: static; width: 100%; margin: 0; text-align: center;}
	.box01 > span.img + h4.tit_agree.point02 {padding: 10px 0 0; text-align: center;}
	
	.bul-num > li {margin-top:10px; padding-left:40px; font-size:1em;}
	.bul-num > li .depth {margin:5px 0 0;}
	.bul-num .num {width:30px; height:30px; line-height:30px;}
	
	.list04 .item span {display:block; width:100% !important; padding:0; text-align:left !important; white-space:normal;} 
	.list04 .item strong {display:block; margin:5px 0; padding:0; white-space:normal;}
	.list04 .item.reply {position:relative;}
	.list04 .item.reply span {padding-left:15px;}
	.list04 .item.reply strong {padding-left:15px;}
	.list04 .item.reply strong::before {position:absolute; left:10px; top:10px;}
	
	.layerpopup > .img .close {right: 5px; top: 5px;}
}
@media screen and (max-width:375px){
	.btn-b {padding:0 15px !important;}
	.list_card li {width:99%;}
	.list_card a {height:auto;}
	
	.list03 > li {margin:20px 0 0; padding:0;}
	.list03 .img {display:block; position:relative; text-align:center;}
	.list03 .contents {display:block;}
	
	.agree_check a {margin-left:5px; padding:0 10px;}
	
	.apply_state ul.clear li {float:none; width:100%;}
	
	.board-fis .search_form {height:auto; padding:0;}
	.board-fis .search_form select {position:relative; width:100%; height:40px; border-right:1px solid #ddd;}
	.board-fis .search_form .btn_type01 {position:relative; width:100%; height:40px;}
	.board-fis .search_form input[type='text'] {height:40px; margin:-1px 0;}
	
	.board-fis .category a {height:30px; margin:0;}
	
	.board-fis .list li {padding:20px;}
	.board-fis .list .icon05 {right:20px; top:20px;} 
}