@charset "utf-8";

@font-face {
	font-family: 'Pretendard ';	font-weight: 300;	  font-style: normal; font-display: swap; 
	src: local('Pretendard Light'), url(/css/pretendard/Pretendard-Light.woff2) format('woff2'), url(./pretendard/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard ';	font-weight: 400;	   font-style: normal; font-display: swap;
	src: local('Pretendard Regular'), 	url(/css/pretendard/Pretendard-Regular.woff2) format('woff2'), url(./pretendard/Pretendard-Regular.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard ';	font-weight: 600; font-style: normal;	font-display: swap;   
	src: local('Pretendard SemiBold'), 	url(/css/pretendard/Pretendard-SemiBold.woff2) format('woff2'), 	url(./pretendard/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard ';	font-weight: 700;	 font-style: normal; font-display: swap;  
	src: local('Pretendard Bold'), 	url(/css/pretendard/Pretendard-Bold.woff2) format('woff2'), 	url(./pretendard/Pretendard-Bold.woff) format('woff');
}
/*@font-face {
	font-family: 'Pretendard';  font-weight: 800; font-display: swap;   font-style: normal;
	src: local('Pretendard ExtraBold'), 	url(./pretendard/Pretendard-ExtraBold.woff2) format('woff2'), 	url(./pretendard/Pretendard-ExtraBold.woff) format('woff');
}*/

*{margin:0; padding:0;  word-break:break-all;  font-family: 'Pretendard', sans-serif;  box-sizing:border-box; }
*::focus{outline:none;}
*::placeholder{color:#ccc; font-weight:400}
html{background:var(--black); /*font-smoothing: antialiased; font-smooth:always;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;*/
letter-spacing:-0.5px; line-height: 1.5; }
img{border:0; max-width:100%}
a,button{color: inherit; text-decoration:none; cursor:pointer;}
h1,h2,h3,h4,h5,h6{margin:0}
ul,li{list-style:none}
input, select,textarea,button{outline-style:none;font-family: 'Pretendard', sans-serif; resize:none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{text-align:right;}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
ul, menu, dir{display: block; list-style-type: none; overflow:hidden; height:auto;}
.clear{clear:both}
.clear_25px{clear:both; height:25px}
.ft_right{float:right;}
.ft_left{float:left;}
.px1{clear:both; height:1px}
*[align="left"]{text-align:left!important;}
*[align="center"]{text-align:center!important;}
*[align="right"]{text-align:right!important;}
.underline:hover{text-decoration:underline; color:#aaa}
*::-webkit-scrollbar {background:#f4f4ff; width:8px; height:4px;}
*::-webkit-scrollbar-thumb {background:#d2d3d8;border-radius:4px;}
*::-webkit-scrollbar-track {}


#mo_header{display:none}
#sidebar{display:none}
#mo_footer{display:none}
#mo_visual{display:none}

#wrap{width:100%; height: 100%;}
#header{width:100%; height: 70px; background:#27187e; box-shadow:0 0 1px rgba(0,0,0,0.2);}
.hd_wrap{width:1080px; margin:0 auto;}
#logo{float:left; line-height:70px;}
#logo img{display:block; margin:20px 0 0 20px}
.menu{float:right;}
.menu li{display:inline-block; margin:0 20px; color:#fff; line-height:70px}



#visual{clear:both;height:calc(100vh - 70px); position:relative; background: url(../images/visual.jpg); background-repeat:no-repeat;background-size:cover; background-position:center}

.visual_txt{ color:#777; position:absolute; top:calc(50% - 200px); left:0; right:0; width:1080px; margin:0 auto;}
.visual_txt p{text-indent:20px; }
.visual_logo{width:350px}
.scroll{display:block; width:150px; margin:50px 0 0 20px; text-align:center;color:#bbb; font-size:13px;  border:1px solid #bbb; padding:10px 0; border-radius:30px; transition:all 0.2s ease;}
.scroll:hover{background:#fff; transform:translatey(10px)}

#content{clear:both; width:100%}
#sub_content{clear:both;min-height:calc(100vh - 470px)}
#content2{clear:both; background:#27187e; width:100%; color:#fff}
.con_wrap{width:1080px; margin:0 auto; padding:40px 0 80px; position:relative;}
#footer{clear:both; width:100%; background:#f7faff; color:#aaa}
.ft_wrap{margin:0 auto; width:1080px; padding:40px 0; display:flex; gap:100px; font-size:13px}

.buss{display:grid; grid-template-columns:1fr 1fr; grid-gap:20px; padding:20px}
.buss img{width:100%}
.buss + p{margin-top:40px; color:#777; font-size:18px}
.contact{ background: #fff;  width:280px; padding: 20px; text-align:center; box-shadow:0 0 5px rgba(0,0,0,0.2);    border-radius: 4px;    color: #333; position:absolute; right:20px; bottom:40px; }



#sub_visual{width:100%; padding:10px; display:flex; flex-direction:column;  background:url(../images/sub_visual.jpg)no-repeat; text-align: center;   color: #fff; justify-content: center;  align-items: center;    height: 260px; }
#sub_visual img{width:180px; display:block; margin: 5px 0}
#sub_visual > p:nth-child(1){font-size:0.9em;line-height:1}
.note{color:#777; font-size:14px}
.catalog{display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:4rem;  text-align:center; padding:40px 0;}
.catalog dd{border:1px solid #ddd; padding:10px; border-radius:16px; color:#333; transition:all 0.2s ease-out}
.catalog dd img{border-radius:8px;}
.catalog dd p{font-weight:600}
.catalog dd:hover{opacity:0.7; transform:translatey(-10px) }

.prdt{margin:20px 0}
.prdt img{width:100%; max-width:100%}
.catalog_mini{display:grid; grid-template-columns:repeat(7, 1fr); overflow:hidden; grid-gap:4px; text-align:center; padding:16px; border-radius:16px; background:#f4f4ff; }
.catalog_mini dd{border:1px solid #ddd; background:#fff; padding:10px; border-radius:8px; color:#333;}
.catalog_mini dd a{display:block;}
.catalog_mini dd img{border-radius:8px; width:100px}
.catalog_mini dd p {text-align:left;font-size:13px; width: 120px;  white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;}

.call{padding:1.5rem; box-shadow:0 0 5px rgba(0,0,0,0.2); border-radius:8px}
.call p{line-height:1.8; padding-left:5px}
.call b{display:inline-block; width:80px; color:#333}
.call span{color:#777}

.notice_list{margin:10px 0 10px; border:1px solid #ddd; border-radius:8px}
.notice_list dd{border-bottom:1px solid #ddd; cursor:pointer}
.notice_list dd:last-child{border-bottom:0}
.notice_list dd p{padding:10px; font-weight:500; text-indent:10px}
.notice_list dd p:hover{color:#aaa}
.notice_list dd article{background:#f8fbff; padding:20px; font-size:14px; border-top:1px solid #ddd}
.notice_list dd article div{padding:10px 0 20px}
.date{display:inline-block; padding-left:10px; font-size:13px; color:#aaa; font-weight:400;}


/*하단 버튼*/
.dw_bar{clear:both; width:100%; overflow:hidden; height:auto;}
.dw_bar li:nth-of-type(1){float:left; margin-left:0;}
.dw_bar li:nth-of-type(2){float:right;}
.dw_bar li a{display:inline-block; padding:0px 10px; line-height:30px; font-size:14px; cursor:pointer;  border:1px solid #ddd; color:#777; border-radius:4px;}



.sign_open{display:inline-block; border:1px solid #aaa; border-bottom:4px solid #aaa; padding:5px; width:98%; margin:0 auto; background:#fff; color:#4d5256; font-weight:600; border-radius:3px; }
/*레이어팝업*/
.layer {display:none;  position:fixed;  top:0; left:0; width:100%; height:100%; z-index:100;}
.layer .bg {display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}
.pop-layer {display:none; position: absolute; top: 30%; left: 10%; width: 80%; height:auto; background:#fff;  border:5px solid #85ccfc; border-radius:2px;  z-index: 99;} 
.pop-layer .pop-container {padding: 10px 10px;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;}




@media all and (max-width:767px){
#header{display:none}
#footer{display:none}
#visual{display:none}
img{max-width:100%}
/*헤더*/
#mo_header{display:block; width:100%; height:40px; background:#27187e; box-shadow: 0 0 5px rgba(0,0,0,0.2); position:fixed; top:0;  z-index: 99; }
#mo_logo{float:left; font-size:0.8em; text-align:center; font-weight:500;  margin-left:10px;}
#mo_logo img{ display:block;  margin-top:10px; margin-right:5px; float:left; width:70px; }
.toggle{position:absolute; width: 20px; right:10px; top:8px; cursor:pointer;}
.toggle img{width:100%;}
/*sidebar*/
#sidebar {display:block; position:fixed; right:-100%; top:40px;  width: 100%; height: 100%;  z-index: 9999; background-color:#fafbff;  transition: all 0.2s ease; box-shadow:0 -1px 2px #ddd; }
.page_cover {width: 100%; height: 100%; position:fixed; top: 0px; right: 0px;  z-index: 990; display: none;}
.none_cover{width:100%; height:50px; }
.black_cover{width:100%; height:100%; background:rgba(0,0,0, 0.3);}
#sidebar.open {right:0px; position:fixed; overflow-y:auto;}
.page_cover.open {display: block;}
.sd_menu li{border-bottom: 1px solid #e7eefa; text-indent:10px; }
.sd_menu li a{display:block; width:100%; padding:10px 0; color:#585e81; font-weight:500}
.sd_menu li dl{border-top:1px solid #e7eefa; background:#fcfcff}
.sd_menu li dd a{ text-indent:20px; padding:5px 0; color:#555; font-weight:400; font-size:13px;}
.sd_menu li dd a:before{content:"\2022"; padding-right:10px}
#mo_visual{display:block; clear:both; margin-top:40px; height:calc(100vh - 40px); position:relative; background: url(../images/mo_visual.jpg); 
background-repeat:no-repeat;background-size:cover; background-position:center center}
.visual_txt{width:100%; color:#fff; text-align:center;}
.scroll{display:block; width:150px; margin:50px auto; text-align:center;color:#eee; font-size:13px; 
border:1px solid #fff; padding:10px 0; border-radius:30px; transition:all 0.2s ease;}

#mo_footer{ width:100%; text-align:center; font-size:13px; color:#777; background:#f7faff; padding:10px 0;}
#sub_visual{height:140px; margin-top:40px}
#sub_visual img{width:150px}
#sub_visual > p{font-size:0.8em;}

.con_wrap{width:100%; padding:20px 10px;}
.catalog{display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:1rem;  text-align:center; padding:40px 0;}
.catalog_mini{display:flex; width:100%; overflow-x:auto; gap:4px;   text-align:center; padding:8px; border-radius:16px; background:#f4f4ff;}
.catalog_mini dd{border:1px solid #ddd; background:#fff; padding:10px; border-radius:8px; color:#333; transition:all 0.2s ease-out}
.catalog_mini dd img{border-radius:8px; width:100px}
.catalog_mini dd p {font-size:13px;    width: 100px;    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;}

}