@charset "utf-8";

/* .aos-all div { display: block; background-color: skyblue; width: 200px; height: 400px; margin: 20px;} */
			
#sub-wrapper {
overflow: hidden;
width: 100%;
min-width: 320px;
position: relative;
}
		
#wrapper-inner {
position: relative; 
width: 100%;
}
			
.gnb-area {
width: 100%;
max-width: 900px;
margin: 0px auto; 
}

/* Header */
#header {
position: fixed; 
top: 0; 
width: 100%; 
height: 80px; 
z-index: 99;
}
				
#header-wrap {
position: absolute; 
top: 0; 
left: 0; 
height: inherit; 
width: 100%; 
z-index: 99; 
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}

#header-inner {
position: relative; 
height: inherit; 
margin: 0px auto; 
padding: 0 40px; 
}
						
#header .logo {
position: relative; 
z-index: 100; 
float: left; 
padding-top: 19px; 
margin-left: -1px;
}
			
#header .logo a {display: block;}

#header .logo img {display: block;}

#header.over {}

#header.over #header-wrap {
background: rgba(29, 36, 42, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#header #header-wrap.bg {
background: rgba(29, 36, 42, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
	
/* Gnb 1depth */
.gnb-overlay-bg { /* Gnb 1depth BG */
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 80px; 
background: rgba(29, 36, 42, 0); 
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 99;
}
				
#gnbBg { /* Gnb 2depth BG */
display: none; 
position: absolute; 
left: 0; 
top: 80px; 
width: 100%; 
height: 220px; 
background: rgba(29, 36, 42, 0.9); 
z-index: 99;
}
						
#gnb {
position: absolute; 
text-align: center; 
top: 0; 
left: 0px; 
width: 100%; 
z-index: 99;
}
						
#gnb > ul {
display: inline-block; 
*display: inline;
*zoom: 1;
}

#gnb > ul > li {
position: relative; 
display: inline-block; 
text-align: center;
}

#gnb > ul > li > a {
position: relative; 
z-index: 100; 
display: block; 
height: 80px; 
line-height: 80px; 
padding: 1px 40px 0 40px; 
text-align: center; 
color: #ffffff; 
font-family: 'Nanum Square', Arial, "µ¸¿ò", Dotum, sans-serif;
font-size: 18px; 
font-weight: 700; 
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}

#gnb > ul > li > a:before {
position: absolute; 
bottom: 0; 
left: 50%; 
display: block; 
content: ''; 
width: 0; 
height: 2px; 
background-color: #0071bc; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-ms-transition: all 0.3s; 
-o-transition: all 0.3s; 
transition: all 0.3s;
}

#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color: #fff;}

#gnb > ul > li > a:hover:before, #gnb > ul > li.on > a:before{
width: 70%; 
margin-left: -35%;
}
						
/* Gnb 2depth */
#gnb.total-menu > ul > li .gnb-2dep {
display: none; 
position: absolute; 
top: 80px; 
left: 0px; 
z-index: 100;
width: 100%; 
text-align: left; 
}
			
#gnb.total-menu > ul > li:hover .gnb-2dep {}

#gnb > ul > li .gnb-2dep ul {padding: 20px 0px;}

#gnb > ul > li .gnb-2dep ul li {
position: relative; 
padding: 10px;
}

#gnb > ul > li .gnb-2dep ul li a {
display: block; 
text-align: center; 
color: #aaa; 
font-size: 15px; 
font-weight: 700; 
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s
}

#gnb > ul > li .gnb-2dep ul li a:hover {color: #0086e0;}
			
/* Gnb Mobile */
.nav-open-btn {display: none;}

#gnbM {display: none;}
			
/* Sub */
#sub-visual {
width: 100%; 
height: 500px; 
background-size: cover !important;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-o-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}

#sub-visual.top-visual-about {background: url("../images/about/about_visual_01.jpg") no-repeat 50% 50%;}
#sub-visual.top-visual-business {background: url("../images/business/business_visual_01.jpg") no-repeat 50% 50%;}
#sub-visual.top-visual-community {background: url("../images/community/community_visual_01.jpg") no-repeat 50% 50%;}
#sub-visual.top-visual-membership {background: url("../images/membership/membership_visual_01.jpg") no-repeat 50% 50%;}
			
