@charset "utf-8";

@font-face {

	font-family: 'Dolbomche_B';

	font-style: normal;

	font-weight: normal;

	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/Dolbomche_B.woff') format('woff');

}

@font-face {

	font-family: 'Noto Sans KR';

	font-style: normal;

	font-weight: 100;

	src: url('./fonts/noto-sans-kr-v7-latin_korean-100.eot'); /* IE9 Compat Modes */

	src: local('Noto Sans KR Thin'), local('NotoSansKR-Thin'),

			url('./fonts/noto-sans-kr-v7-latin_korean-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

			url('./fonts/noto-sans-kr-v7-latin_korean-100.woff2') format('woff2'), /* Super Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-100.woff') format('woff'), /* Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-100.ttf') format('truetype'), /* Safari, Android, iOS */

			url('./fonts/noto-sans-kr-v7-latin_korean-100.svg#NotoSansKR') format('svg'); /* Legacy iOS */

}

@font-face {

	font-family: 'Noto Sans KR';

	font-style: normal;

	font-weight: 300;

	src: url('./fonts/noto-sans-kr-v7-latin_korean-300.eot'); /* IE9 Compat Modes */

	src: local('Noto Sans KR Light'), local('NotoSansKR-Light'),

			url('./fonts/noto-sans-kr-v7-latin_korean-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

			url('./fonts/noto-sans-kr-v7-latin_korean-300.woff2') format('woff2'), /* Super Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-300.woff') format('woff'), /* Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-300.ttf') format('truetype'), /* Safari, Android, iOS */

			url('./fonts/noto-sans-kr-v7-latin_korean-300.svg#NotoSansKR') format('svg'); /* Legacy iOS */

}

@font-face {

	font-family: 'Noto Sans KR';

	font-style: normal;

	font-weight: 400;

	src: url('./fonts/noto-sans-kr-v7-latin_korean-regular.eot'); /* IE9 Compat Modes */

	src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),

			url('./fonts/noto-sans-kr-v7-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

			url('./fonts/noto-sans-kr-v7-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-regular.woff') format('woff'), /* Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */

			url('./fonts/noto-sans-kr-v7-latin_korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */

}

@font-face {

	font-family: 'Noto Sans KR';

	font-style: normal;

	font-weight: 500;

	src: url('./fonts/noto-sans-kr-v7-latin_korean-500.eot'); /* IE9 Compat Modes */

	src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),

			url('./fonts/noto-sans-kr-v7-latin_korean-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

			url('./fonts/noto-sans-kr-v7-latin_korean-500.woff2') format('woff2'), /* Super Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-500.woff') format('woff'), /* Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-500.ttf') format('truetype'), /* Safari, Android, iOS */

			url('./fonts/noto-sans-kr-v7-latin_korean-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */

}
.disbled_on {
	color:blue;
}

button[type=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled {opacity: .2; color: rgba(255,255,255,.7);}

@font-face {

	font-family: 'Noto Sans KR';

	font-style: normal;

	font-weight: 700;

	src: url('./fonts/noto-sans-kr-v7-latin_korean-700.eot'); /* IE9 Compat Modes */

	src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),

			url('./fonts/noto-sans-kr-v7-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

			url('./fonts/noto-sans-kr-v7-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-700.woff') format('woff'), /* Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */

			url('./fonts/noto-sans-kr-v7-latin_korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */

}

@font-face {

	font-family: 'Noto Sans KR';

	font-style: normal;

	font-weight: 900;

	src: url('./fonts/noto-sans-kr-v7-latin_korean-900.eot'); /* IE9 Compat Modes */

	src: local('Noto Sans KR Black'), local('NotoSansKR-Black'),

			url('./fonts/noto-sans-kr-v7-latin_korean-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

			url('./fonts/noto-sans-kr-v7-latin_korean-900.woff2') format('woff2'), /* Super Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-900.woff') format('woff'), /* Modern Browsers */

			url('./fonts/noto-sans-kr-v7-latin_korean-900.ttf') format('truetype'), /* Safari, Android, iOS */

			url('./fonts/noto-sans-kr-v7-latin_korean-900.svg#NotoSansKR') format('svg'); /* Legacy iOS */

}



:focus {outline: none;}

* {font-family: 'Noto Sans KR', 'Malgun Gothic', '맑�? 고딕', sans-serif; margin: 0; padding: 0; letter-spacing: -0.25px; 	box-sizing: border-box; vertical-align: top;}



/* reset */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, 

samp,small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, 

aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 

{ margin: 0; padding: 0; border: 0; font-size: inherit; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}

ol, ul { list-style: none;}

blockquote, q { quotes: none;}

blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}

table { border-collapse: collapse; border-spacing: 0;}

table caption {overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}

a {color: #000000; text-decoration: none;}

html {-webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale;}

input {-webkit-border-radius: none; -webkit-appearance: none;}

input[type=text] {font-size: 14px; height: 30px; border: 1px solid #ccc; padding: 0 10px; box-sizing: border-box;}

input[type=password] {font-size: 14px; height: 30px; border: 1px solid #ccc; padding: 0 10px; box-sizing: border-box;}

textarea {font-size: 14px; height: 30px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box;}

input[type=radio] {width: 15px; height: 15px; border: 1px solid #8ea9c9; border-radius: 12px; vertical-align: middle; background: #fff; margin-right: 3px; position: relative}

input[type=radio]::after {content: ''; background: #dbe6f3; display: block; box-sizing: border-box; width: 7px; height:  7px; position: absolute; left: 3px; top: 3px; border-radius: 10px;}

input[type=radio]:checked::after {content: ''; background: #1b69d4; display: block; box-sizing: border-box; width: 7px; height: 7px; position: absolute; left: 3px; top: 3px; border-radius: 10px;}

input[type=checkbox] {width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 3px; background: #fff; border: 2px solid #dddddd; margin-top: 0; box-sizing: border-box; position: relative; overflow: hidden; z-index: 1; vertical-align: middle;}

input[type=checkbox]:checked {border: 0;}

input[type=checkbox]:checked::before {content: ''; width: 14px; height: 14px; display: block; background: url(../images/bg_check.png) 0 0 no-repeat #1b69d4; border: 2px solid #1b69d4;  position: absolute; left: -2px; top: -2px; z-index: 2;}

input[type=file]::after, input[type=file]:checked::after {background: #fff;}

select {width: 100%; box-sizing: border-box; border: 1px solid #ddd; height: 40px; line-height: 40px; color: #333; background: url(../images/bg_select.png) calc(100% - 15px) 50% no-repeat #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-left: 10px; font-size: 14px;}

select::-ms-expand {display: none;}

select > option {color: #000;}

div, label { box-sizing: border-box;}

button {cursor: pointer}

button:disabled, button[disabled] {cursor:default;}

.fc_red1 {color:red !important;}
.fc_red2 {color:#82142e !important;}
.fc_red3 {color:#d23b42 !important;}

.w100p {width: 100% !important;}

.w90p {width: 90% !important;}

.w80p {width: 80% !important;}

.w70p {width: 70% !important;}

.w69p {width: 69% !important;}

.w60p {width: 60% !important;}

.w50p {width: 49% !important;}

.w40p {width: 40% !important;}

.w35p {width: 35% !important;}

.w30p {width: 30% !important;}

.w29p {width: 29% !important;}

.w24p {width: 24% !important;}

.w20p {width: 20% !important;}

.w10p {width: 10% !important;}



.w50 {width: 50px !important;}

.w60 {width: 60px !important;}

.w80 {width: 80px !important;}

.w100 {width: 100px !important;}

.w150 {width: 150px !important;}

.w200 {width: 200px !important;}

.w300 {width: 300px !important;}

.w400 {width: 400px !important;}

.w500 {width: 500px !important;}



.h100 {height: 100px !important;}

.h200 {height: 200px !important;}

.h300 {height: 300px !important;}

.h400 {height: 400px !important;}

.h500 {height: 500px !important;}



.mt2 {margin-top: 2px !important;}

.mt5 {margin-top: 5px !important;}

.mt8 {margin-top: 8px !important;}

.mt10 {margin-top: 10px !important;}

.mt12 {margin-top: 12px !important;}

.mt15 {margin-top: 15px !important;}

.mt20 {margin-top: 20px !important;}

.mt25 {margin-top: 25px !important;}

.mt30 {margin-top: 30px !important;}

.mt40 {margin-top: 40px !important;}

.mt50 {margin-top: 50px !important;}



.mb2 {margin-bottom: 2px !important;}

.mb5 {margin-bottom: 5px !important;}

.mb8 {margin-bottom: 8px !important;}

.mb10 {margin-bottom: 10px !important;}

.mb12 {margin-bottom: 12px !important;}

.mb15 {margin-bottom: 15px !important;}

.mb20 {margin-bottom: 20px !important;}

.mb25 {margin-bottom: 25px !important;}

.mb30 {margin-bottom: 30px !important;}

.mb40 {margin-bottom: 40px !important;}

.mb50 {margin-bottom: 50px !important;}



.ml2 {margin-left: 2px !important;}

.ml5 {margin-left: 5px !important;}

.ml8 {margin-left: 8px !important;}

.ml10 {margin-left: 10px !important;}

.ml12 {margin-left: 12px !important;}

.ml15 {margin-left: 15px !important;}

.ml20 {margin-left: 20px !important;}

.ml25 {margin-left: 25px !important;}

.ml30 {margin-left: 30px !important;}

.ml40 {margin-left: 40px !important;}

.ml50 {margin-left: 50px !important;}



.mr0 {margin-right: 0 !important;}

.mr2 {margin-right: 2px !important;}

.mr5 {margin-right: 5px !important;}

.mr8 {margin-right: 8px !important;}

.mr10 {margin-right: 10px !important;}

.mr12 {margin-right: 12px !important;}

.mr15 {margin-right: 15px !important;}

.mr20 {margin-right: 20px !important;}

.mr25 {margin-right: 25px !important;}

.mr30 {margin-right: 30px !important;}

.mr40 {margin-right: 40px !important;}

.mr50 {margin-right: 50px !important;}



.p0 {padding: 0 !important;}

.p10 {padding: 10px !important;}

.p15 {padding: 15px !important;}

.p20 {padding: 20px !important;}

.p30 {padding: 30px !important;}

.p40 {padding: 40px !important;}

.p50 {padding: 50px !important;}

.p1em {padding: 1em !important;}



.pt3 {padding-top: 3px !important;}

.pt5 {padding-top: 5px !important;}

.pt10 {padding-top: 10px !important;}

.pt15 {padding-top: 15px !important;}

.pt20 {padding-top: 20px !important;}



.pb3 {padding-bottom: 3px !important;}

.pb5 {padding-bottom: 5px !important;}

.pb10 {padding-bottom: 10px !important;}

.pb15 {padding-bottom: 15px !important;}

.pb20 {padding-bottom: 20px !important;}



.pl3 {padding-left: 3px !important;}

.pl5 {padding-left: 5px !important;}

.pl6 {padding-left: 6px !important;}

.pl10 {padding-left: 10px !important;}

.pl15 {padding-left: 15px !important;}

.pl20 {padding-left: 20px !important;}



.pr3 {padding-right: 3px !important;}

.pr5 {padding-right: 5px !important;}

.pr6 {padding-right: 6px !important;}

.pr10 {padding-right: 10px !important;}

.pr15 {padding-right: 15px !important;}

.pr20 {padding-right: 20px !important;}



.c-green {color: #60c614 !important;}

.c-mint {color: #18c3a3 !important;}

.c-skyblue {color: #00b6f0 !important;}

.c-blue {color: #378ee9 !important;}

.c-green2 {color: #8ebc00 !important;}

.c-yellow {color: #d7b700 !important;}

.c-orange {color: #f27200 !important;}

.c-red {color: #df3b42 !important;}

.c-gray {color: #888 !important;}



.bg-green {background-color: #60c614 !important;}

.bg-mint {background-color: #18c3a3 !important;}

.bg-skyblue {background-color: #00b6f0 !important;}

.bg-blue {background-color: #378ee9 !important;}

.bg-green2 {background-color: #8ebc00 !important;}

.bg-yellow {background-color: #d7b700 !important;}

.bg-orange {background-color: #f27200 !important;}

.bg-red {background-color: #df3b42 !important;}

.bg-mint {background-color: #36f4a2 !important;}

.bg-purple {background-color: #9340b9 !important;}



.font12 {font-size: 12px !important;}

.font13 {font-size: 13px !important;}

.font14 {font-size: 14px !important;}

.font15 {font-size: 15px !important;}

.font18 {font-size: 18px !important;}

.font20 {font-size: 20px !important;}



/* text */

.t_center {text-align: center !important;}

.t_right {text-align: right !important;}

.t_left {text-align: left !important;}



/* fclear */

.fclear:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
* html .fclear {height: 1%;}
.fclear {display: block; min-height: 1%;}



/* float */

.f-left {float: left;}

.f-right {float: right;}



/* button */

button[type=button], input[type=submit] input[type=button] {cursor: pointer; transition: all .2s;}

button[type=button]:hover, input[type=submit]:hover, input[type=button]:hover {opacity: .9;}

button[type=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled {opacity: .2; color: rgba(255,255,255,.7); cursor: default;}

.btn {border: 0; text-align: center; letter-spacing: -0.02em; display: inline-block; border-radius: 3px; vertical-align: middle; height: 35px; line-height: 35px; padding: 0 20px; color: #fff; background: #666; font-size: 15px; box-shadow: inset 0px -17px 0 0 rgba(0,0,0,0.1);}

.btn i {margin: -1px 5px 0 -5px;}

.btn i img {vertical-align: middle; width: 17px; height: 17px;}

.btn-round {border-radius: 60px !important;}

.btn-small {height: 24px; line-height: 24px; padding: 0 1em; font-size: 13px; box-shadow: inset 0px -12px 0 0 rgba(0,0,0,0.1);}

.btn-medium {height: 28px; line-height: 28px; padding: 0 1em; font-size: 14px; box-shadow: inset 0px -14px 0 0 rgba(0,0,0,0.1);}

.btn-nogra {box-shadow: none !important;}

.btn-red {background: #d63434 !important;}

.btn-blue {background: #0793e9 !important;}

.btn-green {background: #58a000 !important;}

.btn-mint {background: #00c1b6 !important;}

.btn-orange {background: #ff8400 !important;}

.btn-gray {background: #96a2b0 !important;}

.btn-darkred {background: #871717 !important;}

.btn-darkblue {background: #085f98 !important;}

.btn-darkgreen {background: #2e7300 !important;}

.btn-darkgray {background: #52585f !important;}

.btn-black {background: #333 !important; color: #fff !important; box-shadow: inset 0px -17px 0 0 rgba(0,0,0,.5) !important;}

.btn-white {background: #fff !important; border: 1px solid #96a2b0 !important; color: #333 !important; font-weight: 500 !important;}

.btn-search {border: 0; display: inline-block; border-radius: 3px; vertical-align: middle; height: 28px; line-height: 28px; width: 28px; background: url(../images/icon_search_w.png) no-repeat 50% 55% /55% 55% #96a2b0; box-shadow: inset 0px -17px 0 0 rgba(0,0,0,0.1);}



body, html {font-size: 16px;}

:focus {outline: auto 1px #000;}

.no_scroll {overflow: hidden !important;}



/* skip */

.skip a {display: block; position: absolute; left: 0; top: -9999px; overflow: hidden; width: 100%; background: black; color: #fff; font-size: 1em; font-weight: bold; text-align: center;}

.skip a:focus {position: absolute; top: 0; padding: 10px 0; z-index: 99999; outline: none !important;}





/* header */

header {position: relative; width: 100%;}

.header_member {background: #fff; height: 55px; line-height: 55px; width: 100%; max-width: 1400px; margin: 0 auto; text-align: right; padding: 0 20px; box-sizing: border-box;}

.header_member > li {display: inline-block;}

.header_member > li > a {font-size: 1em; color: #666; vertical-align: middle; padding: 0 0 0 20px;}

.header_member > li > a:hover {color: #000;}

.header_member > li > a img {display: inline-block; vertical-align: middle; margin-top: -6px; margin-right: 3px}

.header_container { background: #f9f9f9; height: 125px; box-sizing: border-box; padding: 0; box-sizing: border-box; width: 100%;}

.header_container > div {position: relative; width: 100%; /*max-width: 1400px; */margin: 0 auto; text-align: center;}

.header_container h1 {margin-top: 0px; display: inline-block; margin-right: 110px; vertical-align: top;}

.header_container h1 > a img {display: inline-block;}

.header_container h1 > a p {display: inline-block; font-size: 1.4em; color: #333; vertical-align: middle; margin-left: 10px;}

.header_container .depth {display: inline-block; text-align: right; margin-right: 50px; font-size: 0; transition: .3s ease;}

.header_container .depth > li {display: inline-block; font-size: 16px;}

.header_container .depth > li > a {display: block; font-size: 1.25em; color: #333; font-weight: 500; padding: 40px 25px; }

.header_container .depth > li > a.active, .header_container .depth > li > a:hover {color: #0d3588;}



.header_container .depth > li > div {background: #0d3588; z-index: 10;}

.header_container .depth > li:hover > div {height: 240px; border-bottom: 3px solid #35a7ff; box-shadow: 0 15px 15px rgba(0,0,0,.25);}

.header_container .depth > li > div > div {width: 100%; max-width: 1400px; margin: 0 auto; text-align: left; padding: 60px 10px;}

.header_container .depth > li > div > div > h2 {display: inline-block; font-size: 3.125em; width: 350px; font-weight: 600; }

.header_container .depth > li > div > div > h2 span {font-size: .5em; display: block; font-weight: 300;}

.header_container .depth > li > div > div > ul {display: inline-block; width: calc(100% - 370px); vertical-align: top; min-height: 1%;}

.header_container .depth > li > div > div > ul::after  {content: ''; height: 0; display: block; visibility: hidden; clear: both;}

.header_container .depth > li > div > div > ul > li {display: inline-block; font-size: 1.25em; width: 24%;}

.header_container .depth > li > div > div > ul > li > a {color: #fff; padding: .5em 0; box-sizing: border-box; display: block; text-align: left;} 

.header_container .depth > li > div > div > ul > li > a img {vertical-align: middle; margin-right: 5px; margin-top: -2px;}

.header_container .depth > li > div > div > ul > li > a:hover, .depth > li > div > div > ul > li a.active {color: #fad24e;}

.menu1 + .menu1_sub, .menu2 + .menu2_sub, .menu3 + .menu3_sub, .menu4 + .menu4_sub, .menu5 + .menu5_sub, .menu6 + .menu6_sub, .menu7 + .menu7_sub 

{height: 0; overflow: hidden; position: absolute; top: 109px; left: 0;  display: block; width: 100%;  color: #fff; float: left;}

/*.menu1:hover + .menu1_sub, .menu1_sub:hover, 

.menu2:hover + .menu2_sub, .menu2_sub:hover, 

.menu3:hover + .menu3_sub, .menu3_sub:hover,

.menu4:hover + .menu4_sub, .menu4_sub:hover,

.menu5:hover + .menu5_sub, .menu5_sub:hover,

.menu6:hover + .menu6_sub, .menu6_sub:hover,

.menu7:hover + .menu7_sub, .menu7_sub:hover {height: 240px;}*/

.header_container .depth > li:hover > div {height: 280px;}

.header_container .depth > li:hover > a {color: #3a6dc3;}

.btnarea{text-align:center;}
.btnarea a{display:inline-block; font-size:1.25em; width:30%; padding:20px 0;text-align:center; color:#fff; margin-right:1%}
.btnarea a.blue{background:#0060aa;}

/* 패딩 */
.padding_left_0dot5 {padding-left:0.5em !important;}
.padding_left_1dot0 {padding-left:1.0em !important;}
.padding_left_1dot5 {padding-left:1.5em !important;}
.padding_left_2dot0 {padding-left:2.0em !important;}
.padding_left_2dot5 {padding-left:2.5em !important;}
.padding_left_3dot0 {padding-left:3.0em !important;}
.padding_left_3dot5 {padding-left:3.5em !important;}
.padding_left_4dot0 {padding-left:4.0em !important;}

/* 폰트크기 */
.fontsize_0dot90 {font-size:0.90em !important;}
.fontsize_0dot95 {font-size:0.95em !important;}
.fontsize_1dot00 {font-size:1.00em !important;}
.fontsize_1dot05 {font-size:1.05em !important;}
.fontsize_1dot10 {font-size:1.10em !important;}
.fontsize_1dot15 {font-size:1.15em !important;}
.fontsize_1dot20 {font-size:1.20em !important;}
.fontsize_1dot25 {font-size:1.25em !important;}
.fontsize_1dot30 {font-size:1.30em !important;}
.fontsize_1dot35 {font-size:1.35em !important;}
.fontsize_1dot40 {font-size:1.40em !important;}
.fontsize_1dot45 {font-size:1.45em !important;}
.fontsize_1dot50 {font-size:1.50em !important;}
.fontsize_1dot55 {font-size:1.55em !important;}
.fontsize_1dot60 {font-size:1.60em !important;}
.fontsize_1dot65 {font-size:1.65em !important;}
.fontsize_1dot70 {font-size:1.70em !important;}
.fontsize_1dot75 {font-size:1.75em !important;}
.fontsize_1dot80 {font-size:1.80em !important;}
.fontsize_1dot85 {font-size:1.85em !important;}
.fontsize_1dot90 {font-size:1.90em !important;}
.fontsize_1dot95 {font-size:1.95em !important;}
.fontsize_2dot00 {font-size:2.00em !important;}

/* 마진 */
.margin_top_0dot5 {margin-top:0.5em !important;}
.margin_top_1dot0 {margin-top:1.0em !important;}
.margin_top_1dot5 {margin-top:1.5em !important;}
.margin_top_2dot0 {margin-top:2.0em !important;}
.margin_top_2dot5 {margin-top:2.5em !important;}
.margin_top_3dot0 {margin-top:3.0em !important;}

/* 게시판 > 상세보기 > 답변 */
.bbs_v_rep1a {border-top:1px solid #333;padding-top:20px;}
.bbs_v_rep1a .data {background:#f5f5f5;line-height:1.8;padding:20px;margin-top:20px;}
.bbs_v_rep1a .data:first-child {margin-top:0;}
.bbs_v_rep1a .data .info1 {font-weight:700;color:#0060aa;}
.bbs_v_rep1a .data .cont1 {margin-top:1em;}

/* 엔터간격line-height */
.lineheight_1dot0 {line-height:1.0 !important;}
.lineheight_1dot1 {line-height:1.1 !important;}
.lineheight_1dot2 {line-height:1.2 !important;}
.lineheight_1dot3 {line-height:1.3 !important;}
.lineheight_1dot4 {line-height:1.4 !important;}
.lineheight_1dot5 {line-height:1.5 !important;}
.lineheight_1dot6 {line-height:1.6 !important;}
.lineheight_1dot7 {line-height:1.7 !important;}
.lineheight_1dot8 {line-height:1.8 !important;}
.lineheight_1dot9 {line-height:1.9 !important;}
.lineheight_2dot0 {line-height:2.0 !important;}
/* .menu_bg { position: relative; z-index: 9; transition: .3s ease;}

.menu_bg::before {position: absolute; background: #0d3588; width: 100%; height: 240px; top: 110px; left: 0; content:''; border-bottom: 3px solid #35a7ff; box-shadow: 0 15px 15px rgba(0,0,0,.25);} */

.header_container .depth > li > a.active {color: #3a6dc3;}

.header_container .depth > li > div.active {height: 240px;}

/* menu all */

/* .menu_btn {display: block; align-items: center;position: absolute; right: 50%; transform: translateX(700px); width: 30px; height: 30px;cursor: pointer; z-index: 110; padding: 0; top: 40px; background: url(../images/btn_menu.png) 0 0 no-repeat; border: 0; transition: none !important;} */

/*.menu_btn > span, .menu_btn > span::before, .menu_btn > span::after {display: block;position: absolute;width: 100%;height: 2.5px; background-color: #0062ad;transition-duration: .25s; top: 13px; left: 0; }

.menu_btn > span::before {content: '\00a0'; top: -10px;}

.menu_btn > span::after {content: '\00a0' ;top: 10px;}+*/


.menu_btn.active {transform: translateX(691px); background: url(../images/btn_menu_close.png) 0 0 no-repeat;}

.menu_btn.active::before {top: 0; transform: rotate(0); background-color: #000;}

.menu_btn.active::after {top: 0; transform: rotate(90deg); background-color: #000;}

/* .container {
  width: 100%;
  height: 100%;
  text-align: center;
  background: url("../images/placeCd03.jpg") no-repeat center center;
  background:transparent;
} */
.container3 {height:100%;text-align: center;position: relative;z-index: 1;}
.container3::after {width: 100%;height: 100%;content: "";background: url("../images/placeCd03.jpg") no-repeat center center;position: absolute;top: 0;left: 0;z-index: -1;opacity: 0.2;}
.container4 {height:100%;text-align: center;position: relative;z-index: 1;}
.container4::after {width: 100%;height: 100%;content: "";background: url("../images/placeCd04.jpg") no-repeat center center;position: absolute;top: 0;left: 0;z-index: -1;opacity: 0.2;}
.container5 {height:100%;text-align: center;position: relative;z-index: 1;}
.container5::after {width: 100%;height: 100%;content: "";background: url("../images/placeCd05.jpg") no-repeat center center;position: absolute;top: 0;left: 0;z-index: -1;opacity: 0.2;}
.container6 {height:100%;text-align: center;position: relative;z-index: 1;}
.container6::after {width: 100%;height: 100%;content: "";background: url("../images/placeCd06.jpg") no-repeat center center;position: absolute;top: 0;left: 0;z-index: -1;opacity: 0.2;}
.container7 {height:100%;text-align: center;position: relative;z-index: 1;}
.container7::after {width: 100%;height: 100%;content: "";background: url("../images/placeCd07.jpg") no-repeat center center;position: absolute;top: 0;left: 0;z-index: -1;opacity: 0.2;}
/*#menu_toggle {opacity: 0; }

#menu_toggle:checked ~ .menu_btn {right: 20px;}

#menu_toggle:checked ~ .menu_btn > span {transform: rotate(45deg);}

#menu_toggle:checked ~ .menu_btn > span::before {top: 0;transform: rotate(0); background-color: #000;}

#menu_toggle:checked ~ .menu_btn > span::after {top: 0;transform: rotate(90deg); background-color: #000;}

#menu_toggle:checked ~ .menu_box {visibility: visible;left: 0;}*/

.menu_all {display: none; width: 100% ; height: 100% ; position: fixed; left: 0; top: 0;  background: rgba(255,255,255,1); z-index: 96; padding: 0 40px}

.menu_all.active {display: block; overflow-y: scroll;}



.menu_all .list {width: 100%; max-width: 1400px; margin: 3em auto; font-size: 0; text-align: left;}

.menu_all .list > li {width: 25%; padding: 10px 15px; box-sizing: border-box; display: inline-block; font-size: 16px; vertical-align: top;}

.menu_all .list > li > a {font-size: 1.8em; color: #262626; font-weight: 600; margin: 0 0 20px; display: block; letter-spacing: -.01em;}

.menu_all .list > li > ul > li a {font-size: 1.1em; color: #666; display: block; margin: 10px 0; letter-spacing: -.5px; transition: all .2s ease-out ;}

.menu_all .list > li > ul > li a > img {display: inline-block; margin: -4px 10px 0 0; vertical-align: middle; width: 25px; }

.menu_all .list > li > ul > li a:hover, .menu_all .list > li > ul > li a.active {color: #000; transform: scale(1.025); font-weight: 600;}

.menu_all .member {background: #fff; height: 85px; line-height: 140px; width: 100%; max-width: 1400px; margin: 85px auto 0; text-align: left; padding: 0; box-sizing: border-box;}

.menu_all .member li {display: inline-block;}

.menu_all .member li > a {font-size: 1em; color: #666; vertical-align: middle; padding: 0 0 0 20px;}

.menu_all .member li > a:hover {color: #000;}

.menu_all .member li > a img {display: inline-block; vertical-align: middle; margin-top: -6px; margin-right: 3px}





.all_active {display: block !important; overflow-y: scroll !important;}

.menu_active span {transform: rotate(45deg);}

.menu_active span::before {top: 0;transform: rotate(0); background-color: #000;}

.menu_active span::after {top: 0;transform: rotate(90deg); background-color: #000;}

@media screen and (max-width: 1440px) {
.header_container h1 {margin-right: 0; margin-left: 20px; float: left;}
.header_container .depth {float: right; margin-right: 70px;}
.menu_btn {right: 20px; transform: none;}
.menu_btn.active {right: 37px; transform: none;}
}
@media screen and (max-width: 1200px) {
.header_container h1 {margin-top: 0; top: -10px; position: absolute; left: 20px; float: none; margin-left: initial;}
.menu_btn.active {right: 37px !important;} 
}

/* @media screen and (max-width: 560px) {
.header_container h1 {float: left; margin-left: 15px; margin-right: none;}
} */

/* header etc */

.header_etc {background: #f9f9f9; padding: 0 20px 2.5em; text-align: center;}

.header_etc > div {width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}

.header_etc .weather {position: absolute; left: 0; top: 0; transition: all .3s ease;}

.header_etc .weather > img {display: inline-block; vertical-align: middle;}

.header_etc .weather > div {display: inline-block; vertical-align: middle; text-align: left;}

.header_etc .weather > div .tt1 {display: block; vertical-align: middle; font-size: 1.5em; line-height: 1; color: #333}

.header_etc .weather > div .tt1 b {font-size: 1.25em; font-weight: 500;}

.header_etc .weather > div .tt1 sup {font-size: 70%; vertical-align: top; display: inline-block; margin-top: 2px;}

.header_etc .weather > div .tt2 {display: inline-block;vertical-align: middle; font-size: .8125em; color: #888;}

.header_etc .weather > div .tt2 span {color: #333; font-weight: 600;}

.header_etc .search {width: 65%; max-width: 500px; margin: 0 auto; background: #fff; height: 50px; line-height: 50px; border-radius: 50px; border: 2px solid #0062ad; overflow: hidden; position: relative; transition: all .3s ease; text-align: left; padding-left: 1.5em;}

.header_etc .search > input[type=text] {width: calc(100% - 65px); text-align: left; border: 0; color: #333; height: 45px; vertical-align: top; font-size: 1.25em; font-weight: 600;}

.header_etc .search > input::placeholder {color: #333; opacity: 1; font-weight: normal; font-size: .85em;}

.header_etc .search > input::-webkit-input-placeholder {color: #333; font-weight: normal; font-size: .85em;}

.header_etc .search > input:-ms-input-placeholder {color: #333; font-weight: normal; font-size: .85em;}

.header_etc .search > input:-mos-input-placeholder {color: #333; font-weight: normal; font-size: .85em;}

.header_etc .search > button {position: absolute; right: 0; top: -2px; width: 60px; border: 0; height: 50px; background: transparent;}

.header_etc .reservation {position: absolute; right: 0; top: 0; width: 240px; height: 50px; line-height: 50px; border-radius: 50px; color: #fff; background: #0062ad; font-size: 1.125em; padding-left: 30px; transition: all .3s ease; border: 0; z-index: 2;}

.header_etc .reservation::before {content:''; width: 42px; height: 50px; background: url(../images/icon_reservation.png) 0 0 no-repeat; display: block; position: absolute; left: 20px; top: 0}

.header_etc .reservation:hover {background: #1580d2;}

/**************************************** main ****************************************/

/* main quick menu */

.quick_menu {background: #344755;}

.quick_menu .quick {width: 100%; max-width: 1400px; margin: 0 auto; position: relative; overflow: hidden;}

.quick_menu .quick > ul {min-height: 1%;}

.quick_menu .quick > ul:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}

.quick_menu .quick > ul > li {float: left; text-align: center;}

.quick_menu .quick > ul > li a {color: #fff; display: block; width: 100%; padding: 2.5em 0;transform: scale(1); transition: all .2s ease-in;}

.quick_menu .quick > ul > li a p {font-size: .96em; line-height: 1.4; word-break: keep-all;}

.quick_menu .quick > ul > li a img {display: block; margin: 0 auto 10px; width: 50%; max-width: 60px;}

.quick_menu .quick > ul > li a:hover {color: #35a7ff;  background: #1d2c37; transform: scale(1.05);}

.quick_menu .swiper-pagination-fraction, .quick_menu .swiper-pagination-custom, .quick_menu .swiper-container-horizontal > .swiper-pagination-bullets {display: none; bottom: 15px;}

.quick_menu .swiper-pagination-bullet-active {width: 100px !important; height: 20px !important; background: #0062ad; border: 0; border-radius: 40px; transition: width .3s ease;}

.quick_menu .swiper-pagination-bullet {width: 20px; height: 20px;}



/* main content */

.main-content {width: 100%; display: block; background-size: auto;}

.main-content > div {width: 100%; max-width: 1400px; margin: 0 auto; min-height: 1%; }

.main-content > div:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}



/* main_visual */

.main_visual {width: 980px; max-height: 480px; float: left; overflow: hidden; position: relative;}

.main_visual .swiper-pagination-fraction {text-align: left; background: rgba(51,51,51, .5); color: #fff; left: 30px; width: 220px; height: 40px; line-height: 40px; padding: 0 20px 0 30px; border-radius: 20px; font-size: 1.125em; z-index: 8;}

.main_visual .swiper-pagination-current {color: #8dceff;}

.main_visual .swiper-button-prev, .main_visual .swiper-button-next {width: 8px; height: 14px; background-size: 100% auto; bottom: 42.5px;}

.main_visual .swiper-button-next {background-image: url(../images/btn_mainvisual_right.png); left: 220px}

.main_visual .swiper-button-prev {background-image: url(../images/btn_mainvisual_left.png); left: 130px;}

.main_visual .swiper-slide img {width: 100%;}

.main_visual .swiper-play {position: absolute; left: 170px; bottom: 40px; width: 40px; height: 20px; z-index: 11; }

.main_visual .swiper-play button {position: absolute; top: 0; left: 0; background: transparent; border: 0;}

.main_visual .swiper-start1 {display: none; background: #fff; z-index: 10;}

.main_visual .swiper-stop1 { z-index: 9;}



/* statistics */

.statistics {width: calc(100% - 980px); max-width: 420px; float: right;}

.statistics ul { min-height: 1%; display: block;}

.statistics ul:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}

.statistics ul li {margin-left: 20px; float: left; width: calc(50% - 20px); height: 230px; color: #fff; text-align: center;  padding: 2.875em 0; box-sizing: border-box; } /* 메인 메뉴 변경에따른 css 수정  padding: 1.875em 0;*/

.statistics ul li:nth-child(1), .statistics ul li:nth-child(2) {margin-bottom: 20px;}

.statistics ul li img {width: 35%; max-width: 90px; margin: 0 auto;}

.statistics ul li p {font-size: 1em; font-weight: 400; line-height: 3.4;} /* 메인 메뉴 변경에따른 css 수정  line-height: 1.4;*/

.statistics ul li p > span {display: block;}

.statistics ul li p > b {color: #fedf10; font-size: 1.75em;}

.statistics ul li:nth-child(1) {background: #3b4da8;}

.statistics ul li:nth-child(2) {background: #363f5b;}

.statistics ul li:nth-child(3) {background: #689c12;}

.statistics ul li:nth-child(4) {background: #eb8900;}

.statistics ul li:nth-child(5) {background: #689c12;}



/* board */

.board {margin-top: 1.875em; position: relative; min-height: 1%; display: block; padding: 3.75em 0 6em; box-sizing: border-box; transition: all .3s ease-in;}

.board:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}

.board div.content {padding: 1.25em 2.5em; font-size: .875em;}

.board div.tt {color: #333; font-weight: 400; font-size: 1.375em; border-bottom: 1px #ddd solid; cursor: pointer; padding: 0 20px; height: 60px; line-height: 60px; width: 260px;}

.board div.tt.active {background: #0062ad; color: #fff;position: relative;}

/*+이미지 가상태그 제거*/
/* .board div.tt.active::after {position: absolute; right: 20px; top: 20px; background: url(../images/bg_notice_active.png) 0 0 no-repeat; width: 18px; height: 18px; content:'';} */
.board div.tt.active span.ntcTotalView {position: absolute; right: 20px; top: 20px; background: url(../images/bg_notice_active.png) 0 0 no-repeat; width: 18px; height: 18px; content:'';}

.board div.content {display: none; color: #262626; width: calc(100% - 300px); top: 3.75em; right: 0; position: absolute; padding: 0; font-size: 1em; transition: all 1s ease;} 

.board div.content.active {display: block;}

.board div.content > ul {font-size: 0;}

.board div.content > ul > li {width: calc(25% - 15px); height: 280px; background: #fff; display: inline-block; font-size: 16px; vertical-align: top; margin-right: 20px;}

.board div.content > ul > li:last-child {margin-right: 0;}

.board div.content > ul > li > a {display: block; width: 100%; height: 100%; padding: 1.875em 1.625em; box-sizing: border-box; text-align: left; position: relative; border: 5px solid #fff; transition: all .3s ease-in-out;}

.board div.content > ul > li .tag {color: #0062ad; font-size: .9375em; display: inline-block; border: 1px solid #0062ad;  padding: 0 1em; border-radius: 30px;}

.board div.content > ul > li .new {position: absolute; right: 1em; top: 1.8em; width: 25px; height: 25px; background: #f28d01; color: #fff; text-align: center; border-radius: 50%; }

.board div.content > ul > li .subject {color:#333; font-size: 1.25em; margin: 1em 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.3em; height: 2.6em;}

.board div.content > ul > li .con {color: #555; font-size: 1em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.2em; height: 3.6em; }

.board div.content > ul > li .date {color: #333; font-size: .875em; margin-top: 1.5em;}

.board div.content > ul > li a:hover {border-color: #0062ad;}

.board div.content > ul > li a:hover .subject {color: #f28d01;}

.board div.content > ul > li a:hover .con {color: #262626;}



/* main etc */

.main_etc {background: url(../images/bg_mainetc_left.png) left bottom no-repeat, url(../images/bg_mainetc_right.png) right bottom no-repeat #fff; background-size: auto; padding: 3.125em 1.5em 5.625em;}

.main_etc > div {width: 100%; margin: 0 auto; position: relative}

.main_etc .notice {width: 35%; display: inline-block; position: relative;}

.main_etc .notice h2 {font-size: 1.375em;  color: #333; display: block; font-weight: 400; height: 50px; line-height: 50px;}

.main_etc .notice button.more {background: #fff; border: 0; position: absolute; right: 0; top: 15px;}

.main_etc .notice a {display: block; width: 100%; border: 1px solid #ddd; background: #fff; }

.main_etc .notice a > img {width: 100%;}

.main_etc .notice div {padding: 18px;}

.main_etc .notice div p {color: #333; font-size: 1.25em; display: block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden; margin-bottom: 15px;}

.main_etc .notice div span {color: #333; font-size: 1em; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.4em; height: 2.8em;}

.main_etc .popup_zone {width: calc(97% - 50px); margin-left: 40px; display: inline-block; vertical-align: top; position: relative;}

.main_etc .popup_zone h2 {font-size: 1.375em;  color: #333; display: block; font-weight: 400; height: 50px; line-height: 50px;}

.main_etc .popup_zone .list {background: #f9f9f9; padding: 40px; box-sizing: border-box; overflow: hidden; position: relative;}

.main_etc .popup_zone .swiper-slide img {width: 100%;}

.main_etc .swiper-button-prev, .main_etc .swiper-button-next {bottom: auto; top: 15px; right: 0; background-size: 8px 14px;}

.main_etc .popup_zone .swiper-button-next {background-image: url(../images/btn_popupzone_right.png);}

.main_etc .popup_zone .swiper-button-prev {background-image: url(../images/btn_popupzone_left.png); left: auto; right: 75px;}

.main_etc .popup_zone .swiper-play {position: absolute; right: 20px; top: 16.5px; width: 40px; height: 20px; }

.main_etc .popup_zone .swiper-play button {position: absolute; top: 0; left: 0; background: #fff; border: 0;}

.main_etc .popup_zone .swiper-start2 {display: none; z-index: 10;}

.main_etc .popup_zone .swiper-stop2 {z-index: 9;}



/* menu list */

.menu_list {background: #f7f9ee; border: 1px solid #ddd; min-height: 1%; display: block; margin: 3.125em auto 0 !important; box-sizing: border-box; width: 100%; max-width: 1400px; }

.menu_list:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}

.menu_list li {float: left; width: 20%; border-right: 1px solid #ddd; height: 70px; line-height: 70px; box-sizing: border-box; background: #f7f9ee;}

.menu_list li:last-child {border-right: 0;}

.menu_list li > a {width: 100%; display: block; color: #333; font-size: 1.125em; text-align: left; padding: 0 0 0 60px; box-sizing: border-box; position: relative; transition: all .3s ease;}

.menu_list li > a::before {content:''; width: 25px; height: 25px; border-radius: 25px; background: url(../images/bg_menu_list.png) 55% 50% no-repeat #c5c695; position: absolute; top: 22.5px; left: 30px;}

.menu_list li > a:hover {background: #d4e083; color: #595f00;}

.menu_list li > a:hover::before {background: url(../images/bg_menu_list.png) 50% 50% no-repeat #929f00;}



/* footer_top */

.footer_top {background: #004f8c; width: 100%; height: 60px; overflow: hidden;}

.footer_top > div {width: 1400px; margin: 0 auto; position: relative; overflow: hidden; padding-left: 100px;}

.footer_top > div::before {position: absolute; width: 100px; height: 60px; left: 0; top: 0; content:''; background: #004f8c; z-index: 2;}

.footer_top > div > ul > li {float: left; line-height: 60px; text-align: right;}

.footer_top > div > ul > li a { color: #fff;  font-size: 1.1em;}

.footer_top .swiper-button-next, .footer_top .swiper-button-prev { width: 30px; bottom: 18px; left: 0; margin: 0; overflow: visible; background-size: auto;}

.footer_top .swiper-button-next {background-image: url(../images/btn_footertop_right.png); right: auto; left: 70px;}

.footer_top .swiper-button-prev {background-image: url(../images/btn_footertop_left.png);}

.footer_top .swiper-play {position: relative; left: -60px; bottom: -17px; z-index: 2; }

.footer_top .swiper-play button {position: absolute; top: 0; left: 0; background: transparent; border: 0;}

.footer_top .swiper-start3 {display: none; background: #fff; z-index: 10;}

.footer_top .swiper-stop3 { z-index: 9;}



.show {display: block !important;}

.hide {display: none !important;}



/* footer */

footer {background: #0062ad; padding: 5em 0 0; min-height: 260px; box-sizing: border-box;}

footer > div {width: 90%; max-width: 1400px; margin: 0 auto; color: #fff; position: relative;}

footer .logo {display: inline-block; vertical-align: middle; height: 60px; width: 165px;}

footer .logo > img {display: inline-block; margin-right: 10px;}

footer .footer_content {display: inline-block; vertical-align: middle; margin-left: 5em;}

footer .footer_content > ul {margin-bottom: 1.5em;}

footer .footer_content > ul > li {display: inline-block;}

footer .footer_content > ul > li::after {content:'/'; display: inline-block;}

footer .footer_content > ul > li:last-child:after {display: none;}

footer .footer_content > ul > li > a {color: #fff; font-weight: 600; font-size: 1em; padding: 0 1em}

footer .footer_content > ul > li > a:hover {text-decoration: underline;}

footer .footer_content > ul > li.privacy a {color: #ffe742; padding-left: 0;}

footer .footer_content > p {font-size: .875em; line-height: 1.6; letter-spacing: 0;}

footer .footer_mark {display: inline-block; vertical-align: middle; position: absolute; right: 0; top: -1.8em;}

footer .footer_mark > div {display: inline-block; vertical-align: middle; margin-left: 1em;}

footer .footer_mark > div img {width: 120px; display: block; margin: 0 auto;}

footer .footer_mark > div p {display: block; margin-top: 15px; font-size: 1em; font-weight: 400;}



/**************************************** sub ****************************************/



.sub_wrap {width: 100%; margin: 0 auto; font-size: 0; background: url(../images/bg_mainetc_right.png) right bottom no-repeat #fff; background-size: auto;}

.sub_wrap > div {width: 90%; max-width: 1400px; padding: 50px 0; margin: 0 auto;}







/* sub visual */

.sub_visual {height: 270px; background-color: #f9f9f9; background-position: center top; background-repeat: no-repeat; overflow:hidden; background-size: cover; max-width: 2500px; margin: 0 auto; transition: all .3s ease;

animation:bganimation 60s 0 infinite alternate running; 

-webkit-animation:bganimation 60s infinite alternate running; 

-moz-animation:bganimation 60s infinite alternate running; 

-o-animation:bganimation 60s infinite alternate running; 

-ms-animation:bganimation 60s infinite alternate running;

}

@keyframes bganimation{ 0%{background-size: cover;} 100%{background-size: auto 150%;}  }

.sub01 {background-image: url(../images/sub_visual01.png);}

.sub02 {background-image: url(../images/sub_visual02.png)}

.sub03 {background-image: url(../images/sub_visual03.png)}

.sub04 {background-image: url(../images/sub_visual04.png)}

.sub05 {background-image: url(../images/sub_visual05.png)}

.sub06 {background-image: url(../images/sub_visual06.png)}

.sub07 {background-image: url(../images/sub_visual07.png)}

.sub08 {background-image: url(../images/sub_visual08.png)}

.sub09 {background-image: url(../images/sub_visual09.png)}

.sub_visual > div {width: 90%; max-width: 1400px; margin: 0 auto; padding: 0; text-align: center; transition: all .3s ease-in-out;}

.sub_visual > div h2 {font-size: 3.125em ; color: #fff; line-height: 1.6; padding-top: 85px; text-shadow: 2px 2px 8px rgba(0,0,0,.15);}

.sub_visual > div p {font-size: 1em; color: #fff; }



/* left menu */

.left_menu {display: inline-block; font-size: 0; vertical-align: top;}

.left_menu .accordion {width: 240px; margin: 0; font-size: 16px; }

.left_menu .accordion_item {margin-bottom: 5px; } 

.left_menu .accordion_item.active .accordion_title{background-color: #1041a8; border: 0; color: #fff;}

.left_menu .accordion_item.active .accordion_title::after {background: url(../images/bg_accordion_on.png) 0 50% no-repeat;}

.left_menu .accordion_title {background: #fff; border: 1px solid #e5e5e5; box-sizing: border-box; padding: 0 20px; cursor: pointer; display: flex; justify-content: space-between; font-weight: 400; height: 60px; line-height: 58px; font-size: 1.125em; color: #333;}

.left_menu .accordion_title:hover {background-color: #1041a8; border: 0; color: #fff;}

.left_menu .accordion_title::after {content: ""; display: flex; align-items: center; justify-content: center; background: url(../images/bg_accordion.png) 0 50% no-repeat;  font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; width: 17px; height: 58px; transition: transform 0.3s ease-in;}

.left_menu .accordion_title:hover::after {background: url(../images/bg_accordion_on.png) 0 50% no-repeat;}

.left_menu .is-open .accordion_title {background-color: #1041a8; border: 0; color: #fff;}

.left_menu .is-open .accordion_title::after { background: url(../images/bg_accordion_on.png) 0 50% no-repeat; }

.left_menu .accordion_body {height: 0;overflow: hidden; transition: height 0.3s ease-in-out;}

.left_menu .accordion_body.active {height: auto;}

.left_menu .is-open .accordion_body {height: auto;}

.left_menu .accordion_item:hover .accordion_body, .left_menu .accordion_item.active .accordion_body {height: auto;}

.left_menu .accordion_content {background: #f6f6f6;padding: 15px;}

.left_menu .accordion_content > ul > li > a {color: #333; font-size: .95em; padding: 5px 0; display: block; width: 100%; position: relative; padding: 5px 0 5px 15px;}

.left_menu .accordion_content > ul > li > a::before {content:''; position: absolute; left: 0; top: 17px; width: 6px; height: 1.4px; background: #333; }

.left_menu .accordion_content > ul > li > a:hover {color: #0a7dff;}

.left_menu .accordion_content > ul > li > a:hover, .left_menu .accordion_content > ul > li > a.active {color: #0a7dff;}

.left_menu .accordion_content > ul > li > a.active::before, .left_menu .accordion_content > ul > li > a:hover::before, .left_menu .accordion_content > ul > li > a.active:hover::before {background: #0a7dff;}



.submenu-wrap {width: 240px; margin: 0; font-size: 16px;}

.submenu-wrap > li {width: 100%; border: 1px solid #e5e5e5; box-sizing: border-box; margin-bottom: 5px;}

.submenu-wrap > li > a {display: block; padding: 16px 10px; font-size: 1.1em; box-sizing: border-box;  background: url(../images/bg_accordion.png) calc(100% - 15px) 50% no-repeat; width: 100%;}

.submenu-wrap > li > ul {background: #f9f9f9; overflow: hidden; max-height: 0; padding: 0 10px; transition: all .3s ease;}

/* .submenu-wrap > li > ul > li {background: url(../images/bullet3.png) no-repeat 3px 10px;} bullet3.png가 없어서 주석처리 */

.submenu-wrap > li > ul > li a {font-size: .95em; display: block; padding: 4px 10px 4px 13px; color: #333;}

.submenu-wrap > li > ul > li a::before {content: '-'; display: inline-block; margin-right: 4px;}

.submenu-wrap > li:hover > ul,

.submenu-wrap > li.active > ul {max-height: 700px; padding: 10px;}

.submenu-wrap > li:hover > a,

.submenu-wrap > li.active > a { color: #fff; background: url(../images/bg_accordion_on.png) calc(100% - 15px) 50% no-repeat #1041a8;}

.submenu-wrap > li:hover > ul >  li a,

.submenu-wrap > li:active > ul > li a {color: #333; font-weight: 400;}

.submenu-wrap > li:hover > ul > li a:hover,

.submenu-wrap > li.active > ul > li a.active {color: #0a7dff;}



/* sub content */

.sub_content {display: inline-block; width: calc(100% - 300px); margin-left: 60px; font-size: 16px;}

.sub_content > h2 {font-size: 2em; color: #141b2f;}

.sub_content > h3 {font-size: 1.5em; color: #1041a8; margin: 1em 0}

.sub_content .tt3 {margin:40px 0 20px 0; padding:0 0 0 20px; font-size: 1.25em; color:#1e293f; font-weight: 600; line-height:1; background: url(../images/bullet01.png) 0 5px no-repeat; }

.sub_content2 {display: block; width: 100%; font-size: 16px; margin: 0 auto;}

.sub_content2 > h2 {font-size: 2em; color: #141b2f;}





/* navgation */

.navigation {background: #3a6dc3; height: 50px; width: 100%; z-index: 10; position: relative;} /*모바일 서브메뉴 z-index 추가*/

.navigation > ul {width: 100%; max-width: 1400px; margin: 0 auto; text-align: right; font-size: 0;}

.navigation > ul > li {display: inline-block; font-size: 16px; position: relative;}

.navigation > ul > li > a {color: #fff; line-height: 50px; font-size: .875em; font-weight: 400; position: relative; padding: 0 15px;}

.navigation > ul > li > a > img {vertical-align: middle; margin: -4px 10px 0 0;}

.navigation > ul > li > a:hover {color: #f6e2ae;}

.navigation > ul > li > a::after {content:''; background: url(../images/icon_navi.png) 100% 50% no-repeat; width: 6px; height: 9px; position: absolute; right: 0; top: 7px;}

.navigation > ul > li:last-child > a {font-weight: 600;}

.navigation > ul > li:last-child > a::after {display: none;}

.navigation > ul > li .depth {display: none;}



/* table */

.tbl_wrap {position:relative; line-height: 1.25}

.tbl_list {border: 0; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; border-top: 2px solid #7a7d96;}

.tbl_list caption {font-size: 1.5em; margin: 0 }

.tbl_list tr {border-bottom: 1px solid #e5e5e5; padding: .35em; }

.tbl_list thead th {background: #f5f5f5;}

.tbl_list th, .tbl_list td {padding: 1em .625em; text-align: center; font-size: 1em; color: #262626; vertical-align: middle;}

.tbl_list th {font-weight: 500; text-align: center;}

.tbl_list td {color: #444; font-size: 1em; letter-spacing: -.04em;}

.tbl_list td a {color: #444; display: inline-block;}

.tbl_list td a:hover {color: #3a6dc3; text-decoration: underline;}

.tbl_list .notice td {background: #fefcf3; color: #333;}

.tbl_list .notice .title a {font-weight: 600; color: #333;}

.tbl_list .title {width: 45%}

.tbl_list .subject {display: inline-block;word-break: keep-all;}

.tbl_list .section {font-size: .8em; color: #0793e9;}

.tbl_list .secret {display: inline-block; width: 13px; margin-left: 10px;}

.tbl_list .secret > img {margin: -4px 0 0 0;}

.tbl_list2 {border: 0; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; border-top: 2px solid #7a7d96;}

.tbl_list2 caption {font-size: 1.5em; margin: 0 }

.tbl_list2 tr {border-bottom: 1px solid #e5e5e5; padding: .35em; }

.tbl_list2 thead th {background: #f5f5f5;}

.tbl_list2 th, .tbl_list2 td {padding: 1em .625em; text-align: center; font-size: 1em; color: #262626; vertical-align: middle;}

.tbl_list2 th {font-weight: 500; text-align: center;}

.tbl_list2 td {color: #444; font-size: 1em; letter-spacing: -.04em;}

.tbl_list2 td a {color: #444;}

.tbl_list2 td a:hover {color: #3a6dc3; text-decoration: underline;}

.tbl_list2 .notice td {background: #fefcf3; color: #333;}

.tbl_list2 .notice .title a {font-weight: 600; color: #333;}

.tbl_list2 .title {width: 45%}

.tbl_list2 .subject {display: inline-block;word-break: keep-all;}

.tbl_list2 .section {font-size: .8em; color: #0793e9;}

.tbl_list2 .secret {display: inline-block; width: 13px; margin-left: 10px;}

.tbl_list2 .secret > img {margin: -4px 0 0 0;}

.tbl_view { border-collapse: collapse; margin: 0; padding: 0; width: 100%;  border-top: 2px solid #7a7d96; background: #fff;}

.tbl_view thead th {padding: 1em; text-align: left; font-size: 1em; color: #262626; background: #f9f9f9; border-bottom: 1px solid #e5e5e5; line-height: 1.4;}

.tbl_view tbody th {padding: 1em; text-align: left; font-size: .95em; color: #262626; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; vertical-align: middle; width: 110px;}

.tbl_view tbody td {padding: 1em; text-align: left; font-size: .95em; color: #333; border-bottom: 1px solid #e5e5e5;}

.tbl_view .tbl_img {width: 100%; max-width: 1100px;}

.tbl_view .tbl_content {padding: 30px !important;}

.tbl_view .file_download a:hover {text-decoration: underline; color: #3a6dc3; }

.tbl_view .file_download span { display: inline-block; margin-left: 5px; font-size: .95em; color: #666;}

.tbl_view .file_download b {display: inline-block; font-size: .8em; font-weight: 500; color: #999;}

.tbl_nav {border-top: 1px solid #ddd; background: #fff; text-align: left;}

.tbl_nav li {border-bottom: 1px solid #ddd; padding: 1em 0; }

.tbl_nav li > b {width: 130px; display: inline-block; text-align: center; border-right: 1px solid #ddd; margin-right: 1em; font-weight: 500; color: #444;  vertical-align: middle;}

.tbl_nav li > b.prev::before {content:''; width: 9px; height: 5px; background: url(../images/btn_tblnav.png) 0 0 no-repeat; display: inline-block; margin: -4px 7px 0 0; vertical-align: middle; transform: rotate(180deg);}

.tbl_nav li > b.next::before {content:''; width: 9px; height: 5px; background: url(../images/btn_tblnav.png) 0 0 no-repeat; display: inline-block; margin: -4px 7px 0 0; vertical-align: middle; }

.tbl_nav li > a {color: #666; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: calc(100% - 200px); overflow: hidden; display: inline-block;  vertical-align: middle;}

.tbl_nav li > a:hover {color: #3a6dc3; text-decoration: underline;}

.tbl_search {margin: 30px 0; text-align: right; font-size: 0;}

.tbl_search > select {width: 130px; margin-right: 5px; height: 32px; line-height: 32px; border: 1px solid #e5e5e5; padding: 0 10px; box-sizing: border-box; font-size: 14px; display: inline-block; border-radius: 2px;}

.tbl_search > input[type=text] {width: 50%; margin-right: 5px; max-width: 200px; height: 32px; line-height: 32px; border: 1px solid #e5e5e5; padding: 0 10px; box-sizing: border-box; font-size: 14px; display: inline-block; border-radius: 2px;}

.tbl_search > button {display: inline-block; height: 32px; line-height: 32px; background: #363f5b; color: #fff; text-align: center; font-size: 15px; border: 0; padding: 0 30px; border-radius: 3px; box-shadow: inset 0px -17px 0 0 rgb(0 0 0 / 10%); transition: all .2s;}

.tbl_search > button:hover {opacity: .9;}

.tbl_search2 {margin: 15px 0; text-align: left; font-size: 0;}

.tbl_search2 > p {display: inline-block; font-size: 14px; color: #363f5b; font-weight: normal; margin-right: 10px; vertical-align: middle;}

.tbl_search2 > select {width: 130px; margin-right: 5px; height: 30px; line-height: 30px; border: 1px solid #e5e5e5; padding: 0 10px; box-sizing: border-box; font-size: 13px; display: inline-block; vertical-align: middle;}

.tbl_search2 > button {display: inline-block; height: 30px; line-height: 30px; background: #666c82; color: #fff; text-align: center; font-size: 13px; border: 0; padding: 0 15px; vertical-align: middle; border-radius: 3px; box-shadow: inset 0px -17px 0 0 rgb(0 0 0 / 10%); transition: all .2s;}

.tbl_search2 > button:hover {opacity: .9;}

.answer img {vertical-align: middle; margin-right: 10px; margin-top: -4px;}

.answer1 {display: inline-block; padding: 3px 5px; border-radius: 2px;  background: #888; color: #fff; font-size: .8em; width: 55px; text-align: center;}

.answer2 {display: inline-block; padding: 3px 5px; border-radius: 2px;  background: #ec6603; color: #fff; font-size: .8em; width: 55px; text-align: center;}

.answer3 {display: inline-block; padding: 3px 5px; border-radius: 2px;  background: #2b54aa; color: #fff; font-size: .8em; width: 55px; text-align: center;}

.reple {color: #3a6dc3; font-size: 1em; margin-left: 5px;}

/* gallery */

.gallery_wrap {font-size: 0; margin-top: 30px;}

.gallery_wrap > ul > li {font-size: 16px; width: calc(33.3333% - 20px); margin: 0 10px 20px; padding: 10px; display: inline-block; vertical-align: top; box-sizing: border-box; transform: scale(1); transition: all .3s ease-in-out;  box-shadow: 0 0 2.5px rgba(0,0,0,.25);}

.gallery_wrap > ul > li a {width: 100%; display: block; color: #333; font-size: 1.1em;}

.gallery_wrap > ul > li:hover {transform: scale(1.05); box-shadow: 0 0 10px rgba(0,0,0,.25); border: 0;}

.gallery_wrap > ul > li a img { width: 100%;}

.gallery_wrap > ul > li a .img {position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; background-position: 0 50% ; background-size: 100% auto; background-repeat: no-repeat; }

.gallery_wrap > ul > li a p {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden; margin: 10px 0 0;}

.gallery_wrap > ul > li a span {font-size: .8em; display: inline-block; color: #999;}

.gallery_wrap > ul > li a span.writer {position: relative; padding-right: 5px;}

.gallery_wrap > ul > li a span.writer::after {content:''; width: 1px; height: 12px; background: #bbb; margin-left: 7px; display: inline-block;}

.gallery_youtube {position: relative; height:0; padding-bottom: 56.25%;}

.gallery_youtube > iframe {position: absolute; width:100%; height:100%;}



/* tab menu */

.tab_container {margin: 0 auto;}

.tabs {margin: 0px; padding: 0px; list-style: none; text-align: center;} 

.tabs #tab-button li {background: none; color: #222; display: inline-block;cursor: pointer; border: 1px solid #ddd; border-radius: 3px; height: 40px; line-height: 38px; font-size: 16px; margin-right: 10px; margin-bottom: 10px; box-sizing: border-box;}

.tabs #tab-button li a {display: block;  padding: 0 20px; }

.is-active { background: #df3b42 !important; border: 0 !important;}

.is-active a {color: #fff !important;}

.tabs #tab-button li:hover {background: #f9f9f9;}

.tab-button-outer, .tab-select-outer {margin-bottom: 30px;} 

.tab-select-outer {display: none;}

.tab-select-outer select { border: 2px solid #999;}



/* page */

.page {text-align: center; margin: 30px 0;}

.page li {display: inline-block; vertical-align: top;}

.page li a {display: block; width: 40px; height: 40px; line-height: 38px; padding: 0; text-decoration: none; color: #333; background: #fff; font-size: 1em; box-sizing: border-box;  margin: 0; cursor: pointer; border: 1px solid #e1e1e1;}

.page li a:hover, .page li a.active {display: inline-block; width: 40px; height: 40px; line-height: 38px; padding: 0; color: #fff; background: #eaf7ff; color: #266ee6; box-sizing: border-box; vertical-align: bottom; margin: 0; border: 1px solid #b0cef7;}

.page li img {vertical-align: middle; margin-top: -4px;}

.page li a.img {border: 1px solid #e1e1e1;}

.page li a.img:hover {background: #f6f6f6;}



/* 고객참여서비스헌장*/

.con1_1_1 {margin: 50px auto; text-align: center; word-break: keep-all;}

.con1_1_1 > p {display: block; font-size: .9em; color: #666; line-height: 1.6; }

.con1_1_1 > p > b {color: #333; font-weight: 500;}

.con1_1_1 > ul {margin: 3em auto; text-align: left; background: #f6f6f6; padding: 3em;}

.con1_1_1 > ul > li {color: #333; padding-left: 40px; position: relative; margin-bottom: 1.5em;}

.con1_1_1 > ul > li::before {content:'하나'; display: block; left: 0; top: 0; color: #fff; background:#3a6dc3; width: 30px; height: 30px; line-height: 30px; vertical-align: middle;  position: absolute; text-align: center; border-radius: 50%; font-size: 12px;}



.con1_1_1 > ul > li > b {font-weight: 500; color: #000;}

.con1_1_1_intro { border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 30px 0; position: relative;}

.con1_1_1_intro::before {position: absolute; content:''; width: 28px; height: 28px; left: 50% ; top: -15px; display: block; background: url(../images/bg_quotes01.jpg) 0 0 no-repeat; background-size: cover;}

.con1_1_1_intro::after {position: absolute; content:''; width: 28px; height: 28px; left: 50% ; bottom: -15px; display: block; background: url(../images/bg_quotes02.jpg) 0 0 no-repeat; background-size: cover;}



/* 고객의 소리*/



.bu_type1 li, ol.bu_type1 li,p.bu_type1,span.bu_type1,div.bu_type1{display:block; color:#313e59; margin:5px 0 20px 0; padding:0 0 0 20px; font-size:1em; list-style:none; line-height:1.6; font-weight:500; word-break:keep-all; box-sizing:border-box; position: relative; }

.bu_type1 > li::before, ol.bu_type1 > li::before {content:''; color: #666; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background: url(../images/bullet02.png) 0 0 no-repeat;}

.bu_type1 li ul{margin:15px 0;}

.bu_type1 li .refer{font-size:14px;}

.bu_type1 li .explain{color:#666;font-size:.95em;line-height:20px;word-break:keep-all;box-sizing:border-box;}

.bu_type2 li, ol.bu_type2 li, p.bu_type2, span.bu_type2, div.bu_type2{ display:block; color:#444; margin:5px 0 10px 0; padding:0 0 0 11px; font-size:15px; list-style:none; line-height:20px; font-weight:normal; word-break:keep-all; box-sizing:border-box; position: relative; }

.bu_type2 li::before, ol.bu_type2 li::before, p.bu_type2::before, span.bu_type2::before, div.bu_type2::before{ content:'-'; color: #444; position: absolute; left: 0; top: 0px; width: 10px; height: 20px; }

.bu_type2 li ul{margin-bottom:12px;}

.bu_type2 li .explain{color:#4f4f4f; font-size:14px; line-height:16px; word-break:keep-all; box-sizing:border-box; text-align:justify; }

.bu_type3 li, ol.bu_type3 li, p.bu_type3, span.bu_type3, div.bu_type3 {display:block; color:#4f4f4f; margin:5px 0 10px 0; padding:0 0 0 9px; font-size:14px; list-style:none; line-height:16px; word-break:keep-all; box-sizing:border-box;}

.bu_type1 a, ul.bu_type2 a, ul.bu_type3 a {color: #fff; background: #266ee6; font-size: .9em; padding: 2px 10px; border-radius: 2px;}

.bu_type1 a:hover, ul.bu_type2 a:hover, ul.bu_type3 a:hover {background: #1e5ec8;}

.bu_type1 li > div {background: #f9f9f9; padding: 1em; margin: 1em; }

.box_type1 {height:100%; text-align:center; font-weight:normal; border:4px solid #ddd; clear:both; padding:15px 25px; margin:10px 0px 30px 0; background-color:#fff; font-size:15px; line-height:160%; letter-spacing:0px; }

.box_type2 {height:100%; font-weight:normal; border:4px solid #ddd; clear:both; padding:20px 25px; margin:0px 0px 30px 0; background-color:#fff; font-size:17px; line-height: 30px; } 

.bu_none{padding-left:0; background:none !important; }

.link {color: #266ee6 !important; background: #fff !important; text-decoration: underline !important; padding: 0 !important; font-size: 1em !important;}

.link:hover {color: #1e5ec8 !important;}

.indent {text-align: left; position: relative;}

.indent .img { width: 400px; position: absolute; right: 0; top: 0;}

.indent .img_left {width: calc(100% - 420px); min-height: 300px;}

.down {background: #266ee6;  border-radius: 2px; padding: 4px 10px; text-align: center; font-size: .9em; display: inline-block;}

.down a {color: #fff !important; display: block; width: 100%;}

.down a::after {content:''; display: inline-block; width: 16px; height: 15px; vertical-align: middle; margin-top: -4px; margin-left: 5px; background: url(../images/icon_download.png) 0 0 no-repeat;}

.down:hover {background: #1e5ec8;}

.list_la {font-size: .9em; color: #666;}

/* 오시는 길*/

.map_wrap {width: 100%; max-width: 1100px; height: 400px; margin: 30px 0;}

.map_wrap > div {width: 100%; height: 100%;}

.map_address {color: #222; font-size: 1em; margin-bottom: 30px;}

.map_address li {display: block; font-size: 16px;}

.map_address li b{display: inline-block; background: #1041a8; color: #fff; font-weight: 500; width: 60px; height: 24px; line-height: 22px; text-align: center; margin-right: 10px; margin-bottom: 5px; border-radius: 3px; font-size: 14px;}

.map_address li span {display: inline-block; font-size: .8em; margin-left: 10px; color: #666;}

.map_address li span::before {content:'지번'; border: 1px solid #ddd; border-radius: 2px; padding: 0 10px; display: inline-block; width: 25px; height: 20px; margin-right: 5px; margin-top: 8px; background: #f9f9f9; text-align: center;}



/* 조직도 */

.organization {margin: 30px 0;}



/* 연혁 */

.history_wrap {margin-top: 20px;}

.history_title {margin-bottom:45px; color:#0d2c68;}

.history_title strong {font-family:'score'; font-weight: bold; font-size:45px; letter-spacing: -0.02em;}

.history_title em{display:block; font-size:17px; letter-spacing: -0.05em;}

.history_list {position: relative;}

.history_list:before {content: "";display: block;position: absolute;left: 20px;top: 40px;width: 1px;height: 90%;background: #c4c4c4}

.history_list li {overflow: hidden;position: relative;padding-top: 10px;background: none;font-size: 15px;color: #666;}

.history_list > ul > li {padding: 20px 0;}

.history_list > ul > li:after {display: none;} 

.history_list li .txt {float: left} 

.history_list li .year {display: block;position: relative;font-size: 28px;text-align: right;color: #0d3964;padding-left: 100px; font-weight:bold; letter-spacing: -0.07em;}

.history_list li .year:before {display: inline-block;content: "";margin-right: 22px;width: 70px;height: 19px;background: url(../images/bg_history.png) no-repeat;vertical-align: middle;position: absolute;left: 12px;top: 10px;}

.history_list li .info {width: 100%;margin: 0;padding-left: 0;line-height: 1.2;display: inline-block;font-size: 16px;}

.history_list li .info ul li {padding-left: 100px;text-align: left;}

.history_list li .info em {display: inline-flex}

.history_list li .info strong {display: inline-block; font-size: 16px;line-height: 1.4; color: #333; vertical-align: middle;font-weight: bold; margin-right: 15px;}

.history_list li .info strong.month_sty {margin-right: 55px;}

.history_list li .info span{font-size: 16px; line-height: 1.4; color: #454545; display: inline-block; vertical-align: middle;}

.history_list li .info span > span {vertical-align: top;}

.history_list > li:last-child:before {content: ""; display: block; position: absolute; left: 20px; top: 0; width: 1px; height: 40px; background: #ddd;}



/* ceo 인사말 */

.introduce {margin: 30px 0;}

.intro_tt {border-bottom: 6px solid #ededed; font-size: 1.625em; padding: 1em 1em 1em 0; color: #313a65; font-weight: 500; margin-bottom: 1em; line-height: 1.6; }

.intro_tt > b {background: #313a65; color: #fff; padding: 2px 10px; display: inline-block; margin-bottom: .5em; ;}

.intro_tt > p {display: block; word-break: keep-all; line-height: 1.2;}

.intro_con {font-size: 1em; color: #262626; line-height: 1.6; word-break: keep-all;}

.intro_con > p {display: block; margin-bottom: 1em;}

.intro_con2 {display:flex;}


/* 공단안내 */

.establish_wrap {position: relative; background: url(../images/img_7_2_1.jpg) 50% 80% no-repeat; width: 100%; max-width: 900px; height: 500px; margin: 0 auto; text-align: center;}

.establish_wrap > div {width:300px; text-align: center;}

.establish_wrap > div > img {display: block; margin: 0 auto 10px;}

.establish_wrap > div > h4 {font-size: 1.625em; margin-bottom: 5px;}

.establish_wrap > div > p, .establish_wrap > div > ul li {font-size: 1em; letter-spacing: -.05em; color: #333; line-height: 1.4; }

.establish1 {position: absolute; bottom: 4vh; left: 0;}

.establish1 h4 {color: #1041a8;}

.establish2 {position: absolute; bottom: 4vh; right: 0;}

.establish2 h4 {color: #81b826;}

.establish3 {position: absolute; top: 0; left: calc(50% - 150px);}

.establish3 h4 {color: #f28d01;}



.establish4 {margin: 5em auto; text-align: center;}

.establish4 > div {display: inline-block; vertical-align: top;}



.establish4 > div > ul {background: #1041a8; border-radius: 5px; padding: 2em; width: 250px; height: 150px; box-sizing: border-box;}

.establish4 > div > ul > li {text-align: center; color: #fff; font-size: 1.25em;}



.establish4 > div > p {background: #fff; border: 6px solid #1041a8; border-radius: 5px; padding: 1.5em 1em; color: #1041a8; font-size: 1.2em; font-weight: 600; width: 250px; height: 150px; box-sizing: border-box;}

.establish4 > div > p > img {display: block; margin: 0 auto 10px;}

.arrow1 {margin: 0 auto ; text-align:center; padding: 0 1em 0 0 ;}

.arrow1 > img {transform: rotate(-90deg);}



.comment1 { background: url(../images/bg_maincon_right.png) 100% 85% no-repeat #ebf2f8; background-size: auto 250%; padding: 2em 1em; margin: 30px 0; border: 1px solid #cedeec; font-size: 1.1em; line-height: 1.4; color: #0062ad; text-align: center;}



/* 경영방향 */

.tbl_wrap2 {background: #fff !important; padding: 0 !important; margin: 0 !important;}

.tbl_view.service {margin: 15px 0 30px; border-top: 2px solid #435374;}

.tbl_view.service thead th {font-weight: 500; text-align: center;}

+.tbl_view.service thead th, .tbl_view.service tbody th, .tbl_view.service td {padding: .625em; font-size: .8em; vertical-align: middle; border: 1px solid #e5e5e5; text-align: center;} /*text-align: center; 표 테이블 왼쪽 정렬*/

.tbl_view.service tbody th, .tbl_view.service td {font-weight: 400; color: #666}

.tt4 {position: relative; font-size: 26px; margin-bottom: 20px; text-align: center; color: #262626 }

.arrow2 {margin: 30px auto 0; text-align:center;}

.arrow2 > img {transform: rotate(180deg);}

.goal_list1 {font-size: 0; text-align: center;}

.goal_list1 > li {width: 170px; display: inline-block; margin-right: -4%; font-size: 18px; color: #fff; text-align: center; padding: 10px; height: 170px; line-height: 1; border-radius: 50%; opacity: .9; background: #4067b9; transition: all .3s ease;}

.goal_list1 > li:last-child {margin-right: 0;}

.goal_list1 > li:nth-child(even) {background: #df3b42}

.goal_list1 > li > img {display: block; margin: 1em auto .5em;}

.goal_list2 {margin: 0 auto 3em; text-align: center;}

.goal_list2 > li {display: inline-block;  width: 20%; margin: 0 2%; position: relative;}

.goal_list2 > li::after {content: '+'; position: absolute; right: -15%; top: 25%; font-size: 30px; color: #262626; font-weight: 600;}

.goal_list2 > li:last-child::after {display: none;}

.goal_list2 > li > ul {padding: 1em; border-radius: 5px; background: #f2c201;}

.goal_list2 > li:nth-child(even) > ul {background: #81b826;}

.goal_list2 > li > ul > li { text-align: center; color: #fff; font-size: .865em;}

.goal_list3 {text-align: center;}

.goal_list3 > li {width: 250px; height: 250px; border-radius: 50%; margin: 2% -2%; background:transparent; border: 10px solid #1041a8; text-align: center; display: inline-block; vertical-align: middle;}

.goal_list3 > li > h3 {font-size: 2.4em; font-weight: 700; margin-top: 65px; margin-bottom: 10px; color: #1041a8;}

.goal_list3 > li > p {color: #222; font-size: 1em; line-height: 1.4;}

.goal_list3 > li:nth-child(2) {border-color: #df3b42;}

.goal_list3 > li:nth-child(2) > h3 {color: #df3b42;}



/* 정보공개 */

.info_wrap {text-align: left;}



/* 사이트맵 */

.sinmungo{background: url(../images/bg_maincon_right.png) 100% 85% no-repeat #ebf2f8; background-size: auto 100%; padding: 2em; margin: 30px 0; border: 1px solid #cedeec;}

.sinmungo ul {line-height: 1.4; color: #0d3588;}

.sinmungo ul > li {text-align: left; padding-left: 20px; position: relative; margin-bottom: 10px; line-height: 1.5; font-weight: 500;}

.sinmungo ul > li::before {content:''; width: 13px; height: 13px; display: inline-block; vertical-align: middle; position: absolute; left: 0; top: 6px; background: url(../images/bullet02.png) 0 0 no-repeat;}

.sinmungo ul > li > ul {margin: .5em 0;}

.sinmungo ul > li > ul > li { padding-left: 12px; margin-bottom: 5px; font-weight: 400; color: #203c74; font-size: .9em;}

.sinmungo ul > li > ul > li::before {content: '-'; background: none; width: 5px; height: 10px; display: inline-block; vertical-align: middle; margin-top: -5px;}

.sinmungo .sinmungo_btn { text-align: center; font-size: .9em; display: block; margin: 0 auto;}

.sinmungo .sinmungo_btn a {color: #fff !important; display: block; width: 80%; max-width: 250px; margin: 2em auto; padding: 6px 10px;background: #266ee6;  border-radius: 2px; box-sizing: border-box;}

.sinmungo .sinmungo_btn a::after {content:''; display: inline-block; width: 16px; height: 15px; vertical-align: middle; margin-top: -4px; margin-left: 5px; background: url(../images/icon_download.png) 0 0 no-repeat;}

.sinmungo .sinmungo_btn a:hover {background: #1e5ec8;}



/* 사이버신고센터 */

.sub6_3_1_list {font-size: 0; margin-bottom: 30px;}

.sub6_3_1_list > li {display: inline-block; width: calc(20% - 30px); margin-right: 30px; font-size: 16px; background: #3b4da8; min-height: 200px; padding: 10px; box-sizing: border-box; border-radius: 5px; vertical-align: top; position: relative; }

.sub6_3_1_list > li::after {content:''; position: absolute; right: -18px; top: 50%; width: 8px; height: 14px; background: url(../images/btn_popupzone_right.png) 0 0 no-repeat; background-size: 100% auto;}

.sub6_3_1_list > li:nth-child(even) {background: #363f5b;}

.sub6_3_1_list > li:last-child {margin-right: 0;}

.sub6_3_1_list > li:last-child::after {display: none;}

.sub6_3_1_list > li > img {display: block; margin: 1em auto; }

.sub6_3_1_list > li > p { color: #fff; font-size: 1em; font-weight: 400; text-align: center; font-size: 13px;}

.sub6_3_1_list > li > p > b {font-size: 16px; font-weight: 500; display: block; margin-bottom: 5px;}

.sub6_3_1_list > li > p > small {font-size: 12px; font-weight: 300;}



/* 법정의무교육 */

.comment_wrap {margin: 30px 0; position: relative;}

.comment_wrap > p {font-size: .9em; color: #444; margin-bottom: 10px;}

.comment_wrap > button {height: 80px; line-height: 80px; width: 100px; font-size: 16px; display: inline-block; vertical-align: top; position: absolute; right: 0; bottom: 0; box-shadow: inset 0px -38px 0 0 rgb(0,0,0, .1)}

.comment_wrap > textarea {width: calc(100% - 115px); margin-right: 10px; font-size: 16px; display: inline-block; vertical-align: top; height: 80px;}

.comment_list{border-radius: 10px; overflow: hidden;}

.comment_list ul li{ border:1px solid #eee; background: #f8fafc; margin-bottom: 10px; border-radius: 5px; padding: 1em; box-sizing: border-box;}

.comment_list ul li dl{position:relative; font-size: 14px;}

.comment_list ul li dl dt{text-align:left; margin-bottom: 3px; line-height: 1.4;}

.comment_list ul li dl dt span.date{color:#999; font-size: 12px; margin-left: 10px;}

.comment_list ul li dl dd{color: #333;}



/* 선납시스템 */

.sub4_1_3_list {font-size: 0; margin-bottom: 30px;}

.sub4_1_3_list > li {display: inline-block; width: calc(25% - 23px); margin-right: 30px; font-size: 16px; background: #3b4da8; min-height: 260px; padding: 10px; box-sizing: border-box; border-radius: 5px; vertical-align: top; position: relative; }

.sub4_1_3_list > li::after {content:''; position: absolute; right: -18px; top: 50%; width: 8px; height: 14px; background: url(../images/btn_popupzone_right.png) 0 0 no-repeat; background-size: 100% auto;}

.sub4_1_3_list > li:nth-child(even) {background: #363f5b;}

.sub4_1_3_list > li:last-child {margin-right: 0;}

.sub4_1_3_list > li:last-child::after {display: none;}

.sub4_1_3_list > li > img {display: block; margin: 1em auto; }

.sub4_1_3_list > li > p { color: #fff; font-size: 1em; font-weight: 400; text-align: center; font-size: 13px; word-break: keep-all;}

.sub4_1_3_list > li > p > b {font-size: 16px; font-weight: 500; display: block; margin-bottom: 5px;}

.sub4_1_3_list > li > p > span {color: #ffe56c;}



/* 한 눈에 보는 체육시설 */

.con_4_list {margin: 30px 0;}

.con_4_list > li {display: inline-block; padding: .5em 2em; border: 1px solid #ededed; font-size: .9em; margin: 5px; background: #f4f4f4; color: #222; border-radius: 3px; box-sizing: border-box;}

.con_4_list > li:hover {cursor: pointer; background:#df3b42; color: #fff;  border-color:#df3b42;}



/* 축구장 예약신청 */
.calendar-head {margin: 50px 0;}
.calendar-head .navi {font-size: 1.625em; font-weight: 500; color: #141b2f; vertical-align: middle; line-height: 1;}
.calendar-head .navi a {margin: -4px 20px 0; display: inline-block;}
.calendar-head .navi a:hover {opacity: .9;}
.calendar-head .navi .prev > img {transform: rotate(180deg);}
.calendar-head .calendar_comment {text-align: right;}
.calendar-head .calendar_comment > p {display: inline-block; font-size: .9em; color: #666;}
.calendar-head .calendar_comment > p.possible {margin-right: 5px;}
.calendar-head .calendar_comment > p.possible::before {content:''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #df3b42; margin-top: -5px; margin-right: 5px; vertical-align: middle}
.calendar-head .calendar_comment > p.impossible::before {content:''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3a6dc3; margin-top: -5px; margin-right: 5px; vertical-align: middle;}
.tbl_list.calendar { text-align: center; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.tbl_list.calendar th, .tbl_list.calendar td {padding: 7px; vertical-align: top; border-right: 1px solid #ddd;}
.tbl_list.calendar th {font-weight: 400;background-color: transparent;}
.tbl_list.calendar td {position: relative;background-color: transparent;} /* background: #fff; */
.tbl_list.calendar td .day {text-align: center; font-size: 16px; color: #666; display: block; margin: 8px;}
.tbl_list.calendar td .time_list {margin: 10px 0;}
.tbl_list.calendar td .time_list > li {font-size: 12px; margin-bottom: 3px;}
.tbl_list.calendar td .time_list > li .tm {color:#666;}
.tbl_list.calendar td .time_list > li .tm::before {content: ''; width: 12px; height: 12px; display: inline-block; margin: -2px 5px 0 0; background: url(../images/icon_time.png) 0 0 no-repeat; vertical-align: middle;}
.tbl_list.calendar td .time_list > li .org_nm { margin-left: 5px; color: #333;}
.tbl_list.calendar td .time_list > li .org_nm::before {content:':';  margin-right: 4px;}
.tbl_list.calendar td .time_list > li .visible {color: #0a7dff; }
.tbl_list.calendar td .impossible {width: 10px; height: 10px; border-radius: 10px; display: block; position: absolute; left: 25px; top: 12px; background: #da3a40; }
.tbl_list.calendar td .possible {width: 10px; height: 10px; border-radius: 10px; display: block; position: absolute; left: 25px; top: 12px; background: #3a6dc3  ; }
.tbl_list.calendar td .btn_time {width: 70px; height: 15px; position: absolute; top: 15px; right: 15px; display: none; border: 0; text-align: left; background-color: transparent;}
.tbl_list.calendar td .btn_time::after {content: ''; display: inline-block; width: 12px; height: 12px; background-image: url(../images/bg_select.png); background-repeat: no-repeat; background-position: center; margin-left: 5px;}
.tbl_list.calendar td .btn {margin: 5px 0;}
.tbl_list.calendar td .btn:disabled {background:#aaa !important; cursor: default; opacity: 1; }
.tbl_list.calendar td.today {background: #fffdeb;}
.tbl_list.calendar td.selected {box-shadow: inset 0 0 0 1px #f44336;}
.unable-list {margin-top: 20px; text-align: left;}
.unable-list > strong {margin:40px 0 20px 0; padding:0 0 0 20px; font-size: 1.25em; color:#1e293f; font-weight: 600; line-height:1; background: url(../images/bullet01.png) 0 8px no-repeat; }
.btn-rsvon {border: 0; text-align: center; letter-spacing: -1px; display: inline-block; vertical-align: middle; padding: 0 12px; font-size: 15px; background: #3e5bff; color: #fff; height: 30px; line-height: 30px; text-align: center; border-radius: 30px; margin-bottom: 15px; word-break: keep-all;}
.btn-rsvon::before {content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border: 3px solid #fff; border-radius: 10px; margin: -2px 3px 0 0;}
.btn-rsvoff {border: 0; text-align: center; letter-spacing: -1px; display: inline-block; vertical-align: middle; padding: 0 12px; font-size: 15px; background: #fff; border: 1px solid #f44336; color: #161b30; height: 30px; line-height: 28px; text-align: center; border-radius: 30px; margin-bottom: 15px; box-sizing: border-box; word-break: keep-all;}
.btn-rsvoff::before {content: ''; display: inline-block; vertical-align: middle; width: 12px; height: 12px; border: 0; margin: -2px 3px 0 0; background: url(../images/ico_x.png) no-repeat center; background-size: 100% auto;}
.btn-rsvon:focus, .btn-rsvoff:focus {outline: none;}
.daylist-wrap {float: left; width: calc( 80% - 20px );}
.timelist-wrap {float: right; width: 20%; border: 1px solid #dddddd; border-top: 2px solid #7b7d97; height: 541px; background: #fff;}
.timelist-wrap *:focus {outline: none;}
.timelist-wrap h4 {background: #f4f6ff; height: 40px; font-weight: 400; text-align: center; line-height: 40px;}
.timelist-wrap input[type=checkbox] {width: 16px; height: 16px; border: 1px solid #999999; cursor: pointer;}
.timelist-wrap input[type=checkbox]:checked {border: none;}
.timelist-wrap input[type=checkbox]:checked::before {background-color: #3e5bff; border-color: #3e5bff;}
.timelist-wrap ul {padding: 12px;}
.timelist-wrap ul li {padding: 0 5px 1px; font-weight: 300; color: #000;}
.timelist-wrap ul li label {cursor: pointer;}
.btn-rsv-wrap {margin: 50px 0; text-align: right;}
.btn-rsv-wrap button, .btn-rsv-wrap a {width: 150px; height: 50px; border: none; border-radius: 10px; color: #fff; font-size: 20px;}
.btn-rsv-wrap button:last-of-type, .btn-rsv-wrap a:last-of-type {margin-right: 0;}
.btn-t2 {margin: 0 10px;}
.btn-t2.bg-red {background: #f44336 !important;}
.btn-t2.bg-mint {background: #36f4a2 !important;}
.btn-t2.bg-green {background: #81b826 !important;}
.btn-t2.bg-gray {background: #ababab !important;}
@media screen and (max-width: 1420px) {
	.btn-rsvon, .btn-rsvoff {padding: 0 4px; font-size: 11px; width: 100%;}
	.btn-rsvoff::before {width: 6px; height: 6px; margin: -2px 2px 0 0;}
	.btn-rsvon::before {width: 4px; height: 4px; border: 2px solid #fff; margin: -2px 1px 0 0;}
}
@media screen and (max-width: 1200px) {
	.timelist-wrap h4 {font-size: 13px;}
	.timelist-wrap ul li {font-size: 13px; padding: 0 5px 6px;}
}
@media screen and (max-width: 768px) {
	.calendar-head {margin: 20px 0;}
	.calendar-head .navi {font-size: 1.3em;}
	.calendar-head .navi a img {width: 25px;}
	.daylist-wrap {width: calc( 100% - 150px );}
	.timelist-wrap {width: 140px; height: auto;}
	.btn-rsvon, .btn-rsvoff {font-size: 12px; width: 65px; height: 20px; line-height: 18px; margin-bottom: 0; float: right;}
	.btn-rsv-wrap {margin: 20px 0 60px; text-align: center;}
	.btn-rsv-wrap button, .btn-rsv-wrap a {width: 30%; height: 35px; border-radius: 6px; font-size: 15px; margin: 1%;}
}
/* 축구장 예약 시설안내 */
.place_content {text-align: left; font-size: 0;}
.place_content .place {font-size: 0;}
.place_content .place .place-slide {width: 50%; font-size: 16px; display: inline-block; vertical-align: top; border: 1px solid #ddd; box-sizing: border-box;}
.place_content .place .place-slide .swiper-slide img {width: 100%;}
.place_content .place .place_con h3 {font-size: 1.625em; color: #333; line-height: 1.4; margin-bottom: .5em; position: relative; padding-left: 20px;}
.place_content .place .place_con h3::before {content:''; display: inline-block; width: 12px; height: 12px; left: 0; top: 12px; background: url(../images/bullet01.png) 0 0 no-repeat; position: absolute;}
.place_content .swiper-button-prev.swiper-button-disabled, .place_content .swiper-button-next.swiper-button-disabled {opacity: .7; background: #7d818c;}
.place_content .gallery-thumbs {height: 20%; box-sizing: border-box; padding: 10px 0; }
.place_content .gallery-thumbs .swiper-slide {width: 25%; height: 100%; opacity: 0.4; }
.place_content .gallery-thumbs .swiper-slide-thumb-active {opacity: 1;}
.place_content .swiper-button-prev, .place_content .swiper-button-next {bottom: 45%; background-color: #1041a8; width: 40px; height: 40px; border-radius: 40px;}
.place_content .swiper-button-prev {left: -15px }
.place_content .swiper-button-prev::before {content:''; width: 40px; height: 27px; display: inline-block; background: url(../images/btn_mainvisual_left.png) 65% 100% no-repeat;}
.place_content .swiper-button-next {right: -15px }
.place_content .swiper-button-next::before {content:''; width: 40px; height: 27px; display: inline-block; background: url(../images/btn_mainvisual_right.png) 35% 100% no-repeat;}
.place_content .tt3 {background: url(../images/img_4_2_2.png) 0 5px no-repeat; font-size: 22px; padding: 5px 0 5px 24px; }
.place_content .place .place_con {width: 50%; font-size: 16px; display: inline-block; vertical-align: top; padding: 0 2.5em;}
.place_con dl dt {width:55px; font-weight:bold; background: url(../images/bullet02.png) no-repeat 20px 6px; padding-left: 40px;  padding-right: 10px; margin-bottom: 5px; position: relative;}
.place_con dl dt::after {display: block; content: ':'; margin-right: 10px; width: 5px; height: 20px; position: absolute; right: 0; top: 0; }
.place_con dl dd {width: 100%; margin-bottom: 5px; }
.place_con dl dt, .place_condl dd {float:left; color:#333;}



/* 로그인 / 회원가입 / 비밀번호찾기 */
.etc_content {display: block; font-size: 16px;}
.etc_content > h2 {text-align: center; font-size: 2em; margin: 0 0 1em 0;} 
.etc_content > .tabs #tab-button li {min-width: 200px;}
.etc_cate {text-align: center; margin-bottom: 20px; width: 100%; max-width: 768px; margin: 0 auto 50px;}
.etc_cate li {background: none; color: #222; display: inline-block;cursor: pointer; border: 1px solid #ddd; border-radius: 3px; height: 50px; line-height: 48px; font-size: 1.1em; margin-right: 10px; margin-bottom: 10px; box-sizing: border-box; width: calc(33% - 12px); overflow: hidden;}
.etc_cate li a {display: block;  padding: 0; }
.etc_cate li.active, .etc_cate li a:hover {background: #df3b42 !important; border: 0 !important; color: #fff;}
.etc_cate li.active a {color: #fff;}

.login_wrap {background: url(../images/bg_login.png) -10% 10% no-repeat #27acb3; padding: 5em 3em; width: 90%; max-width: 450px; box-sizing: border-box; border-radius: 10px; margin: 5em auto 2em; text-align: center;}
.login_wrap > p {color: #fff; line-height: 1.5; font-size: 1.5em; display: block; margin-bottom: 1.5em;}
.login_wrap > input {padding: 0 10px; height: 40px; line-height: 40px; width: 100%; border: 0; border-radius: 2px; margin-bottom: 10px;}
.login_wrap > button {padding: 0 10px; height: 50px; line-height: 50px; width: 100%; border: 0; border-radius: 2px; margin-top: 10px; color: #fff; background: #186d73; color: #fff; font-size: 1.25em;}
.login_wrap > button:hover {opacity: .9;}
.login_wrap > ul {margin: 1em 0; text-align: left;}
.login_wrap > ul > li {display: block; margin-bottom: 5px; font-size: .9em;}
.login_wrap > ul > li > a {color: rgba(255,255,255,.8); }
.login_wrap > ul > li > a:hover {color: rgba(255,255,255,1); text-decoration: underline;}
.login_wrap > ul > li > a::before {content: '*'; display: inline-block; margin-right: 2px;}

.join_wrap {margin: 5em auto 2em; width: 100%; max-width: 1400px;}
.join_wrap h3 {margin:40px 0 20px 0; padding:0 0 0 20px; font-size: 1.25em; color:#1e293f; font-weight: 600; line-height:1; background: url(../images/bullet01.png) 0 5px no-repeat; }
.join_wrap .box-scroll {border: 1px solid #ddd; height: 300px; overflow-y: scroll; padding: 1em; font-size: .9em; background: #f9f9f9;}
.join_wrap .box-scroll h4 {font-size: 1.1em; color: #262626;}
.join_wrap .box-scroll .box_type1 {height: auto; background: #fff;}
.join_wrap .box-scroll .tbl_view thead th {background: #ddd;}
.join_wrap .box-scroll .tbl_view tbody th {background: #eee;}
.join_wrap .box-scroll .list_la {font-size: .9em; color: #666;}
.join_check {text-align: right; margin: 1em 0; font-size: .9em; vertical-align: middle;}
.join_check input {margin-top: -3px;}

.comment2 {border: 5px solid #e5e5e5; padding: 1em; border-radius: 5px; position: relative; background: #fff; width: 100%; max-width: 768px; margin: 0 auto;}
.comment2::before {position: absolute; left: -5px; top: -5px; content:''; width: 33px; height: 33px; background: url(../images/bg_comment.png) 0 0 no-repeat;}
.comment2::after {position: absolute; right: -5px; bottom: -5px; content:''; width: 33px; height: 33px; background: url(../images/bg_comment.png) 0 0 no-repeat; transform: rotate(180deg);}
.comment2 ul li {display: block; color: #313e59; margin: 5px 0 ; padding: 0 0 0 20px; font-size: 1em; list-style: none; line-height: 1.6; font-weight: 500; word-break: keep-all; box-sizing: border-box; position: relative;}
.comment2 ul li::before {content:''; color: #666; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background: url(../images/bullet02.png) 0 0 no-repeat;}

.join_certify {width: 100%; max-width: 768px; font-size: 0; margin: 50px auto;}
.join_certify > li {display: inline-block; width: 50%; box-sizing: border-box; text-align: center; padding: 20px; vertical-align: top;}
.join_certify > li:nth-child(1) {border-right: 1px solid #ddd;}
.join_certify > li > img {display: block; margin: 0 auto 10px;}
.join_certify > li > p {font-size: 22px; font-weight: 500; color: #262626; word-break: keep-all;}
.join_certify > li > p span {font-size: .7em; display: block; font-weight:400; color:#444; line-height: 1.4; margin-top: 10px;}
.join_certify > li > button {font-size: 16px; background: #2760ff; color: #fff; transition: all .3s ease-in-out; margin-top: 15px; min-width: 150px;}
.join_certify > li > button:hover {opacity: .9;}
.join_address {font-size: 0; margin-bottom: 5px;}
.join_address > input[type=text] {display: inline-block; width: calc(100% - 80px)}
.join_address > button {width: 80px; height: 30px; vertical-align: top; border-radius: 0; margin-left: -1px; margin: 0;}

.comment3 {border: 5px solid #e5e5e5; padding: 2em; border-radius: 5px; position: relative; background: #fff; width: 100%; max-width: 768px; margin: 3em auto; text-align: center;}
.comment3::before {position: absolute; left: -5px; top: -5px; content:''; width: 33px; height: 33px; background: url(../images/bg_comment.png) 0 0 no-repeat;}
.comment3::after {position: absolute; right: -5px; bottom: -5px; content:''; width: 33px; height: 33px; background: url(../images/bg_comment.png) 0 0 no-repeat; transform: rotate(180deg);}
.comment3 > p {font-size: 1em; word-break: keep-all; color: #666; line-height: 1.4;}
.comment3 > p > b {display: block; font-size: 1.25em; color: #262626; margin-bottom: 15px;}
.comment4 {margin: 30px 0;}
.comment4 li {display: block; margin-bottom: 5px; font-size: .9em; color: #666;}


/* 대관신청 */

.datepicker {background: url(../images/icon_calendar.png) calc(100% - 10px) 50% no-repeat #fff;}

.select_time {height: 30px; line-height: 30px; width: 100px; margin-bottom: 5px; border: 1px solid #ccc; font-size: 13px;}

.reservation_check {margin-left: 5px;  font-size: 15px; display: inline-block; margin-top: -4px; vertical-align: middle;}

.reservation_policy {background: #f9f9f9; border: 1px solid #ededed;  padding: 1em; color: #666; line-height: 1.4; font-size: .9em; margin-bottom: 10px;}

.reservation_policy li {margin-bottom: 5px; padding-left: 10px; position: relative;}

.reservation_policy li::before {content:'-'; position: absolute; left: 0; top: 0;}

.reservation_select {background: #f9f9f9; padding: 1em; text-align: center; margin: 30px 0 50px 0; border: 1px solid #ccc;}

.reservation_select > select {display: inline-block; margin: 0 1em; width: 45%; max-width: 350px;}

.reservation_select.reservation_select2 > select {max-width: 250px;}



.reservation.active {background: #1580d2;}

.reservation-con {display: none; z-index: 1; position: absolute; right: 0; top: 25px; width: 240px; height: auto; background: #1580d2;

	font-size: 1.125em; padding-left: 30px; transition: all .3s ease; padding: 30px 0 10px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}

.reservation-con.show {display: block;}

.reservation-con li {display: block; border-top: 1px solid rgba(255,255,255,.2);}

.reservation-con li a {line-height: 36px; border-radius: 36px; color: #fff; display: block; text-indent: 25px; font-size: .865em; position: relative; text-align: left;}

.reservation-con li a::after {content:''; position: absolute; right: 25px; top: 12px; width: 11px; height: 11px; background: url(../images/bg_menu_list.png) 0 0 no-repeat;}

.reservation-con li a:hover {color: #8bd7ff;}



/* Media Query */

@media screen and (max-width: 1400px) {

    body, html {font-size: 15px;}

    footer .logo > img {display: block; margin: 0 auto .5em;}

    footer .footer_mark > div img {width: 90px;}

	.header_container .depth > li > a {padding: 40px 15px;}

	.header_container .depth > li > div > div > h2 {margin-left: 40px;}

	.header_container .depth > li > div > div > ul {width: calc(100% - 400px);}

	.quick_menu {padding: 0 20px}

}



@media screen and (max-width: 1280px) {

	.main_visual {width: 100%; float: none; max-width: 100%;}

	.statistics {width: 100%; float: none; max-width: 100%; margin-top: 20px; transition: all .3s ease-in-out;}

	.statistics ul li {margin-left: 0; width: 25%; height: auto; padding: 2em 0 3em; }

	.statistics ul li:nth-child(1), .statistics ul li:nth-child(2) {margin-bottom: 0}

	.sub_visual {background-position: 65% 0;}

	.statistics ul li p {font-size: 1em; font-weight: 400; line-height: 1.4;} /*메인메뉴 변경에 따른 css 추가*/
}



@media screen and (max-width: 1200px) {

	.header_container {height: 70px;}

	.header_container .depth {display: none;}

	.menu_btn {top: 22px;}

	.menu_btn.active {right: 17px;}

	.header_container h1 > a img {width: 80%;}

	.header_etc {padding: 1.5em 20px 1.5em; background: #fff; border-top: 1px solid #ddd;}

	.sub_visual.sub02 {background-position: center 0 !important;}

}





@media screen and (max-width: 1160px) {

	.sub6_3_1_list > li {width: calc(33% - 30px); margin-bottom: 20px;}

	.sub4_1_3_list > li {width: calc(50% - 30px); margin-bottom: 20px;}
	
}



@media screen and (max-width: 1100px) {

    footer {text-align: center; padding: 2.5em 0;}

    footer .logo {display: block; margin-bottom: 1em; font-size: 1em;}

    footer .logo > img {width: 100px;}

    footer .footer_content {display: block; margin-left: 0;}

    footer .footer_content > ul {margin-bottom: 1em;}

    footer .footer_content > ul > li {margin-bottom: .25em;}

    footer .footer_mark {position: relative; top: auto; right: auto; text-align: center; margin-top: 1em;}

	.navigation > ul {text-align: left;}	

	.navigation > ul > li {vertical-align: top; width: 20%;}

	.navigation > ul > li > a {display: block; width: 100%; height: 100%; padding: 0 1em; text-align: left; box-sizing: border-box; line-height: 50px; color: #fff; font-weight: 300; white-space: nowrap; overflow: hidden; border-right: 1px solid rgba(255,255,255,.4); position: relative;}

	.navigation > ul > li:last-child > a {font-weight: 400;}

	.navigation > ul > li:last-child > a::after {display: block;}

	.navigation > ul > li:first-child {width: 50px;}

	.navigation > ul > li:first-child > a, .navigation > ul > li:first-child > a:hover {color: transparent}

	.navigation > ul > li:first-child > a::after{display: none; height: 0;}

	.navigation > ul > li > a::after {transform: rotate(90deg); top: 18px; right: 10px; width: 9px;}

	.navigation > ul > li:hover > a {color: #f6e2ae;}	

	.navigation > ul > li .depth {display: block; background: #fff; border: 1px solid #3f83e4; box-sizing: border-box; visibility: hidden; opacity: 0; transition: opacity .3s; margin-top: -1px; text-align: left; height: 0; position: relative;}

	.navigation > ul > li:hover .depth {visibility: visible; opacity: 1; height: auto;}

	.navigation > ul > li.active .depth {visibility: visible; opacity: 1; height: auto;}

	.navigation > ul > li.active .depth > li, .navigation > ul > li .depth > li {display: block; height: auto;}

	.navigation > ul > li .depth > li > a {display: block; box-sizing: border-box; padding: .3em 1em; color: #555; font-weight: 400; font-size: .9em;}

	.navigation > ul > li .depth > li > a:hover {color: #fff; background: #93baf2;}

	.navigation > ul > li .depth > li > a.active {background: #3f83e4; color: #fff;}



	.header_etc .reservation {display: none;}

	.header_etc .search {margin: 0; max-width: 1000px;}

	.header_etc .weather {left: auto; right: 0;}

	.main-content {background: #fff;}	

	.board {padding: 2em 1em;}

	.board div.tt {width: 100%; border: 1px solid #bbbbbb; margin: .5em 0; position: relative;}

	.board div.tt.active {border: 0;}
	
	/*+이미지 가상태그 제거*/
	/* .board div.tt::after {position: absolute; right: 20px; top: 20px; background: url(../images/bg_notice.png) 0 0 no-repeat; width: 18px; height: 18px; content:'';} */
	.board div.tt span.ntcTotalView {position: absolute; right: 20px; top: 20px; background: url(../images/bg_notice.png) 0 0 no-repeat; width: 18px; height: 18px; content:'';}

	.board div.content {width: 100%; position: relative; top: auto; right: auto; transition: none;}

	.board div.content > ul {padding: 15px 0; background: #f5f5f5;}

	.board div.content > ul > li {width: 100%; height: auto; margin-right: 0; background: #f5f5f5;}

	.board div.content > ul > li .date {top: .75em; margin-top: 0; display: block; position: absolute; right: 1.5em;}

	.board div.content > ul > li .con {display: none;}

	.board div.content > ul > li .subject {width: calc(100% - 170px); font-size: 1em; height: 1.3em;  display: inline-block; margin: 0; vertical-align: middle; -webkit-line-clamp: 1; white-space: nowrap;}

	.board div.content > ul > li .new {display: inline-block; position: relative; top: auto; right: auto; margin-right:.25em; width: 20px; height: 20px; line-height: 20px; font-size: .8em; margin-top: -2px;}

	.board div.content > ul > li .tag {margin-right:.25em;}

	.board div.content > ul > li a {border: 0; padding: .5em 1em ;}

	.board div.content > ul > li a:hover {border-color: transparent;}

	.menu_list li > a {padding: 0 0 0 47px;}

	.menu_list li > a::before {left: 15px;}

	.menu_all .list > li {width: 33.3333%;}		

	.sub_wrap {background: #fff;}

	.left_menu {display: none;}

	.sub_content {width: 100%; margin-left: 0;}	
	
}





@media screen and (max-width: 990px) {

.reservation_select.reservation_select2 > select {display: block; width: 100%; max-width: 100%; margin: .25em auto;}

}

@media screen and (max-width: 860px) {

	.goal_list1  {max-width: 560px; margin: 0 auto;}

	.goal_list1 > li { margin:1%;}

	.goal_list2 > li {width: 45%; margin: 2%;}

	.goal_list2 > li::after {display: none}

}

@media screen and (max-width: 768px) {

    body, html {font-size: 15px;}

    footer .footer_mark > div img {width: 60px;}

    footer .footer_mark > div p {font-size: .865em; margin-top: 5px;}

	.header_member {display: none;}

	.navigation > ul > li:nth-child(1) {display: none;} 

	.header_container {background: transparent; /*border-bottom: 1px solid rgba(255,255,255,.7);*/ height: 100px;}

	.menu_btn {top: 33px;}

	.header_container h1 {position: relative; left: auto; top: 20px; text-align: center;}

	.header_container.main-header h1 > a p {color: #262626;}

	.header_container h1 > a p {color: #fff;}

	.header_container h1 > a img {height: 100%;}

	.header_container.main-header .menu_btn > span, .header_container.main-header .menu_btn > span::before, .header_container.main-header .menu_btn > span::after {background-color: #0062ad;}

	.menu_btn > span, .menu_btn > span::before, .menu_btn > span::after {background-color: #fff;}

	.header_etc {padding: 1.5em 1em;}

	.header_etc .weather > div .tt2 {display: none;}

	.board div.content > ul > li .subject {width: calc(100% - 210px);}	

	

	

	.header_container .menu_btn{background: url(../images/btn_menu_m.png) 0 0 no-repeat;}

	.menu_btn.active {background: url(../images/btn_menu_close.png) 0 0 no-repeat; width: 25px; background-size: cover !important; height: 25px; top: 18px;}

	.main_etc {background: #fff; padding: 1em 0}

	.main_etc .notice {width: 100%; }

	.main_etc .popup_zone {width: 100%; margin-left: 0;} 

	.main_etc .notice h2, .main_etc .popup_zone h2 {padding: 0 20px; font-size: 1.4em; font-weight: 600;}

	.main_etc .popup_zone h2 {margin-top: 1em;}

	.main_etc .swiper-button-prev, .main_etc .swiper-button-next {top: 2.5em; right: 20px;}

	.main_etc .popup_zone .swiper-play {top: 37px; width: 40px; right: 35px;}

	.main_etc .popup_zone .swiper-button-prev {right: 85px;}

	.main_etc .popup_zone .swiper-play2 {top: 35px; right: 35px;}

	.main_etc .notice button.more {right: 20px;}

	.main_etc .notice a {width: auto;  margin: 0 20px}

	.main_etc .popup_zone .list {padding: 40px 20px;}

	.quick_menu .swiper-pagination-fraction, .quick_menu .swiper-pagination-custom, .quick_menu .swiper-container-horizontal>.swiper-pagination-bullets {display: block; bottom: 20px}

	.quick_menu .swiper-pagination-bullet-active {width: 70px !important; height: 15px !important; }

	.quick_menu .swiper-pagination-bullet {width: 15px; height: 15px;}

	.quick_menu {padding: 0;}

	.quick_menu .quick {height: auto;}

	.quick_menu .quick > ul > li a {transform: scale(1); padding: 2.5em 0 4.5em;}

	.quick_menu .quick > ul > li a:hover {transform: scale(1); background: none;}

	.menu_list {width: 95%; margin: 2.5em auto  !important;}

	.menu_list li {width: 50%; border-right: 0; border-bottom: 1px solid #ddd; height: 50px; line-height: 50px;}

	.menu_list li:nth-child(1), .menu_list li:nth-child(3), .menu_list li:nth-child(5) {border-right: 1px solid #ddd;}

	.menu_list li:nth-child(5) {border-bottom: 0;}

	.menu_list li > a::before {top: 12.5px;}

	.menu_list li > a {padding: 0 0 0 50px;}	

	.menu_all .member {margin: 15px 0 0;}

	.menu_all .list > li {width: 50%;}

	.menu_all .list > li > a {margin: .25em 0; }

	.menu_all .list > li > ul > li a > img {width: 20px;}

	.navigation > ul > li {width: 33.333%;}

	.navigation > ul > li:nth-child(1) {display: none;}

	.sub_wrap > div {padding: 25px 0;}

	.sub_visual {height: 250px; margin-top: -100px;}

	.sub_visual > div {margin: 100px auto 0; text-align: left;}

	.sub_visual > div h2 {padding-top: 0; font-size: 3em;}

	.sub_visual.sub06 {background-position: 45% 0 !important;}

	.sub_visual.sub04 {background-position: 75% 0 !important;}

	.sub_visual.sub02 {background-position: 70% 0 !important;}

	.sub_visual.etc, .sub_visual.sub08 {background-position: 35% 0 !important;}



	.tbl_list {border: 0; width: 100%;}

	.tbl_list caption {font-size: 1.3em;}

	.tbl_list thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

	.tbl_list tr {border-bottom: 0; display: block;  font-size: .95em; margin-bottom: .625em; background: #f6f6f6; padding: 1em .5em; border: 1px solid #ededed;}

	/*테스트중 모바일 강습반 리스트 최대한 간결하게 나오도록*/
    .mobile_view {
        display: none !important;
    }
	/*************/

	.tbl_list td {border-bottom: 0; display: block; font-size: .95em; text-align: left; }

	.tbl_list td a {width: 85%;line-height: 1.4;}

	.tbl_list .subject {width: calc(100% - 70px); line-height: 1.4;}

	.tbl_list .notice .title a {font-weight: 400;}

	.tbl_list td::before {content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; margin-right: 10px; min-width: 50px;}

	.tbl_list td:last-child {border-bottom: 0;}

	.tbl_list .title {width: auto;}

	.tbl_list th, .tbl_list td {padding: .25em .65em;}

	.tbl_list .notice td {background: transparent}

	.tbl_list .section {font-size: .95em; color: #444}

	.tbl_list td.sction::before {color: #262626}

	.tbl_list.tbl_reservation td::before {content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; margin-right: 10px; min-width: 100px;}

	.tbl_list.tbl_reservation td br {display: none;}

	.tbl_search {background: #fff; margin: 15px 0 ; text-align: center;}

/* 	.tbl_search > select {width: 80px;} */

	.tbl_search > button {padding: 0 15px;}

	/* .tab-button-outer {display: none;} */

	.tab-select-outer {display: block;}

	.history_list li span.year {font-size: 26px; padding-left: 60px;}

    .history_wrap{background: none;}

	.history_wrap:before {display: inline-block;position: absolute;}

    .history_list {margin: 10px 0 0 0;}

	.history_list li .year:before {background: url(../images/bg_history_m.png) no-repeat;}

	.intro_tt {font-size: 1.25em; padding: 0 1em 1em 0;}
	
	.intro_tt > p br {display: none;}
	
	.intro_con2 {display:block;}
	
	.tbl_wrap2 {width: 100%; max-height: 500px; overflow: auto;  white-space: nowrap;}

	.sinmungo {background: url(../images/bg_maincon_right.png) 110% 110% no-repeat #ebf2f8;  background-size: auto 50%;}

	.answer img {width: 18px; height: 18px; margin-right: 5px;}

	.indent .img { width: 100%; position: relative; right: auto; top: auto;}

	.indent .img_left {width: 100%; min-height: auto;}

	.tbl_list.calendar {border: 0;}

	.tbl_list.calendar tr {background: none; border: 0; padding: 0;}

	.tbl_list.calendar th, .tbl_list.calendar td {border-right: 0; }

	.tbl_list.calendar td {background: #f6f6f6; margin-bottom: 10px; border-radius: 5px; overflow: hidden; padding: 1em; border: 1px solid #ddd;}

	.tbl_list.calendar td:last-child {border-bottom: 0;}	

	.tbl_list.calendar td::before {float: none; font-size: 18px; margin-left: 10px;}

	.tbl_list.calendar td .day {display: block; font-size: 16px; color: #333; font-weight: 600; float: left; margin-left: 22px;}

	.tbl_list.calendar td .day::after {content:'일'}

	.tbl_list.calendar td.today {border:1px solid #edead0;}

	.tbl_list.calendar td.day_none .day {display: none;}

	.tbl_list.calendar td .btn {display: block; margin: 1em auto;}

	.tbl_list.calendar td .btn_time {display: block;}

	.tbl_list.calendar td .btn_time.show::after {transform: rotate(180deg);}

	.tbl_list.calendar td .time_list {display: none;}

	.tbl_list.calendar td .time_list.show {display: block;}

	.tbl_list.calendar td .time_list > li {font-size: 16px; display: inline-block; width: 32%; text-align: center;}

	.tbl_list.calendar td .impossible, .tbl_list.calendar td .possible {width: 12px; height: 12px; border-radius: 12px;left: 17px; top: 20px; }	

	.tbl_list.calendar td .ossible {width: 12px; height: 12px; border-radius: 12px;left: 105px; top: 22px; }

	.tbl_list.calendar td.day_none {display: none;}

	.place_content .place .place-slide {width: 100%; display: block;} 

	.place_content .place .place_con {width: 100%; display: block; padding: 1.5em 1em; background: #f9f9f9;}

	.place_con dl dt {background: url(../images/bullet02.png) no-repeat 0 6px; padding-left: 20px;}

	.establish_wrap {background: url(../images/img_7_2_1.jpg) 50% 0 no-repeat; height: auto; padding-top: 280px; margin-bottom: 20px;}

	.establish_wrap > div {position: relative; bottom: auto; left: auto; display: inline-block; width: 31%; vertical-align: top; padding: 2em 1em; box-sizing: border-box; border-radius: 5px; min-height: 250px;}

	.establish_wrap > div > h4 {font-size: 1.25em;}

	.establish_wrap > div > p, .establish_wrap > div > ul li {font-size: .9em;}

	.establish1 {background: #e9effa;}

	.establish2 {background: #edf9e9;}

	.establish3 {background: #faf1e9;}

	.establish4 {margin: 3em auto;}

	.establish4 > div {display: block; vertical-align: top;}

	.establish4 > div > ul { width: 100%; height: auto; margin: 0 auto;}

	.establish4 > div > p {width: 100%; height: auto; margin: 0 auto;}

	.arrow1 > img {transform: rotate(0deg);}

	.arrow1 {padding: 0; margin: 0 0 1em 0;}

	.reservation_select > select {display: block; width: 100%; max-width: 100%; margin: .25em auto;}
	
	.tbl_wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tbl_list2 {
        min-width: 1200px; 
    }
    
    .tbl_list2 td a{
    	display: inline-table;
    }
}

@media screen and (max-width: 680px) {

	.sub6_3_1_list > li {width: calc(50% - 30px);} 

	.etc_cate li {font-size: 1em; margin-right: 0; width: 32%;}
}

@media screen and (max-width: 560px) {

	body, html {font-size: 14px;}

	.btn {margin: 3px 2px; height: 32px; line-height: 32px; font-size: 13px; padding: 0 16px; box-shadow: inset 0px -16px 0 0 rgb(0, 0, 0, .1)}

	.header_container {height: 60px;}





	.menu_all {padding: 0 15px;}

	.menu_all .member {margin: 0;}

	.header_container h1 {top: 15px; text-align: left;}

	.header_container h1 > a p {font-size: 1.25em;}

	.header_container h1 > a img {width: 45%;}

	.menu_btn {top: 15px;}

	.header_etc .weather {top: 10px;}

	.header_etc .search {width: 60%;}

	.header_etc .search > button {width: 50px}

	.header_etc .search > button > img {width: 20px; margin-top: -5px;}

	.header_etc .search > input[type=text] {width: calc(100% - 40px);}

	.header_etc .weather > img {width: 25px; margin-right: 5px;}

	.board div.content > ul > li .date {display: none;}

	.board div.content > ul > li .subject {width: calc(100% - 135px);}

	.statistics {margin-top: 0;}

	.statistics ul li {width: 50%; font-size: 1em; padding: .5em 0 1em;}

	.statistics ul li img {width: 60px;}

	.statistics ul li p > b {font-size: 1.5em;}	

	.main_visual .swiper-button-prev, .main_visual .swiper-button-next {bottom: 25px;}

	.main_visual .swiper-pagination-fraction {bottom: 12.5px; width: 175px; left: 25px;}

	.main_visual .swiper-button-prev {left: 110px;}

	.main_visual .swiper-button-next {left: 170px;}

	.main_visual .swiper-play {bottom: 24px; left: 135px;}

	.board div.tt {height: 45px; line-height: 45px;}

	.board div.tt.active::after, .board div.tt::after {right: 15px; top: 12.5px;}

	.quick_menu .quick > ul > li a p {font-size: 1em;}

	.header_etc {padding: 1.5em 20px 1.5em}

	.menu_all .list > li {width: 100%; border-bottom: 1px solid #ccc;}

	.menu_all .list > li > ul > li a {font-size: 1.25em; margin: 15px 0;}

	.footer_top > div > ul > li a {font-size: 1.25em;}

	.sub_content > h2 {font-size: 1.5em;}

	.sub_visual {height: 150px; margin-top: -60px;}

	.sub_visual > div {margin: 45px auto 0;}

	.sub_visual > div h2 {padding-top: 20px; font-size: 2.5em; text-align: center;}

	.sub_visual > div p {display: none;}

	.navigation {height: 40px;}

	.navigation > ul > li > a {line-height: 40px;}

	.tbl_list td a {width: 75%;}

	.tbl_search > input[type=text] {width: 40%;}

	.tbl_view tbody th {width: 70px;}

	.tbl_view tbody th, .tbl_view tbody td {padding: .625em 1em; font-size: .9em;}

	.page li a {display: block; width: 30px; height: 30px; line-height: 28px;}

	.page li a:hover, .page li a.active {display: inline-block; width: 30px; height: 30px; line-height: 28px;}

	.gallery_wrap > ul > li {width: calc(50% - 20px);}

	.map_address li span {margin-left: 0;}

	.con1_1_1 > ul {padding: 2em 1.5em;}

	.history_list li .info {width: 100%;padding-left: 20px;}

	.history_list li .info ul li {padding-left: 40px; margin-top: 15px; position: relative; }

	.history_list li .info strong {position: static; display:block; font-weight: 600;}

	.history_list li .info ul li::before {content:''; width: 30px; height: 1px; position: absolute; left: 0; top: 21px; background: url(../images/bg_history2.png) 0 0 repeat-x;}

	.tbl_list.calendar td .time_list > li {width: 49%; font-size: 13px; }

	.etc_cate li {width: 49%; margin-bottom: 0; height: 45px; line-height: 43px;}

	.goal_list3 {margin: 8% auto 4%;} 

	.goal_list3 > li {margin: -4% 0;}

	.navigation > ul > li > a::after {top: 13px; right: 8px;}

}



@media screen and (max-width: 520px) {



.sub4_1_3_list > li {width: 100%; margin-right: 0; margin-bottom: 30px; min-height: auto; padding: 20px; }

.sub4_1_3_list > li::after {transform: rotate(90deg); right: 50%; top: auto; bottom: -22px}

.sub4_1_3_list > li > p {font-size: 16px;}

.sub4_1_3_list > li > p > b {font-size: 22px;}

.join_certify > li > p{font-size: 16px;}

.goal_list1 > li {width: 120px; height: 120px; font-size: 16px;}

.goal_list1 > li > img {width: 50%; margin: 1em auto 0;}

.establish_wrap > div {width: 100%; min-height: auto; margin-bottom: 15px;}

.establish_wrap > div > h4 {font-size: 1.4em;}

.establish_wrap > div > p, .establish_wrap > div > ul li {font-size: 1.1em;}


    .tbl_list2 td a{
    	display: inline-table;
    }

}



@media screen and (max-width: 480px) {

	.join_certify > li {width: 100%;}

	.join_certify > li > p {font-size: 22px;}

	.join_certify > li:nth-child(1) {border-right: 0; border-bottom: 1px solid #ddd;}
	
	
    .tbl_list2 td a{
    	display: inline-table;
    }
	
}

/*a태그 마우스 커서*/
a{
	cursor: pointer;
}


/*광산구청 전용*/


/* 타이틀 및 안내문 */
.form-header { border-bottom: 1px solid #e1e5eb; padding-bottom: 20px;  padding-top: 20px;/*  margin-bottom: 30px; */ }
.tit_type { font-size: 24px; color: #1a1a1a; font-weight: 700; margin-bottom: 15px; }
.tit_type span { font-size: 16px; color: #007bff; font-weight: 400; margin-left: 10px; }
.info-list { list-style: none; background: #f8f9fb; padding: 20px; border-radius: 8px; }
.info-list li { font-size: 16px; color: #666; position: relative; padding-left: 15px; margin-bottom: 5px; }
.info-list li::before { content: "•"; position: absolute; left: 0; color: #007bff; }

/* 테이블 서식 */
.tbl-form { width: 100%; border-top: 2px solid #0056b3; }
.tbl-form th { background: #f9fbff; padding: 20px; text-align: left; font-size: 15px; color: #333; border-bottom: 1px solid #eee; }
.tbl-form td { padding: 15px 20px; border-bottom: 1px solid #eee; }
.required_form { color: #e74c3c; margin-right: 4px; font-style: normal; }

/* 입력창 및 셀렉트박스 공통 */
.input_text, select { 
    height: 50px; border: 1px solid #ddd; border-radius: 6px; padding: 0 15px; 
    font-size: 15px; color: #333; transition: all 0.3s; 
}
.input_text:focus, select:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); outline: none; }
.full-width { width: 100%; }
.tac_align { text-align: center; }

/* 커스텀 라디오 버튼 */
.custom-radio { display: flex; align-items: center; cursor: pointer; gap: 8px; position: relative; }
.custom-radio input { display: none; }
.radio-mark { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 50%; position: relative; transition: 0.3s; }
.custom-radio input:checked + .radio-mark { border-color: #007bff; background: #007bff; }
.custom-radio input:checked + .radio-mark::after { 
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
.label-txt { font-size: 15px; color: #444; font-weight: 500; }

/* 레이아웃 보조 */
.flex-row { display: flex; }
.gap8 { gap: 8px; }
.gap30 { gap: 30px; }
.ac_layout { align-items: center; }
.flex1 { flex: 1; }
.w120_layout { width: 120px; }
.mgt40_layout { margin-top: 40px; }
.dash_layout { color: #999; font-weight: bold; }

/* 부모 컨테이너에서 설정 */
.btn-wrap_cont {
    display: flex;          /* 플렉스 박스 선언 */
    justify-content: center; /* 가로 방향 가운데 정렬 */
    align-items: center;     /* 세로 방향 가운데 정렬 (필요시) */
    gap: 16px;              /* 버튼 사이 간격 */
    margin-top: 40px;       /* 위쪽 여백 */
    width: 100%;            /* 전체 너비 확보 */
}
/* 버튼 */
.btn-primary-blue { 
    background: #007bff; color: #fff; border: none; padding: 0 40px; height: 60px; 
    border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; transition: 0.3s;
}
.btn-primary-green { 
    background: mediumseagreen; color: #fff; border: none; padding: 0 40px; height: 60px; 
    border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; transition: 0.3s;
}
.btn-primary-blue:hover { background: #0056b3; box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3); }
.btn-primary-green:hover { background: #2e8b57; box-shadow: 0 5px 15px rgba(46, 139, 87, 0.3); }
/* 1. 스텝 바 스타일 수정 */
.join-step-bar { 
    margin-bottom: 60px; 
    padding: 0 40px; /* 양옆에 여백을 주어 바가 튀어나오지 않게 함 */
}

.join-step-bar ul { 
    display: flex; 
    justify-content: space-between; 
    position: relative; 
    list-style: none; 
    padding: 0; 
    margin: 0;
}

/* 바(Line) 설정 */
.join-step-bar ul::before { 
    content: ""; 
    position: absolute; 
    top: 30px; 
    /* 양 끝 아이콘의 중심까지만 선이 오도록 범위를 제한 */
    left: 10%;  
    right: 10%; 
    height: 2px; 
    background: #e1e5eb; 
    z-index: 1; 
}

.join-step-bar li { position: relative; z-index: 2; text-align: center; flex: 1; }

.join-step-bar .step-icon { 
    width: 60px; height: 60px; background: #fff; border: 2px solid #e1e5eb; 
    border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; 
    transition: all 0.3s; 
}
.join-step-bar .step-num { font-size: 24px; font-weight: 700; color: #b0b8c1; transition: 0.3s; }
.join-step-bar span { font-size: 14px; color: #888; font-weight: 500; display: block; }

/* 활성화된 스텝 */
.join-step-bar li.active .step-icon { border-color: #007bff; background: #007bff; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); }
.join-step-bar li.active .step-num { color: #fff; }
.join-step-bar li.active span { color: #007bff; font-weight: 700; }
/* 컨테이너 */
.join-container { max-width: 1000px; margin: 0 auto; padding: 50px 20px; font-family: 'Noto Sans KR', sans-serif; }

.join-title { font-size: 28px; text-align: center; color: #1a1a1a; font-weight: 700; margin-bottom: 10px; }
.join-card-grid { display: flex; gap: 30px; }
.join-card { 
    flex: 1; background: #fff; border: 1px solid #e1e5eb; border-radius: 20px; 
    padding: 50px 30px; text-align: center; transition: all 0.3s; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}
.join-card:hover { transform: translateY(-10px); border-color: #007bff; box-shadow: 0 15px 30px rgba(0,123,255,0.1); }

/* 인증 카드 중앙 정렬 레이아웃 */
.certify-card-wrap { 
    display: flex; 
    justify-content: center; 
    margin-top: 30px; 
}

.join-sub-title { text-align: center; color: #666; margin-bottom: 40px; }

.certify-card { 
    width: 100%;
    max-width: 500px;
    padding: 60px 40px; 
    text-align: center; 
}

/* 안내 사항 박스 스타일 */
.info-alert-box {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 25px 30px;
    border: 1px solid #ebedf0;
}

.info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #444;
}

.icon-info {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #6c757d;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-style: normal;
}

.info-desc-list {
    list-style: none;
    padding: 0;
}

.info-desc-list li {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px;
}

.info-desc-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #999;
}

.contact-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #d1d5db;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info a {
    color: #007bff;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
}

.tac_align { text-align: center; }
.txtMem_box{padding:3rem 5%;border:1px solid #dcdcdc; text-align: left; margin-top: 4rem; border-radius: 1rem;}
.txtMem_box dl{font-size:16px;color:#333;background:url(../images/ic_mem.png) no-repeat 0 0;}
.txtMem_box dt{position:relative;margin-bottom:3px;padding-left:14px;font-weight:bold; font-size: 18px;}
.txtMem_box dt+dt{margin-top:24px;}
.txtMem_box dd{margin-left:14px;line-height:23px;text-indent:-10px;padding-left:10px;}
.txtMem_box dd + dt{margin-top:20px}
.txtMem_box dd:before{content:"-";position:relative;top:-2px;margin-right:5px;vertical-align:top;}
.txtMem_box.type{padding:30px}
.txtMem_box.type dl{padding:0;background:none}

/* 카드 아이콘 (이미지 대신 이모지/CSS) */
.card-icon { 
    width: 120px; height: 120px; background: #f0f7ff; border-radius: 50%; 
    margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; 
    border: 1px solid #e1f0ff; 
}
.card-icon i { font-size: 60px; font-style: normal;} /* 이모지 크기 */

.card-info h3 { font-size: 24px; color: #1a1a1a; margin-bottom: 15px; font-weight: 700; padding:20px;}
.card-info h3 span { font-size: 16px; color: #007bff; font-weight: 400; display: block; margin-top: 5px; }
.card-info p { color: #666; line-height: 1.6; margin-bottom: 35px; font-size: 15px; min-height: 48px; }


/* 버튼 디자인 */
.btn-select { 
    width: 100%; height: 56px; border-radius: 10px; font-size: 16px; 
    font-weight: 700; cursor: pointer; border: none; transition: 0.3s; 
}
.btn-blue_join1 { background: #007bff; color: #fff; }
.btn-blue_join1:hover { background: #0056b3; box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3); }
.btn-green_join1 { background: #28a745; color: #fff; }
.btn-green_join1:hover { background: #218838; box-shadow: 0 5px 15px rgba(33, 136, 56, 0.3); }


.birth-select {
    display: flex;
    gap: 5px;
    align-items: center;
    padding-top: 15px;
}

.btn_join {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 0 40px;
    height: 60px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
}

.email_select{
    display: flex;
    align-items: center;
    gap: 5px;
}

.required_th { color: red; margin-left: 2px; }

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
    .mo-flex-col { flex-direction: column; align-items: stretch; }
    .mo-w100p { width: 100% !important; }
    .mo-hide { display: none; }
    .tbl-form th { width: 37%; padding: 15px 10px; font-size: 14px; }
    .tbl-form td { padding: 10px; }
    .btn-primary-blue { width: 100%; }
    .join-step-bar { padding: 0 20px; }
    .join-step-bar ul::before { 
        top: 22px; 
        left: 15%; 
        right: 15%; 
    }
    .join-step-bar .step-icon { width: 45px; height: 45px; }
    .join-step-bar .step-num { font-size: 18px; }
    .join-step-bar span { font-size: 11px; word-break: keep-all; }
    
    .join-container { padding: 30px 15px; }
    
    .certify-card { padding: 40px 20px; }
    .contact-info { flex-direction: column; align-items: flex-start; gap: 5px; }
    .info-alert-box { padding: 20px; }
    
    .txtMem_box{padding:16px;background:none}
	.txtMem_box dl{padding-left:0;background:none}
	.txtMem_box dt{font-size:14px;}
	.txtMem_box dt:before{width:4px;height:4px;}
	.txtMem_box dd + dt{margin-top:6px}
	.txtMem_box dd{line-height:17px;font-size:13px;text-indent:-8px;padding-left:8px;}
	.txtMem_box.type{padding:16px;}
	
	.join-card-grid { flex-direction: column; gap: 20px; }
    .join-card { padding: 40px 20px; }
    .card-icon { width: 100px; height: 100px; }
    .card-icon i { font-size: 50px; }
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
        margin-bottom: 20px;
    }

    /* 2. 테이블이 너무 찌부러지지 않도록 최소 너비 고정 */
    .tbl-form {
        min-width: 450px; /* 테이블이 유지해야 할 최소 가로 폭 */
    }

    /* 3. 모바일에서 입력창들이 한 줄에 너무 많이 나올 때를 대비 */
    .flex-row.mo-flex-col {
        flex-direction: column;
        gap: 10px;
    }

    /* 생년월일 select 박스 등이 모바일에서 깨질 때 */
    .birth-select {
        flex-wrap: wrap; /* 자리가 부족하면 아래로 떨어지게 함 */
    }
    
    .birth-select select {
        flex: 1; /* 등분하여 배치 */
        min-width: 80px;
    }
}