@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}


/* header */
.btn-scroll { position:absolute; bottom:35px; left:50%; z-index:1500; width:55px; height:58px; margin-left:-38px; background:url('/web/img/common/btn_scroll.png') 0 0 no-repeat; background-size:100%;  }
.btn-scroll.white { background-image:url('/web/img/common/btn_scroll_white.png'); }
.btn-top { display:none; position:fixed; bottom:20px; right:10px; z-index:3000; width:61px; height:56px; background:url('/web/img/common/btn_top.png') 0 0 no-repeat;  }
.btn-tel { position:absolute; left:27px; top:20px; z-index:200; width:55px; height:15px; font-size:0; background:url('../img/common/ico_tel.jpg') 0 0 no-repeat; background-size:100%; }

.header {position: fixed;z-index:3000;  width: 100%;background: rgba(255,255,255,0.85); height:75px; transition: 0.7s}
.header.scroll{background: rgba(255,255,255,100%);transition: 0.7s;border-bottom: 1px solid #ccc;}


.header h1 {float:left;position:relative;z-index:100;left: 50px;top: 3px;}
.header h1 a img{width: 66%;/*margin:-6%; margin-bottom: 13%;*/}
.header .gnb {margin: 1.5% auto;width: 66%;}


.header .gnb > ul {  }
.header .gnb > ul > li { display:inline-block; }
/*.header .gnb > ul > li:nth-child(3){margin-right:165px;}*/
.header .gnb > ul > li > a {position:relative;display:block;/* padding:0 60px 0 0; */text-align:center;font-size:16.5px;font-weight:600;color:#615e5e;transition:transform 0.3s;font-family:'Cafe24Simplehae';letter-spacing: 1px;}
.header .gnb > ul > li > a::after {content:""; position:absolute; width:0; height:1px; background:#7f736e; left:0; bottom:-10px; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -ms-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease;}
.header .gnb > ul > li > a:hover::after, .subNav li.this a::after { width:100%; }
.header .gnb .gnb-sub.current { display:block; }
.header .gnb .gnb-sub li a { font-size:15px; color:#79797a;  }
.gnb .gnb-sub li a:hover, .gnb .gnb-sub li a:focus, .gnb .gnb-sub li a:active, .gnb .gnb-sub li a.on, .gnb .gnb-sub li a.current { color:#000; font-weight:bold; }
.s_menu_pc {float:right;margin: 22px 20px 0 0;}
.s_menu_pc li a {font-size: 13px;color:#354a59; padding: 5px 12px; border:1px solid #354a59; transition: 0.5s ease; letter-spacing:1.3px; border-radius:40px; font-family:'Pretendard-Regular';}
.s_menu_pc li a:hover {color:#fff; border:1px solid #90b0e0; background:#90b0e0; font-weight:bold; transition: 0.5s ease;  -webkit-transition: 0.5s ease;}


.s_menu_pc02 li a{background: #03cf5d; border: 1px solid #03cf5d; color: #fff;}

.mbreser_mo{display:none;}

.s_menu_pc_na {float:right; margin:15px 10px 0 0;}
.mbreser_pc {position: absolute; top: 10px; right: 13.7%; z-index: 110; text-align: center; font-size: 13px;color:#4d6b84; padding: 10px; /*border:1px solid #4d6b84;*/ transition: 0.5s ease; letter-spacing:2px;}
.mbreser_mo, .mbreser_mo_02{ display:none;}
.mbreser_pc_02 {position: absolute; top: 10px; right: 17.7%; z-index: 110; text-align: center; font-size: 13px;color:#4d6b84; padding: 10px; /*border:1px solid #4d6b84;*/ transition: 0.5s ease; letter-spacing:2px;}
.mbreser_pc span, .mbreser_pc_02 span {display:block; line-height:1.5;}

.side-nav .gnb { text-align:center; }
.side-nav .gnb > ul { }
.side-nav .gnb > ul > li {display:inline-block;min-width: 172px;margin: 0px 0;vertical-align:top;font-weight:bold;}

.side-nav .gnb > ul > li > a.current { font-weight:600; }
.side-nav .gnb .gnb-sub { display:none; padding:10px 15px; background: rgba(255,255,255,0.85); box-shadow:2px 2px 7px rgba(0,0,0,0.1); margin-top:30px; }
.side-nav .gnb .gnb-sub li { line-height:1.8; }
.side-nav .gnb .gnb-sub li a {font-size: 12px;letter-spacing: -1.2px;color:#545454;}
.side-nav .gnb .gnb-sub li a small {font-size: 12px;letter-spacing: -1px;display: block;}
.side-nav .gnb .gnb-sub li a:hover, .side-nav .gnb .gnb-sub li a.current, .side-nav .gnb .gnb-sub li a.current strong { color:#7f736e; font-weight:400;}
.side-nav .sns-list { display:none; margin-top:100px; text-align:center; }
.side-nav .sns-list a { display:inline-block; margin:0 10px; }



/*svg:not(:root).svg-inline--fa {vertical-align:middle;}*/



/* common - footer */

.foot-link { clear:both; margin-top:75px; padding:55px; text-align:center; color:#4c4c4c; background:url('../img/common/bg_foot.jpg') 0 0 no-repeat; background-size:100%; font-family:'GmarketSansMedium';  color:#929292;}
.foot-link h1 { position:relative; padding-bottom:15px; font-size:17px; font-family:'NanumBarunGothic';}
.foot-link h1:after { content:''; position:absolute; bottom:0; left:50%; height:1px; width:90px; margin-left:-45px; background:#4c4c4c; }
.foot-link p { margin:22px 0 30px 0; font-size:14px; font-family:'Karla', sans-serif;}

.footer li a { font-weight:bold; font-size:13px; color:#fff; border-bottom:1px solid #fff; }
.foot-link a { display:inline-block; width:238px; height:40px; line-height:40px; font-size:12px; letter-spacing:2px; color:#222; border:1px solid #222;  transition: 0.5s ease;}
.foot-link a:hover { background:#7f736e; color:#fff; transition: 0.5s ease;  -webkit-transition: 0.5s ease; border:1px solid #7f736e;}


footer { padding: 20px 0;}
.footer_com { padding-right: 15px;  padding-left: 15px; margin-right: auto; margin-left: auto; position: relative; max-width:100%; text-align:center; color:#565656;}
.footer_com a{color:#7e7e7e !important;}
.bg-dark { background: #292929;}
.col-md-3 {width: 29%;float:left;margin:2%; }
.widget .title {font-size: 12px; line-height: 24px; font-weight: 400;  text-transform: uppercase; letter-spacing: 2px; font-weight: 700;  margin-bottom: 12px; }
.widget ul li{font-size:14px;line-height:1.8;letter-spacing: -0.5px; font-family:'Pretendard-Light';}
.widget ul li span {font-size:17px; font-weight:700;}
.rowinfo{display:inline-block; font-size:13px; width:100%; }
.fottop{  display: block; text-align: center; width: 5%; float:right; font-size:20px;  margin: 1px auto 15px;}  
hr {display: block; height: 1px;  border: 0;  border-top: 1px solid #ccc;  margin: 0.5em 0;padding: 0;}

.foot-reserve {display:table;width:100%;height:330px; background:url('/web/images/foot_img.jpg') center center no-repeat; background-size:cover;}
.foont_psy{isplay:table;width:100%;height:330px; background:url('/web/images/psy_img.jpg') center center no-repeat; background-size:cover;}



.col-sm-6 .sub a b:before {content: "";display: inline-block;background-image: url("http://hi-web.co.kr/web/img/hi_web_s.png");vertical-align: middle;width: 20px;height: 20px;background-size: cover;background-position: center;margin: 0 1px 4px 4px;}

.simbol{width: 25px; display: inline-block; position: relative; top: -2px;}


@media all and (max-width: 1850px) {
.side-nav .gnb > ul > li{margin:0;}
	
	.s_menu_pc {float:right;/* margin: 22px 187px 0 0; */}
}

@media all and (max-width: 1650px) {
.side-nav .gnb > ul > li{min-width: 145px;} .side-nav .gnb .gnb-sub{margin-top:35px;}
	.header .gnb > ul > li > a{font-size: 13px;}
	.header .gnb{width: auto;}
	
	.s_menu_pc {float:right;margin: 22px 5px 0 0;}
}

@media all and (max-width: 1440px) {
.header h1 a img{width: 100%;}
.side-nav .gnb > ul > li{min-width: 136px;} .header .gnb > ul > li > a{font-size: 12px;} .side-nav .gnb .gnb-sub li a{font-size:11px;} .side-nav .gnb .gnb-sub li a small {font-size:10px;}
		.s_menu_pc {float:right;/* margin: 22px 123px 0 0; */}
	
	.header h1{left: 16px;width: 10%;}
}

@media all and (max-width: 1366px) {
.side-nav .gnb > ul > li{min-width: 142px;}	
.side-nav .gnb .gnb-sub{padding:10px 10px;} .header .gnb{margin:1.85% auto;}
	
	.s_menu_pc {float:right;margin: 22px 6px 0 0;}
	.s_menu_pc li a{font-size: 11px; padding: 6px 7px; }

	
}

@media all and (max-width: 1280px) {
.side-nav .gnb > ul > li{margin:-5px;} .side-nav .gnb > ul > li{min-width:115px;} .header .gnb{margin:2.4% auto;}
}


@media all and (max-width: 1025px) {
.supmap .title02{font-size:0.8em;}
.header{height:120px;}
.header .gnb > ul > li:nth-child(3){margin-right:0px;}
.header .gnb{margin:36px 0 0 7%;} .header .gnb .gnb-sub.wide{left:0px;} 
	
	
	

.wrapper { padding-top:90px; }	
.mobile-only { display:block; }
.btn-top { width:41px; height:36px; }
.header {position:fixed !important;top:0 !important;left:0 !important;right:0 !important;overflow:visible;margin:0;padding:0 !important;background:#fff !important;height: 141px;}
.header h1 {float:none;padding:0px 0;text-align:center;left:0;right: 0;top: 15px;width: 100%;}
.header h1 img { width:15% !important; }
.header .gnb { float:none; margin:0; text-align:center; margin-top: 3%; width:100%;} .s_menu_pc_na{margin-top:0; margin:0;}
.header .gnb > ul > li > a { padding:10px 1px 2px 0px; font-size:14px;}
 /*  .header .gnb > ul > li > a:hover, .header .gnb > ul > li > a:focus, .header .gnb > ul > li > a.on, .header .gnb > ul > li > a.current { font-size: 0.5rem; font-weight: normal;}*/
.header .gnb > ul > li { padding:0px 2px 5px 0; }
.s_menu_pc{margin:-50px 15px 0 0; position:absolute; right:0; z-index:9999;} 
.s_menu_pc02{margin:-15px 15px 0 0; position:absolute; right:0; z-index:9999;} 	
.s_menu_pc li a{font-size:11.5px; padding:8px;}

.mbreser_pc, .mbreser_pc_02{display:none;}

.mbreser_mo_02{display:block;position: absolute;top: 40px;left: 3%;z-index: 110;text-align: center;font-size: 12px;color:#4d6b84;padding: 8px; transition: 0.5s ease;letter-spacing:2px;}
.s_menu_pc_na img {width:55%; padding:0 16px 0 16px; background:#01c73c;}

.header .gnb .gnb-sub { top:auto !important; /*bottom:-15px !important;*/ left:0 !important; right:0; padding:0; background:#fff; text-align:center;  }
.header .gnb .gnb-sub li{padding:4px 1px; margin-right:10px;;}
.widget .title{font-size:11px;}

.widget .title{margin:12px auto 0px;}
.footer_com{width:100%; padding:0;}
.col-md-3{width:100%; float:inherit; margin:0%;} .rowinfo{margin-top:15px;}
.widget ul li{font-size:11px; margin-bottom:15px;}

}
<!---->

@media all and (max-width: 770px) {
.header h1 img{width:20% !important;}

.header .gnb > ul {  }
.header .gnb > ul > li {display:inline-block;min-width: 100px;}
.header .gnb > ul > li > a {position:relative;display:block;text-align:center;font-size:16px;color:#434450;}
/*.header .gnb > ul > li > a:hover, .header .gnb > ul > li > a:focus, .header .gnb > ul > li > a.on, .header .gnb > ul > li > a.current { font-size: 1.1rem; font-weight: bold;}*/
.header .gnb .gnb-sub { display:none; position:absolute; z-index:1000; width:100%; margin-top:15px;}
.header .gnb .gnb-sub.current { display:block; }
.header .gnb .gnb-sub li { display:inline-block; margin-right:15px; }
.header .gnb .gnb-sub li a { font-size:13px; color:#79797a; }
.gnb .gnb-sub li a:hover, .gnb .gnb-sub li a:focus, .gnb .gnb-sub li a:active, .gnb .gnb-sub li a.on, .gnb .gnb-sub li a.current { color:#383838; font-weight:bold; }

.footer_com{width:100%; padding:0;}
.col-md-3{width:100%; float:inherit; margin:0%;} .rowinfo{margin-top:15px;}
.widget ul li{font-size:11px; margin-bottom:15px;}
.widget ul li span {font-size:13px;}


.mbreser_mo{display:block;position: absolute;top: 25px;left: 3%;z-index: 110;text-align: center; font-size: 11.5px; padding: 8px; transition: 0.5s ease;letter-spacing:2px;
 padding: 8px; border:1px solid #354a59;  font-family:'Pretendard-Regular'; border-radius:40px; color:#354a59;}

}

@media all and (max-width: 650px) {
.header h1 img{width:20% !important;}	
.header .gnb > ul > li > a{font-size:13px;} .header .gnb > ul > li{min-width:75px;}
.header .gnb{margin-top:5%;}
}

@media all and (max-width: 550px) {
.header h1 img{/* width:45% !important; */}	
	.header h1 img{width:30% !important;}	
.header .gnb > ul > li > a{font-size:10px; letter-spacing:-0.1px;} .header .gnb > ul > li{min-width:60px;}
.header .gnb > ul > li{padding:0;} .header .gnb{width:102%;}
.header .gnb .gnb-sub li{margin-right:5px; padding:0;}
}

@media all and (max-width: 450px) {
.s_menu_pc{margin:-44px 5px 0 0;}	
.s_menu_pc02{margin:-7px 5px 0 0;}		
	
.mbreser_mo{top:23px;}
/* .header h1 img{width:42% !important;}	*/
.header .gnb{margin-top:8%;}
.header .gnb > ul > li{min-width:58px;}
}

@media all and (max-width: 380px) {
.header .gnb > ul > li > a{font-size:10px;} .header .gnb > ul > li{min-width:50px;} .header .gnb .gnb-sub li {font-size:11px;} .header .gnb .gnb-sub li a{font-size:11px;}
.s_menu_pc li a{font-size:10px;} .s_menu_pc{/* margin:-25px  5px 0 0; */}
.mbreser_mo{ font-size:10px; top:23px;}
}

@media all and (max-width: 330px) {
.header h1 img{width:40% !important;}	
.header{height:100px;}
.header .gnb > ul > li{min-width:48.5px;}	.header .gnb > ul > li > a{letter-spacing:-0.1px;}
 .mbreser_mo{top:15px;}
}