@charset"utf-8";
html,body {min-height:100%; height:100%; /*position: fixed;  right: 0; bottom: 0; left: 0; top: 0;*/} 
/*html {overflow-y:auto;}
body {position: static !important;top: 0px !important;}*/
/*페이지 건너뛰기*/
#skipnav{z-index:9999;position:absolute;left:0;top:0;width:100%;}
#skipnav *{display:inline;list-style:none;margin:0;padding:0;}
#skipnav a{display:block;position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;}
#skipnav a:focus{left:0;width:100%;height:auto;background:#579;color:#fff;font:bold 1em/2.5 '맑은 고딕';text-decoration:none;text-align:center;}

#Wrap {position:relative; width:100%; height:100%; min-height:100%;  /*overflow-x:hidden; overflow-y:auto;-webkit-overflow-scrolling: touch;*/}
/*아이폰에서 컨텐츠가 스크롤되면서 좌측메뉴활성화가 바뀌는 오류가 생김*/
/*아이폰에서 overflow-y:auto주면 해결되나  스크롤이 빡빡해짐*/
#SubContwrap {position:relative; max-width:var(--container); width:100%; min-height:800px; margin:0 auto; padding:2rem; /*-webkit-overflow-scrolling:touch*/}
.container {position:relative; min-width:280px; max-width:var(--container); margin:0 auto; padding:0 1.5rem;}
.fancy-container {position:relative; width:100%; max-width:var(--fancy-container); margin:0 auto; padding-left: 6vw; padding-right: 6vw;}
#SubContwrap .container{width:100%; margin: 0 auto; max-width:var(--container);}
#sidemenu {display:none;} /*모바일에서는 좌측메뉴 안보이게*/
#contents{width:92%; margin: 0 auto; padding:30px 0px; position:relative; line-height:1.4;}
#contents h3 {font-size:1.250em; color:#000; margin-bottom:10px}
#contents:after{content:''; clear:both;}
#footerWrap {position:relative}



/*서브 비쥬얼*/

#sub-visual{
	min-height:300px; 
	position:relative;
	background-color:#ed1c24;
	background-repeat:no-repeat;
	background-size:cover;
}
#sub-visual:after {
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-image: url(/images/main/pattenBG.png);
	opacity:0.6

}

