@charset "utf-8";

/*****************************************************
DATE : 2024-12-18 ~
AUTHOR : JW
DESCRIPTION : 비대면 추가로 인한 디자인 개선 및 반응형
******************************************************/

/* 공통 및 레이아웃 재정의 */
img {max-width:100%;}
button {cursor: pointer;border:none;}
#wrap {width:100%;min-width:auto;}
#header,
#cnt_wrap,
#con_wrap,
#footer .copyright {box-sizing:border-box;width:100%;min-width:auto;max-width:1000px;}
#footer {min-width:auto;height:auto;padding-left:10px;padding-right:10px;}
.tab-line {width:100%;}
.tab-contents {min-height:auto;}
div.tbWrap {padding:0;}
#cnt_wrap {padding-bottom:30px;}
#header {position: relative;height:auto;min-height:70px;}
#header .user-menu .service-menu {margin:0;}
#header .cs-info {position:absolute;right:0;top:10px;font-family: "나눔고딕";color: #0356bd;font-size: 18px;font-weight: bold;}
#do_bt {padding:15px 20px;}
#do_bt input {display: block;}
.btn-apply a {outline-offset:2px;background:repeating-linear-gradient(180deg, #4d96e8, #4d96e8 50%, #2278c9 50%, #2278c9 100%);}
table.tbType1 tbody tr td .btn-apply {margin:0 auto;}


/* layout */
.contents_new {padding-top:30px;overflow: hidden;}
.contents_new.column {display:flex;justify-content: space-between;flex-wrap: wrap;}
.contents_new.column > .column {width:49%;box-sizing:border-box;}
.contents_box {padding:15px;border:1px solid #ccc;border-top-color:#338ed7;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px;box-shadow: 1px 1px 5px rgba(0,0,0,0.2);}

/* footer */
#footer .copyright * {font-size:11px;font-weight:bold;color:#000;font-style:normal;}
#footer .copyright {position:relative;padding-left:108px;padding-bottom:10px;background:url(/images/custom/logo_footer.png) left 17px no-repeat;line-height: 1.4;}
#footer .copyright:after {content: "";display:block;clear:both;}
#footer .copyright a:hover {color:inherit;}
#footer .copyright address {margin:0;}
#footer .copyright address p {}
#footer .copyright address strong {color:#1a31b5;}
#footer .copyright .links {position:absolute;right:0;top:17px;}
#footer .copyright .links li {position:relative;display:inline-block;}
#footer .copyright .links li + li {padding-left:10px;margin-left:7px;}
#footer .copyright .links li + li:before {content:"";display:inline-block;width:1px;height:9px;background:#a1a1a1;position:absolute;left:0;top:2px;}

/* 서브타이틀 */
h2.stitle {font-size: 1.4em;color:#000;padding-left: 20px;background: url(/images/ra/bu_title.png) left 1px no-repeat;font-weight: bold;font-family: "맑은 고딕";letter-spacing: -1px;line-height: 1;}
h2.stitle > span {font-size:14px;}
h2.stitle > span.typ2 {font-size:12px;color:#eb0000;}
p.stitle_p {}

.event_img {text-align:center;margin-top:10px;}
.top_img img,
.event_img img {display: block;margin:0 auto;}
ul.detailList {padding-bottom:0;}
.detailAdd {padding:0 0 10px 13px;}
.detailAdd * {font-size: 12px;font-weight: bold;}
.detailAdd p + p {margin-top:3px}

/* 다운로드버튼 */
.btn-down-docu {box-sizing:border-box;height:30px;font-weight:bold;padding:0 20px 0 15px;text-align:left;line-height:30px;border:1px solid #cfcfcf;border-radius:3px;background:linear-gradient(#fefefe, #f3f3f3);color:#356597;font-size:12px;font-family:"돋움", dotum;box-shadow:0 0 3px 0 rgba(0,0,0,0.2);}
.btn-down-docu i {display:inline-block;width:13px;height:9px;background:url(/images/ra/ico_down.png) center center no-repeat;margin:0 10px 0 0;}

/* 주요메뉴 링크 */
.major-links {display:flex;justify-content: space-between;margin-top:15px;}
.major-links > div.auto {flex:auto;}
.major-links > div.auto + div.auto {margin-left:2%;}
.major-links > div.col2 {width:49%;}
.major-links > div.col3 {width:33%;}
.major-links > div.col4 {width:24%;}
.major-links > div {height:100%;}
.major-links > div > span {display:table;width:100%;height:100%;}
.major-links > div > span .cell {outline-offset:-4px;border-radius:5px;display:table-cell;text-align:center;vertical-align:middle;padding:0 5px;height:50px;line-height:1.2;font-family:"맑은 고딕";font-size:15px;font-weight:bold;color:#fff;background:#0054a5;text-shadow: 1px 1px 3px rgba(0,0,0,0.3), -1px -1px 3px rgba(0,0,0,0.3);}
.major-links > div > span a {color:#fff;}
.major-links > div > span .cell .youtube-play {display: inline-block;background:#0054a5 url(../../images/custom/icon-youtube-play.png) left center no-repeat;background-size: 35px;padding-left: 45px;}
.major-links > div > span .cell .guide-process {display: inline-block;background:#0054a5 url(../../images/custom/icon-book-open.png) left center no-repeat;background-size: 35px;padding-left: 45px;text-align: left;}

/* 신청절차2 */
.process_custom2_p {text-align:center;font-weight: bold;margin:0 0 15px 0;font-family:"맑은 고딕";font-size:14px;color:#333;}
.process_list2 {display:flex;justify-content: space-between;}
.process_list2 li {width:23.5%;color:#747474;font-family:"맑은 고딕";font-size:12px;list-style:none;}
/*.process_list2 li + li > dl:before {position:absolute;left:-20%;top:0;content:"";width:14px;height:96px;background:url(/images/ra/process_arrow.gif) no-repeat center;}*/
.process_list2 li > dl {min-height:115px;height:100%;position:relative;padding:0 5px 0 10px;border: 1px solid #d1d1d1;border-radius: 5px;box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);background: linear-gradient(360deg, #e9e9e9, #ffffff, #f1f1f1);}
.process_list2 li > dl dt,
.process_list2 li > dl dd {display:table;width:100%;}
.process_list2 li > dl dt > span {display:table-cell;width:100%;color:#0b4954;font-size:16px;font-weight:bold;line-height:1.2;height:32px;vertical-align:middle;border-bottom:1px dashed #d1d1d1;}
.process_list2 li > dl dd > span {display:table-cell;width:100%;color:#333;font-size:14px;font-weight:bold;line-height:1.4;vertical-align:top;padding:8px 0 0 0;}
.process_list2 li > dl dd > span .fnt-sm {display:block;font-size:12px;line-height:1.4;margin-top:3px;}

/* tab designed */
#tab-menu.designed {padding:0;margin-top:30px;}
#tab-menu.designed .tab-contents {padding: 25px 20px;}
#tab-menu.designed .tab_tit {position: static;height:30px;}
#tab-menu.designed .tab_tit a,
#tab-menu.designed .tab_tit button {width:100%;height:30px;line-height:28px;border:1px solid #d9d9d9;border-bottom-color:#338ed7;border-radius:3px 3px 0 0;background:#fafafa;outline-offset: -1px;color:#6a6a6a;font-family:"돋움", dotum;font-size:12px;font-weight:bold;text-align:center;}
#tab-menu.designed .tab_tit a.active,
#tab-menu.designed .tab_tit button.active {background:linear-gradient(#53a0de, #338ed7);border-color:#338ed7;color:#fff;}
#tab-menu.designed .tab_tit {position: absolute;left:0;top:-29px;margin:0;width:calc(100% / 3);}
#tab-menu.designed .tab_tit.tab2 {left: calc(100% / 3);}
#tab-menu.designed .tab_tit.tab3 {left: auto;right:0;}

.submit-docu-area {text-align:center;margin:20px 0 0 0;}


/* 인증서 선택 레이어 */
.ra-layer-certapply * {font-family:"맑은 고딕", Arial, "sans-serif";font-size:14px;font-weight: bold;color:#000;letter-spacing:-1px;line-height:1;}
.ra-layer-certapply {overflow:auto;display:none;position: fixed;width: 100%;height: 100%;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.3);}
.ra-layer-certapply .ra-layer-outbox {display: flex;width:100%;height:100%;justify-content: center;align-items: center;}
.ra-layer-certapply .ra-layer-inbox {box-sizing:border-box;overflow:auto;max-width:740px;width:100%;position:relative;background:#fff;border-radius:20px;box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);padding:30px 25px;}
.ra-layer-certapply .ra-layer-title {text-align:center;font-size:23px;line-height:0;padding:30px 10px 40px 10px;}
.ra-layer-certapply .ra-layer-text {background:#e7eef6;padding:20px 10px;border-radius:10px;text-align:center;line-height:1.4;}
.ra-layer-certapply .ra-layer-content {display:flex;}
.ra-layer-certapply .ra-layer-certbox {margin-top:20px;box-sizing: border-box;width:32.5%;border:1px solid #ccc;border-radius:10px;padding:15px;}
.ra-layer-certapply .ra-layer-certbox ~ .ra-layer-certbox {margin-left:1.25%;}
.ra-layer-certapply .ra-layer-badge {display:flex;flex-wrap: wrap;margin-left:-3px;}
.ra-layer-certapply .ra-layer-badge > span {border-radius:3px;background:#e7eef6;padding:5px;margin:3px;font-size:12px;text-align:center;line-height:1;white-space: nowrap;}
.ra-layer-certapply .ra-layer-certname {font-size: 20px;padding:10px 0 0 0;min-height:35px;}
.ra-layer-certapply .ra-layer-certpay1 {font-size: 16px;color: #a1a1a1;display:block;letter-spacing: 0;}
.ra-layer-certapply .ra-layer-certpay1 .won {font-weight:normal;color: #a1a1a1;}
.ra-layer-certapply .ra-layer-certpay2 {font-size: 16px;min-height:30px;letter-spacing: 0;}
.ra-layer-certapply .ra-layer-certpay2 .won {font-weight:normal;font-size:16px;vertical-align: middle;position:relative;top:-1px;}
.ra-layer-certapply .ra-layer-certpay2 .discount {letter-spacing: 0;position:relative;top:-2px;color:#fff;margin-left:5px;vertical-align: middle;font-size:14px;display:inline-block;width:44px;padding:11px 0 12px 0;text-align:center;border-radius:12px;line-height:0;background:#1b88ff;}
.ra-layer-certapply .ra-layer-options {border-top:1px solid #d1d1d1;padding:10px 0 0 0;height:75px;}
.ra-layer-certapply .ra-layer-options a {display: block;padding:7px 0;}
.ra-layer-certapply .ra-layer-options a i {display:inline-block;width:20px;}
.ra-layer-certapply .ra-layer-options a i + i {float:right;}
.ra-layer-certapply .ra-layer-options a:hover,
.ra-layer-certapply .ra-layer-options a:hover i {color:#1b88ff;}
.ra-layer-certapply .ra-layer-btn-apply {border-radius:5px;display:block;box-sizing:border-box;width:100%;line-height:0;padding:25px 10px;text-align:center;font-size: 15px;color: #fff;background:#1b88ff;box-shadow: 1px 1px 3px rgba(0,0,0,0.3);text-shadow: 1px 1px 3px rgba(0,0,0,0.3), -1px -1px 3px rgba(0,0,0,0.3);}
.ra-layer-certapply .ra-layer-btn-close {position: absolute;right:20px;top:20px;width:20px;height:20px;background:url("../../../images/ra/btn_close1.png") center center no-repeat;background-size:15px;font-size:0;line-height:0;}
.ra-layer-certapply .ra-layer-certbox.type2 .ra-layer-certpay2 .discount,
.ra-layer-certapply .ra-layer-certbox.type2 .ra-layer-btn-apply {background:#0054a5;}
.ra-layer-certapply .ra-layer-certbox.type2 .ra-layer-options a:hover,
.ra-layer-certapply .ra-layer-certbox.type2 .ra-layer-options a:hover i {color:#0054a5;}
.ra-layer-certapply .ra-layer-certbox.type3 .ra-layer-certpay2 .discount,
.ra-layer-certapply .ra-layer-certbox.type3 .ra-layer-btn-apply {background:#ff820f;}
.ra-layer-certapply .ra-layer-certbox.type3 .ra-layer-options a:hover,
.ra-layer-certapply .ra-layer-certbox.type3 .ra-layer-options a:hover i {color:#ff820f;}
.ra-layer-vat {color: red; margin-bottom: 10px; font-size: 14px;}


@media only screen and (max-width: 1000px) {
	#header,
	#cnt_wrap,
	#footer {padding-left:20px;padding-right:20px;}
	#header .cs-info {padding:0 20px;}
}

@media only screen and (max-width: 830px) {
	.contents_new.column > .column {width:100%;}
	.contents_new.column > .column + .column {margin-top:30px;}
	#footer .copyright .links {position: static;}
	#do_bt {padding:10px 20px;}
	#do_bt ul {display:flex;justify-content: space-between;flex-wrap: wrap;}
	#do_bt ul li {margin:5px;}
	#do_bt ul li:first-child {margin-left:5px;}
}

@media only screen and (max-width: 580px) {
    .ra-layer-certapply .ra-layer-outbox {display:block;}
    .ra-layer-certapply .ra-layer-inbox {border-radius:0;height:100%;}
    .ra-layer-certapply .ra-layer-content {display:block;}
    .ra-layer-certapply .ra-layer-certbox {width:100%;}
    .ra-layer-certapply .ra-layer-certbox ~ .ra-layer-certbox {margin-left:0;}
    .ra-layer-certapply .ra-layer-options {height:auto;padding-bottom:10px;}
}