@charset "utf-8";
@import url(../fonts/Roboto/style.css);
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

@font-face { font-family: 'GmarketSans'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal;}
:root { 
	--color-main: #04729C;
	 --color-sub: #000;
	 --color-sub2: #000;
	 --color-line: #DADBDC;
	 --color-line2: #ABC;
	 --color-bg: #F8F8F8;
	 --color-bg2: #ABC;
	 --color-bgw: #fff;
	 --color-bgd: #000;
	 --color-text: #333;
	 --color-aga: #FFF;
	 --color-gra: linear-gradient(135deg, var(--color-sub) 0%, var(--color-main) 80%);
}
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: 100%; font: inherit;}
/* HTML5 display-role reset for older browsers */
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;}
i.fa { font-style: normal !important;}
mark { background-color: var(--color-bgw); font-style: italic; font-weight: bold;}
del { text-decoration: line-through}
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help;}
hr { display: block; height: 0; border: 0; border-top: 0; margin: 0; padding: 0;}
input, select { vertical-align: middle; resize: none}
caption, th, td { font-weight: normal}
table caption { visibility: hidden; width: 0; height: 0; overflow: hidden}
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal}
img { border: 0; vertical-align: middle; max-width: 100%}
legend { display: none}
.gratxt { background-image: -webkit-linear-gradient(0deg, var(--color-main), var(--color-sub)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
html { font-size: 10px;}

@media (max-width:1300px) { 
	html { 	font-size: 0.72vw; }
}
body, select, input, textarea, button { font-size: 2rem; line-height: 160%; font-family: "Pretendard", "맑은 고딕", "Nanum Gothic", "Microsoft Yahei", "Gulim", "dotum", Helvetica, sans-serif; color: var(--color-text); letter-spacing: -.06em;}
input { font-size: 1em;}
iframe#hiddenframe { display: none; width: 0; height: 0}
label, button { cursor: pointer}
input, button, select, textarea { outline: none;}
strong { font-weight: 700}
b { font-weight: 800}
.iconfont { font-size: 1em;}
a { color: var(--color-text); text-decoration: none}
a:hover, a:focus { color: var(--color-main); text-decoration: none}
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input[type=text], input[type=password], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none;}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { -webkit-box-shadow: 0 0 5px #9ed4ff; -moz-box-shadow: 0 0 5px #9ed4ff; box-shadow: 0 0 5px #9ed4ff; border: 1px solid #558ab7 !important;}
.deg45 { position: relative; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg);}
.deg-45 { position: relative; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
.deg90 { position: relative; transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg);}
.deg-90 { position: relative; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg);}
.deg180 { position: relative; transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
.placeholdersjs { color: #aaa !important;}
@media (min-width:751px) { 
	.nop { 	display: none; 	position: absolute; 	width: 0; 	height: 0; 	overflow: hidden; }
}
.clear { display: block; float: none; clear: both; border: 0; height: 0; width: 100%; font-size: 0 !important; line-height: 0 !important; overflow: hidden; margin: 0 !important; padding: 0 !important;}
.wrap { width: 1300px; margin: 0 auto; position: relative; zoom: 1;}
.wrap:after { display: block; visibility: hidden; clear: both; content: ""}
#bodyWrap { min-height: 100%; position: relative; overflow-x: hidden;}
@media (max-width:1300px) { 
	#bodyWrap { 	width: 100% }
 .wrap { 	width: auto; 	margin: 0 2vw; }
}
/* 팝업레이어 */
#hd_pop { z-index: 1000; position: relative; margin: 0 auto; left: 0; right: 0; height: 0}
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden}
.hd_pops { position: fixed; background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: .1em .1em .5em rgba(0, 0, 0, .3)}
.hd_pops.mobile { display: none;}
.hd_pops_footer { padding: .5em; background: #000; background: var(--color-main); color: #fff; display: flex; justify-content: space-between}
.hd_pops_footer button { margin-right: 0; padding: 0 1em; border: 0; background: none; color: #fff; font-size: .9em;}
/*헤더*/
#header { z-index: 20; height: 12rem;}
#header h1 { text-align: center; padding: 3rem 0; z-index: 2;}
#header h1 img { height: 6rem;}
#header ul { position: absolute; top: 50%; left: 0; display: flex; transform: translateY(-50%)}
#header ul li { margin-right: 3em;}
#header ul li a { display: flex;}
#header ul li a img { width: 3em;}
#header ul li a p { line-height: 1.2em; display: flex; flex-direction: column; justify-content: center;}
#header ul li a p span { display: block; color: var(--color-main);}
#header ol { position: absolute; top: 50%; right: 0; display: flex; transform: translateY(-50%)}
#header ol li { margin-left: 3em;}
#header ol li a { display: flex;}
#header ol li a img { width: 3em;}
#header ol li a p { line-height: 1.2em; display: flex; flex-direction: column; justify-content: center;}
#header ol li a p span { display: block;}
#btnMobileCall { display: none;}
#btnMobileMenu { display: none}

#btnEnglish{position:absolute; right:0; top:100%; width:3em; border:0; background:none; margin-top:1em}
/*상단메뉴*/
#topMenu { position: sticky; left:0; top:0; right:0; z-index: 4; }
#topMenu::before{ position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: #E3E3E3; opacity: 1; content:""}
#topMenu dl { position: relative; display: -webkit-flex; display: flex; justify-content: center;padding-right:4em}
#topMenu dl:before { position: absolute; top: 100%; right: 0; left: 0; width: 100%; height: 0; background: var(--color-main); content: ""; transition: all 0.2s ease; transition-delay: 300ms;}
#topMenu dl:hover:before { height: 6rem; transition-delay: 10ms;}
#topMenu dd { position: relative;}
#topMenu dd:before { position: absolute; top: 50%; width: 1px; height: 1em; background: #333; transform: translateY(-50%); content: "";}
#topMenu dd:first-child:before { display: none;}
#topMenu dd>a { position: relative; text-align: center; z-index: 2; display: block; font-size: 2rem; line-height: 8rem; height: 8rem; padding: 0 2em;}
#topMenu dd:hover>a:before { position: absolute; left: 50%; bottom: 0; margin-left: -10px; border: 10px solid transparent; border-bottom-color: var(--color-main); content: "";}
#topMenu dd:hover>a { color: var(--color-main)}
#topMenu dd ul { position: absolute; z-index: 1; height: 0; opacity: 0; left: 50%; white-space: nowrap; overflow: hidden; transform: translateX(-50%); transition: all 0.5s ease; display: -webkit-flex; display: flex; justify-content: center}
#topMenu dd:first-child ul { transform: translateX(0); left: 0;}
#topMenu dd:last-child ul { left: auto; right: 0; transform: translateX(0);}
#topMenu dd:hover ul { height: 6rem; opacity: 1;}
#topMenu dd ul a { display: block; padding: 0 1em; text-align: center; color: var(--color-aga);}
#topMenu dd ul li { position: relative; height: 6rem; line-height: 6rem;}
#topMenu dd ul li:before { position: absolute; top: 50%; margin-top: -.5em; height: 1em; width: 1px; left: 0; background: var(--color-line); content: "";}
#topMenu dd ul li:first-child:before { display: none;}
#mobileMenu { display: none;}
/*메인비주얼*/
#main_visual { position: relative; z-index: 1; overflow: hidden; margin-top: -8rem;}
#main_visual ul { position: relative; z-index: 1;}
#main_visual li { position: relative; background-position: center center; width: 100%; background-repeat: no-repeat; height: 78rem;}
#main_visual li a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;}
#main_visual .swiper-pagination { position: absolute; z-index: 10; bottom: 1em; width: 100%;}
#main_visual .swiper-pagination-bullet { position: relative; width: .5em; height: .5em; margin: 0 .1em; background: var(--color-bgw); opacity: 1; border-radius: 1em; transition: all 0.3s ease;}
#main_visual .swiper-pagination-bullet-active { background: var(--color-main);}
#main_visual .controll { position: absolute; top: 50%; z-index: 3; padding: 0; height: 0; left: 0; right: 0; display: none}
#main_visual .controll a { position: absolute; top: -1em; width: 2em; height: 2em; line-height: 2em; text-align: center; font-size: 2em; padding: 0; margin: 0; background: rgba(0, 0, 0, .6); border: 0; cursor: pointer; color: var(--color-bgw); border-radius: 2em; text-shadow: 0 0 .2em rgba(0, 0, 0, .5)}
#main_visual .controll .swiper_prev { left: 0; transform: rotateY(180deg)}
#main_visual .controll .swiper_next { right: 0;}
#ma { padding: 5em 0;}
#ma header { text-align: center;}
#ma header h3 { font-size: 3em; line-height: 1.2em; font-weight: 800}
#ma header p { color: #bebebe;}
#ma dl { margin-top: 3em; display: grid; grid-template-columns: 1fr 1fr 29em; grid-template-rows: 22em 22em; gap: 1em;}
#ma dl dd:nth-of-type(1) { order: 1; grid-column: span 2;}
#ma dl dd:nth-of-type(2) { order: 3;}
#ma dl dd:nth-of-type(3) { order: 4;}
#ma dl dt { grid-row: span 2; order: 2}
#ma dl dd:nth-of-type(1) { background: url(/img/ma_img1.jpg) center no-repeat;}
#ma dl dd:nth-of-type(2) { background: url(/img/ma_img2.jpg) center no-repeat;}
#ma dl dd:nth-of-type(3) { background: url(/img/ma_img3.jpg) center no-repeat;}
#ma dl dd { position: relative; padding: 2.5em;}
#ma dl dd h5 { font-weight: 800; font-size: 2em; line-height: 1.5em; display: inline-block;  border-bottom: 1px solid var(--color-sub);}
#ma dl dd p { font-size: 1.3em; margin-top: 1em;}
#ma dl dd a { position: absolute; bottom: 2.5em; right: 2.5em; background: var(--color-main); color: var(--color-aga); line-height: 2.5em; padding: 0 3em 0 1em;}
#ma dl dd a:before { position: absolute; width: 1.5em; height: 1px; background: #FFF; content: ""; right: 1em; bottom: 1em;}
#ma dl dd a:after { position: absolute; width: .7em; height: 1px; background: #FFF; content: ""; right: 1em; bottom: 1em; transform: rotate(45deg); transform-origin: top right;}
#ma dl dt { background: #F8F8F8; border: 1rem solid var(--color-main); border-left: 0; display: flex; flex-direction: column; justify-content: center; text-align: right;}
#ma dl dt h5 { position: relative; font-size: 2.2em; line-height: 2em; padding-right: 1.5em; font-weight: 700; line-height: 1.3em; color: var(--color-main);}
#ma dl dt h5:before { position: absolute; bottom:0; width: 4em; margin-left: -4.5em; height: 150%; background: center / contain no-repeat url(/img/logo_icon.png); content: "";  }
#ma dl dt p { font-size: 1.5em; line-height: 2em; padding-right: 2em; margin-top: 2em;}
#ma .ma_text { margin-top: 5em; text-align: center;}


#mb .wrap dl {}
#mb .wrap dl dd { width: 50%; margin-top: 2.5em; display: flex;}
#mb .wrap dl dd figure { padding: 0 1em;}
#mb .wrap dl dd article {display: flex; justify-content: center; flex-direction: column;}
#mb .wrap dl dd article h6 { font-size: 2em; font-weight: 700;  line-height: 2em;}
#mb .wrap dl dd article p { font-size: 1.5em;}
#mc { text-align: center; padding: 5em 0;}
#mc header { text-align: center;}
#mc header h3 { font-size: 3em; line-height: 1.2em;   font-weight: 800}
#mc header p { color: #bebebe;}
#mc article { margin-top: 3em; position: relative; overflow: hidden;}
#mc .controll { position: absolute; top: 50%; z-index: 3; padding: 0; height: 0; left: 0; right: 0;}
#mc .controll a { position: absolute; top: -1em; width: 2em; height: 2em; line-height: 2em; text-align: center; font-size: 1em; padding: 0; margin: 0; background: rgba(255, 255, 255, .8); border: 0; cursor: pointer; color: var(--color-sub); border-radius: 2em; box-shadow: 0 0 .2em rgba(0, 0, 0, .5)}
#mc .controll .swiper_prev { left: 1em; transform: rotateY(180deg)}
#mc .controll .swiper_next { right: 1em;}
#mt { padding: 4em 2em;}
#mt .full_width_bg { background: #F8F8F8}
#mt header { border-left: .4em solid #DCDCDC; padding-left: .5em;}
#mt header h3 { font-size: 2.75em; line-height: 1em;  font-weight: 800}
#mt header p { color: #bebebe; line-height: 1em; margin-top: .5em;}
#mt dl { margin-top: 3em; font-size: 1.5em;}
#mt dl h5 { font-weight: 800;  font-size: 1.333em; line-height: 1em;}
#mt dl dt { padding-left: 8em;}
#mt dl dt h5 { position: absolute; left: 0;}
#mt dl dt ul {line-height: 1.3em;}
#mt dl dt ul li { display: flex;}
#mt dl dt ul li strong { width: 4em; display: flex; justify-content: space-between; margin-right: .5em;}
#mt dl dt p { margin-top: .5em;}
#mt dl dt b { font-size: 1.333em; color: var(--color-main); line-height: 1em;}
#mt dl dt b a{color: var(--color-main); }
#mt dl dd p { position: relative; padding-left: 2em; margin: .5em 0}
#mt dl dd p.s1 { line-height: 5rem;}
#mt dl dd p img { position: absolute; left: 0}
#mt dl dd .g { color: #2db844;}
#mt dl dd .b { color: #1864d7;}
#mt dl dd i { font-size: .8em; display: inline-block; width: 1.5em; height: 1.5em; border-radius: 50%; background: #935A3C; color: var(--color-aga); text-align: center; line-height: 1.5em; font-weight: 700;}
#footer { position: relative; padding: 4rem 0; text-align: center;}
#footer .tail_logo img { height: 8rem;}
#footer address {margin-top: 1em;}
#footer address span { white-space: nowrap; padding: 0 .4em}
#footer p { font-size: .9em; color: #999}
#footer .tail_links { position: relative; display: -webkit-flex; display: flex; justify-content: center; line-height: 7.5rem;}
#footer .tail_links a { position: relative; margin-right: 2em; color: #999}
#footer .tail_links a:before { position: absolute; top: 50%; margin-top: -.5em; height: 1em; width: 1px; left: -1em; background: var(--color-line); content: "";}
#footer .tail_links a:first-child:before { display: none;}
#quickBtns { position: fixed; top: 20%; right: 2rem; width: 9rem; z-index: 10; text-align: center;}
#quickBtns dt { padding: 0;}
#quickBtns dt a { position: relative; display: block; border-radius: 50%; margin: .3em 0}
#quickBtns dt a img { width: 100%;}
#quickBtns dt a { display: block; border-radius: 50%;}
#quickBtns dt a:nth-child(1) { background: #018DF8}
#quickBtns dt a:nth-child(2) { background: #32648F}
#quickBtns dt a:nth-child(3) { background: #17B75E}
#quickBtns dt a:nth-child(4) { background: #448AC4}
#quickBtns dt a:before { position: absolute; top: .15em; left: .15em; width: 100%; height: 100%; background: #ded5cb; border-radius: 50%; content: ""; z-index: -1; mix-blend-mode: multiply;}
#quickBtns dd a { display: block; width: 5rem; height: 5rem; margin: 1rem auto; border-radius: 50%; background: var(--color-bgd); color: var(--color-bgw); display: flex; flex-direction: column; justify-content: center;}
#quickBtns dd a i { display: block; line-height: 1em; width: .6em; margin: 0 auto; transform: scale(.7) rotate(-90deg);}
#quickBtns dd a p { line-height: 1em;}
@media (max-width:750px) { 
	.landing { 	padding-bottom: 25vw; }
	 #quickBtns { 	position: fixed; 	top: auto; 	left: 0; 	margin-left: 0; 	bottom: 0; 	width: 100vw; 	z-index: 10 }
	 #quickBtns dt { 	display: flex }
	 #quickBtns dt a { 	width: 25%; }
	 #quickBtns dt a img { 	width: 100%; }
	 #quickBtns dd { 	position: absolute; 	right: 0; 	bottom: 100%; }
 }
hr.h-1 { height: .1em}
hr.h-2 { height: .2em}
hr.h-3 { height: .3em}
hr.h-4 { height: .4em}
hr.h-5 { height: .5em}
hr.h-6 { height: .6em}
hr.h-7 { height: .7em}
hr.h-8 { height: .8em}
hr.h-9 { height: .9em}
hr.h1 { height: 1em}
hr.h1-5 { height: 1.5em}
hr.h2 { height: 2em}
hr.h2-5 { height: 2.5em}
hr.h3 { height: 3em}
hr.h4 { height: 4em}
hr.h5 { height: 5em}
hr.h6 { height: 6em}
hr.h7 { height: 7em}
hr.h8 { height: 8em}
hr.h9 { height: 9em}
hr.h10 { height: 10em}
.fs-1 { font-size: .1em;}
.fs-2 { font-size: .2em;}
.fs-3 { font-size: .3em;}
.fs-4 { font-size: .4em;}
.fs-5 { font-size: .5em;}
.fs-6 { font-size: .6em;}
.fs-7 { font-size: .7em;}
.fs-75 { font-size: .75em;}
.fs-8 { font-size: .8em;}
.fs-85 { font-size: .85em;}
.fs-9 { font-size: .9em;}
.fs1 { font-size: 1em;}
.fs11 { font-size: 1.1em;}
.fs12 { font-size: 1.2em;}
.fs13 { font-size: 1.3em;}
.fs14 { font-size: 1.4em;}
.fs15 { font-size: 1.5em;}
.fs16 { font-size: 1.6em;}
.fs17 { font-size: 1.7em;}
.fs18 { font-size: 1.8em;}
.fs19 { font-size: 1.9em;}
.fs20 { font-size: 2em;}
.fs25 { font-size: 2.5em;}
.fs30 { font-size: 3em;}
.fs35 { font-size: 3.5em;}
.fs40 { font-size: 4em;}
.dlw { position: relative; display: -webkit-flex; display: flex;}
.dlw.jc { justify-content: center}
/* 양쪽정열 */
.dlw.js { justify-content: space-between}
/* 양쪽정열 */
.dlw.br { flex-flow: wrap;}
/* 줄바꿈 */
.dlw>dt { position: relative;}
.dlw>dd { position: relative;}
.dlw.fg1>dt, .dlw.fg1>dd { width: 0; flex-grow: 1;}
/* 너비통일 */
.dlw>.vc { display: -webkit-flex; display: flex; flex-direction: column; justify-content: center;}
/*수직센터정열*/
.dlw.vc>dt { display: -webkit-flex; display: flex; flex-direction: column; justify-content: center;}
/*수직센터정열*/
.dlw.vc>dd { display: -webkit-flex; display: flex; flex-direction: column; justify-content: center;}
/*수직센터정열*/
.dlw>.vb { display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-end;}
/* 하단정열*/
.align_vc { display: -webkit-flex; display: flex; flex-direction: column; justify-content: center;}
/* *수직센터정열*/
@media (min-width:751px) { 
	.dlw.dtr>dt { 	order: 2; }
}
/* 체크박스 스타일시트 */
.ck_style { margin: 0; display: inline-block; margin-right: .5em;}
.ck_style input[type="radio"], .ck_style input[type="checkbox"] { display: none}
.ck_style i { position: relative; display: inline-block; height: 1em; margin-top: -.1em; width: 1em; line-height: 1em; font-size: 1.3em; border: 1px solid rgba(0, 0, 0, 0.2); overflow: hidden; margin-right: .2em; vertical-align: middle;}
.ck_style input[type="radio"]+i { border-radius: 100%;}
.ck_style input[type="radio"]:checked+i { border-color: var(--color-main)}
.ck_style input[type="radio"]:checked+i:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: "\ee609"; font-family: 'iconfont'; color: var(--color-bgw); z-index: 2; text-align: center; line-height: 140%; background-color: var(--color-main); font-size: .6em;}
.ck_style input[type="checkbox"]+i { border-radius: 0}
.ck_style input[type="checkbox"]:checked+i { border-color: var(--color-main)}
.ck_style input[type="checkbox"]:checked+i:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: "\ee609"; font-family: 'iconfont'; color: var(--color-bgw); z-index: 2; text-align: center; line-height: 140%; background-color: var(--color-main); font-size: .6em;}
.selec_chk { display: none}
.selec_chk+label { margin: 0; display: inline-block; margin-right: .5em;}
.selec_chk+label span { position: relative; display: inline-block; height: 1em; margin-top: -.1em; width: 1em; line-height: 1em; font-size: 1.3em; overflow: hidden; margin-right: .2em; vertical-align: middle; border: 1px solid var(--color-line); background: var(--color-bgw);}
.selec_chk+label span:after { position: absolute; border-style: solid; border-color: var(--color-line); border-image: initial; border-width: 0px 2px 2px 0px; transform: rotate(45deg); content: ""; top: 0; left: 30%; width: .4em; height: .6em;}
.selec_chk:checked+label span:after { border-color: var(--color-main);}
.selec_chk:checked+label { color: var(--color-main);}
.selec_chk:checked+label span { border-color: var(--color-main);}
.selec_chk[type="radio"]+label span { border-radius: 50%;}
/* 기본테이블 */
table.tb { position: relative; width: 100%; border-top: 1px solid #555;}
table.tb:after { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #555; content: "";}
table.tb thead {}
table.tb thead th { background: var(--color-bgw); padding: 10px 0; text-align: center; border-bottom: 1px solid #EEE;}
table.tb tbody th { border-bottom: 1px solid #EEE; text-align: left; padding-left: 10px;}
table.tb tbody td { border-bottom: 1px solid #EEE; padding: 10px;}
table.tb tfoot th { border-bottom: 1px solid #EEE; background: #FFE; text-align: left; padding-left: 10px;}
table.tb tfoot td { border-bottom: 1px solid #EEE; background: #FFE; padding: 10px; height: 36px;}
table.tb .tc { text-align: center !important;}
table.tb .tl { text-align: left !important; padding-left: 10px !important;}
table.tb .tr { text-align: right !important; padding-right: 10px !important;}
table.tb tfoot {}
table.tb tbody img { margin-left: 3px}
table.tb .no_list { text-align: center; line-height: 200px;}
table.tb.center tbody th { text-align: center;}
table.tb.center tbody td { text-align: center;}
table.tb.center tfoot th { text-align: center;}
table.tb.center tfoot td { text-align: center;}
table.tb.line thead th { border: 1px solid #EEE;}
table.tb.line tbody th { border: 1px solid #EEE; padding-right: 10px;}
table.tb.line tbody td { border: 1px solid #EEE;}
table.tb.line tfoot th { border: 1px solid #EEE; border-top: 0; background: #FFE; padding-right: 10px;}
table.tb.line tfoot td { border: 1px solid #EEE; border-top: 0; background: #FFE;}
@media only screen and (max-width:750px) {
	table.tb.block thead { 	display: none; }
	 table.tb.block tbody tr { 	display: block; 	border-bottom: 1px solid #EEE; 	padding: 10px 0; }
	 table.tb.block tbody th { 	display: block; 	border: 0; 	width: auto; 	border-bottom: 0; 	padding: 0; 	padding-bottom: 8px }
	 table.tb.block tbody td { 	display: block; 	border: 0; 	padding: 0; 	height: auto; }
	 table.tb.block tbody td .frm_input { 	width: 100%; }
	 table.tb.block tbody td select { 	width: 100%; }
	 table.tb.block tbody tr.noblock td { 	display: inline-block }
	 table.tb.block tbody tr.noblock th { 	display: inline-block }
 }
@media only screen and (max-width:750px) { 
	 table.tb.m_list thead { 	display: none; }
	 table.tb.m_list tbody tr { 	display: block; 	border-bottom: 1px solid #EEE; 	padding: 10px 0; }
	 table.tb.m_list tbody tr { 	position: relative; 	display: block; 	border-top: 1px solid #DDD; 	padding: 10px 0; 	padding-left: 10%; }
	 table.tb.m_list tbody tr:after { 	display: block; 	visibility: hidden; 	clear: both; 	content: "" }
	 table.tb.m_list tbody td { 	display: block; 	border: 0; 	width: auto; 	padding: 0; 	height: auto; 	float: left; 	margin-right: 10px; 	background: var(--color-bgw); }
	 table.tb.m_list tbody td:before { 	content: attr(title) " : "; 	color: #aaa }
	 table.tb.m_list tbody td.chk { 	position: absolute; 	top: 10px; 	right: 0; }
	 table.tb.m_list tbody td.chk:before { 	display: none; }
	 table.tb.m_list tbody td.num { 	position: absolute; 	top: 10px; 	left: 0; 	width: 10%; }
	 table.tb.m_list tbody td.num:before { 	display: none }
	 table.tb.m_list tbody td.subject { 	float: none; 	clear: both; 	padding: 0 !important }
	 table.tb.m_list tbody td.subject:before { 	display: none }
}
/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc { text-align: center; display: block}
#copymove .tbl_wrap { margin: 20px}
#copymove .win_btn { padding: 0 20px 20px}
.copymove_current { float: right; background: #ff3061; padding: 5px; color: var(--color-bgw); border-radius: 3px}
.copymove_currentbg { background: #f4f4f4}
/* 화면낭독기 사용자용 */
#hd_login_msg { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden}
.msg_sound_only, .sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important}
/* 본문 바로가기 */
#skip_to_container a { z-index: 100000; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden}
#skip_to_container a:focus, #skip_to_container a:active { width: 100%; height: 75px; background: #21272e; color: var(--color-bgw); font-size: 2em; font-weight: bold; text-align: center; text-decoration: none; line-height: 3.3em}
/* ie6 이미지 너비 지정 */
.img_fix { width: 100%; height: auto}
/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha { display: inline-block; position: relative;}
#captcha legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden;}
#captcha #captcha_img { height: 2.8em; border: 1px solid #898989; vertical-align: top; padding: 0; margin: 0}
#captcha #captcha_mp3 { position: relative; margin: 0; padding: 0; width: 2.8em; height: 2.8em; border: 0; background: transparent; vertical-align: middle; overflow: hidden; cursor: pointer; background: var(--color-bgw);}
#captcha #captcha_mp3:before { background: #EEE; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: "\ee66a"; font-family: "iconfont"; line-height: 2.8em;}
#captcha #captcha_reload { position: relative; margin: 0; padding: 0; width: 2.8em; height: 2.8em; border: 0; background: transparent; vertical-align: middle; overflow: hidden; cursor: pointer; background: var(--color-bgw);}
#captcha #captcha_reload:before { background: #EEE; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: "\ee60d"; font-family: "iconfont"; line-height: 2.8em;}
#captcha #captcha_key { margin: 0 0 0 3px; padding: 0 5px; width: 10em; height: 2.8em; border: 1px solid #ccc; background: var(--color-bgw); font-weight: bold; text-align: center; vertical-align: top}
#captcha #captcha_info { display: block; margin: 5px 0 0; letter-spacing: -0.1em}
/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio { display: none}
.cke_sc { display: none;}
/* ckeditor 태그 기본값 */
#bo_v_con ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px}
#bo_v_con ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px}
#bo_v_con li { display: list-item}
/* 버튼 */
a.btn, .btn { line-height: 2.8em; height: 2.8em; padding: 0 1em; text-align: center; border: 0; -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; -o-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;}
a.btn01 { display: inline-block; padding: 0 7px; border: 1px solid #ccc; background: #fafafa; color: var(--color-bgd); text-decoration: none; vertical-align: middle}
a.btn01:focus, a.btn01:hover { text-decoration: none}
button.btn01 { display: inline-block; margin: 0; padding: 7px; border: 1px solid #ccc; background: #fafafa; color: var(--color-bgd); text-decoration: none}
a.btn02 { display: inline-block; padding: 0 7px; border: 1px solid #3b3c3f; background: #4b545e; color: var(--color-bgw); text-decoration: none; vertical-align: middle;}
a.btn02:focus, .btn02:hover { text-decoration: none}
button.btn02 { display: inline-block; margin: 0; padding: 7px; border: 1px solid #3b3c3f; background: #4b545e; color: var(--color-bgw); text-decoration: none}
.btn_confirm { text-align: center}
/* 서식단계 진행 */

.btn_submit { border: 0; background: var(--color-main); color: var(--color-bgw); cursor: pointer; border: 0}
.btn_submit:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
a.btn_cancel { display: inline-block; background: #969696; color: var(--color-bgw); text-decoration: none; vertical-align: middle;}
button.btn_cancel { display: inline-block; background: #969696; color: var(--color-bgw); text-decoration: none; vertical-align: middle}
.btn_cancel:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
a.btn_frmline, button.btn_frmline { display: inline-block; padding: 0 1em; height: 2.8em; border: 0; background: #3c3c3c; color: var(--color-bgw); text-decoration: none; vertical-align: top}
/* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline { font-size: 1em}
/* 게시판용 버튼 */
a.btn_b01, .btn_b01 { display: inline-block; background: #4c4f6f; color: var(--color-bgw); text-decoration: none; vertical-align: middle}
.btn_b01:hover, .btn_b01:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
a.btn_b02, .btn_b02 { display: inline-block; background: var(--color-main); padding: 0 10px; color: var(--color-bgw); text-decoration: none; border: 0; vertical-align: middle;}
a.btn_b02:hover, .btn_b02:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
a.btn_b03, .btn_b03 { display: inline-block; background: var(--color-bgw); border: 1px solid #b9bdd3; color: #646982; text-decoration: none; vertical-align: middle}
a.btn_b03:hover, .btn_b03:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
a.btn_b04, .btn_b04 { display: inline-block; background: var(--color-bgw); border: 1px solid #ccc; color: #707070; text-decoration: none; vertical-align: middle}
a.btn_b04:hover, .btn_b04:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
a.btn_admin, .btn_admin { display: inline-block; background: #d13f4a; color: var(--color-bgw); text-decoration: none; vertical-align: middle}
/* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover { -webkit-filter: brightness(120%); filter: brightness(120%)}
/*컬러*/
.color_1 { background: #169dd6}
.color_2 { background: #14d53d}
.color_3 { background: #3814ff}
.color_4 { background: #7520c5}
/* 기본테이블 */
.tbl_wrap table { width: 100%; border-collapse: collapse; border-spacing: 0 5px; background: var(--color-bgw); border-top: 1px solid #ececec; border-bottom: 1px solid #ececec}
.tbl_wrap caption { padding: 10px 0; font-weight: bold; text-align: left}
.tbl_head01 { margin: 0 0 10px}
.tbl_head01 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden}
.tbl_head01 thead th { padding: 20px 0; font-weight: normal; text-align: center; border-bottom: 1px solid #ececec; height: 40px}
.tbl_head01 thead th input { vertical-align: top}
/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td { padding: 10px 0; border-top: 1px solid #c1d1d5; border-bottom: 1px solid #c1d1d5; background: #d7e0e2; text-align: center}
.tbl_head01 tbody th { padding: 8px 0; border-bottom: 1px solid #e8e8e8}
.tbl_head01 td { color: #666; padding: 10px 5px; border-top: 1px solid #ecf0f1; border-bottom: 1px solid #ecf0f1; line-height: 1.4em; height: 60px; word-break: break-all}
.tbl_head01 tbody tr:hover td { background: #fafafa}
.tbl_head01 a:hover { text-decoration: underline}
.tbl_head02 { margin: 0 0 10px}
.tbl_head02 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden}
.tbl_head02 thead th { padding: 5px 0; border-top: 1px solid #d1dee2; border-bottom: 1px solid #d1dee2; background: #e5ecef; color: #383838; font-size: 0.95em; text-align: center; letter-spacing: -0.1em}
.tbl_head02 thead a { color: #383838}
.tbl_head02 thead th input { vertical-align: top}
/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td { padding: 10px 0; border-top: 1px solid #c1d1d5; border-bottom: 1px solid #c1d1d5; background: #d7e0e2; text-align: center}
.tbl_head02 tbody th { padding: 5px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-bgw)}
.tbl_head02 td { padding: 5px 3px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-bgw); line-height: 1.4em; word-break: break-all}
.tbl_head02 a {}
/* 폼 테이블 */
.tbl_frm01 { margin: 0 0 20px}
.tbl_frm01 table { width: 100%; border-collapse: collapse; border-spacing: 0}
.tbl_frm01 th { width: 70px; padding: 7px 13px; border: 1px solid var(--color-line); border-left: 0; background: var(--color-bg); text-align: left}
.tbl_frm01 td { padding: 7px 10px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: transparent}
.tbl_frm01 textarea { padding: 2px 2px 3px}
.frm_input, select { height: 2.8em;}
textarea, .frm_input, select { border: 1px solid var(--color-line); background: var(--color-bgw); vertical-align: middle; padding: 5px;}
.frm_address { margin-top: 1rem}
.full_input { width: 100%}
.half_input { width: 49.5%}
.twopart_input { width: 385px; margin-right: 10px}
.tbl_frm01 textarea, .write_div textarea { width: 100%; height: 100px}
.tbl_frm01 a { text-decoration: none}
.tbl_frm01 .frm_file { display: block; margin-bottom: 5px}
.tbl_frm01 .frm_info { display: block; padding: 0 0 5px; line-height: 1.4em}
/*기본 리스트*/
.list_01 ul { border-top: 1px solid #ececec}
.list_01 li { border-bottom: 1px solid #ececec; background: var(--color-bgw); padding: 10px 15px; list-style: none; position: relative}
.list_01 li:nth-child(odd) { background: #f6f6f6}
.list_01 li:after { display: block; visibility: hidden; clear: both; content: ""}
.list_01 li:hover { background: #f9f9f9}
.list_01 li.empty_li { text-align: center; padding: 20px 0; color: #666}
/*폼 리스트*/
.form_01 h2 { font-size: 1.167em}
.form_01 li { margin-bottom: 10px}
.form_01 ul:after, .form_01 li:after { display: block; visibility: hidden; clear: both; content: ""}
.form_01 .left_input { float: left}
.form_01 .margin_input { margin-right: 1%}
.form_01 textarea { height: 100px; width: 100%}
.form_01 .frm_label { display: inline-block; width: 130px}
/* 자료 없는 목록 */
.empty_table { padding: 50px 0 !important; text-align: center}
.empty_list { padding: 20px 0 !important; color: #666; text-align: center}
/* 필수입력 */
.required, textarea.required { background-image: url('../img/require.png') !important; background-repeat: no-repeat !important; background-position: right top !important}
/* 테이블 항목별 정의 */
.td_board { width: 80px; text-align: center}
.td_category { width: 80px; text-align: center}
.td_chk { width: 30px; text-align: center}
.td_date { width: 60px; text-align: center}
.td_datetime { width: 110px; text-align: center}
.td_group { width: 80px; text-align: center}
.td_mb_id { width: 100px; text-align: center}
.td_mng { width: 80px; text-align: center}
.td_name { width: 100px; text-align: left}
.td_nick { width: 100px; text-align: center}
.td_num { width: 50px; text-align: center}
.td_numbig { width: 80px; text-align: center}
.td_stat { width: 60px; text-align: center}
.txt_active { color: #5d910b}
.txt_done { color: #e8180c}
.txt_expired { color: #ccc}
.txt_rdy { color: #8abc2a}
/* 새창 기본 스타일 */
.new_win { position: relative}
.new_win .tbl_wrap { margin: 0 20px}
.new_win #win_title { font-size: 1.3em; height: 50px; line-height: 30px; padding: 10px 20px; background: var(--color-bgw); color: var(--color-bgd); -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); box-shadow: 0 1px 10px rgba(0, 0, 0, .1)}
.new_win #win_title .sv { font-size: 0.75em; line-height: 1.2em}
.new_win .win_ul { margin-bottom: 15px; padding: 0 20px}
.new_win .win_ul:after { display: block; visibility: hidden; clear: both; content: ""}
.new_win .win_ul li { float: left; background: var(--color-bgw); text-align: center; padding: 0 10px; border: 1px solid #d6e9ff; border-radius: 30px; margin-left: 5px}
.new_win .win_ul li:first-child { margin-left: 0}
.new_win .win_ul li a { display: block; padding: 8px 0; color: #6794d3}
.new_win .win_ul .selected { background: #3a8afd; border-color: #3a8afd; position: relative; z-index: 5}
.new_win .win_ul .selected a { color: var(--color-bgw); font-weight: bold}
.new_win .win_desc { position: relative; margin: 10px; border-radius: 5px; font-size: 1em; background: #f2838f; color: var(--color-bgw); line-height: 50px; text-align: left; padding: 0 20px}
.new_win .win_desc i { font-size: 1.2em; vertical-align: baseline}
.new_win .win_desc:after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 50px; background: #da4453; border-radius: 3px 0 0 3px}
.new_win .frm_info { font-size: 0.92em; color: #919191}
.new_win .win_total { float: right; display: inline-block; line-height: 30px; font-weight: normal; font-size: 0.75em; color: #3a8afd; background: #f6f6f6; padding: 0 10px; border-radius: 5px}
.new_win .new_win_con { margin: 20px 0; padding: 20px}
.new_win .new_win_con:after { display: block; visibility: hidden; clear: both; content: ""}
.new_win .new_win_con2 { margin: 20px 0}
.new_win .btn_confirm:after { display: block; visibility: hidden; clear: both; content: ""}
.new_win .win_btn { text-align: center}
.new_win .cert_btn { margin-bottom: 30px; text-align: center}
.new_win .btn_close { padding: 0 20px; height: 45px; overflow: hidden; cursor: pointer}
.new_win .btn_submit { padding: 0 20px; height: 45px; font-weight: bold; font-size: 1.083em}
/* 검색결과 색상 */
.sch_word { color: var(--color-bgw); background: #ff005a; padding: 2px 5px 3px; line-height: 18px; margin: 0 2px}
/* 자바스크립트 alert 대안 */
#validation_check { margin: 100px auto; width: 500px}
#validation_check h1 { margin-bottom: 20px; font-size: 1.3em}
#validation_check p { margin-bottom: 20px; padding: 30px 20px; border: 1px solid var(--color-line); background: var(--color-bgw)}
/* 사이드뷰 */
.sv_wrap { position: relative; font-weight: normal}
.sv_wrap .sv { z-index: 1000; display: none; margin: 5px 0 0; font-size: 0.92em; background: #333; -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2)}
.sv_wrap .sv:before { content: ""; position: absolute; top: -6px; left: 15px; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #333 transparent}
.sv_wrap .sv a { display: inline-block; margin: 0; padding: 0 10px; line-height: 30px; width: 100px; font-weight: normal; color: #bbb}
.sv_wrap .sv a:hover { background: var(--color-bgd); color: var(--color-bgw)}
.sv_member { color: #333}
.sv_on { display: block !important; position: absolute; top: 23px; left: 0px; width: auto; height: auto}
.sv_nojs .sv { display: block}
/* 페이징 */
.pg_wrap { clear: both; padding-top: 20px; text-align: center}
.pg_page, .pg_current, .pg_skip { position: relative; display: inline-block; padding: 0 14px; height: 36px; line-height: 36px; vertical-align: middle; background: var(--color-bgw); text-decoration: none; border: 1px solid #DDD; z-index: 1; margin-right: -1px;}
.pg_page:hover { background-color: #DDD; border-color: #999; color: var(--color-bgd); z-index: 2;}
.pg a:focus, .pg a:hover { text-decoration: none}
.pg_current { border: 1px solid var(--color-main); background: var(--color-main); color: var(--color-bgw); z-index: 2;}
.pg_prev:before { content: "\f104"; font-family: 'fontawesome'; padding-right: 5px;}
.pg_next:after { content: "\f105"; font-family: 'fontawesome'; padding-left: 5px;}
@media only screen and (max-width:750px) { .pg_page { 	display: none }
 .pg_page, .pg_current, .pg_skip {}
 .pg_start { 	display: inline-block; }
 .pg_prev { 	display: inline-block; }
 .pg_next { 	display: inline-block; }
 .pg_end { 	display: inline-block; }}
/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
/* Mobile화면으로 */
#device_change { display: block; margin: 0.3em; padding: 0.5em 0; border: 1px solid #eee; border-radius: 2em; background: var(--color-bgw); color: var(--color-bgd); font-size: 2em; text-decoration: none; text-align: center}
/**********************************************************************************************/
.animate .delay_1 { transition-delay: 200ms;}
.animate .delay_2 { transition-delay: 300ms;}
.animate .delay_3 { transition-delay: 400ms;}
.animate .delay_4 { transition-delay: 500ms;}
.animate .delay_5 { transition-delay: 600ms;}
.animate .delay_6 { transition-delay: 700ms;}
.animate .delay_7 { transition-delay: 800ms;}
.animate .delay_8 { transition-delay: 900ms;}
.animate .delay_9 { transition-delay: 1000ms;}
.animate .delay_10 { transition-delay: 1100ms;}
.animate .delay_11 { transition-delay: 1200ms;}
.animate .delay_12 { transition-delay: 1300ms;}
.animate .delay_13 { transition-delay: 1400ms;}
.animate .delay_14 { transition-delay: 1500ms;}
.animate .delay_15 { transition-delay: 1600ms;}
.animate .delay_16 { transition-delay: 1700ms;}
.animate .delay_17 { transition-delay: 1800ms;}
.animate .delay_18 { transition-delay: 1900ms;}
.animate .delay_19 { transition-delay: 2000ms;}
.animate .delay_20 { transition-delay: 2100ms;}
.animate [class*="delay_"] { opacity: 0; transition-property: all; transition-timing-function: ease; transition-duration: 1s;}
.animate .ani_a {}
.animate .ani_t { transform: translateY(-10rem);}
.animate .ani_b { transform: translateY(10rem);}
.animate .ani_l { transform: translateX(-10rem);}
.animate .ani_r { transform: translateX(10rem);}
.animate.on [class*="delay_"] { opacity: 1; transform: translateY(0); transform: translateX(0);}