@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Roboto:wght@100;200;300;400;500;700&display=swap');
html,body,div,span,p,h1,h2,h3,h4,h5,h6,sup,ul,ol,li,a,dt,dl,table,th,td,input,select,label,section,button,strong
{ font-family: 'Noto Sans KR', sans-serif; color: #333; font-size: 16px; letter-spacing: -1px;}
body,ul,p,span,h1,h2,h3,h4,h5,h6,blockquote,fieldset,legend{ margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6{ font-size: 18px;}
ol,ul{ list-style: none;}
em,address{ font-style: normal;}
fieldset{ border: none;}
legend{ text-indent: -999999px; width: 1px; height: 1px; overflow: hidden; font-size: 1px; line-height: 1px; position: absolute; left: 0; top: 0;}
img{ vertical-align: middle;}
input[type="checkbox"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="radio"]{ vertical-align: middle;}
a{ text-decoration: none; color: #4b4b4b;}
html,body{overflow-x: hidden;}



/* 공통 */
.wrap{ width:1200px; margin:auto; max-width:100%; min-width:1200px;}
.w1200{ width:1200px; margin:0 auto 100px;}
.bx-wrapper{box-shadow: 0 0 0 0; margin-bottom: 0; padding: 0; border: none; background-color: transparent;}
strong{ font-size: 1em;}

/* mobile-btn */
#mobile-btn{}
#mobile-btn { position: fixed; right: 0; top: 250px; z-index: 5;}
#mobile-btn > a { display: block; width: 210px; height: 60px; background: rgba(0,0, 0, 0.6) url(../image/main/mobile_on.png) right 15px top 26px no-repeat; color:#fff; border-radius: 20px 0 0 20px; transition: all 0.3s;}
#mobile-btn > a:hover { background-color: rgba(0, 129, 196, 1);}
/* #mobile-btn > a:hover p { display:block; opacity: 1; transition-delay: 0.2s } */
#mobile-btn > a > p { font-size: 18px; font-weight: 500; color: #fff; text-align: center; line-height: 60px}


/* 헤더 */
#header{ position: relative;}
#header .header-top{ border-bottom: 1px solid #999;}
/*#header .header-top:after{ content: ""; display: block; width: 100%; height: 1px; background-color: #e6e6e6;}*/
#header .header-top .wrap{ height: 110px;  margin: 0 auto; display:flex; justify-content:space-between; align-items:center;}
#header .header-top .btn{}
#header .header-top .btn ul{}
#header .header-top .btn ul li{ float: left; width: 100px; height: 35px; background-color: #004a98; line-height: 35px; text-align: center;}
#header .header-top .btn ul li:nth-child(1){ border-radius: 20px 0 0 20px;}
#header .header-top .btn ul li.kakao{border-radius: 0 20px 20px 0; padding: 0px 10px 0 35px; background: #f8e800 url(../image/main/ico_kakao_s.png) no-repeat left 15px center;}
#header .header-top .btn ul li.kakao a{ color: #3d2922;}
#header .header-top .btn ul li.naver_res{border-radius: 20px 0 0 20px; padding: 0px 10px 0 35px; background: #39b54a url(../image/main/ico_naver_s.png) no-repeat left 25px center;}
#header .header-top .btn ul li.naver_res a{ color: #fff;}
#header .header-top .btn ul li a{ display: block; color: #fff; font-size: 16px; font-weight: 700;}

#header .header-top h1{ /* width: 150px; height: 65px; */ }
#header .header-top h1 a{ display: block; width: 100%; height: 100%;}

#header .header-top .util{width:290px;}
#header .header-top .util ul{display:flex; justify-content:flex-end;}
#header .header-top .util ul li{}
#header .header-top .util ul li a{ font-size: 16px; position: relative;}
#header .header-top .util ul li:nth-child(2) a{ margin-left: 10px;/*  padding-left: 10px; */}
/* #header .header-top .util ul li:nth-child(2) a:after{ content: ""; display: block; width: 1px; height: 10px; background-color: #d4dedc; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} */

#header .header-bottom{ position: relative; box-sizing:border-box; border-bottom:1px solid #ddd;}
/* #header .header-bottom:after{ content: ""; display: block; width: 100%; height: 1px; background-color: #ddd; position: absolute; left: 0; top: 79px; z-index: 30;} */
#header .header-bottom #gnb{ height: 80px; position: relative;}
#header .header-bottom #gnb > li{ float: left; width: 20%; height: 100%; text-align: center; position: relative;}
#header .header-bottom #gnb > li > a:before{ content: ""; display: block; width: 1px; height: 22px; background-color: #d4dedc; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#header .header-bottom #gnb > li > a{ display: block; height: 100%; padding-top: 23px; box-sizing: border-box; font-size: 22px; position: relative;}
#header .header-bottom #gnb > li:first-child a:before{ display: none;}

/* 서브 메뉴 관련 */
#header .header-bottom #gnb li .depth2{ display: none; width: 100%; padding-top: 20px; box-sizing: border-box; position: absolute; left: 0; top: 78px; z-index: 9999; height:300px;}
#header .header-bottom #gnb li .depth2 li{ width: 100%; height: 45px;}
#header .header-bottom #gnb li .depth2 li:hover a{ color: #004a98; font-weight: bold;}
#header .header-bottom #gnb li .depth2 li a{ display: block; font-size: 18px; line-height: 45px;}
#header .menu-bg{ display: none; width: 100%; height: 300px; background-color: #fff; position: absolute; left: 0; top: 190px; z-index: 10; box-sizing:border-box; border-top:1px solid #ddd;}

/* 메뉴 활성화 */
#header.on .header-bottom #gnb li .depth2{ display: block;}
#header.on .menu-bg{ display: block;}


/* 퀵메뉴 */
.sideMenu_fixed { margin:0 auto; position: relative; right:60px; }
.sideMenu_fixed > .quick-cs {
	width:90px;
	position: absolute; 
	right:0; 
	top:116px;
	z-index: 10;
	background: #fff;
	transition: 0.5s;
	border: 1px solid #c6c6c6;
	padding: 10px 5px 10px;
	border-radius: 60px;
}
.sideMenu_fixed > .quick-cs > ul > li { display: table; width: 100%; height: 100px; border-bottom:1px solid #c6c6c6; }
.sideMenu_fixed > .quick-cs > ul > li > a {
	display: table-cell; 
	vertical-align: middle;
	font-size: 16px;
	letter-spacing: -0.04em;
	color:#181818;
	text-align: center;
	padding:10px 0;
}
.sideMenu_fixed > .quick-cs > ul > li > a img { display: block; margin: 0 auto 15px auto; }
.sideMenu_fixed  > .quick-cs > ul > li:last-child { height: 32px; border:none; }
.sideMenu_fixed .top-btn { 
	font-size: 16px;
	font-weight: 600;
	background-color: #824a79;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	margin-top: 5px;
	position: relative;
	cursor: pointer;
	left: 50%;
	transform: translateX(-50%);
}





/* 메인 슬라이드 */
.main-slide{ width: 1900px; margin: 0 auto; position: relative; width:100%; min-width:1200px;}
.main-slide .swiper-slide{ background-color: #ddd; height: 600px;}
.main-slide .swiper-slide img{width:100%; height:600px; display:block; text-align:Center; object-fit:none;}
.main-slide .btn-wrap{ width: 1200px; position: absolute; margin: 0 auto; height:58px; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9;}
.main-slide .swiper-button-prev, .main-slide .swiper-button-next{ width: 58px; height:58px; box-sizing:border-box; border-radius:50%; }

.main-slide .swiper-button-next{ right: 0; background:rgba(255, 255, 255, .4) url(../image/main/main_slide_next.png) center center no-repeat; filter:drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))}
.main-slide .swiper-button-prev{ left: 0; background:rgba(255, 255, 255, .4) url(../image/main/main_slide_prev.png) center center no-repeat; filter:drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))}

.main-slide .swiper-button-next:hover,
.main-slide .swiper-button-prev:hover{} 

.main-slide .swiper-button-next:hover,
.main-slide .swiper-button-prev:hover{}

.main-slide .swiper-button-next:after,.main-slide .swiper-container-rtl .swiper-button-prev:after{ content: ""; font-size: 20px; color: #fff; font-family: 'Noto Sans KR';}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{ content: ""; font-family: 'Noto Sans KR'; color: #f7f7f7; font-size: 20px;}
.main-slide .swiper-button-prev.swiper-button-disabled,.main-slide .swiper-button-next.swiper-button-disabled{ opacity: 1;}


/* 메인 콘텐츠 */
.section01{ }
.section01 .wrap{ display: flex; align-items: center; flex-wrap: wrap; padding: 35px 0; border-bottom: 1px solid #e1e1e1; justify-content:space-between;}
.section01 .left-con{}
.section01 .left-con p{font-size:24px; font-weight:bold; color:#333;}
.section01 .left-con span{font-size:16px; font-weight:400; color:#333; display:block; margin-top:18px;}
/* .section01 .left-con .circle{  display: inline-block; width: 100px; height: 100px; background-color: #004a98; color: #fff; font-size: 20px; font-weight: bold; border-radius: 50%; text-align: center; line-height: 100px; margin-right: 30px;}
.section01 .left-con .cs{ display: inline-block; vertical-align: middle;}
.section01 .left-con .cs .tel{ display: block; font-size: 24px; font-family: 'Roboto'; letter-spacing: -1.5px; line-height: 1;}
.section01 .left-con .cs .tel:before{ content: ""; display: inline-block; width: 16px; height: 17px; background: url(../image/main/ico_tel_s.png) no-repeat; padding-right: 10px;}
.section01 .left-con .cs .tel strong{ font-size: 34px; font-weight: 700; line-height: 1;}
.section01 .left-con .time{ font-size: 16px; letter-spacing: -1.5px; text-align: justify;}
.section01 .left-con .time td{ color: #888; padding-right: 10px;}
.section01 .left-con .time th{ font-weight: 700;}
.section01 .left-con .time .nsp{ letter-spacing: 14px;}
.section01 .left-con .noti{ color: #888; font-size: 14px; position: relative; padding-left: 20px;}
.section01 .left-con .noti:before{ content: ""; display: inline-block; width: 14px; height: 14px; background: url(../image/main/ico_ex_s.png) no-repeat; position: absolute; left: 0;  top: 3px;} */

.section01 . { margin: 0 45px;}
.section01 .center-con ul{ display: flex; flex-wrap: wrap; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.section01 .center-con ul li{ width: 160px; height: 105px; text-align: center; position: relative;}
.section01 .center-con ul li+li{ border-left: 1px solid #ddd;}
.section01 .center-con ul li a{ display: block; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding-top: 60px;}
.section01 .center-con ul li a span{ display: block; padding-top: 5px;}

.section01 .center-con ul li:nth-child(1){ background: url(../image/main/ico_01.png) no-repeat center top 20px;}
.section01 .center-con ul li:nth-child(2){ background: url(../image/main/ico_02.png) no-repeat center top 20px;}
.section01 .center-con ul li:nth-child(3){ background: url(../image/main/ico_03.png) no-repeat center top 20px;}
.section01 .center-con ul li:nth-child(4){ background: url(../image/main/ico_04.png) no-repeat center top 20px;}

.section01 .center-con ul li:nth-child(1):hover{ background: url(../image/main/ico_01_on.png) no-repeat center top 20px;}
.section01 .center-con ul li:nth-child(2):hover{ background: url(../image/main/ico_02_on.png) no-repeat center top 20px;}
.section01 .center-con ul li:nth-child(3):hover{ background: url(../image/main/ico_03_on.png) no-repeat center top 20px;}
.section01 .center-con ul li:nth-child(4):hover{ background: url(../image/main/ico_04_on.png) no-repeat center top 20px;}

.section01 .right-con{padding-right:30px;}
.section01 .right-con a{ display: block; font-size: 16px; text-align: left; position: relative;}
.section01 .right-con a strong{ display: block; padding-top: 5px; font-size: 24px; font-weight: 700;}
.section01 .right-con a .circle{ width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; background-color: #004a98; text-align: center; line-height: 20px; position: absolute; right: -30px; bottom: 3px;}
.circle .go_plus{display:block; margin:auto; height:100%; object-fit:none;}

.section01 .right-con:hover a .circle{ background-color: #2e2f30;}

.section02{}
.section02 .wrap{ padding: 60px 0 80px;}
.section02 h2{ display: block; text-align: center; font-size: 40px; margin-bottom: 38px;}



/*sec02 grid*/
.section02{}
.section02 .wrap{ padding: 60px 0 80px;}
.section02 .gridCon{
	display:inline-grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	background-color: #ddd;
	border:1px solid #ddd;
	box-sizing:border-box;
	gap: 1px;
	max-width:1200px;
	width:100%;
	height:600px;
	position:relative;
}
.section02 .gridCon .item{box-sizing:border-box; background:#fff;}
.section02 .gridCon .item a{ display: block; width: 100%; height: 100%; position: relative; overflow: hidden;}
.section02 .gridCon .item a > img{ transform: scale(1); transition: all 0.3s ease-out;}
.section02 .gridCon .item a:hover > img{ transform:scale(1.15);}
.section02 .gridCon .item a .overlay{position: absolute; left: 50%; top: 20px; transform: translateX(-50%); text-align: center; display:inline-block;}
.section02 .gridCon .item a .overlay h3{ font-size: 36px; text-align: center; white-space: nowrap;}
.section02 .gridCon .item a .overlay p{ font-size: 18px; margin-top:5px; white-space: nowrap;}
.section02 .gridCon .item a .circle{ width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; background-color: #004a98; text-align: center; line-height: 20px; position: absolute; right: 40px; bottom: 20px;}
.section02 .gridCon .item a .circle img{}

.section02 .gridCon .item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
.section02 .gridCon .item:nth-child(1) .overlay{left:auto; right:40px; transform:translateX(0);}
.section02 .gridCon .item:nth-child(1) .overlay h3{text-align:right;}
.section02 .gridCon .item:nth-child(1) .overlay p{text-align:right;}
.section02 .gridCon .item:nth-child(3) {
	grid-column: 4 / 5;
	grid-row: 1 / 3;
}
.section02 .gridCon .item:nth-child(3) .circle{left:50%; top:200px; transform:translateX(-50%);}
.section02 .gridCon .item:nth-child(5) {
	grid-column: 2 / 4;
	grid-row: 2 / 3;
}
.section02 .gridCon .item:nth-child(5) .overlay{left:40px; transform:translateX(0);}
.section02 .gridCon .item:nth-child(5) .overlay h3{text-align:left;}
.section02 .gridCon .item:nth-child(5) .overlay p{text-align:left;}
.section02 .gridCon .item:nth-child(5) .circle{right:auto; left:40px;}




.section03{ margin-bottom: 80px;}
.section03 .wrap{ display: flex; border:1px solid #ddd;}
.section03 .flex{ width: 50%; height:100%; display: flex; flex-wrap: nowrap;}
.section03 .time-cs{ width: 380px; height: 360px; padding:20px 45px; box-sizing: border-box;}
.section03 .time-cs .text-wrap{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ddd;}
.section03 .time-cs .tit{ display: block; font-size: 24px; padding-bottom: 15px;}
.section03 .time-cs .tit strong{ font-size: 1em;}
.section03 .time-cs .tel{ display: block; font-size: 36px; font-family: 'Roboto'; letter-spacing: -1.5px; line-height: 1; color:#004a98;}
.section03 .time-cs .tel strong{ font-size: 50px; font-family: 'Roboto'; font-weight: 700; color:inherit;}

.section03 .time-cs .time-wrap{ }
.section03 .time-cs .time-wrap .tit{  display: block; font-size: 24px; padding-bottom: 15px;}
.section03 .time-cs .time-wrap span strong{ font-size: 1em;}
.section03 .time-cs .time{ font-size: 18px; letter-spacing: -1.5px; text-align: justify;}
.section03 .time-cs .time th{ font-size: 1em; color: #888; padding-right: 20px; font-weight:400;}
.section03 .time-cs .time td{ font-size: 1em; font-family: 'Roboto'; font-weight: 700;}
.section03 .noti{ display: block; color: #888; font-size: 18px; position: relative; padding-left: 20px; margin-top: 10px;}
.section03 .noti:before{ content: ""; display: inline-block; width: 16px; height: 16px; background-image: url(../image/main/ico_ex_s.png);background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top: 6px;}
.section03 ul{ height: 360px;}
.section03 ul li{ width: 220px; height: 50%;}
.section03 ul li+li{ border-top: 1px solid #cdcdcd; box-sizing: border-box;}
.section03 ul li:nth-child(1){ background: #ffe806 url(../image/main/ico_kakao.png) no-repeat top 40px center;}
.section03 ul li:nth-child(2){ background: #19ce60 url(../image/main/ico_naver.png) no-repeat top 40px center;}
.section03 ul li a{ display: block; font-size: 24px; text-align: center; padding: 110px 0 40px; box-sizing: border-box;}
.section03 ul li a strong{ font-size: 1em; color:inherit;}
.section03 ul li:nth-child(1) a{ color: #452c33;}
.section03 ul li:nth-child(2) a{ color: #fff;}
.mapArea{width:100%; max-width:600px; height:100%; max-height:360px;}
.root_daum_roughmap_landing{width:100%; height:100%}
.root_daum_roughmap .wrap_controllers{display:none;}
.root_daum_roughmap .wrap_map{height:360px; box-sizing:border-box;}



.section04{ height: 360px; text-align: center; background-image: url(../image/main/main_bg_01.jpg);}
.section04 .wrap{ height: 100%; padding:  80px 0; box-sizing: border-box;}
.section04 p{ color: #fff; font-size: 36px; font-weight: 300; letter-spacing: -1.5px; line-height: 1.2;}
.section04 p strong{ color: #fff; font-weight: 500; font-size:50px;}
.section04 span{ display: block; font-weight: 700; color: #fff; font-size: 22px; padding-top: 30px;}
.section04 span strong{ font-weight: 700; color: #9edeff;}
.section04 button{ display: block; width: 100px; height: 35px; border-radius: 30px; border: 1px solid #fff; background-color: rgb(255, 255, 255, 0.3); margin: 20px auto 0; line-height: 30px;}
.section04 button a{ display: block;  width: 100%; height: 100%; font-size: 18px; font-weight: 500; text-align: center; color: #fff;}

.section04 button:hover{  background-color:#9edeff; border: 1px solid #9edeff;  /*background-color: rgb( 0, 129, 196, 0.3);*/}
.section04 button:hover a{}




#footer{ background-color: #222222; height: 240px;}
#footer .wrap{ overflow: hidden; height: 100%; padding-top: 60px; box-sizing: border-box;}
#footer .ft-logo{ float: left;  margin: 35px 100px 0 0;}
#footer .ft-info{ float: left;}
#footer .ft-info p{ color: #a4a4a4; font-size: 18px;}
#footer .ft-info ul{ overflow: hidden; margin-bottom: 20px;}
#footer .ft-info ul li{ float: left;}
#footer .ft-info ul li a{ font-size: 20px; color: #fff; position: relative; margin-left: 10px; padding-left: 10px;}
#footer .ft-info ul li a:before{ content: ""; width: 1px; height: 10px; background-color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#footer .ft-info .bfn{ margin-left: 0; padding-left: 0;}
#footer .ft-info .bfn:before{ display: none;}
#footer .ft-info address{ }
#footer .ft-info address span{ color: #a4a4a4; font-size: 18px; position: relative;  margin-left: 10px; padding-left: 10px; letter-spacing: -1.5px; line-height: 1.5;}
#footer .ft-info address span:before{ content: ""; width: 1px; height: 10px; background-color: #a4a4a4; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

#footer .scrollTop_btn { width: 50px; height: 50px; background-image: url(../image/main/scroll_top.jpg); position: fixed; bottom: 130px; right:200px; cursor: pointer; z-index: 99; display: none;}