#sub-visual .sub-title {
			/* 
			max-width: 100%;
			margin: 0px auto;
			 */
color: #fff;
text-align: center;
margin-top: 40px;
}
		
#sub-visual h1 {
line-height: 1.7;
font-weight: 200;
}

#sub-visual h6 {font-weight: 200;}

#sub-visual h6 br {display:none;}

/* Top Button */
.gotoTop {
display: none; 
position: fixed; 
bottom: 0px; 
right: 40px; 
z-index: 11; 
width: 55px; 
height: 55px;
background-color: #292c31;
}

.gotoTop img {width: 100%}
			
/* Footer */
#footer {
width: 100%; 
height: 300px; 
z-index: 10; 
background-color: #292c31;
}
			
#footerInner {
margin: 0px auto;
color: #fff; 
padding: 60px 40px;
}

/* ¼öÁ¤ ¹× Ãß°¡ (2023-10-17) */
#footerInner .sns {
    text-align:center;
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
}

#footerInner .sns ul:nth-child(2) {
    margin-left:30px;
}

#footerInner .sns ul:nth-child(2) li a {
    display:block;
}

#footerInner .sns li {
display: inline-block;
margin-right: 10px;
margin-bottom: 30px;
}
#footerInner .sns li:last-child {margin-right: 0px;}

.btn_youtube {
background: url("../images/common/icon_youtube_off.png") no-repeat 50% 50%;
width: 60px;
height: 60px;
opacity: 0.5;
border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn_youtube:hover,
.btn_youtube:focus,
.btn_youtube:active,
.btn_youtube.active{
background: url("../images/common/icon_youtube_on.png") no-repeat 50% 50%;
opacity: 1;
background-color: transparent;
border: 1px solid rgba(248, 0, 0, 0.35);
}

.btn_facebook {
background: url("../images/common/icon_facebook_off.png") no-repeat 50% 50%;
width: 60px;
height: 60px;
opacity: 0.5;
border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn_facebook:hover,
.btn_facebook:focus,
.btn_facebook:active,
.btn_facebook.active{
background: url("../images/common/icon_facebook_on.png") no-repeat 50% 50%;
opacity: 1;
background-color: transparent;
border: 1px solid rgba(72, 103, 177, 0.6);
}

.btn_instagram {
background: url("../images/common/icon_instagram_off.png") no-repeat 50% 50%;
width: 60px;
height: 60px;
opacity: 0.5;
border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn_instagram:hover,
.btn_instagram:focus,
.btn_instagram:active,
.btn_instagram.active{
background: url("../images/common/icon_instagram_on.png") no-repeat 50% 50%;
opacity: 1;
background-color: transparent;
border: 1px solid rgba(103, 79, 157, 0.6);
}
			
#footerInner .copyright {
text-align: center;
line-height: 1.5;
}

#footerInner .copyright li {
display: inline-block;
font-weight: 700;
opacity: 0.5;
margin-right: 20px;
}
#footerInner .copyright li:last-child {margin-right: 0px;}

#footerInner .copyright p {
font-size: 12px;
opacity: 0.3;
padding-top: 10px;
}

#footerInner .copyright br {display: none;}
			
