@charset "utf-8";

@import url(/portal/fonts/Pretendard/Pretendard.css); /* font-family:'Pretendard'; */
@import url(/portal/fonts/GmarketSans/GmarketSans.css); /* font-family:'GmarketSans'; */

body {font-size:20px; line-height:1.5; font-family:'Pretendard',"맑은고딕", 'Malgun Gothic','돋움','Arial','Helvetica','AppleGothic','Sans-serif'; letter-spacing:0; }
.inner {position:relative; max-width:1200px; margin:0 auto;}

#header {background:#4382cc url(/portal/img/main/bak_mayor.svg) no-repeat top 0 right 0; background-size:auto 140%;}
#cont {background:#f8f8f8;}

#header .inner {padding:4em 0;}
#header .inner p > * {display:inline-block; vertical-align:middle; font-size:1.8em; font-weight:700; color:#fff; font-family:'GmarketSans'; font-weight:700;}
#header .inner p span {margin-left:.5em; padding-top:.15em;}
#header .inner a {position:absolute; right:0; top:1em; display:inline-block; padding:.5em 1em .5em 2.2em; border-radius:2em; background:#fff url(/portal/img/minsaeng/ico_home.svg) no-repeat left .75em top 52%; background-size:1.1em auto; color:#333; font-size:.8em;}
#header .inner a:hover,
#header .inner a:focus {background:#003378 url(/portal/img/minsaeng/ico_home_w.svg) no-repeat left .75em top 52%; background-size:1.1em auto; font-weight:700; color:#fff;}

#cont {padding:1em 0;}


@media all and (max-width:1240px) {
	#header,
	#cont {padding-left:1em; padding-right:1em;}
}

@media all and (max-width:768px) {
	body {font-size:18px;}
	#header .inner {padding:2em 0;}
	#header .inner p span {display:block; margin-left:0;}
}

@media all and (max-width:640px) {
	#header .inner p img {height:1.2em;}
	#header .inner p > * {font-size:1.4em;}
}

@media all and (max-width:400px) {
	#header {background-size:auto 100%; text-align:center;}
	#header .inner p span {margin-bottom:.25em;}
	#header .inner a {text-indent:-99999px; overflow:hidden; padding:0; width:2.4em; height:2.4em; background-position:50% 50%;}
	#header .inner a:hover,
	#header .inner a:focus { background-position:50% 50%;}
}

/*********************
	Common Style
**********************/
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

