/*ctn*/
#ctn {width:100%; margin:20rem 0 0 0; line-height:inherit; font-size:16rem;}
#ctn p {margin-bottom:0;}
#ctn h4 {font-size:27rem; border-top:0; padding-top:0; line-height:1.5; font-weight:700;}
#ctn h5 {position:relative; background:none; font-size:23rem; margin-left:0; padding-left:27rem; color:#006df8; font-weight:700; margin:50rem 0 25rem !important;}
#ctn h5:before {content:''; position:absolute; top:13rem; left:5rem; width:8px; height:8px; background:#006df8; border-radius:50%;}
@media all and (max-width:1023px) {
	#ctn {margin:30rem 0 60rem;}
}

/*btn*/
a.btn_style, a.sbtn_style {margin:0; padding:9rem 17rem; font-size:14rem; color:#fff; border:0; border-radius:3rem; background:#0d3569; line-height:1.5;}
a.btn_style.down span {background:none; padding:0;}
a.btn_style.view span {background:none; padding:0;}
a.btn_style.down.gs {background:#0d3569;}
a.btn_style.down.yy {background:#2d5c98;}
a.btn_style.down.mp {background:#5083c4;}
a.btn_style:hover, a.sbtn_style:hover {border:0; background:#37a178;}
a.btn_style.down:hover span, a.sbtn_style.down:hover span {background:none;}
a.btn_style.view:hover span, a.sbtn_style.view:hover span {background:none;}
/*button tag*/
button.btn_style, button.sbtn_style {margin:0; padding:10rem 17rem; font-size:14rem; color:#fff; border:0; border-radius:3rem; background:#0d3569; line-height:1.5}
button.btn_style:hover, button.sbtn_style:hover {border:0; background:#37a178;}

/*table*/
.scroll_txt {display:none;}
.overH {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.tbl_explain {margin:0 0 0 3rem;}
.tbl_explain ul {display:flex; align-items:center;} 
.tbl_explain ul li {margin-right:20rem;}
.tbl_explain ul li span {display:inline-block; margin:0 3rem;}
.tbl_explain .bold {font-weight:800 !important;}
@media all and (max-width:1023px) {
	.scroll_txt {display:block; margin-top:25rem; text-align:right; font-size:13rem;}
	.overH  {margin-bottom:20rem;}
}
@media all and (max-width:768px){
	.tbl_explain ul {flex-wrap:wrap;} 
	.tbl_explain ul li {margin:2rem 0; width:100%;}
}
.tbl_area {margin:15rem 0 20rem;}
.tbl_type1 {border-top:2px solid #323232; }
.tbl_type1 thead th {background:#f9f9f9; border-left:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; font-weight:600; line-height:1.6; font-size:14rem;}
.tbl_type1 tbody th,
.tbl_type1 tbody td,
.tbl_type1 tfoot th,
.tbl_type1 tfoot td {padding: 10rem;border-left:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;font-size:14rem;line-height:1.6;}
.tbl_type1.tbl_ecios tbody tr:nth-of-type(even) td {background:#f9f9f9;}
.tbl_type1.tbl_ecios tbody tr:hover td a {text-decoration:underline;}
.tbl_type1.left td {text-align:left;}
@media all and (max-width:1023px){
	.tbl_type1 {min-width:1200px;}
}

/*paging*/
.paging {display:flex; justify-content:center; align-items:center;}
.paging a,
.paging strong {width:32rem; height:32rem; display:flex; align-items:center; justify-content:center;  margin:2rem; position:relative;}
.paging a.pre_end,
.paging a.pre,
.paging a.next,
.paging a.next_end {background:none; color:transparent; line-height:0;}
.paging a.pre_end::before,
.paging a.pre::before,
.paging a.next::before,
.paging a.next_end::before {content:''; position:absolute; width:25rem; height:25rem; background:url('/design/common/img/sub/paging.gif') no-repeat 0 0/400% auto; top:50%; transform:translateY(-50%);}
.paging a.pre_end::before {background-position:0 0;}
.paging a.pre::before {background-position:33.333% 0;}
.paging a.next::before {background-position:66.666% 0;}
.paging a.next_end::before {background-position:99.999% 0;}
.paging a.pre_end:hover,
.paging a.pre:hover,
.paging a.next:hover,
.paging a.next_end:hover {background:#666;}
.paging a.pre_end:hover::before,
.paging a.pre:hover::before,
.paging a.next:hover::before,
.paging a.next_end:hover::before {background-position-y:100%;}
@media all and (max-width:1023px){
	.paging {flex-wrap:wrap; width:271rem; margin:0 auto;}
	.paging a,
	.paging strong {width:30rem; height:30rem;}
}

/*board*/
#boardList_option{display: none;}
.search_area { margin-bottom:0;}
.search_area fieldset {display:flex; align-items:center;}
.search_area select,
.search_area input[type="text"],
.search_area button {line-height:1.5; height:44rem !important; font-size:16px !important; margin:0 0 0 5rem;}
.board_list {margin-top:20rem;}
@media all and (max-width:1280px){
	#searchForm {width:100%; margin-top:20rem;}
	.search_area {width:100%; float:none; padding:0; border:0;}
	.search_area select {width:100rem; margin-left:0;}
	.search_area button {width:70rem;}
	.search_area input[type="text"] {width:calc(100% - 170rem);}
}

/*view*/
.ecios_view {margin-top:60rem;} 
.ecios_view h4 {margin:12rem 0 5rem !important;}
.ecios_view .sum {display:flex; margin-top:10rem; margin-left:2rem;}
.ecios_view .sum li {display:flex; align-items:center; margin-right:20rem; color:#616161; font-size:18rem; }
.ecios_view .sum li:last-child {margin-right:0;}
.ecios_view .sum li span {font-weight:600; margin-right:10rem;}
.ecios_view .key span {display:inline-block; padding:6rem 12rem; background:#468EC0; color:#fff; text-align:center; border-radius:3rem; line-height:1.5}
.ecios_view .tbl_type1 td strong {font-weight:500;}
@media all and (max-width:1023px){
	.ecios_view .sum {flex-wrap:wrap; margin-left:1rem;}
	.ecios_view .sum li {width:100%; margin-top:5rem; font-size:17rem;}
}

/*search*/
.search_ecios {margin-bottom:40px; background:#e3e5ee; padding:20rem; border-radius:6rem; border:1px solid #c9cfea; position:relative;}

/* form basic */
.form_basic input[type="text"],
.form_basic input[type="password"],
.form_basic input[type="email"],
.form_basic input[type="phone"],
.form_basic select {height:38rem; padding:0 10rem; background-color:#fff;  border:0; border-radius:3rem;; box-shadow:none; width:100%; font-size:16px;}
.form_basic dl dt {font-size:15rem; font-weight:700; margin-bottom:10rem;}
.form_basic .date {display:flex; justify-content:space-between;  position:relative;}
.form_basic .date input[type="text"],
.form_basic .date input[type="date"] {width:calc(50% - 30rem);}
.form_basic .date::before{content:'~'; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.form_basic .align {display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 0 -7rem;}
.form_basic .align > div {display:flex; width:calc(100% - 70rem - 14rem)}
.form_basic .align > div > dl {margin:0 7rem;}
.form_basic .num4.align > div > dl {width:calc(25% - 14rem);}
.form_basic .num3.align > div > dl {width:calc(33.333% - 14rem); /*flex:1;*/}
.form_basic .num1 {margin:0 !important;}
.form_basic .num1 dl {width:100%;}
.form_basic button {margin:0 !important; max-width:70rem; height:38rem !important;}
@media all and (max-width:768px){
	.search_ecios {padding-bottom:70rem;}
	.form_basic .date input[type="text"],
	.form_basic .date input[type="date"] {width:calc(50% - 7rem);}
	.form_basic .align {margin-right:-7rem;}
	.form_basic .align > div {flex-wrap:wrap; width:100%;}
	.form_basic .align > div > dl {margin-bottom:20rem;}
	.form_basic .num4.align > div > dl {width:calc(50% - 14rem);}
	.form_basic .num3.align > div > dl {width:calc(50% - 14rem);}
	.form_basic button {position:absolute; right:25rem; bottom:25rem;}
}


.search_ecios fieldset {display:flex;}
.search_ecios fieldset  > *:first-child {width:30%;}
.search_ecios fieldset  > *:last-child {width:70%; margin-left:7rem;}

@media all and (max-width:1280px){
	.search_ecios fieldset {flex-wrap:wrap;}
	.search_ecios fieldset  > *:first-child {width:100%;}
	.search_ecios fieldset  > *:last-child {width:calc(100% + 14rem); margin-left:-7rem; margin-top:20rem;}

	.form_basic .num1 {width:100%;}
}



/* 계약정보 바로가기*/
.txt_box {background:#e3e5ee; padding:30rem; border-radius:var(--border-radius-10); margin-bottom:30rem; line-height:1.5;} 
.txt_box p:first-child {font-size:24rem; font-weight:700; } 
.txt_box p:last-child {margin-left:3rem; margin-top:10rem !important; line-height:1.7;} 
.sub_info_wrap {display:flex; flex-wrap:wrap; justify-content:space-between; margin:-15rem;} 
.sub_info_wrap li { width:calc(33.333% - 30rem); margin:15rem; border: 1px solid #d8d8d8; background: #fff; border-radius: var(--border-radius-10); } 
.sub_info_wrap li a {height:168rem; display:flex; align-items: center; padding-left:45rem; color: #212121; font-size:22rem; font-weight: 600;} 
.sub_info_wrap li a span {display:block; padding-left:135rem; position: relative;} 
.sub_info_wrap li a span::before { position: absolute; content: ""; background: #0a4595 url('/design/ecios/img/sub/sub_icon_w.png') no-repeat 0 0/600% auto; width:100rem; height:100rem; border-radius:50%; left: 0; top:50%; transform: translateY(-50%); } 
.sub_info_wrap li:nth-child(2) a span::before { background-position-x:-100rem; } 
.sub_info_wrap li:nth-child(3) a span::before { background-position-x:-195rem; } 
.sub_info_wrap02 li a span::before { background-position-x:-297rem; background-color: #0a6f64; } 
.sub_info_wrap02 li:nth-child(2) a span::before { background-position-x:-403rem; } 
.sub_info_wrap02 li:nth-child(3) a span::before { background-position-x:-505rem; } 
@media all and (min-width:1150px){
	.sub_info_wrap li:hover { background: #083080; border-color: #083080; } 
	.sub_info_wrap li:hover a { color: #fff; } 
	.sub_info_wrap li:hover a span::before { background-image:url('/design/ecios/img/sub/sub_icon02.png'); background-color: #fff; } 
	.sub_info_wrap02 li:hover { background: #0a6f64; border-color: #0a6f64; } 
}
@media all and (max-width:1440px){
	.sub_info_wrap {margin:-7rem;} 
	.sub_info_wrap li {width:calc(33.333% - 14rem); margin:7rem;} 
}
@media all and (max-width:1280px){
	.sub_info_wrap li a { font-size: 20rem; height: 128rem; padding-left: 0; justify-content: center; } 
	.sub_info_wrap li a span { padding-left: 102rem; } 
	.sub_info_wrap li a span::before {background-image: url('/design/ecios/img/sub/sub_icon_w_mb.png'); width: 78rem; height: 78rem; } 
	.sub_info_wrap li:nth-child(2) a span::before { background-position-x: -78rem; } 
	.sub_info_wrap li:nth-child(3) a span::before { background-position-x: -152rem; } 
	.sub_info_wrap02 li a span::before { background-position-x:-231rem; } 
	.sub_info_wrap02 li:nth-child(2) a span::before { background-position-x:-314rem; } 
	.sub_info_wrap02 li:nth-child(3) a span::before { background-position-x:-395rem; } 
}
@media all and (max-width:1023px){
	.sub_info_wrap li {width:calc(50% - 14rem);} 
}
@media all and (max-width:599px){
	.sub_info_wrap li {width:100%;} 
}