/* @media */
@media all and (max-width:1200px) {
	/* Header */
	#header-wrap {position:fixed;}
				
	/* GnbM */
	#gnb {display:none;}
	.gnb-overlay-bg {display:none;}
	
	#gnbM {
	display:block; 
	overflow-y:auto; 
	position:fixed; 
	top:0px; 
	right:-102%;
	width:100%; 
	height:100%;  
	max-width:500px;
	background-color:#fff; 
	z-index:300; 
	box-shadow:-2px 1px 100px 5000px rgba(29, 36, 42, 0.9); /* º»¹® ¼û±â±â È¿°ú */
	-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	visibility:hidden;
	}
	#gnbM.open {right:0px; visibility:visible;}
	#gnbM .gnbM-logo {padding-top:19px; margin-left:40px;}
	#gnbM #navigation {margin-top:20px;}
								
	/* Gnb Mobile 1depth */
	#gnbM #navigation > li {border-bottom:1px solid rgba(0, 0, 0, 0.05); margin:0 40px;}
	#gnbM #navigation > li:first-child {border-top:1px solid rgba(0, 0, 0, 0.05);}
	#gnbM #navigation > li > a {position:relative; display:block; padding:20px 40px; color:#505050; font-family:"³ª´®½ºÄù¾î", "Nanum Square", NanumSquare,"µ¸¿ò", Dotum, Arial, sans-serif; font-size:18px; font-weight:700;}
	#gnbM #navigation > li > a:hover {color:#0086e0;}
	#gnbM #navigation > li.active > a {color:#0086e0;}
	#gnbM #navigation > li.has-2dep > a {}
	#gnbM #navigation > li.has-2dep.active > a {}
	#gnbM #navigation > li .gnb-icon {position:absolute; top:50%; right:40px; margin-top:-12px; font-family:"³ª´®½ºÄù¾î", "Nanum Square", NanumSquare,"µ¸¿ò", Dotum, Arial, sans-serif; font-size:18px; font-weight:700;}
	
	/* Gnb Mobile 2depth */
	#gnbM #navigation > li .gnb-2dep {display:none; padding:20px 0; background-color:rgba(0, 0, 0, 0.01); border-top:1px solid rgba(0, 0, 0, 0.03);}
	#gnbM #navigation > li .gnb-2dep > li {}
	#gnbM #navigation > li .gnb-2dep > li > a {display:block; color:#505050; font-size:15px; font-weight:700; padding:10px 40px;}
	#gnbM #navigation > li .gnb-2dep > li > a:hover {color:#0086e0;}
	#gnbM #navigation > li .gnb-2dep > li.on > a {color:#0086e0;}
				
	.nav-open-btn {
	display:block; 
	position:fixed; 
	top:24px; 
	right:40px; 
	z-index:301; 
	height:32px;
	outline:none;
	-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-moz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-o-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	}
	
	.nav-open-btn:hover {background-color:rgba(255, 255, 255, 0);}
	
	.nav-open-btn .line {
	display:block; 
	width:24px; 
	height:2px; 
	background-color:#ddd; 
	margin:4px auto;
	-webkit-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	}
	
	.nav-open-btn.active .line {background-color:#505050;}
	.nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity:0;}
	.nav-open-btn.active .line:nth-child(1) {
	-webkit-transform:translateY(6px) rotate(45deg);
	-o-transform:translateY(6px) rotate(45deg);
	-ms-transform:translateY(6px) rotate(45deg);
	transform:translateY(6px) rotate(45deg);
	}
	
	.nav-open-btn.active .line:nth-child(3) {
	-webkit-transform:translateY(-6px) rotate(-45deg);
	-o-transform:translateY(-6px) rotate(-45deg);
	-ms-transform:translateY(-6px) rotate(-45deg);
	transform:translateY(-6px) rotate(-45deg);
	}
				
	/* Sub */
	#sub-visual {height:400px;}
	#sub-visual .sub-title {margin-top:30px;}
}

@media all and (max-width:980px) {
	/* Sub */
	#sub-visual {height:300px;}
	#sub-visual .sub-title {margin-top:30px;}	
	#sub-visual h1 {line-height:1.5;}
			
	/* Top Button */
	.gotoTop {width:50px; height:50px;}
}

