@import url('reset.css');
@import url('/zz/fonts_hd/font.css');
/* @import url('../fonts/fontawesome/all.min.css'); */

body, button, a, p {font-family: 'Gmarket'; letter-spacing: -0.01em;}

i {display: block;}
b {display: none;}

.inline-block {display: inline-block!important;}
.block {display: block!important;}
.p0 {padding: 0!important;}
.pb0 {padding-bottom: 0!important;}
.pb40 {padding-bottom: 40px!important;}
.pb60 {padding-bottom: 60px!important;}
.m0 {margin: 0!important;}
.m0-auto {margin: 0 auto!important;}
.mb80 {margin-bottom: 80px;}
.star {color: #CA243A!important;}
.animation {opacity: 0;}

/* header */
header {width: 100%; background: #F5F5F5; border: 1px solid #CECECE;}
header div {display: flex; justify-content: space-between; width: 1200px; padding: 15px 0; margin: auto;}
header ul {display: flex; justify-content: flex-end; align-items: center;}
header li {padding: 0 10px;}
/* header li a {padding: 10px 0; font-family: 'Gmarket'; font-weight: 500; font-size: 24px; color: #000; transition: 0.3s all;} */
header li a {position: relative; padding: 10px 0; font-family: 'Gmarket'; font-weight: 500; font-size: 24px; color: #000; transition: 0.3s all;}
/* header li:hover a {color: #CA243A; border-bottom: 1px solid #CA243A;} */
header li:hover a {color: #CA243A;}
header li:hover a::after {content: ' '; position: absolute; left: 0; bottom: 0px; width: 100%; height: 2px; background-color: #CA243A; animation: gnbHover 0.5s;}

header button {display: block; padding: 16px 40px; font-family: 'Gmarket'; font-weight: 500; font-size: 24px; color: #fff; background: #00274C; border: 0; border-radius: 35px; transition: all 0.3s; cursor: pointer;}
header button:hover {background: #CA243A;}
.mobile {display: none;}
.gnb-btn {display: none;}
.gnb-close {display: none;}

/* section */
section {width: 100%;}
section > div {width: 100%;}
section .main {position: relative; width: 1200px; margin: auto;}
section .visual {z-index: 2; position: relative; display: block; width: 100%; height: 500px; background: url(/zz/img_hd/visual_bg_01.png) no-repeat left 0px top 35px;}
section .visual > img {z-index: 2; position: absolute; bottom: -55px; left: 120px; height: 290px; animation: visualImg 5s ease-out infinite; animation-delay: 1s;}
section .visual-sub {position: absolute; top: 0; left: -100px; display: block; width: 1400px; height: 100%;}
section .visual-sub img {z-index: 1; position: absolute;}
section .visual-sub img:nth-child(1) {bottom: -188px; left: 100px; animation: greenBall 12s ease-out infinite; animation-delay: 1s;}
section .visual-sub img:nth-child(2) {top: 26px; right: 290px; animation: blueBall 15s ease-out infinite; animation-delay: 1s;}
section .content {z-index: 1; position: relative; background: #EFF0F2; min-height: 600px;}
section .content > div {width: 1200px; padding: 100px 0 200px 0; margin: auto;}



/*kgh추가 */
section .content2 {background: #FFFFFF;}
section .content2 > div {width: 1200px; padding: 95px 0 165px 0; margin: auto;}

/* content-text */
.content-text p {font-weight: 500; font-size: 31px; line-height: 48px; color: #000;}
.content-text .button-type {width: 100%; margin: 0 0 40px 0;}

.content h3 {width: 100%; margin-bottom: 40px; font-weight: 700; font-size: 32px; line-height: 48px; text-align: center; color: #000;}
.content h4 {width: 100%;  font-weight: 700; font-size: 32px; line-height: 48px; text-align: center; color: #000;}

/*kgh추가 */
.content2-text {margin-bottom: 32px; font-weight: 500; font-size: 31px; line-height: 48px; color: #000;}
.content2 h3 {width: 100%; margin-bottom: 40px; font-weight: 700; font-size: 32px; line-height: 48px; text-align: center; color: #000;}


/* button-type */
.button-type {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 40px;}
.button-type li {flex: 1;}
.button-type button {width: 100%; padding: 15px 0; font-weight: 500; font-size: 24px; line-height: 32px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}
.button-type button img {margin-right: 4px;}
.button-type li:first-of-type {margin-right: 20px;}
.button-type li:first-of-type button {color: #fff; background: #CA243A; border: 0;}

/* content-box */
.content-box {padding: 40px 37px 75px 58px; margin: 80px 0; background: #fff; border: 1px solid #333;}
.content-box > ul {display: flex; margin-bottom: 60px;}
.content-box > ul > li:first-child {width: 220px; margin-right: 24px;}
.content-box > ul > li:first-child div {width: 100%; padding: 7px 0; text-align: center; font-weight: 700; font-size: 32px; line-height: 48px; color: #323333; background: #fff; border: 1px solid #999;}
.content-box > ul > li:first-child div + span {display: block; margin-top: 15px; font-weight: 500; font-size: 17px; line-height: 24px; color: #666;}
.content-box > ul > li:last-child {flex: 1;}
.content-box > ul:last-child {margin: 0;}
/* kgh수정 */
.content-box > ul > li > p {display: flex; align-items: center; flex-wrap: wrap; height: 64px; font-weight: 500; font-size: 23px; line-height: 32px; color: #333;}
/* .content-box > ul > li > p a {display: inline; text-decoration: underline; text-underline-position : under;} */
.content-box > ul > li > p a {display: inline; text-decoration: underline; text-underline-position : under; transition: 0.2s all;}
.content-box > ul > li > p a:hover {color: #CA243A;}

br, i, b {font-family: "NanumSquare";}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) , (min-width: 601px) and (max-width: 1024px) {
    .sub-box-01 li {width: calc(50vw - 40px);}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) , (max-width: 600px) {
    .content-box > ul > li:last-child {flex: none; display: block; width: 100%;}
}


/* content-box - bullet */
/* .content-box .bullet {height: auto; margin-top: 40px; font-weight: 500; font-size: 24px; line-height: 130%; color: #333;} */
/* kgh수정 */
.content-box .bullet {height: auto; margin-top: 40px; font-weight: 500; font-size: 24px; line-height: normal; color: #333;}

.content-box .bullet::before {content: ' '; display: inline-block; width: 30px; height: 30px; margin-right: 5px; background: radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 100%); border: 1px solid #333; border-radius: 50px;}


.ul-position {position: relative;}
.ul-position > li > span {position:absolute; top: 260px; left: 242px;}

#content-boax-three {position: relative;}
#content-boax-three > li > span {position:absolute; top: 186px; left: 242px;}


/* content-box-sub */
.content-box-sub {width: 100%; padding: 25px; margin-top: 25px; background: #E6E6E6;}
.content-box-sub ul {display: flex; align-items: center;}
.content-box-sub ul li {font-weight: 500; font-size: 32px; line-height: 36px; color: #333;}
.content-box-sub ul li:first-child {width: 105px; padding: 15px 0; margin-right: 20px; text-align: center; font-size: 24px; line-height: 32px; color: #fff; background: #CA243A; border-radius: 30px;}
.content-box-sub ul li:last-child {flex: 1;}
.content-box-sub ul li span {font-weight: 700; color: #CA243A;}
.content-box-sub ul:last-child {margin-top: 15px;}
.content-box-sub ul:last-child li:first-child {background: #999;}
.content-box-sub ul:last-child li:last-child {padding: 8px 0;}
.content-box-sub ul li p {font-weight: 500; font-size: 24px; color: #333;}

/* sub-arrow */
.sub-arrow {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 1px; padding: 10px 0; margin: 15px 0;}
.sub-arrow::before {left: 0; top: 50%; position: absolute; content: ' '; display: inline-block; width: 100%; height: 3px; background: url(/zz/img_hd/border_dashed_01.png) repeat-x center center; transform: translateY(-50%);}
.sub-arrow img {z-index: 1;}

/* sub-box-01 */
.sub-box-01 {display: flex;}
.sub-box-01 li {flex: 1; margin-right: 20px; text-align: center;}
.sub-box-01 li:last-child {margin: 0;}
.sub-box-01 div {padding: 15px 0; margin-bottom: 2px; font-weight: 700; font-size: 24px; color: #fff; background: #7EB188;}
.sub-box-01 p {width: 100%; padding: 15px 0; font-weight: 500; font-size: 24px; line-height: 32px; text-align: center; color: #333; background: #E6E6E6;}

/* sub-box-02 */
.sub-box-02 {display: flex;}
.sub-box-02 li {position: relative; flex: 1; height: 270px; padding: 15px; margin-right: 20px; background: #F5F5F5; border: 1px solid #333;}


@media (min-width: 600px) {
		.sub-box-02 li:first-child div {height:67px}
		.sub-box-02 li:first-child p {font-size:17px}
}
	
.sub-box-02 li:nth-child(2) div {word-break: keep-all;}
	
.sub-box-02 li:last-child {margin: 0;}
.sub-box-02 li::before {z-index: 1; position: absolute; top: 50%; right: -30px; content: ' '; display: block; width: 40px; height: 40px; background: url(/zz/img_hd/content_arrow_02.png) no-repeat center center; transform: translateY(-50%);}
.sub-box-02 li:last-child:before {content: none;}
.sub-box-02 li div {padding-bottom: 6px; margin-bottom: 8px; font-weight: 700; font-size: 24px; line-height: 1.25; color: #333; background: url(/zz/img_hd/border_dashed_02.png) repeat-x center bottom;}
.sub-box-02 li p {font-weight: 500; font-size: 24px; line-height: 32px; color: #000;}
.sub-box-02 li img {position: absolute; right: 15px; bottom: 15px;}


.sub-box-02 li:nth-child(2) div {word-break: keep-all;}
/* kgh 수정 */
/* .sub-box-02 li p {font-weight: 500; font-size: 24px; line-height: 32px; color: #000;} */
.sub-box-02 li p {font-weight: 500; font-size: 17px; line-height: 32px; color: #000;padding-top: 5px;}
.sub-box-02 li img {position: absolute; right: 15px; bottom: 15px;}



/* sub-box-03 */
.sub-box-03 {display: flex;}
.sub-box-03 li {position: relative; flex: 1; margin-right: 20px; background: #F5F5F5;}
.sub-box-03 li:last-child {margin: 0;}
.sub-box-03 div {width: 100%; height: 92px; padding-top: 16px; margin-bottom: 2px; font-weight: 500; font-size: 24px; line-height: 32px; text-align: center; color: #fff; background: #4989C9;}
.sub-box-03 span {font-weight: 600; color: #f5e945;}
.sub-box-03 p {flex-wrap: wrap; width: 100%; height: 127px; padding: 40px 0 16px 0; font-weight: 500; font-size: 16px; line-height: 24px; text-align: center; color: #333; background: #E6E6E6;}



/* search */
.search {height: 50px; width: calc((100% + 88px)/3); float: right; display: block; margin-bottom: 20px;}
#search-select, #search-input, #search-button{height: 50px; display: block; border: none; margin: 0; padding: 0; float: left; font-family: 'Gmarket'; font-size: 18px; border: 1px solid #999;}
#search-select{width: 130px; text-align: center; margin-right: 10px;}
#search-input{width: 199px; padding: 0 10px; background: #fff; border-right: none;}
#search-button{width: 90px; background: #ca243a; border-left: none; color:white;}

/* table */
/* table {text-align: center; color: #333;} */
/* table thead {border: 1px solid #999; height: 55px;} */
/* table thead tr th {font-size: 22px; font-weight: 600;} */
/* table tbody tr {border-bottom: 1px solid #999; height: 50px; font-size: 16px;} */
/* table tbody tr td a{width: 90%; height: 35px; display: block; line-height: 35px; margin: 0px auto;} */

/* 컨텐츠 적용 테이블 */
.table-default {background-color: white; table-layout: fixed; border-top: 2px solid #ca243a; border-bottom: 1px solid #e0e0e0; margin-bottom: 30px;}
.table-default:last-of-type {margin-bottom: 0;}
.table-default tr {width: 100%; border-bottom: 1px solid #e0e0e0;}
.table-default thead th {height: 50px; font-size: 19px; text-align: center; border-bottom: 1px solid #e0e0e0;}
.table-default tbody tr th {min-height: 50px; font-size: 18px; text-align: left; word-break: break-all; background-color: #f3f4f5; color: #093d8e; border: 1px solid #e0e0e0; padding: 0 20px;}
.table-default tbody tr td {padding: 10px 20px; text-align: center; word-break: break-all; font-size: 18px; font-weight: 300; line-height: 1.2; color: #333;}
.table-default tbody tr th + td {text-align: left;}
.table-default tbody tr td:last-child {border-right: 0;}
.table-default tbody tr th:first-child {border-left: 0;}
.table-default tbody tr th:nth-of-type(2),
.table-default tbody tr th:nth-of-type(3),
.table-default tbody tr th:nth-of-type(4) {text-align: center; padding: 0;}
.table-default .title {text-overflow: ellipsis; overflow: hidden;}
.table-default .title a {display: block; width: 100%; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 18px; font-weight: 400; color: #333;}
.table-default .title a:hover{color: #8b0016; text-decoration: underline #8b0016;}

.table-default tbody tr td.border-right {border-right: 1px solid #c0c0c0;}

/* page */
.page a {height: 40px; width: 40px; border-radius: 50%; border: 2px solid #333; display: block; line-height: 40px; text-align: center; font-size: 18px; float: left; margin-right: 10px;}
.page a:first-child, .page a:last-child {letter-spacing: -2.5px;}
.page a:last-child {margin-right: 0}
.page .nomber {border: none;}


/* footer */
footer {display: flex; justify-content: center; align-items: center; width: 100%; min-width: 1200px; padding: 32px 0; background: #333;}
footer p {margin-left: 50px; font-size: 16px; font-weight: 500; color: #fff;}

/* different-visual */
section .different-visual {height: 400px; background: url(/zz/img_hd/visual_bg_02.png) no-repeat center top 50px;}
section .different-visual img {left: 310px; height: auto;}
section .different-visual + .content > div {padding-bottom: 190px;}
section .different-visual + .content > div > div { margin-top: 0;}

/* visual-type02 */
section .visual-type02 {height: 400px; background: url(/zz/img_hd/visual_bg_02.png) no-repeat center top 40px;}
section .visual-type02 img {bottom: -69px; left: 340px; height: 260px;}
section .visual-type02 + .visual-sub img:nth-child(1) {bottom: -210px; left: 270px;}
section .visual-type02 + .visual-sub img:nth-child(2) {top: 80%; right: 150px;}
section .content.type02 > div {padding-bottom: 190px;}
section .content.type02 .button-type {margin-bottom: 0;}
section .content.type02 > div > div {margin-top: 0;}


/* form-box */
.form-box {padding: 40px; background: #fff; border: 1px solid #333; margin-bottom: 40px;}
.form-box p {margin-bottom: 16px; font-weight: 500; font-size: 16px; line-height: 24px; color: #333;}
.form-box input[type=text], .form-box input[type=number], .form-box input[type=email] {width: 100%; height: 48px; padding-left: 10px; margin-bottom: 24px; font-size: 16px; line-height: 24px; background: #F5F5F5; border: 1px solid #ddd;}
.form-box textarea {width: 100%; padding-left: 10px; margin-bottom: 24px; font-size: 16px; line-height: 24px; background: #F5F5F5; border: 1px solid #ddd;}
.form-box input[type=file] {width: 100%; margin-bottom: 22px;}
.form-text-box {width: 100%; height: 300px; padding: 24px 24px 21px 24px; margin-bottom: 16px; font-weight: 500; font-size: 15px; line-height: 24px; color: #333; background: #F5F5F5; border: 1px solid #ddd; overflow-y: scroll;}

.form-box2 {padding: 40px 0px 20px 0px; background: #fff; border: 1px solid #333; }
.form-box2 p {margin-bottom: 16px; font-weight: 500; font-size: 32px; line-height: 20px; color: #333; text-align:center}

.checkbox-1 {width: 100%;}
.checkbox-1 input[type="checkbox"] {display: none;}
.checkbox-1 input[type="checkbox"] + label {display: flex; align-items: center;}
.checkbox-1 input[type="checkbox"] + label::before {content: " ";  display: inline-block; width: 16px; height: 16px; margin-right: 5px; background: #fff; border: 1px solid #999;}
.checkbox-1 input[type=checkbox]:checked + label:before {content: " "; background: url(/zz/img_hd/icoc_checkbox_01.png) no-repeat center center; border: 0;}

.checkbox-2 {width: 100%;}
.checkbox-2 input[type="checkbox"] {display: none;}
.checkbox-2 input[type="checkbox"] + label {display: flex; align-items: center;}
.checkbox-2 input[type="checkbox"] + label::before {content: " ";  display: inline-block; width: 16px; height: 16px; margin-right: 5px; background: #fff; border: 1px solid #666; border-radius: 30px;}
.checkbox-2 input[type=checkbox]:checked + label:before {content: " "; background: url(/zz/img_hd/icoc_checkbox_02.png) no-repeat center center;}

/* .filebox {display:flow-root; align-items: center; margin-bottom: 10px;} */
/* .filebox + .filebox {margin-bottom: 22px;} */
/* .filebox input {flex: 1; display: inline-block; padding: 8px 10px; font-weight: 500; font-size: 16px; line-height: 32px; color: #333; background: #F5F5F5; border: 1px solid #ddd;} */
/* .filebox label {display: inline-block; width: 175px; padding: 8px 0; margin-right: 8px; text-align: center; font-weight: 500; font-size: 16px; line-height: 32px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;} */
/* .filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} */
.fileShowCss {display: inline-block; width: 85%; padding-right: 5px; vertical-align: top; float: left; border: 0px;}
    .fileLoading {z-index: 99; position: relative; left: calc(100% - 58%); display: none; text-align: center;}
    .filebox button {width: 68px; height: 32px; margin: 0px 2px; font-size: 16px; font-weight: 600; font-family: 'NanumSquare'; background: #fff; transition: 0.3s all; cursor: pointer;}
    .filebox button:nth-of-type(1) {color:#fff; border: 1px solid #ca243a; background:#ca243a;}
    .filebox button:nth-of-type(1):hover {color: #ca243a; background:white;}
    .filebox button:nth-of-type(2) {color:#333; border: 1px solid #ccc; background:#ccc;}
    .filebox button:nth-of-type(2):hover {color: #fff; background:#333;}
.filebox .fileTable tr {background-color: #f5f5f5; border: 1px solid #ddd; height: 30px;}
.filebox .fileTable tr .fileCheckBox {display: revert; vertical-align: middle; text-align: center; width: 35px;}
.filebox .fileTable tr .fileNameBox {display: revert; vertical-align: middle; text-align: left; font-size: 14px;}

/* button-type-submit */
.button-type-submit {width: 100%; text-align: center;}
.button-type-submit button {width: 590px; padding: 14px 0; margin-bottom: 110px; font-weight: 500; font-size: 24px; line-height: 32px; color: #fff; background: #CA243A; border: 0; cursor: pointer;}


/* button-type-download */
.button-type-download {width: 1200px; display: flex; justify-content: space-between; align-items: center; margin: auto; margin-bottom: 40px;}
.button-type-download a {display: flex; justify-content: center; align-items: center; width: 590px; height: 60px; text-align: center; font-size: 20px; line-height: 22px; color: #fff; transition: 0.3s all;}
.button-type-download a img {height: 20px; margin: 0 5px 3px 0; filter: brightness(0) invert(1); transition: 0.5s all;}
.button-type-download a:first-child {background-color: #7eb188; border: 1px solid #7eb188;}
.button-type-download a:first-child:hover {color: #7eb188; background-color: #fff;}
.button-type-download a:first-child:hover img {filter: invert(70%) sepia(12%) saturate(874%) hue-rotate(80deg) brightness(92%) contrast(87%);}
.button-type-download a:last-child {background-color: #4989c9; border: 1px solid #4989c9;}
.button-type-download a:last-child:hover {color: #4989c9; background-color: #fff;}
.button-type-download a:last-child:hover img {filter: invert(49%) sepia(8%) saturate(3155%) hue-rotate(169deg) brightness(100%) contrast(88%);}

/* keyframes */
@keyframes greenBall {
    0% {transform: translateY(0);}
    42% {transform: translateX(-30px) translateY(-20px);}
    70% {transform: translateX(10px) translateY(20px);}
    70% {transform: translateY(0px);}
}

@keyframes blueBall {
    0% {transform: translateX(0);}
    42% {transform: translateX(-20px) translateY(20px);}
    70% {transform: translateX(20px) translateY(40px);}
    70% {transform: translateX(0px);}
}


@keyframes gnbBg {
    0%   {background: rgba(0, 0, 0, 0);}
    100% {background: rgba(0, 0, 0, 0.8);}
}

@keyframes gnb {
    0%   {right: -50%;}
    100% {right: 0;}
}

@keyframes gnbClose {
    0%   {top: -10px;}
    100% {top: 8px;}
}

@keyframes gnbHover{
	from {width:0;}
	to {width:100%}
} /* 0316 */
















   /* kgh추가  */
    #web {  display: block  }
    #mobile{   display:none  }
    #other  {    display: block;		font-weight: 500;	font-size: 18px;	  line-height: 24px;  color: #666;  }
    #content-boax-three {position: relative}
    #newspan {position: absolute; top: 270px; left: 232px;}
    
    
        /* 상세화면 */
    #card-info-main {padding: 10px; background: white;   border-top: 3px solid #ca243a;}
    .card-info-top {position: relative; display: flex;flex-wrap: wrap; width: 100%; background-color: #ffefef;}
    .card-info-top h4 {display: flex; align-items: center; width: 100%; font-size: 20px; padding: 15px 35px;}
    .card-info-top div {display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 10px 22px; background-color: #fff; border-bottom: 1px solid #e0e0e0;}
    .card-info-top p {display: inline-block; align-items: center; font-size: 16px; color: #878787; margin-right: 20px;     padding: 5px;}
    .card-info-text {display: flex; flex-wrap: wrap; width: 100%; padding: 20px; border-top: 1px solid #666;}
	.card-info-text p {font-size: 18px; font-weight: 400;}
	.card-info-download {font-size: 16px; display: flex; flex-wrap: wrap; width: 100%; padding: 15px 22px; border-bottom: 1px solid #e9e9e9;}
    
        /*첨부파일*/
    .fileShowCss {width:100%;display:inline-block;vertical-align:top;padding-right:1px;float:left;border:0px;padding-bottom: 24px;}
    .fileLoading{left:calc(100% - 58%);position:relative;display:none;z-index:99;text-align:center;}
/*     .filebox button{ color: #043763; background-color: #e7eef8; border: 1px solid #c0cbd9; border-radius: 3px; font-size: 16px; cursor: pointer; padding: 7px 18px 4px 15px;} */
    .btn-box {display: flex; align-items: center; padding: 10px 0px 0px 0px!important; }
    .btn-right{margin-top: 20px;justify-content: flex-end;}
    .btn-list {width: 90px; height: 42px; margin-right: 7px; background-color: #666; font-size: 16px; color: #fff; cursor: pointer;}

	/* file-popup-control */
	.file-popup-control {cursor:pointer;}
	.file-popup {z-index: 2; position: absolute; right: 0px; display: none; width: 500px; padding: 15px 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px;text-align:left;}
	.file-popup div {display: flex; justify-content: space-between; align-items: center; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #ddd;}
	.file-popup div p {font-size: 16px; font-weight: 400; cursor: pointer;color:#555;}
	.file-popup div p:hover {color: #DB0909; font-weight: 500; transition: 0.3s all;}
	.file-popup div img {margin-left: 5px;}
	.file-popup div span {display: flex; justify-content: end; align-items: center; cursor: pointer;}
	.file-popup ul {display:inline;}
	.file-popup li {display: flex; align-items: center; max-width: 100%;padding:0;border:0; transform: none;}
	.file-popup li p {display: block; font-size: 13px; font-weight: 400; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;color:#555;transform: none;}
	.file-popup li p:hover {text-decoration: underline; color: #2952CC; transition: 0.3s all;}
	.file-popup li p a:hover {text-decoration: underline; color: #2952CC; transition: 0.3s all;}
	.file-popup li img {margin-right: 5px;}
	

		
@media (min-width: 601px) and (max-width: 1024px) {
    i {display: none;}
    b {display: none;}
    .pc {display: none;}
    .mobile {display: block;}
    .gnb-btn {display: block; cursor: pointer;}
    .animation {opacity: 1;}
    #betterUrl {display: none ;}
      
    header {position: relative;}
    header div {align-items: center; width: 100%; padding: 8px 17px;}
    header h1 a img {height: 52px;}
    header ul {display: none;}
    header button {display: none;}
	
    header.on::before {z-index: 3; position: fixed; top: 0; left: 0; content: ' '; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); animation: gnbBg 0.3s; animation-delay: 0s;}
    header.on ul {z-index: 3; position: fixed; top: 0; right: 0; display: block; width: 50vw; height: 100vh; animation: gnb 0.7s; animation-delay: 0s;}
    header.on ul::before {z-index: 2; position: fixed; top: 0; right: 0; content: ' '; width: 50vw; height: 100vh; background: #fff; animation: gnb 0.7s; animation-delay: 0s;}
    header.on li {position: relative; z-index: 3; padding: 0; border-bottom: 1px solid #ddd;}
    header.on li a {display: flex; align-items: center; width: 100%; height: 48px; padding: 10px; font-size: 16px; line-height: 24px; background: #fff;}
    header.on li a::before {content: ' '; display: inline-block; width: 4px; height: 4px; margin-right: 6px; background: #888; border-radius: 30px;}
    header.on li:last-child a {background: #00274C; color: #fff;}
    header.on .gnb-close {z-index: 3; position: fixed; top: 8px; left: 42vw; display: block; animation: gnbClose 0.7s; animation-delay: 0s;}
    
	section .main {width: 100%;}
    section .visual {width: 100%; height: 300px; background: url(/zz/img_hd/visual_bg_01.png) no-repeat center 20px; background-size: 600px;}
    section .visual-sub {left: 50%; width: 600px; transform: translateX(-50%);}
    section .visual img {left: 33%; bottom: -54px; height: auto; transform: translateX(-50%);}
    section .visual-sub img:nth-child(1) {bottom: -10px; left: -40px; height: 120px;}
    section .visual-sub img:nth-child(2) {top: 35px; left: 535px; height: 90px;}
    section .content > div {width: 100%; padding: 0 0 50px 0;}
    
    section .visual img:first-child {display: block; height: 200px;}
    section .visual img:last-child {display: none;}
    section .visual-type02 + .visual-sub img:nth-child(1) {bottom: -10px; left: -40px; height: 110px;}
    section .visual-type02 + .visual-sub img:nth-child(2) {top: 35px; left: 535px; height: 57px; height: 80px;}
    section .content.type02 > div {padding-bottom: 50px;}
    section .content.type02 > div > div {border: 0;}
    section .content.type02 .button-type, .button-type {width: calc(100% - 40px); margin: 0 20px;}

    footer {flex-wrap: wrap; min-width: auto; padding: 21px 0 26px 0;}
    footer h2 {display: block; margin-bottom: 8px;}
    footer p {width: 100%; margin: 0; text-align: center; font-size: 12px;}
    
   #content-boax-three > li > span {position: absolute; top: 419px; left: 1px; font-size: 14px;}
   .content-box > ul > li:first-child div + span {
    display: block;
    margin-top: 15px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #666;
}
    .ul-position > li > span {    position: absolute;
    top: 294px;
    left: 1px;
    font-size: 14px;}
    
    .content h3 {padding-top: 50px;}
    .content h4 {padding-top: 50px;}
    .sub-box-01 div, .sub-box-01 p {padding: 10px 0; font-size: 18px;}
    .sub-box-02 li {height: 240px; margin-right:15px;}
    .sub-box-02 li:first-child div {height:78px;font-size: 19px;}
    .sub-box-02 li:last-child div {height:78px;font-size: 19px;}
    .sub-box-02 li:first-child p {font-size:16px;}
    .sub-box-02 li div { height:78px;font-size: 19px;}
    .sub-box-02 li p {font-size: 16px;}
    .sub-box-02 li img {width: 56px;height: 53px;right: 8px; bottom: 8px;}
    .sub-box-02 li::before { position: absolute; right: -26px; top: 50%;  width: 30px;  height: 30px;background-size: 100%; transform: translateY(-50%);}
    
    .content-box > ul {margin-bottom: 40px;}
    .content-box > ul > li > p {height: auto; padding: 0; font-size: 19px;}
    .content-box-sub ul li {font-size: 24px;}
    .content-box-sub ul li p {font-size: 19px;}
    .content-box .bullet {margin-top: 30px; font-size: 19px;}
    .content-box .bullet::before {width: 20px; height: 20px;}
    .content-box-sub ul li:first-child {padding: 10px 0; font-size: 19px;}
    .content-box > ul > li:first-child {width: 100%; margin: 0 0 10px 0;}
    .content-box > ul > li:first-child div {padding: 0; font-size: 25px;}

    .form-box {border: 0;}
    .content-box {margin: 60px 0; border: 0;}
    .content-text {padding: 50px 20px 0 20px;}
    .content-text p {font-size: 25px; line-height: 40px;}
    .content-text .button-type {margin: 20px 0;}
    .content-box > ul {flex-wrap: wrap;}
    .content-box > ul > li:last-child {flex: none; width: 100%;}
    .content-box > ul > li:first-child div + span i {display: none;}
    
    .sub-box-01, .sub-box-02, .sub-box-03 {flex-wrap: wrap;}
    .sub-box-01 li {flex: none; width: calc(50vw - 31px); margin-right: 0; margin-bottom: 0px; height: 200px;}
/*     .sub-box-02 li {flex: none; width: calc(50vw - 31px); margin-right: 0; margin-bottom: 20px; height: 200px;} */
    .sub-box-01 li:nth-of-type(2n + 1) {margin-right: 20px;}
    .sub-box-01 li:nth-of-type(1n + 3) {margin-bottom: 0;}
/*     .sub-box-02 li:nth-of-type(2)::before {top: calc(100% - 10px); left: -32px; transform: rotate(135deg);} */
/*     .sub-box-02 li div {font-size: 20px;} */
    .sub-box-03 li {flex: none; width: 100%; margin-bottom: 15px;}
    .sub-box-03 li:last-child {margin-bottom: 0;}
    .sub-box-03 li div {font-size: 22px; padding-top: 30px;}

    section .visual-type03 {height: 250px; background: url(/zz/img_hd/visual_bg_03.png) no-repeat center top 20px; background-size: 600px;}
    section .visual-type03 img:first-child {bottom: -61px; left: 43%; height: 210px;}
    section .visual-type03 + .visual-sub img:nth-child(1) {bottom: -75px; left: -30px;}
    section .visual-type03 + .visual-sub img:nth-child(2) {top: 75%; right: 35px; left: auto;}

    .button-type-download {width: calc(100% - 40px); flex-wrap: wrap;}
    .button-type-download a {width: 100%; padding: 14px; font-size: 20px;}
    .button-type-download a:first-child {margin-bottom: 10px;}

    .button-type-submit button {margin-bottom: 60px;}
    
    
    /* kgh추가 */
    .content-box {padding: 40px 20px 75px 20px; margin: 80px 0; background: #fff; border: 1px solid #333;}
    
    .search {display: flex; width: 400px; height: 40px; padding: 0 20px; float: right;}
    #search-select, #search-input {width:50%;}
    #search-select {width: 100px; padding: 0 5px; text-align: left;}
    #search-button {width: 70px; border: 0;}
	#search-select, #search-input, #search-button {height: 40px; font-size: 16px;}
    .search + table {width: calc(100% - 40px); margin: 0 20px;}
}
	
@media (max-width: 600px) {
	i {display: none;}
    b {display: block;}
     .pc {display: none;}
    .mobile {display: block;}
    .gnb-btn {display: block; cursor: pointer;}
    .animation {opacity: 1;}
    
    
    header {position: relative;}
    header div {align-items: center; width: 100%; padding: 8px 17px;}
    header h1 a img {height: 52px;}
    header ul {display: none;}
    header button {display: none;}
    .mobile {display: block;}
    .gnb-btn {display: block; cursor: pointer;}
    
    
    header.on::before {z-index: 3; position: fixed; top: 0; left: 0; content: ' '; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); animation: gnbBg 0.3s; animation-delay: 0s;}
    header.on ul {z-index: 3; position: fixed; top: 0; right: 0; display: block; width: 78vw; height: 100vh; animation: gnb 0.7s; animation-delay: 0s;}
    header.on ul::before {z-index: 2; position: fixed; top: 0; right: 0; content: ' '; width: 78vw; height: 100vh; background: #fff; animation: gnb 0.7s; animation-delay: 0s;}
    header.on li {position: relative; z-index: 3; padding: 0; border-bottom: 1px solid #ddd;}
    header.on li a {display: flex; align-items: center; width: 100%; height: 48px; padding: 10px; font-size: 16px; line-height: 24px; background: #fff;}
    header.on li a::before {content: ' '; display: inline-block; width: 4px; height: 4px; margin-right: 6px; background: #888; border-radius: 30px;}
    header.on li:last-child a {background: #00274C; color: #fff;}
    header.on .gnb-close {z-index: 3; position: fixed; top: 8px; left: 12vw; display: block; animation: gnbClose 0.7s; animation-delay: 0s;}
    

	 section .main {width: 100%;}
    section .visual {width: 100%; height: 180px; background: url(/zz/img_hd/visual_bg_01_m.png) no-repeat center 20px; background-size: auto;}
    section .visual-sub {left: 50%; width: 360px; transform: translateX(-50%);}
    section .visual img {left: 32%; bottom: -30px; height: auto; transform: translateX(-50%);}
    section .visual-sub img:nth-child(1) {bottom: -50px; left: -20px; height: 87px;}
    section .visual-sub img:nth-child(2) {top: 15px; left: 275px; height: 57px;}
    section .content > div {width: 100%; padding: 0 0 50px 0;}
    
    .content-text {display: flex; flex-wrap: wrap-reverse; padding: 36px 16px 0 16px; margin-bottom: 0;}
    .content-text p {font-size: 18px; line-height: 24px; margin-bottom: 16px; flex-wrap: wrap; padding: 15px 5px 5px 5px;}
    .content-text .button-type {margin-bottom: 0;}
    .content h3 {padding: 36px 0 29px 0; margin: 0; font-size: 18px; line-height: 24px;}
    .content h4 {padding: 36px 0 29px 0; margin: 0; font-size: 18px; line-height: 24px;}
    
    .content h3 + .content-box {margin-top: 0;}

    .button-type {width: calc(100% - 32px); margin: 0 16px;}
    .button-type button {padding: 8px 0; font-size: 14px; line-height: 24px;}
    .button-type img {display: none;}
    
    .content-box {width: 100%; padding: 18px 16px 40px 16px; margin: 22px 0 26px 0; border: 0;}
    .content-box > ul {flex-wrap: wrap; margin-bottom: 40px; padding-bottom : 40px;}
    .content-box > ul > li:first-child {width: 100%; margin: 0 0 16px 0;}
    .content-box > ul > li:first-child div {padding: 10px 0; font-size: 18px; line-height: 24px;}
    .content-box > ul > li > p {height: auto; font-size: 15px; line-height: normal; padding: 5px;}
    .content-box > ul > li > p span {display: block;}
    .content-box > ul > li:first-child div + span {margin-top: 8px; font-size: 12px;}
    .content-box > ul:nth-of-type(5) li:first-child {margin-bottom: 8px}

    .content-box-sub {padding: 16px; margin-top: 8px;}
    .content-box-sub ul li:first-child {width: 53px; padding: 10px 0; margin-right: 10px; font-size: 14px; line-height: 24px; border-radius: 20px;}
    .content-box-sub ul li:first-child img {height: 36px;}
    .content-box-sub ul li:last-child {font-size: 18px; line-height: 1;}    
    .content-box-sub ul:last-child li:last-child {padding: 0;}
    .content-box-sub ul li p {font-size: 16px; line-height: 24px;}
    
    .sub-arrow {padding: 8px 0; margin: 4px 0;}
    .sub-arrow::before {height: 1px; background: url(/zz/img_hd/border_dashed_03.png)repeat-x center center;}
    .sub-arrow img {height: 16px;}

    .sub-box-01 {width: 100%; flex-wrap: wrap;}
    .sub-box-01 li {flex: none; width: 100%; margin-top: 8px;}
    .sub-box-01 li:first-child {margin: 0;}
    .sub-box-01 li div {padding: 10px 0; font-size: 16px; line-height: 24px;}
    .sub-box-01 li p {font-size: 16px; line-height: 24px;}

    .sub-box-02 {flex-wrap: wrap;}
    .sub-box-02 li {flex: none; width: 100%; height: 108px; padding: 8px; margin-bottom: 8px;}
    .sub-box-02 li div {font-size: 16px; line-height: 24px;}
    .sub-box-02 li p {font-size: 16px; line-height: 24px;}
    .sub-box-02 li img {width: 36px; height: 36px; right: 8px; bottom: 8px;}
    .sub-box-02 li::before {right: 50%; top: 95%; width: 20px; height: 20px; background-size: 100%; transform: rotate(90deg) translateY(-50%);}

    .sub-box-03 {flex-wrap: wrap;}
    .sub-box-03 li {flex: none; width: 100%; margin: 0 0 16px 0;}
    .sub-box-03 div {position: relative; height: 65px; padding-top: 20px; font-size: 16px; line-height: 24px;}
    /*.sub-box-03 li div::after {position: absolute; left: 50%; bottom: -25px; content: ' '; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; font-weight: 700; font-size: 24px; line-height: 24px; color: #000; background: #fff; transform: translateX(-50%); border: 1px solid #000; border-radius: 50px;}*/
    /*.sub-box-03 li:nth-child(1) div::after {content: '30';}
    .sub-box-03 li:nth-child(2) div::after {content: '40';}
    .sub-box-03 li:nth-child(3) div::after {content: '30';}*/
    .sub-box-03 li:last-child {margin-bottom: 0;}
    .sub-box-03 p {height: 84px; padding: 26px 0 10px 0; font-size: 14px; line-height: 24px;}

    .content-box .bullet {font-size: 14px; line-height: 24px;}
    .content-box .bullet::before {width: 16px; height: 16px;}

    .form-box {padding: 16px; border: 0;}
    .form-box p {margin-bottom: 8px; font-size: 14px;}
    .filebox {margin-bottom: 5px;display: grid;}
    .filebox + .filebox {margin-bottom: 14px;}
    .filebox input {padding: 3px 0;}
    .filebox label {width: 111px; padding: 3px 0; font-size: 14px;}

    .form-text-box {font-size: 13px;}
    .checkbox-1 input[type="checkbox"] + label {font-size: 14px;}
    .checkbox-1 input[type="checkbox"] + label::before {width: 14px; height: 14px;}
    .button-type-submit button {width: calc(100% - 32px); padding: 8px 0; margin: 0 16px 58px 16px; font-size: 14px; line-height: 24px;}
    .button-type-download {width: calc(100% - 40px); flex-wrap: wrap;}
    .button-type-download a {width: 100%; padding: 14px; font-size: 20px;}
    .button-type-download a:first-child {margin-bottom: 10px;}

    section .visual-type02 {background: url(/zz/img_hd/visual_bg_02_m.png) no-repeat center 20px; background-size: auto;}
    section .visual-type02 img {bottom: -30px;}
    section .visual-type02 + .visual-sub img:nth-child(1) {bottom: -50px; left: -10px;;}
    section .visual-type02 + .visual-sub img:nth-child(2) {top: 10%; right: 30px;}
    section .content.type02 > div {padding-bottom: 60px;}
    section .content.type02 .content-box > ul {margin-bottom: 30px;}
    section .content.type02 .content-box > ul:last-of-type {margin-bottom: 0;}
    section .content.type02 .content-box .bullet {margin-top: 30px;}

    section .visual-type03 + .visual-sub img:nth-child(1) {bottom: -55px; left: -10px;}
    section .visual-type03 + .visual-sub img:nth-child(2) {top: 10%; left: auto; right: 30px;}

    footer {flex-wrap: wrap; min-width: auto; padding: 21px 0 26px 0;}
    footer h2 {display: block; margin-bottom: 8px;}
    footer p {width: 100%; margin: 0; text-align: center; font-size: 12px;}
    
    
    /* kgh추가  */
    .ul-position > li > span {top: 502px; left: 0px;}
    #content-boax-three > li > span {top: 659px; left: 0px;}
    
    #web {  display: none  }
    #mobile{   display: block  }
    #newspan {position: absolute; top: 502px;}
    #betterUrl {  display: none ; }
    
    /* 상세화면 */
    .card-info-top h4 {display: flex; align-items: center; width: 100%; font-size: 18px; padding: 15px 7px;}
    .card-info-top div {display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 10px 20px; background-color: #fff; border-bottom: 1px solid #e0e0e0;}
    .card-info-top p {display: inline-block; align-items: center; font-size: 15px; color: #878787; margin-right: 20px;   padding: 3px;}
    .card-info-top .file{display: none;} 
    .card-info-text {display: flex; flex-wrap: wrap; width: 100%; padding: 20px;}
	.card-info-text p {font-size: 15px; font-weight: 400;}
	.card-info-download {display: flex; flex-wrap: wrap; width: 100%; font-size: 15px; }
	
    .btn-box {display: flex; align-items: center; padding: 10px 0px 10px 0px!important; }
    .btn-right{margin-top: 20px;justify-content: flex-end;}
    .btn-list { font-size: 15px; width: 65px; height: 35px;background-color: #666;  color: #fff; cursor: pointer;}

	/*.search {height: 30px;  margin-bottom: 30px;}
	#search-select, #search-input, #search-button{height: 30px; font-size: 16px;}*/
	
	.search {display: flex; width: 100%; height: 30px; padding: 0 20px;}
    #search-select, #search-input {width:50%;}
    #search-select {width: 100px; padding: 0 5px; text-align: left;}
    #search-button {width: 70px; border: 0;}
	#search-select, #search-input, #search-button {height: 30px; font-size: 16px;}
    .search + table {width: calc(100% - 40px); margin: 0 20px;}
    
    /**/
    .table-default {position: relative; border-top: 4px solid #ca243a;}
    .table-default thead.none tr th {display: none; font-size: 16px;}
    .table-default tbody tr {position: relative;}
    .table-default tbody tr th {text-align: center; font-size: 16px; padding: 0 10px;}
    .table-default tbody tr td {border-bottom: none; font-size: 16px; padding: 10px;}
    .table-default tbody tr:last-of-type {border: 0;}
    .table-default .title {height: 90px;}
    .table-default .title a {position: absolute; width: calc(100% - 10px); font-size: 16px; margin-top: -45px; left: 10px; padding: 15px 30px 15px 0; font-weight: 500;}
    .table-default .date {position: absolute; height: 35px; right: 1px; margin-top: 50px; border: 0; text-align: right;  font-size: 15px; }
    .table-default .nums {visibility: hidden; }
    .table-default .up {visibility: hidden; }
    .table-default .file {position: absolute; height: 35px;  right: 10px; margin-top:37px; border: 0; text-align: right;  font-size: 15px; }
    
	/*첨부파일*/
    .fileShowCss {width:100%;display:inline-block;vertical-align:top;padding-right:5px;float:left;border:0px;}
    .fileLoading{left:calc(100% - 80%);position:relative;display:none;z-index:99;text-align:center;}
    .filebox button{ color: #043763; border: 1px solid #c0cbd9; border-radius: 3px; font-size: 14px; cursor: pointer;  padding: 6px 12px 3px 12px; height: 35px; }

	.form-box2 {padding: 40px 0px 20px 0px; background: #fff; border: 1px solid #333; }
	.form-box2 p {margin-bottom: 16px; font-weight: 500; font-size: 24px; line-height: 20px; color: #333; text-align:center}
    
}