.subBG01 {/*background-image:url(/images/common/subBG01.jpg);*/}
.pageheader {position:absolute; width:100%; max-width:var(--container); padding:0 1.5rem; left:50%; top:50%; color:#fff; transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -40%);-webkit-transform: translate(-50%, -50%); z-index: 1; }
.pageheader h3{font-family:var(--eng-title); font-weight:var(--font-weight-8); font-size:2em; margin-bottom:0.333rem; transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;}
.pageheader p{ font-size:var(--text-sm); font-weight:var(--font-weight-3);}
.pageheader p span {font-weight:var(--font-weight-7);}

@media only screen and (min-width:768px){


.pageheader p span {display:block; white-space:nowrap}
}

@media only screen and (min-width:1000px){
#sub-visual{min-height:500px;}
.pageheader h3 {font-size:2.5em}
.pageheader p{ font-size:var(--text-lg);}
.pageheader p span {display:inline-block;}
}


@media only screen and (min-width:1600px){
.container {padding:0}
.pageheader h3 {font-size:3.5em}
.pageheader p{ font-size:var(--text-xl);}
}



/*페이지정보*/

.pagelocation {display:flex; flex-flow:row wrap}
.pagelocation>li {font-size:0.725rem; letter-spacing:0; color:#eee}
.pagelocation>li:after {
	content:"\e876";
	font-family: 'Linearicons-Free';
	font-size:0.625rem;
	margin:0 0.333rem
}

.pagelocation>li:last-child:after {display:none}
.pageoption{position:relative; display:flex; flex-direction:row; justify-content: right; align-items:center}
.pageoption a {display:flex; justify-content:center; align-items:center; width:46px; height:46px;  line-height:46px; border-radius:100px; text-align:center; border:4px solid rgba(0,0,0,0.2); transition: all 0.2s;}
.pageoption > .btn-sns{margin-right:5px}
.pageoption a:before {font-family: 'Linearicons-Free'; text-indent:0; color:rgba(255,255,255,0.6); font-size:16px; line-height:0}
.pageoption a:hover {border-color:rgba(255,255,255,0.4)}
.pageoption a:hover:before {}
.pageoption > .btn-sns:before {content:"\e86b";}
.pageoption > .btn-print:before {content:"\e81c";}

/*SNS공유*/
.pageoption .snsShareBox{width:50%; position:absolute; z-index:90; top:60px; left:0; height:0; overflow:hidden; }
.pageoption ul.snsShare {border:0px solid #ebebeb;}
.pageoption ul.snsShare.active{display:block;}
.pageoption ul.snsShare li {padding:2px 0}
.pageoption ul.snsShare li a {display:flex; align-items:center; width:46px; height:46px; line-height:46px; border:3px solid #fff;box-shadow:1px 2px 2px 0 rgba(0,0,0,0.1); background:rgba(0,0,0,0.15); color:rgba(255,255,255,0.8); text-align:center; font-size:12px; transition: all 0.2s;}
.pageoption ul.snsShare li a:before {display:inline-block; vertical-align:middle;font-family: xeicon!important; font-size:18px; content: "";}
.pageoption ul.snsShare li:first-child a:before {content: "\ebd3";}
.pageoption ul.snsShare li:nth-child(2) a:before {content: "\ec1f";}
.pageoption ul.snsShare li:nth-child(3) a:before {content: "\e9c0";}
.pageoption ul.snsShare li a:hover {color:#FFF; transition: all 0.2s;}
.pageoption ul.snsShare li a:hover:before {color:#fff}
.pageoption ul.snsShare li:first-child a:hover {background:#315199; }
.pageoption ul.snsShare li:nth-child(2) a:hover {background:#0099ff; }
.pageoption ul.snsShare li:nth-child(3) a:hover {background:#333; }


/*footer*/
#footerWrap{width:100%; background:var(--color-0); padding:1rem 0 3rem 0;}
#footerWrap > div {position:relative;}
#footerWrap .frow {
	width:100%;
	display:flex; 
	flex-flow:row wrap; 
	align-items:flex-end; 
	/*border-bottom:1px solid rgba(255,255,255,0.1);*/ 
	padding-bottom:1rem
}
.footmenu {display:flex; margin:var(--margin-1) 0}
.footmenu li{display:inline-block;}
.footmenu li a{display:block; font-size:0.875em; color:rgba(255,255,255,0.8); font-weight:400; padding: 0.666rem 0; white-space:nowrap;}
.footmenu li a:after {content:"|"; display:inline-block; vertical-align:middle; margin:0 0.555rem; color:#666}
.footmenu li:first-child a {color:var(--point-color);}
.footmenu li:last-child a:after {display:none}
 .frow > address {width:100%;color:rgba(255,255,255,0.8); margin-bottom:var(--margin-1)}
address ul {display:flex; flex-flow:row wrap; justify-content:space-between; width:100%;font-family: var(--sub-title-font);}
address ul li {margin: 0}
address p {display:flex; flex-flow:row wrap; gap:0.333rem; font-size:0.875rem}
address p span {font-weight:var(--font-weight-3)}
address p span em {display:inline-block}
address p.title {margin-bottom:1rem; font-weight:500}
p.copyright {font-family: var(--base-font); font-size:var(--text-2xs) !important; color:var(--color-9); letter-spacing:0; font-weight:var(--font-weight-3)}
p.copyright > span {display:inline-block; white-space:nowrap;}

#pageup {
	position:fixed !important; 
	width: 4rem; 
	height: 4rem; 
	right:2rem; 
	bottom:3rem; 
	display: none; 
	cursor: pointer; 
	z-index:4000;
	}
#pageup:after {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	content:""; 
	font-family: 'Linearicons-Free';
	font-size:36px; 
	content: "\e877";  
	color:rgba(255,255,255,1);
	opacity:0.6;
	text-align:center; 
	}

#pageup:before {
	content:"";
    position: absolute;
    z-index: -1;
    background-color: black;
    border-radius: 100%;
    width: 100%;
    height: 100%;
	transform: scale(1); 
	transition: transform 0.55s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#pageup:hover:before {transform: scale(1.2); opacity:1;}


@media all and (min-width:1200px){
	.pagelocation>li {font-size:1rem;}
	
}

/*관련사이트 바로가기*/
#f_sec1 {width:100%; display:flex; flex-direction:row; justify-content:flex-end;}
.d_select{position:relative; width:100%; white-space:nowrap}
.d_select>span{display:block;cursor:pointer;color:#d5d5d5; background:rgba(0,0,0,0.1);border:0px solid #4e4e4e;line-height:40px; padding-left:1rem; font-size:1rem !important; font-weight:normal; text-align:left; height:auto}
.d_select>span:after { content: "\e914"; opacity: 0.5;font-family: xeicon!important;font-size:16px; vertical-align:middle; position:absolute; right:10px}
.d_select>div{display:none;position:absolute;left:-1px;bottom:40px;width:100%;border: 1px solid #444;background: #fff;box-shadow: 0 0 5px 0 rgba(0, 0, 0, .15);}
.d_select>div>ul>li>a{display:block;padding: .666em .333em .666em 1.333em;color:#666; font-size:0.825rem;}
.d_select>div>ul>li>a:hover{background:#f5f5f5}



@media all and (min-width:768px){
.ver_pc {display:block !important}
.ver_mobile {display:none !important}

#subvisualwrap{min-height:220px; background-size:100% auto; background-position:center center}
#subvisualwrap h3{font-size:1.5em}
#subvisualwrap p {font-size:1.0em; font-weight:400; margin-top:10px;}
.pageheader {left: 50%; top:50%; transform: translate(-50%, -50%); color:#fff}

#contents{width:94%;}
.d_select {max-width:250px}

.footmenu {width:49%; display:flex; vertical-align:middle}
#f_sec1 {width:50%;}
	
}
@media all and (min-width:1000px){
 .frow > address {width:60%;}
 address p {gap:1rem; margin-bottom:var(--margin-s)}
  .frow > address {margin-bottom:0}
 }
@media all and (min-width:1400px){
.pageheader {top:55%;}
}



/* cont-navi-wrap */
#cont-navi-wrap{display:block; position:absolute; bottom:0; left:0; z-index:2000}
#cont-navi-wrap:after{
	position:absolute; 
	left:0;
	top:-1px;
	margin-left:0; 
	width:100%;  
	display:block; 
	content:""; 
	/*border-bottom:1px solid rgba(255,255,255,0.2); */
	height:1px; 
	z-index:-1
	}
#cont-navi-wrap, .cnavi-fix {width:100%;z-index:80;background-color:rgba(54,54,64,0.96); padding:0;font-size:14px;line-height:1.28em;transition:all .3s ease;}
.cnavi-fix #cont-navi-wrap {position:fixed;top:0;left:0;border:0}
.cnavi-fix #cont-navi{padding-left:0}
#cont-navi-wrap .container {max-width:var(--container); display:flex; justify-content:space-between}
#cont-navi-wrap .div-cont {width:calc(100% - 120px);}
#cont-navi {box-sizing:border-box; }
#cont-navi:after {content:"";display:block;clear:both;}
#cont-navi .home {
display:block;
float:left;
width:60px;
height:100%; 
text-align:center; 
background-color: var(--base-color1);
border-radius: 0 0 0 0; 
}
#cont-navi .home:after {
display:flex;
justify-content:center;
align-items:center;
width:100%; 
height:100%; 
font-family: 'Linearicons-Free';
font-size:18px; 
content:"\e800"; 
color:rgba(255,255,255,0.2); 

}
#cont-navi dl.first{border-left:0}
#cont-navi dl {display:block;position:relative;float:left;width:auto;min-width:214px;height:100%;border-right:1px solid rgba(0,0,0,0.15);}
#cont-navi dt a {position:relative; white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis; line-height:62px; font-weight:var(--font-weight-3); font-size:15px;}
#cont-navi dt a:after {content:"\e936"; font-family: xeicon!important; display:block; position:absolute; right:1rem; top:50%; transform: translateY(-50%);}
#cont-navi dt a span {display:block;cursor:pointer;padding:0 25px;color:#fff;}
#cont-navi dd {position:absolute;left:0px;top:62px;width:100%;min-width:140px;height:auto;display:none;background:#fff; border:1px solid #ccc}
#cont-navi dd a {display:block;background:transparent; color:#666;}

#cont-navi dd a:hover span, #cont-navi dd .isOver a  span {color:#333}
#cont-navi dl.is-last dt{}
#cont-navi dl.is-last dt a span {}
#cont-navi dl.is-last dt a, #cont-navi dl.is-last dt a span {font-weight:400;}
#cont-navi dl.is-last{border-left:none;}

#cont-navi .sub-list li a{display:block;font-size:14px; font-weight:400; color:#999; padding:14px 20px; line-height:1.2em;-webkit-transition: background 0.3s ease-out;-moz-transition: background 0.3s ease-out;-o-transition: background 0.3s ease-out;transition: background 0.3s ease-out;}
#cont-navi .sub-list li a:hover{ color:#222}
#cont-navi .sub-list li.over a span{}
#cont-navi .sub-list li.over a{background:#fff;}
	@media only screen and (max-width:999px){
		#cont-navi-wrap{display:none;}
		#cont-navi .home {display:none;}
		#cont-navi .cnavi1{display:none;}
		#cont-navi .cnavi2{display:none;}
	}
	@media only screen and (max-width:680px){
		
	}
	@media only screen and (max-width:400px){
		
	}

/* 모바일 2차 메뉴 */
#subNavi-wrap {display:block;;width:100%;position:absolute;z-index:80; bottom:0; left:0}

#subNavi .lm-tit {font-weight:var(--font-weight-3);background:#fff; color:#222;text-align:left; position:relative; display:block; ;vertical-align:top; width:auto;padding:0;line-height:52px;letter-spacing:-0.02em;}
#subNavi .lm-tit * {vertical-align:middle;}
#subNavi .lm-tit .tit {display:block;white-space:nowrap;font-size:18px;position:relative;border-bottom:1px solid rgba(0,0,0,0.2); }
#subNavi .lm-tit .tit span{display:block;}
#subNavi .lm-tit button {position:absolute;right:14px;bottom:0;width:30px;height:100%;border:none; background:none; display:block;}
#subNavi .lm-tit button:before {content:""; width:100%; content:"\e936"; font-family: xeicon!important; display:block; color:#ccc}
/*#subNavi .lm-tit button {text-indent:9999em;}*/
#subNavi .lm-tit button:after{width:1px;background:rgba(0,20,0,0.1); width:1px ; height:30px; left:-15px; top:50%;margin-top:-15px;display:block; content:"";position:absolute;}
#subNavi .lm-tit .btxt{padding-left:15px; display:block; font-size:15px; letter-spacing:-0.01em;font-weight:400}

#subNavi-wrap .leftmenu {display:none;;position:absolute;top:53px;left:0;width:100%;z-index:1500; box-sizing:border-box; border-bottom:1px solid rgba(0,0,0,0.1)}
#subNavi-wrap .leftmenu .lm_a2 {color:rgba(0,0,0,0.6);padding:1rem 15px;text-align:left;display:block;font-size:0.925rem; font-weight:var(--font-weight-3)}
#subNavi-wrap .leftmenu li:first-child .lm_a2 {border-top:0}
#subNavi-wrap .leftmenu .over .lm_a2 {position:relative; color:rgba(0,0,0,1);}
#subNavi-wrap .leftmenu .over .lm_a2:after {content:""; width:4px; height:4px; border-radius:100%; display:block; background:rgba(0,0,0,0.4); position:absolute; right:1.5rem; top:50%; transform:translateY(-50%)}
#subNavi-wrap .leftmenu .lm_a2 {background:rgba(255,255,255,1);border-top:1px solid rgba(0,0,0,0.1)}
#subNavi-wrap .leftmenu .lm_a2 span{}
#subNavi-wrap .leftmenu .depth3 {background:var(--base-color2);text-align:left;padding:0.666rem 15px 0.666rem 15px;rgba(255,255,255,0.1);}
#subNavi-wrap .leftmenu .depth3 {display:none;}
#subNavi-wrap .leftmenu .over .depth3 {display:block;;}
#subNavi-wrap .leftmenu .depth3 .lm_l3 {/*border-top:1px dotted rgba(255,255,255,0.1);*/padding:2px 0; padding-left:10px; position:relative;}
#subNavi-wrap .leftmenu .depth3 .lm_l3.over a span{text-decoration:underline}
#subNavi-wrap .leftmenu .depth3 .lm_l3:after{position:absolute; width:2px; height:2px;display:block; content:""; left:0; background:rgba(255,255,255,0.2);top:50%;margin-top:-1px;}
#subNavi-wrap .leftmenu .depth3 .lm_l3 span {color:#444;}
#subNavi-wrap .leftmenu .depth3 li:first-child,	#subNavi-wrap .leftmenu .depth3 li:first-child .lm_l3 {border-top:0;}
#subNavi-wrap .leftmenu .depth3 .lm_a3 {display:block;padding:5px 0; font-size:0.825rem; font-weight:200; color:rgba(255,255,255,0.5);}	
#subNavi-wrap .leftmenu .depth3 .over .lm_a3{color:var(--point-color)}

/* 2023-10-14 추가 */
#subNavi-wrap .leftmenu .depth3 .depth4 {display:none;}

	@media only screen and (min-width:1000px){
		#subNavi-wrap {display:none;}
	}
	@media only screen and (max-width:999px){
		
	}
	@media only screen and (max-width:680px){
		#subNavi .lm-tit button{background-size:16px auto;}
	}
	@media only screen and (max-width:480px){
		
	}




@media all and (min-width:1600px) {
#SubContwrap {padding:4rem 0rem}

}



/*전체메뉴*/
.btn-allmenu{display:none; position:absolute; z-index:6010; right:1rem; top:50%; transform:translateY(-50%); width:30px; height:30px;}
.btn-allmenu span {background: #ccc;  width: 20px;height: 2px;display: block;margin: 7px 0;border-radius: 35px; transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);}
.btn-allmenu span:first-of-type {width: 20px;margin-top: 0;transition: all 0.6s;}
.btn-allmenu span:nth-of-type(2) {position: relative;width: 30px;opacity: 1;}
.btn-allmenu span:last-of-type { position: relative;width: 30px;margin-top: 0;}
.btn-allmenu span:last-of-type:after {content:"sitemap"; color:#ccc; font-size:11px}

/*sitemap*/
.sitemap {width:70%;display:block;transition: all 1s;}
.sitemap .titW {text-align:center; padding-top:3rem}
.sitemap h3{ font-size:2rem; color:#333; line-height:1.1em; font-weight:500; letter-spacing:-0.04em;}
.sitemap .stit{ color:#444; font-size:0.875rem; font-weight:var(--font-weight-3); line-height:1.2em; margin-top:5px; margin-bottom:55px;}

.sitemap .ov{display:flex; flex-direction:column; justify-content:center; max-width:1500px; margin:0 auto}
.sitemap .ov:after{display:block; content:""}
.sitemap dl{display:flex; flex-flow:column wrap; margin:0 0 2rem 2rem}
.sitemap dt a{color:#222; font-size:1.5rem; font-family: var(--tit-fm); letter-spacing:-0.04em; line-height:40px; display:block;}
.sitemap dd a{display:block;font-weight:500; font-size:1.125rem; line-height:1.2em; padding:7px 0 7px 1.2rem; letter-spacing:-0.06em;}
.sitemap dd a:hover {color:#f58224;}
.sitemap dd{margin-top:5px;}
.sitemap dd ul{display:flex; padding:7px 0 15px 0;}
.sitemap dd li{position:relative; margin-right:1rem}
.sitemap dd li a{display:block; position:relative; padding:2px 0 2px 10px; font-family: var(--base-fm); font-size:1.1255rem; color:#666; line-height:1.2em;}
.sitemap dd li a:before{background:#777; position:absolute; left:0; top:9px; display:block; content:"" ; width:3px;height:3px;}
.sitemap dd li a:hover{color:#333;}
.sitemap dd li a:hover:before{background:#2c80f3}
.all-slider-ovclick{position:fixed;z-index:9998;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }

.siteInfo {width:30%; color:#fff}
.siteInfo .siteLogo {
	font-family:var(--default-font);
	color:transparent;
	font-size:5em;
	font-weight:800;
	-webkit-text-stroke: 1px #fff;
	
}
.siteInfo .siteSlogun {font-family:var(--base-fm); font-size:var(--ltxt);margin-bottom:var(--margin-2)}
.siteInfo .telNum span {color:#25d3ff; font-family:var(--tit-fm); font-size:var(--2ltxt); margin-bottom:(--margin-1)}
.siteInfo .locate {position:relative; padding-left:1.25rem;}
.siteInfo .locate:before {
	display:block;
	position:absolute;
	left:0;
	top:0;
	content:"\eb59";
	font-size:20px;
	font-family:var(--icon-font) !important;
	color:var(--font-color-6);
	
}
.faxNum span {font-size:var(--stxt); color:var(--font-color-9)}
/*모달*/

.modelpopup-btn {
 background-color: #000;
 border: 1px solid transparent;
 color: #fff;
 font-size:16px;
 padding: 14px 20px;
 margin-bottom: 25px;
 display: inline-block;
 outline: none;
 cursor: pointer;
 position: fixed;
 left: 50%;
 top: 40%;
 transform: translateX(-50%);
}

/**Typeo CSS End**/
.popupmodel, .popupmodel * {
 --tit-fm:'OAGothic-ExtraBold';
 --base-fm:'OAGothic-Medium';
 --title-size: 30px;
 --base-size: 16px;
 --white-clr: #ffffff;
 --black-clr: #000000;
}

.model-ovelay {
 position: fixed;
 transition: all 0.5s ease 0.5s;
 visibility: hidden;
 opacity: 0;
 width: 100%;
 height: 100%;
 float: left;
 background: rgba(0, 0, 0, 0.4);
 pointer-events: auto;
 top: 0px;
 z-index: 988;
}

/*.modelclose {
 cursor: pointer;
 float: right;
 font-size: 40px;
 text-align: center;
 line-height: 36px;
 color: var(--black-clr);
 position: absolute;
 right: 10px;
 top: 5px;
 z-index: 1;
}*/

.modelclose{
	display:flex; 
	justify-content:center; 
	align-items:center; 
	width:100px; 
	height:100%; 
	color:#ccc; 
	cursor:pointer;
	border-right:1px solid #ccc;
	}
.modelclose:after {content:"\e9af"; font-family: xeicon!important; color:rgba(0,0,0,0.6); font-size:2.25rem}

.popupmodel {
	 display:flex;
	 max-width: 100%;
	 width: 100%;
	 height:100%;
	 transition: all 0.5s ease 0s;
	 margin: auto;
	 background: #fff;
	 position: fixed;
	 top: 50%;
	 left: 50%;
	 opacity: 0;
	 pointer-events: none;
	 z-index:7000;
	 max-height: 100%;
	 overflow: auto;
	 transform: translate(-50%, -50%);
	 font-family: var(--base-fm);
}

.popupmodel h3 {
	margin-top: 0px;
}

.custom-popup .model-ovelay {
	 pointer-events: auto;
	 opacity: 1;
	 visibility: visible;
}

.custom-popup .popupmodel {
	 pointer-events: auto;
	 opacity: 1;
}

.model-content {
	 position:relative;
	 display:flex;
	 width:100%;
	 height:100%;
	 /*align-items:center;*/
	 padding: 10% 2rem;

}

.model-content:after {
	content:"";
	display:block;
	width:36%;
	height:100%;
	position:absolute;
	z-index:-1;
	right:0;
	top:0;
	background-color:#052a4a;
	background-image:url("");
	background-position:left bottom;
	background-repeat:no-repeat;
	background-size:100%;
}



@media all and (min-width:1000px) {
	.btn-allmenu{display:block;}

}