/********************
	Tab Style
********************/
.tab-group .tabs {margin-bottom:.75em;}
.tab-group .tabs ul:after {content:''; clear:both; display:block;}
.tab-group .tabs li {width:20%; float:left; padding:.25em;}
.tab-group .tabs li button {display:block;  width:100%; font-family:'GmarketSans'; font-weight:500; text-align:center; background:#fff; color:#003378; border:1px solid #003378; padding:1em .75em .75em; border-radius:3em;}
.tab-group .tabs li button:hover,
.tab-group .tabs li button:focus {background:#EFF4FF;}
.tab-group .tabs li button.on,
.tab-group .tabs li button.on:hover,
.tab-group .tabs li button.on:focus {background:#003378; color:#fff;}
.tab-group .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.tab-group .tabs li button.on .selected {display:block;}



.tab-group .tab-content {background:#fff; border-radius:1.2em; overflow:hidden; padding:1.5em; border:1px solid #ddd;}
.tab-group .tab-con {display:none;}
.tab-group .tab-con.on {display:block;}
.tab-group .tab-con img {display:block; max-width:100%; width:100%;}
.tab-group .tab-con .box-image {position:relative;}
.tab-group .tab-con .box-image a {position:absolute; display:inline-block; right:0; bottom:0; background:#333; color:#fff; font-size:.8em; padding:.25em .5em;}

@media all and (max-width:640px) {
	.tab-group .tabs li {width:50%; padding:.1em;}
	.tab-group .tabs li button {padding:.75em .5em .5em; font-size:.9em;}
	.tab-group .tab-content {padding:1em; border-radius:1em;}
}

/********************
	Flip Style
********************/
.flip-group > dl {border:1px solid #ACC0E5; border-radius:.75em; overflow:hidden;}
.flip-group > dl + dl {margin-top:1em;}
.flip-group > dl > dt {display:block; }
.flip-group > dl > dt button {position:relative; display:block; width:100%; font-weight:700; background:#fff; color:#333; text-align:left; padding: 1.11112em 4em  1.11112em 3em; }
.flip-group > dl > dt button span {position:absolute; left: 1.11112em; top: 1.11112em; display:inline-block; width:2em; height:2em; font-size:.8em; line-height:2.1em; text-align:center; color:#fff; background:#ED6C21;  border-radius:2em; margin-right:.5em;}

.flip-group > dl > dd {display:none; padding:1em;}

.flip-group > dl.on > dt button {color:#333; background:#EFF4FF;}

.flip-group > dl.on > dd {display:block;}

.flip-group > dl > dt button:after {content:''; position:absolute; right:1em; top:50%; transform:translateY(-50%); width:1.6em; height:1.6em; background:url(/portal/img/minsaeng/ico_open.svg) no-repeat center center; background-size:100% auto;}
.flip-group > dl.on > dt button:after {background:url(/portal/img/minsaeng/ico_close.svg) no-repeat center center; background-size:100% auto;}

@media all and (max-width:460px){
	.flip-group > dl > dt button {font-size:.9em; padding:1em 4em 1em 1em;}
	.flip-group > dl > dt button span {display:none;}

}

/********************
	Text Style
********************/

p.tip {position:relative; font-size:16px; padding-left:1.5em; color:#444;}
p.tip:before {content:'!'; position:absolute; left:0; top:0.25em; width:1.5em; height:1.5em; border-radius:2em; background:#ffe9dc; color:#ED6C21; text-align:center; line-height:1.5em; font-size:.7em; font-weight:700;}
* + p.tip,
li p.tip {margin-top:.5em;}
p.tip + p.tip  {margin-top:.25em;}

.list-u {position:relative; font-size:.9em;}
.list-u > li {position:relative; padding-left:.8em;}
.list-u li + li {margin-top:.5em;}
.list-u > li:before {content:''; position:absolute; top:.5em; left:0; width:.5em; height:.5em; border-radius:1em; border:3px solid #ED6C21; box-sizing:border-box;}

.list-u ul,
.list-u ol {padding:.75em; margin:.75em 0; background:#F8F9FB; border-radius:.5em; border:1px dashed #e5e5e5; font-size:.95em;}
.list-u ul li {position:relative; padding-left:.8em;}
.list-u ul li:before {content:''; position:absolute; top:.6em; left:0; width:.3em; height:2px; background:#777;}

/*********************************************
	Table
*********************************************/

.tbl {width:100%; table-layout:fixed; font-size:.9em;}

.tbl th,
.tbl td {height:3em; box-sizing:border-box; padding:.6em; border:1px solid #DFE4EF; border-top-width:0; vertical-align:middle; word-break:auto-phrase;}
.tbl thead,
.tbl tbody {border-top:2px solid #003876;}
.tbl thead {background:#F9FCFF;}
.tbl thead + tbody  {border-top-width:0;}
.tbl thead th {font-weight:700;}
.tbl tbody th {background:#FDFDFD;}

.tbl-respon {position:relative; margin-top:1em;}
.tbl-respon > .guide{position:absolute; top:.2em; left:0; display:none; font-weight:300; font-size:.8em; padding-left:1.3888em; padding-bottom:0; line-height:1.11112em; background:url(/_guide/img/ico_table_guide.svg) no-repeat 0 0; background-size:1.11112em auto;}

.tbl-box {position:relative;}

@media all and (max-width:1000px) {
	
	.tbl-respon > .guide {display:block; margin-bottom:.5em;}
	.tbl-respon .tbl-box {overflow:auto;}
	.tbl-respon .tbl {width:56em;}

}
@media all and (max-width:640px) {
	.tbl-respon > .guide {position:relative; top:auto; margin-bottom:.2em;}

}

.taC {text-align:center;}

.btn-wrap {margin:2em 0; text-align:center;}
.btn-wrap .btn {display:inline-block; padding:1em 1.5em .75em; margin:.2em; font-family:'GmarketSans'; font-weight:500; color:#fff; text-align:center; background-color:#003378; border-radius:3em;}
.btn-wrap .btn.icon {padding-left:3em; background-repeat:no-repeat; background-position:1.2em 50%; background-size:1.5em auto;}
.btn-wrap .btn.icon.down {background-image:url(/_guide/img/button/white/down.svg);}

@media all and (max-width:640px) {
	.btn-wrap .btn {font-size:.9em;}
}