/* include 공통 CSS */

/************************* 공통 시작*************************/
.sub_title_navi			{display:block; }

/* left menu 있을때... */
/*
.sub_left								{width:15%; max-width:200px; float:left;}
.sub_right						{width:82%; padding-right:1%; float:right; position:relative;}
*/

.sub_left								{display:none; }
.sub_right						{width:100%; position:relative;}


.content_title			{margin:15px 0; padding:15px 0; border-bottom:1px solid #dfdfdf;}
.content_title h1		{font-size:18px; font-weight:700; color:#000;}
.content_title p		{font-size:12px;}

.content_desc				{min-height:500px;}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/

.header_t									{ height: 100px;}
.header_t:after						{width:100%; display:block; clear:both; content:'';}
.h_in {display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 100%; height: 100%; margin: 0 auto;}
.header_logo							{float:left;}
.header_logo a {display: block;}
.header_logo a img {width: 220px;}
.header_gnb								{ float:right; height: 100%;}
.header_gnb:after					{width:100%; display:block; clear:both; content:'';}
/************************* header_inc 끝*************************/

/************************* main_inc 시작*************************/
.swiper-slide.swiper-slide-active img {animation: ani 4s ease-in-out;}

@keyframes ani {
0% {transform: scale(1.1);}
100% {transform: scale(1);}
}

.main_visual {height: 850px;}
.main01 {display: flex; align-items: center; width: 100%; height: 403px; background: url("img/main01.jpg") no-repeat center center; color: #fff;}
.main01 .in {display: flex; justify-content: space-between; align-items: center;}
.main01 h2.tit {font-family:'NanumSquare',sans-serif; font-size: 36px; font-weight: 700;}
.main01 h2.tit::after {content:''; display: block; width: 48px; height: 2px; background: #fff; margin: 28px 0;}
.main01 .left {width: 370px;}
.main01 .left p {font-size: 16px;}
.main01 .right {display: flex;}
.main01 .right .txt {font-size: 14px;}
.main01 .right .txt h3 {font-size: 25px; font-weight: bold;}
.main01 .right .txt span {display: inline-block; color: #8ac0e9; font-weight: 700; letter-spacing: 0px; margin: 3px 0 12px;}
.main01 .right .list {width: 270px; text-align: center; border-right: 1px solid rgba(255,255,255,0.4);}
.main01 .right .com1 {border-left: 1px solid rgba(255,255,255,0.4);}
.main01 .right .list .icon {width: 142px; height:142px; position: relative; margin: 0 auto 14px;}
.main01 .right .list .icon img {vertical-align: middle; position: absolute; z-index: 888; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main01 .right .list .icon span {display: block; width: 94px; height: 94px; background: rgba(255,255,255,0.09); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;  animation: light 3.2s ease-in-out infinite alternate;}
.main01 .right .list .icon span:nth-of-type(2) {width: 122px; height: 122px; background: rgba(255,255,255,0.07); animation: light2 3.5s ease-in-out infinite alternate; }
.main01 .right .list .icon span:nth-of-type(3) {width: 142px; height: 142px; background: rgba(255,255,255,0.03); animation: light3 3.9s ease-in-out infinite alternate;}

@keyframes light {
	0% {opacity: 0;}
	50% {opacity: 100%;}
	100% {opacity: 0%;}
}
@keyframes light2 {
	0% {opacity: 0;}
	50% {opacity: 100%;}
	100% {opacity: 0%;}
}
@keyframes light3 {
	0% {opacity: 0;}
	50% {opacity: 100%;}
	100% {opacity: 0%;}
}

/*main02*/
.main02 {background: #f7f7f7; padding: 110px 0; position: relative; overflow: hidden}
.main02 .in {position: relative;}

.main02 .in::after {width: 273px; height: 123px; background-image: url("img/main02_deco2.png");left: auto; right: -278px; top: auto; bottom: 0;}
.main02 .cs {display: flex; margin-top: 1%;}
.main02 .cs .qna {width: 49.5%; height: 184px; background:url("img/main02_2.jpg") no-repeat center center; color: #fff; padding: 50px 0 0 30px; box-sizing: border-box; position: relative;}
.main02 .cs .qna:first-child {background-image: url("img/main02_1.jpg"); margin-right: 1%;}
.main02 .cs .qna h2 {font-size: 25px; font-weight: bold;}
.main02 .cs .qna:last-child h2 {font-family:'NanumSquare',sans-serif;}
.main02 .cs .qna h2::after {content:''; display: block; width: 36px; height: 2px; background: #fff; margin: 15px 0;}
.main02 .cs .qna p {font-size: 16px;}
.main02 .cs .qna a {display: block; width: 100%; height: 100%; text-indent: -9999px; position: absolute; top: 0; left: 0;}
/************************* main_inc 끝*************************/

/************************* title_navi 시작 *************************/
.navi_all {width:100%; margin:0 auto; background:#fff; height:50px; border-bottom:1px solid #ddd; } 
.navi_in	{max-width:1200px; margin:0 auto; padding:0;}
.navi_in:after		{clear:both; content:''; display:block; width:100%;}

.home_btn_all						{float:left; padding:0; width:50px; }
.home_btn_all .home_btn {border-right:1px solid #efefef; border-left:1px solid #efefef;}
.home_btn_all .home_btn a	{display:block; height:49px; line-height:50px; text-align:center; }
.home_btn_all .home_btn a:hover		{background:#f8f8f8;}
.home_btn_all .home_btn a img	{vertical-align:middle;}

.navi_left					{float:left;}
.navi_left:after		{clear:both; content:''; display:block; width:100%;}
.navi_left div			{float:left;}

.navi_main		{padding:0 0 0 0; height:50px; width:250px; position:relative; line-height:50px;  cursor:pointer; border-right:1px solid #efefef;}
.navi_title01	{padding:0 0 0 0; height:40px; width:250px; position:relative; line-height:50px; }
.navi_title01 h1 {color:#777; font-size:14px; margin-left:10px; width:100%;}
.navi_title01 h1.sub_menu:hover { color:#333; }

.navi_main h1 { color:#777; font-size:14px; margin-left:10px;}
.navi_main h1.sub_manu:hover { color:#333; }
.navi_main > .deco_right { float:right;  }

.navi_main >a.down_btn	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn2	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn3	{position:absolute; right:10px; top:0px;}

.h1_focus	{color:#333 !important;;}

.navi_sub {padding:0; height:50px; width:250px; line-height:50px; position:relative; cursor:pointer; border-right:1px solid #efefef;}
.navi_sub > h2						{ color:#333333; font-size:14px;  cursor:pointer; margin-left:10px;}
.navi_sub>a.down_btn4	{position:absolute; right:10px; top:0px; }

.navi_sub > p						{float:right; }

.extend							{position:relative; top:-1px; width:100%; }
.extend > ul				{position: absolute;left:-1px; min-height:1px;width:251px;padding-left: 0px; padding:0px 0 10px 0; border-top:0;z-index: 999; background:#fff; border:1px solid #efefef; display:none;}
.extend > ul a { text-decoration:none; }


.extend2							{position:relative; top:-1px; width:100%;}
.extend2 > ul				{position: absolute;left:-1px; min-height:1px; width:251px; padding-left:0px; z-index: 999; background:#fff; border:1px solid #efefef; display:none; padding:0px 0 10px 0; }
.extend2 > ul a { text-decoration:none; }
.extend2 h1 { }

/*
position:absolute; left:-20px; min-height:1px; width:256px; padding-left:20px;  border-top:1px solid #efefef; z-index:999; background:#ddd; 
*/

.extend > ul > li		{min-height:20px;}
.down_btn			{cursor:pointer; }

/************************* title_navi 끝 *************************/


/************************* footer_inc 시작 *************************/

.footer_site_link ul li			{display: inline-block; margin-right: 28px; }
.footer_site_link ul li:first-child a {font-weight: 700;}

.footer_t								{height: 153px; line-height:150%; font-size:14px; font-family: 'Noto Sans Korean',sans-serif; border-top: 1px solid #ddd; box-sizing: border-box;}
.footer_t:after					{width:100%; display:block; clear:both; content:'';}
.footer_t .in {height: 100%; display: flex; align-items: center;}
.footer_logo img {width: 220px;}
.footer_txt							{padding-left: 40px; flex:1;}
.footer_familysite			{float:right; width:180px; position:relative;}

.footer_txt p:not(.copy)							{margin-bottom:10px;}
.footer_txt p b						{font-weight:600;}
.footer_txt .f_top {margin-bottom: 15px; padding-left: 10px;}
.footer_txt .f_bot {color: #777;}
.footer_txt .f_bot p span {position: relative; padding: 0 10px;}
.footer_txt .f_bot p span:nth-child(5) {padding-right: 10px;}
.footer_txt .f_bot p span:last-child {padding: 0 15px;}
.footer_txt .f_bot p span:last-child a {color: #777; margin-right: 8px;}
.footer_txt .f_bot p span:not(.none)::after {content:''; display: block; width: 1px; height: 12px; background: #ddd; position: absolute; top: 50%; right: -3px; transform: translateY(-50%);}
.footer_txt .f_bot p span:last-child::after {display: none;} 
.footer_txt .f_bot p span:last-child {padding-left: 10px; padding-right: 0;}

.footer_txt .f_bot p.copy {padding-left: 10px; font-size: 12px;}
.footer_copyright			{background:#323232; color:#fff; text-align:center; padding:10px;}
.footer_copyright p			{color:#fff; font-size:12px;}
.footer_copyright p a		{font-size:11px; color:#fff;  margin-left:15px;}

/*family_inc.php의 스타일*/
.total								{width:100%;  cursor:pointer;}
.select_d							{border:1px solid #ddd; width:100%; line-height:30px; height:30px; padding-left:8px; position:relative; font-size:12px;}
.select_d span				{display:inline-block; position:absolute; right:10px;}

/* 패밀리사이트 클릭시 밑으로 떨어지는  CSS*/
/*
.select_op						{border:1px solid #ddd;border-top:none; width:168px; margin-top:0px; display:none; position:absolute; z-index:3px; background:#fff; font-size:11px;}
*/

/* 패밀리사이트 클릭시 위로 올라오는 CSS*/
.select_op						{border:1px solid #ddd;border-bottom:none; width:160px; margin-top:0px; display:none; position:absolute; z-index:3px; background:#fff; font-size:11px;bottom:30px;}

.select_op	li				{line-height:30px;height:30px; border:0px solid red; padding-left:8px;}
.select_op	li		a		{cursor:pointer; width:100%; height:30px; display:inline-block;letter-spacing:-0.3px;}
.select_op	li:hover	{background:#eee;}
.a_focus							{background:#8e8e8e; color:#fff !important;}
/************************* footer_inc 끝 *************************/



/************************* left_lnb_inc 시작 *************************/
.left_lnb		{  }
/************************* left_lnb_inc 끝 *************************/



/************************* ui.totop 시작 *************************/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("./img/ui.totop6.png") no-repeat left top;
}

#toTopHover {
	background:url("./img/ui.totop6.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}
/************************* ui.totop 끝 *************************/