@media all and (max-width:800px) {
	/* Header */
	#header, #header-wrap, #header-inner {height:60px;}
	#header-inner {padding:0 20px;}
	#header .logo {padding-top:10px;}
	#header .logo img {height:40px;}
								
	/* Gnb */
	#gnbM {max-width:481px;}
	#gnbM .gnbM-logo {padding-top:10px; margin-left:20px;}
	#gnbM .gnbM-logo img {height:40px;}
	#gnbM #navigation {margin-top:10px;}
				
	/* Gnb Mobile 1depth */
	#gnbM #navigation > li {margin:0 20px;}
	#gnbM #navigation > li > a {padding:20px 20px; font-size:17px;}
	#gnbM #navigation > li .gnb-icon {right:20px; font-size:17px;}
	
	/* Gnb Mobile 2depth */
	#gnbM #navigation > li .gnb-2dep {padding:10px 0;}
	#gnbM #navigation > li .gnb-2dep > li > a{font-size:15px; padding:10px 37px;}
				
	.nav-open-btn {top:14px; right:20px;}	
	.nav-open-btn .line {width:22px;}
				
	/* Sub */
	#sub-visual {height:250px;}
	#sub-visual .sub-title {margin-top:20px;}
	#sub-visual h6 {letter-spacing:-1;}
				
	/* Top Button */
	.gotoTop {right:20px; width:45px; height:45px;}
			
	/* Footer */
	#footer {height:260px; font-size:14px;}
	#footerInner {padding:50px 20px;}
    /* Ãß°¡ ¹× ¼öÁ¤(2023-10-17) */
    #footerInner .sns ul {width:100%;}
    #footerInner .sns ul:nth-child(2) {margin-left:0;}
    #footerInner .sns ul li img {width:150px;}
	#footerInner .sns li {margin-bottom:20px;}
	.btn_youtube {background-size:25px 25px; width:50px; height:50px;}
	.btn_facebook {background-size:25px 25px; width:50px; height:50px;}
	.btn_instagram {background-size:25px 25px; width:50px; height:50px;}
	#footerInner .copyright li {padding-left:5px; margin-right:5px;}
}

@media all and (max-width:480px) {
	/* Header */
	#header, #header-wrap, #header-inner {height:50px;}
	#header-inner {padding:0 15px;}
	#header .logo {padding-top:8px;}
	#header .logo img {height:35px;}
	
	/* Gnb */
	#gnbM {max-width:480px;}
	#gnbM .gnbM-logo {padding-top:8px; margin-left:15px;}
	#gnbM .gnbM-logo img {height:35px;}
				
	/* Gnb Mobile 1depth */
	#gnbM #navigation > li {margin:0 15px;}
	#gnbM #navigation > li > a {padding:17px 20px; font-family:"³ª´®°íµñ", "Nanum Gothic", Nanum Gothic,"µ¸¿ò", Dotum, Arial, sans-serif; font-size:15px;}
	#gnbM #navigation > li .gnb-icon {right:15px;}

	.nav-open-btn {top:9px; right:15px;}
	.nav-open-btn .line {width:20px;}
				
	/* Sub */
	#sub-visual .sub-title {margin-top:30px;}
	#sub-visual h1 {line-height:1.3;}
	#sub-visual h6 {line-height:1.5;}
	#sub-visual h6 br {display:inline;}
				
	/* Top Button */
	.gotoTop {right:15px; width:40px; height:40px;}
				
	/* Footer */
	#footer {height:240px; font-size:13px;}
	#footerInner {padding:40px 15px;}
	#footerInner .sns li {margin-bottom:15px;}
	.btn_youtube {background-size:22px 22px; width:45px; height:45px;}
	.btn_facebook {background-size:22px 22px; width:45px; height:45px;}
	.btn_instagram {background-size:22px 22px; width:45px; height:45px;}
	#footerInner .copyright br {display:inline;}
}

@media all and (max-width:350px) {
	/* Gnb Mobile 2depth */
	#gnbM #navigation > li .gnb-2dep > li > a{padding:10px 35px;}
				
	/* Sub */
	#sub-visual {height:230px;}
				
	/* Top Button */
	.gotoTop {width:35px; height:35px;}
				
	/* Footer */
	#footer {height:210px; font-size:12px;}
	#footerInner {padding:30px 15px;}
	#footerInner .sns li {margin-right:5px;}
	.btn_youtube {background-size:20px 20px; width:43px; height:43px;}
	.btn_facebook {background-size:20px 20px; width:43px; height:43px;}
	.btn_instagram {background-size:20px 20px; width:43px; height:43px;}
	#footerInner .copyright p {font-size:11px;}
}