@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

/*********layout*********/
html,body {margin:0; padding:0; width:100%; height:100%;}
.w_1200 {position:relative; width:1200px; margin:0 auto;}
.w_1440 {position:relative; width:1440px; margin:0 auto;}
img {-webkit-perspective:1;}


/*fullpage*/
html {overflow-x: hidden;}
.section {align-items: center; display: flex; flex-direction: column; justify-content: center; height: 100vh; position: relative; width: 100%;}

/* header, footer */
#header {position:fixed; top:0; left:0; width:100%; z-index:100; }
#header .header_cont:after {clear:both; content:""; display:block;}
#header h1.logo {position:absolute; left:0; top:46px;}
#header #menu {float:right;}
#header #menu ul.menu_1depth {height:130px;}
#header #menu ul.menu_1depth li {position:relative; float:left; padding:0 40px; line-height:130px; height:130px;}
#header #menu ul.menu_1depth li:last-child {padding-right:0;}
#header #menu ul.menu_1depth li a {font-size:22px; font-weight:700; color:#fff; height:130px; text-shadow:0 1px 10px rgba(0, 0, 0, 0.4);}
#header #menu ul.menu_1depth li ul.menu_2depth {display:none; position:absolute; left:50%; top:130px; margin-left:-100px; background:#fff; width:200px; padding:20px 0; box-shadow:0 5px 20px rgba(0, 0, 0, 0.2);}
#header #menu ul.menu_1depth li ul.menu_2depth li {line-height:40px; height:40px; float:none; padding:0; text-align:center;}
#header #menu ul.menu_1depth li ul.menu_2depth li a {font-size:16px; font-weight:600; color:#000; text-shadow:none;}
#header #menu ul.menu_1depth li:hover ul.menu_2depth {display:block;}
#header #menu ul.menu_1depth li:last-child ul.menu_2depth {margin-left:-80px;}
#header:hover {background:rgba(0, 0, 0, 0.2);}
#header.fixed {height:80px; background:rgba(0, 0, 0, 0.2);}
#header.fixed h1.logo {top:21px;}
#header.fixed #menu ul.menu_1depth {height:80px;}
#header.fixed #menu ul.menu_1depth li {line-height:80px; height:80px;}
#header.fixed #menu ul.menu_1depth li ul.menu_2depth {top:80px;}
#header .m_cate {display:none;}
#header .m_cate_close {display:none;}
.footet {position:relative; padding:50px 0; margin-top:120px; background:#23292d;}
.footet .w_1440 {}
.footet .foot_cont {}
.footet .foot_cont:after {clear:both; content:""; display:block;}
.footet .foot_cont h2 {padding-bottom:28px;}
.footet .foot_cont address {font-size:15px; line-height:32px; color:#aaa;}
.footet .foot_cont ul {position:absolute; right:0; top:0;}
.footet .foot_cont ul:after {clear:both; content:""; display:block;}
.footet .foot_cont ul li {position:relative; float:left; padding-left:20px; margin-left:15px;}
.footet .foot_cont ul li a {font-size:15px; color:#aaa;}
.footet .foot_cont ul li a:hover {font-weight:700; color:#ccc;}
.footet .foot_cont ul li:after {content:"/"; left:0; top:0; position:absolute; font-size:15px; color:#aaa;}
.footet .foot_cont ul li:first-child:after {display:none;}


/* container */
#container {overflow:hidden;}
.w_1440 {width:1440px; margin:0 auto; position:relative;}
.pc_only {display:inline-block;}
.m_only {display:none;}

/*main*/
.main_tit {font-size:60px; font-weight:800; padding-bottom:60px; text-align:center;}
.main_tit span {background:linear-gradient(305deg, #0097F6 0%, #09DD8D 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.sec_visual {position:relative;}
.sec_visual .swiper {width:100%; height:100%;}
.sec_visual .cover {width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; object-fit: cover;}
.sec_visual .swiper-slide img {transform: scale(1.1); transition: 3s ease; opacity: 0;}
.sec_visual .swiper-slide-active img {transform: scale(1); opacity: 1;}
.sec_visual .swiper-button-prev {width:70px; height:110px; left:4%; top:50%; margin-top:-55px; background:url("../images/visual_left.png") no-repeat;}
.sec_visual .swiper-button-prev:after {display:none;}
.sec_visual .swiper-button-next {width:70px; height:110px; right:4%; top:50%; margin-top:-55px; background:url("../images/visual_right.png") no-repeat;}
.sec_visual .swiper-button-next:after {display:none;}
.sec_visual .visual_scroll {position:absolute; left:50%; bottom:7%; margin-left:-40px; z-index:10;}
.sec_visual .visual_scroll a {display:block; width:79px; height:56px; text-indent:-9999px; background:url("../images/btn_scroll.png") no-repeat center center / 100% 100%;}
.sec_visual .visual_scroll {animation: motion 0.4s linear 0s infinite alternate; bottom: 7%;}
@keyframes motion {
	0% {bottom:7%;}
	100% {bottom:7.5%;}
}

.sec_banner {position:relative; padding-top:160px; padding-bottom:200px; background:url("../images/bg_01.png") no-repeat left top}
.sec_banner:before {
    right: -60%;
    top: -10%;
    width: 130rem;
    height: 130rem;
    background-image: url("../images/bg_circle_green.png");
    transform: translate(0%, 0%);
    animation: bgCircleLeft 15s linear infinite;
	opacity:0.5;
}
.sec_banner:after {
    right: -30%;
    top: 0%;
    width: 130rem;
    height: 130rem;
    background-image: url("../images/bg_circle_blue.png");
    transform: translate(0%, 0%);
    animation: bgCircleRight 15s linear infinite;
	opacity:0.5;
}
.sec_banner::before, .sec_banner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    z-index: -1;
}
.sec_banner ul {display:flex; flex-wrap:wrap; justify-content:center; justify-content:center;}
.sec_banner ul li {width:calc(20% - 16px); text-align:center; margin:0 10px;}
.sec_banner ul li:first-child {margin-left:0;}
.sec_banner ul li:last-child {margin-right:0;}
.sec_banner ul li a {position:relative; display:block; width:100%; height:100%; padding:58px 0; box-sizing:border-box; background: rgba(255,255,255,0.5);}
.sec_banner ul li a::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-width:1px; border-style:solid; border-color:#CDDCE5;}
.sec_banner ul li a:hover::before {border-width:2px; border-color:none; border-image:linear-gradient(316deg, #0097F6 0%, #09DD8D 100%) 1;}
.sec_banner ul li div {padding-bottom:40px;}
.sec_banner ul li h4 {font-size:30px; font-weight:700; padding-bottom:16px;}
.sec_banner ul li p {font-size:18px; color:#757575; font-weight:300;}
.sec_news {}
.sec_news .board_cont {margin-bottom:2%;}
.sec_news .board_cont:after {clear:both; content:""; display:block;}
.sec_news .board_cont .board_box {float:left; width:49%; margin-left:2%; border:1px solid #CDDCE5; background: rgba(255,255,255,0.5); box-sizing:border-box; padding:3% 3% 2% 3%;}
.sec_news .board_cont .board_box:first-child {margin-left:0;}
.sec_news .board_cont .board_box div.board_tit {position:relative; font-size:30px; font-weight:700; padding-bottom:20px;}
.sec_news .board_cont .board_box div.board_tit p {position:absolute; right:0; top:4px;}
.sec_news .board_cont .board_box ul {}
.sec_news .board_cont .board_box ul li {border-bottom:1px solid #eee1ee; padding:20px 0;}
.sec_news .board_cont .board_box ul li:after {clear:both; content:""; display:block;}
.sec_news .board_cont .board_box ul li:last-child {border:none;}
.sec_news .board_cont .board_box ul li h4 {float:left; font-size:18px; font-weight:500; width:calc(100% - 120px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.sec_news .board_cont .board_box ul li p {float:right; font-size:18px; opacity:0.5; width:120px; text-align:right;}
.sec_news .local_store {margin-bottom:2%;}
.sec_news .local_store .swiper-button-next:after, .sec_news .local_store .swiper-button-prev:after {font-size:20px; color:#fff;}
.sec_news .local_store img {width:100%;}
.sec_news ul.family_site {display:flex; flex-wrap:wrap; justify-content:center; justify-content:center; margin-bottom:2%;}
.sec_news ul.family_site li {width:calc(20% - 16px); text-align:center; margin:0 10px; border:1px solid #CDDCE5; box-sizing:border-box;}
.sec_news ul.family_site li img {width:100%;}
.sec_news ul.family_site li:first-child {margin-left:0;}
.sec_news ul.family_site li:last-child {margin-right:0;}
.sec_news .banner_qna {text-align:center; padding:36px 0; background:linear-gradient(316deg, #0097F6 0%, #09DD8D 100%);}
.sec_news .banner_qna h4 {font-size:30px; color:#fff; font-weight:700; padding-bottom:20px;}
.sec_news .banner_qna a {display:block; width:160px; height:40px; line-height:40px; font-size:16px; color:#364954; font-weight:700; background:#fff; margin:0 auto;}
.sec_news .banner_qna a:hover {background:#364954; color:#fff;}



/*sub*/
.sub_visual {text-align:center; font-size:70px; color:#fff; font-weight:700; height:500px; line-height:500px; text-shadow:0 1px 10px rgba(0, 0, 0, 0.4);}
.sub_visual.bg_office {background:url("../images/subvisual_office.jpg") no-repeat center center / cover;}
.sub_visual.bg_introduction {background:url("../images/subvisual_introduction.jpg") no-repeat center center / cover;}
.sub_visual.bg_information {background:url("../images/subvisual_information.jpg") no-repeat center center / cover;}
.sub_visual.bg_library {background:url("../images/subvisual_library.jpg") no-repeat center center / cover;}
.sub_visual.bg_news {background:url("../images/subvisual_news.jpg") no-repeat center center / cover;}
ul.sub_menu {text-align:center; background:linear-gradient(316deg, #0097F6 0%, #09DD8D 100%); line-height:60px;}
ul.sub_menu li {display:inline-block; padding:0 20px;}
ul.sub_menu li a {font-size:16px; color:#fff;}
ul.sub_menu li.on a {font-weight:800; border-bottom:2px solid #fff;}
.sub_cont {padding:100px 0 80px 0; word-break:keep-all; background:url("../images/bg_01.png") no-repeat left top;}
.sub_cont .sub_tit {font-size:50px; font-weight:800; position:relative; padding-top:26px; margin-bottom:50px;}
.sub_cont .sub_tit:after {content:""; position:absolute; left:0; top:0; width:50px; height:4px; background:linear-gradient(316deg, #0097F6 0%, #09DD8D 100%);}
.sub_cont h2 {font-size:30px; padding-bottom:16px; line-height:40px;}
.sub_cont h2.pb30 {padding-bottom:30px;}
.sub_cont h4 {font-size:24px;}
.sub_cont p {font-size:18px; line-height:30px;}
.sub_cont p.small {font-size:14px;}
.sub_cont p.right {text-align:right;}
.sub_cont p span.bold {font-weight:600;}
.sub_cont .color_text {position:relative; margin-bottom:14px;}
.sub_cont .color_text p {display:inline-block; font-size:18px; font-weight:800; background:linear-gradient(305deg, #0097F6 0%, #09DD8D 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.sub_cont .color_text span.right {position:absolute; right:0; bottom:0; font-size:14px; font-weight:400; -webkit-text-fill-color:#888;}
.pb10 {padding-bottom:10px;}
.pb40 {padding-bottom:40px;}
.pb60 {padding-bottom:60px;}
.pb80 {padding-bottom:80px;}
.mb10 {margin-bottom:10px;}
.mb40 {margin-bottom:40px;}
.mb60 {margin-bottom:60px;}
.mb80 {margin-bottom:80px;}
.pt40 {padding-top:40px;}

.sub_greeting {}
.sub_greeting:after {clear:both; content:""; display:block;}
.sub_greeting .cont {float:left; width:45%; }
.sub_greeting .img {float:right; width:50%; }
.sub_greeting .img img {width:100%;}

ul.thum_img {display:flex; flex-wrap:wrap; gap:12px;}
ul.thum_img.thum_03 li {flex:1;}
ul.thum_img li {flex:1 1 auto;}
ul.thum_img li img {width:100%;}
.sub_board {min-height:200px; text-align:center; font-size:16px;}
.map_cont {border:1px solid #CDDCE5; padding:1%; background:#fff;}
.map_cont img {width:100%; border:1px solid rgba(205,220,229,0.7);}


#popup {position:fixed; left:4%; top:4%; z-index:9999; max-width:500px;}
#popup .popup_img {}
#popup .popup_img img {width:100%;}
#popup ul.popup_btn {height:50px;}
#popup ul.popup_btn li {float:left; width:50%; text-align:center;  border:1px solid #ddd; box-sizing:border-box;}
#popup ul.popup_btn li a {display:block; width:100%; height:50px; line-height:50px; background:#eee; font-size:14px; color:#555;}


/*** PC 축소 ***/
@media screen and (max-width:1500px) {
	.w_1440 {width:92%; padding:0 4%;}
	#header h1.logo {left:4%;}
	.footet .foot_cont ul {right:4%;}
}




/*** PC 축소 ***/
@media screen and (max-width:1300px) {
	#header #menu ul.menu_1depth li {padding-left:60px;}
	.main_tit {font-size:42px; padding-bottom:40px;}
	.sec_banner {padding:120px 0;}
	.sec_banner ul li div {width:50px; margin:0 auto;}
	.sec_banner ul li div img {width:100%;}
	.sec_banner ul li h4 {font-size:24px;}
	.sec_banner ul li p {font-size:14px;}
	.sec_banner ul li a {padding:40px 0;}
	.sec_news .board_cont .board_box div.board_tit {font-size:24px;}
	.sec_news .board_cont .board_box ul li {padding:15px 0;}
	.sec_news .board_cont .board_box ul li h4 {font-size:16px;}
	.sec_news .board_cont .board_box ul li p {font-size:16px;}
}



/*** 태블릿세로버전 ***/
@media screen and (max-width:1023px) {
	.pc_only {display:none;}
	.m_only {display:block;}

	/**상단 관련**/
	#header {height:60px;}
	#header h1.logo {top:18px;}
	#header h1.logo img {height:24px;}
	#header.fixed {height:60px;}
	#header.fixed h1.logo {top:18px;}
	#header .m_cate {display:block; position:fixed; right:4%; top:5px;}
	#header .m_cate button {text-indent:-9999px; width:50px; height:50px; background:url("../images/quick_category_white.png") no-repeat center center / 30px 30px;}
	#header .m_cate_close {display:none; position:fixed; left:calc(20% - 70px); top:10px;}
	#header .m_cate_close.on {display:block;}
	#header .m_cate_close button {text-indent:-9999px; width:60px; height:60px; background:url("../images/quick_close_white.png") no-repeat center center / 35px 35px;}
	#header #menu ul.menu_1depth li {height:auto;}
	#header #menu ul.menu_1depth li:last-child ul.menu_2depth {margin:0;}
	#header #menu ul.menu_1depth li ul.menu_2depth {display:block; margin:0; width:auto; position:static; box-shadow:none; background:#f5f5f5; }
	#header #menu ul.menu_1depth li ul.menu_2depth li a {text-align:left; padding-left:10%; height:40px; font-weight:500;}
	#header.fixed #menu ul.menu_1depth li {height:auto;}

	/*nav*/
	.dim_layer {display:none;}
	.dim_layer.on {display:-webkit-box;position: fixed;top: 0;left: 0;z-index: 1000;width: 100%;height: 100%;background: rgba(0,0,0,0.7);}
	#header #menu {width:80%; height:100%; overflow-x:hidden; position:fixed; top:0; right:-80%; z-index:9999; background:#fff; transition:0.4s;}
	#header #menu ul.menu_1depth {height:auto; padding:5% 0;}
	#header #menu ul.menu_1depth li {float:none; padding:0; line-height:50px;}
	#header.fixed #menu ul.menu_1depth li {line-height:50px;}
	#header #menu ul.menu_1depth li a {display:inline-block; width:100%; height:50px; padding:0 6%; box-sizing:border-box; font-size:18px; color:#000; text-shadow:none;}
	
	/*main*/
	.main_tit {font-size:34px; padding-bottom:30px;}
	.sec_visual .swiper-button-prev, .sec_visual .swiper-button-next {background-size:cover; width:35px; height:55px; margin-top:-27px;}
	.sec_visual .visual_scroll {margin-left:-30px;}
	.sec_visual .visual_scroll a {width:60px; height:43px;}
	.sec_banner {padding:100px 0;}
	.sec_banner ul {}
	.sec_banner ul li {width:calc(33.3% - 10.6px); text-align:center; margin:0 8px; margin-bottom:16px;}
	.sec_banner ul li:first-child {margin-left:0;}
	.sec_banner ul li:nth-child(3) {margin-right:0;}
	.sec_banner ul li:last-child {margin-right:8px;}
	.sec_news ul.family_site {}
	.sec_news ul.family_site li {width:calc(33.3% - 10.6px); text-align:center; margin:0 8px; margin-bottom:16px;}
	.sec_news ul.family_site li:first-child {margin-left:0;}
	.sec_news ul.family_site li:nth-child(3) {margin-right:0;}
	.sec_news ul.family_site li:last-child {margin-right:8px;}
	.sec_news .banner_qna h4 {font-size:24px;}

	/*sub*/
	.pb80 {padding-bottom:60px;}
	.sub_visual {height:260px; line-height:260px; font-size:40px;}
	.sub_cont {padding:50px 0 40px 0;}
	.sub_cont .sub_tit {font-size:30px; padding-top:18px; margin-bottom:30px;}
	.sub_cont .sub_tit:after {width:30px; height:3px;}
	.sub_cont h2 {font-size:22px; line-height:30px;}
	.sub_cont h2.pb30 {padding-bottom:20px;}
	.sub_cont h4 {font-size:16px; line-height:24px;}
	.sub_cont p {font-size:14px; line-height:24px;}
	.sub_cont .color_text p {font-size:16px;}
	.sub_cont .color_text span.right {font-size:12px;}
	.sub_cont p.right {text-align:left;}

	ul.thum_img.thum_03 li {flex:1 1 auto;}
	ul.sub_menu {line-height:35px; padding:10px 0;}
	ul.sub_menu li {padding:0 10px;}
	ul.sub_menu li a {font-size:15px;}

	.sub_greeting {}
	.sub_greeting .cont {float:none; width:100%; margin-bottom:40px;}
	.sub_greeting .img {float:none; width:100%;}
	.map_cont {padding:2%;}


}



/*** 모바일버전 ***/
@media screen and (max-width:767px) {
	.section.sec_visual {height:400px;}
	.main_tit {font-size:30px;}
	.sec_banner {padding:80px 0; background:url("../images/bg_01.png") no-repeat left top / 200% auto;}
	.sec_banner .main_tit span {display:block;}
	.sec_banner ul {margin-left:-4%; padding-right:0; width:96%;}
	.sec_banner ul li {width:46%; text-align:center; margin:0 0 4% 4%;}
	.sec_banner ul li:first-child {margin-left:4%;}
	.sec_banner ul li:nth-child(3) {margin-right:0;}
	.sec_banner ul li:last-child {margin-right:0; width:100%;}
	.sec_banner ul li div {width:40px; padding-bottom:20px;}
	.sec_banner ul li a {padding:30px 0;}
	.sec_banner ul li h4 {font-size:18px; padding-bottom:10px;}
	.sec_banner ul li p {font-size:13px;}
	.sec_banner:after, .sec_banner:before {display:none;}

	.sec_news .board_cont .board_box {margin-left:0; width:100%; padding:6%; margin-bottom:4%;}
	.sec_news .board_cont .board_box div.board_tit {font-size:18px; padding-bottom:10px;}
	.sec_news .board_cont .board_box div.board_tit p img {width:16px;}
	.sec_news .board_cont .board_box ul li h4 {font-size:13px; width:calc(100% - 80px);}
	.sec_news .board_cont .board_box ul li p {font-size:13px; width:80px;}
	.sec_news ul.family_site {margin-left:-2%;}
	.sec_news ul.family_site li {width:48%; text-align:center; margin:0 0 2% 2%;}
	.sec_news ul.family_site li:first-child {margin-left:2%;}
	.sec_news ul.family_site li:nth-child(3) {margin-right:0;}
	.sec_news ul.family_site li:last-child {margin-right:0; height:62px; width:100%;}
	.sec_news ul.family_site li:last-child img {height:60px; width:auto;}
	.sec_news .banner_qna h4 {font-size:18px;}

	.footet {margin-top:80px; padding:34px 0;}
	.footet .foot_cont h2 {padding-bottom:20px;}
	.footet .foot_cont h2 img {height:20px;}
	.footet .foot_cont address {font-size:13px; line-height:24px;}
	.footet .foot_cont ul {position:static; padding-top:20px;}
	.footet .foot_cont ul li {margin-left:10px; padding-left:15px;}
	.footet .foot_cont ul li:first-child {margin-left:0; padding-left:0;}
	.footet .foot_cont ul li a {font-size:13px;}
	.footet .foot_cont ul li:after {font-size:13px;}

	#popup {max-width:92%;}
}