@charset "utf-8";
@import url(base.css);
@import url(layout.css);

.header .visual				{ padding-left:22%; position:relative; }
.header .visualSlide img	{ width:100%; }
.header .slick-dots			{ width:22%; position:absolute; bottom:2%; left:0; text-align:center; }
.header .slick-dots li		{ display:inline-block; padding:0 8px; width:18%; }
.header .slick-dots li button			{ aspect-ratio:1/1; width:100%; border-radius:50%; background:#afafaf; overflow:hidden; text-indent:-999px;}
.header .slick-dots li.slick-active button		{ background:#e6e4e4; }
.header .visualTxt			{ position:absolute; bottom:30.4%; left:1px; background:#fff; width:53%; }
.header .visualTxt>a		{ display:block; color:#4a4a4a; padding:9% 5%; }
.header .visualTxt>a:after				{ content:''; width:0; height:3px; position:absolute; top:12%; left:0; transform:translateX(-50%); transition:width .5s; }
.header .visualTxt>a.active:after		{ width:24%; }
.header .visualTxt>a span				{ font-size:30px; text-decoration:underline; }
.header .visualTxt>a strong				{ display:block; padding:20px 0 0; font-size:50px; font-weight:500; line-height:1.4; }

.header .visualTxt>a:nth-child(1) span	{ color:#6a9bd6; }
.header .visualTxt>a:nth-child(1):after	{ background:#6a9bd6; }
.header .visualTxt>a:nth-child(2) span	{ color:#6a9bd6; }
.header .visualTxt>a:nth-child(2):after	{ background:#6a9bd6; }
.header .visualTxt>a:nth-child(3) span	{ color:#6a9bd6; }
.header .visualTxt>a:nth-child(3):after	{ background:#6a9bd6; }
.header .visualTxt>a:nth-child(4) span	{ color:#6a9bd6; }
.header .visualTxt>a:nth-child(4):after	{ background:#6a9bd6; }

.mainContainer					{  }
.mainContainer .section			{ padding:0 0 110px; }
.mainContainer .section.gray	{ background:#f7f7f7; }
.mainContainer .section .title	{ padding:128px 0 108px; text-align:center; }
.mainContainer .section .title span				{ font-size:22px; color:#404040 }
.mainContainer .section .title strong			{ display:block; max-width:806px; margin:0 auto; position:relative; }
.mainContainer .section .title strong:after		{ content:''; width:100%; height:2px; background:#000; position:absolute; top:50%; left:0; transform:translateY(-50%); }
.mainContainer .section .title strong span		{ font-size:40px; color:#000; padding:0 60px; background:#fff; position:relative; z-index:1; }
.mainContainer .section.gray  .title strong span		{ background:#f7f7f7; }
.mainContainer .section ul		{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); max-width:1320px; margin:0 auto; column-gap:30px; }
.mainContainer .section ul a	{ display:block; }
.mainContainer .section ul a .imgWrap			{ overflow:hidden; }
.mainContainer .section ul a .imgWrap img		{ transition:all .5s; width:100%; }
.mainContainer .section ul p					{ width:100%; position:relative; padding-bottom:40px; }
.mainContainer .section ul.over p				{ margin-top:-80px; width:calc(100% - 46px); background:#fff; }
.mainContainer .section ul p span				{ font-size:18px; color:#404040; display:block; padding:20px 0 0; }
.mainContainer .section ul p strong				{ font-size:24px; color:#000000; font-weight:bold; display:block; padding:20px 0; }
.mainContainer .section ul p strong span		{ display:block; font-size:24px; font-weight:normal; padding:0; }
.mainContainer .section ul p em					{ font-size:16px; color:#db3435; transition:all 1s; display:grid; left:0; position:absolute; bottom:0; transform:translateX(0); background:url(../img/main/mainMoreArr2.png) right center no-repeat; padding-right:25px; }
.mainContainer .section ul.over p em			{ color:#1656be; background:url(../img/main/mainMoreArr.png) right center no-repeat; }
.mainContainer .section ul a:hover em			{ left:100%; transform:translateX(-100%); }
.mainContainer .section ul a:hover img			{ transform:scale(1.1); }

.mainContainer .section .mobSectionSlider		{ display:none; }

/* 전체메뉴 한박 설명문 */
.box_areaW4				{ border:1px solid #a5a5a5; max-width:320px; background:#fff}
.box_areaW4	div 			{ text-align:center; padding: 15px 8px 0px 8px;}
.box_areaW4	div img 		{ width:auto; max-width:100%;}
.box_areaW4 .boxc		{ font-size:15px; color:#666; line-height:20px; text-align: center; font-weight:400; padding:15px 8px;}
.box_areaW4 .boxc2		{ font-size:15px; color:#666; line-height:20px; text-align: center; font-weight:400; padding:15px 8px; background-color: #f2f2f2;}
.mob2					{ display:none;}
.pc2					{ display:block;}


/*24년도 5월 메인*/


.banner								{ width:100%; text-align:center; }
.banner img							{ width:auto; max-width:100%; }
.banner img.pc						{ display:inline !important;}
.banner img.mob						{ display:none; }
.banner>a							{ margin-top:60px; display:block; }
.banner>div							{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); max-width:980px; margin:0 auto; padding:80px 0; }

footer							{ width:100%; background:#252525; padding:60px 0 80px; }
.footer							{ display:block; max-width:1180px; margin:0 auto; overflow:hidden; }
.footer>div						{ float:left; }
.footer>div:nth-child(1)		{ padding-right:50px; }
.footer>div:nth-child(2)		{ font-size:15px; color:#fff; line-height:1.5; padding:4px 0 0; }
.footer>div:nth-child(3)		{ float:right; }
.footer>div a					{ font-size:17px; color:#fff; position:relative; padding-left:26px; }
.footer>div a + a				{ margin-left:34px; }
.footer>div a + a:before		{ content:''; width:1px; height:100%; background:#929292; position:absolute; top:50%; left:-17px; transform: translateY(-50%); } 
.footer>div a:nth-child(1)		{ background:url(../img/common/footerIco1.png) 0 50% no-repeat; }
.footer>div a:nth-child(2)		{ background:url(../img/common/footerIco2.png) 0 50% no-repeat; }
.footer>div a:nth-child(3)		{ display:none; background:url(../img/common/footerIco4.png) 0 50% no-repeat; }
.footer>div a:nth-child(4)		{ display:none; background:url(../img/common/footerIco5.png) 0 50% no-repeat; }
.footer>div a:nth-child(5)		{ background:url(../img/common/footerIco3.png) 0 50% no-repeat; }


@media all and (max-width:1920px){
	.header .visualTxt>a span				{ font-size:26px; }
	.header .visualTxt>a strong				{ padding:20px 0 0; font-size:42px; }
	.header .visualTxt>a strong.ie			{ padding:0; font-size:36px; }
}
@media all and (max-width:1620px){
	.header .visualTxt>a span				{ font-size:22px; }
	.header .visualTxt>a strong				{ padding:20px 0 0; font-size:36px; }
	.header .visualTxt>a strong.ie			{ padding:0; font-size:28px; }
}
@media all and (max-width:1440px){
	.header .visualTxt>a span				{ font-size:18px; }
	.header .visualTxt>a strong				{ padding:20px 0 0; font-size:26px; }
	.header .visualTxt>a strong.ie			{ padding:0; font-size:20px; }
}

@media all and (max-width:1023px){
	.header .visual				{ padding-left:0; }
	.header .slick-dots			{ width:17%; position:absolute; bottom:2%; left:0; text-align:center; }
	.header .visualTxt			{ position:static; width:100%; background:#f6f6f6; }
	.header .visualTxt>a		{ display:block; color:#4a4a4a; padding:20px 20px 10px 110px; position:relative; }
	.header .visualTxt>a:after				{ content:none; }
	.header .visualTxt>a span				{ font-size:14px; position:absolute; top:20px; left:20px; }
	.header .visualTxt>a strong				{ padding:0; font-size:18px; }
	.header .visualTxt>a strong.ie			{ padding:0; font-size:14px; }
		
	.mainContainer .section			{ padding:0 0 50px; }
	.mainContainer .section .title	{ padding:70px 0 40px; }
	.mainContainer .section .title span				{ font-size:12px; }
	.mainContainer .section .title strong			{ max-width:none; width:100%; }
	.mainContainer .section .title strong:after		{ content:''; width:100%; height:2px; background:#000; position:absolute; top:50%; left:0; transform:translateY(-50%); }
	.mainContainer .section .title strong span		{ font-size:20px; padding:0 30px; }
	
	.mainContainer .section ul p					{ padding-bottom:20px; }
	.mainContainer .section ul.over p				{ margin-top:-40px; width:calc(100% - 30px); }
	.mainContainer .section ul p span				{ font-size:12px; padding:10px 0 0; }
	.mainContainer .section ul p strong				{ font-size:18px; padding:10px 0; }
	.mainContainer .section ul p strong span		{ font-size:18px; }
	.mainContainer .section ul p em					{ font-size:12px; padding-right:25px; }

	.mainContainer .section ul						{ display:none; }
	.mainContainer .section .mobSectionSlider		{ display:block; }
	.mainContainer .section .mobSectionSlider ul							{ display:block; }
	.mainContainer .section .mobSectionSlider ul .slick-slide				{ margin: 0 14px; width:calc(100vw - 140px); }
	
	.mainContainer .section2			{ padding:0 0 50px; }
	.mainContainer .section2 .title	{ padding:70px 0 40px; }
	.mainContainer .section2 .title span				{ font-size:12px; }
	.mainContainer .section2 .title strong			{ max-width:none; width:100%; }
	.mainContainer .section2 .title strong:after		{ content:''; width:100%; height:2px; background:#000; position:absolute; top:50%; left:0; transform:translateY(-50%); }
	.mainContainer .section2 .title strong span		{ font-size:20px; padding:0 30px; }
	
	.mainContainer .section2 ul p					{ padding-bottom:20px; }
	.mainContainer .section2 ul.over2 p				{ margin-top:-40px; width:calc(100% - 30px); }
	.mainContainer .section2 ul p span				{ font-size:12px; padding:10px 0 0; }
	.mainContainer .section2 ul p strong				{ font-size:18px; padding:10px 0; }
	.mainContainer .section2 ul p strong span		{ font-size:18px; }
	.mainContainer .section2 ul p em					{ font-size:12px; padding-right:25px; }

	.mainContainer .section2 ul						{ display:none; }
	.mainContainer .section2 .mobSectionSlider		{ display:block; }
	.mainContainer .section2 .mobSectionSlider ul							{ display:block; }
	.mainContainer .section2 .mobSectionSlider ul .slick-slide				{ margin: 0 14px; width:calc(100vw - 140px); }
	
	.banner img							{ width:100%; max-width:none; }
	.banner img.pc						{ display:none !important; }
	.banner img.mob						{ display:block !important; }
	.banner>a							{ margin-top:40px; }
	.banner>div							{ grid-template-columns:repeat(1, minmax(0,1fr)); padding:40px 0 0; max-width:none; }
	
	footer							{ padding:15px 0 20px; }
	.footer>div						{ float:none; text-align:center; }
	.footer>div:nth-child(1)		{ padding-right:0; }
	.footer>div:nth-child(1) img	{ width:160px; }
	.footer>div:nth-child(2)		{ font-size:12px; padding:12px 0 15px; }
	.footer>div:nth-child(3)		{ float:none; }
	.footer>div a					{ font-size:12px; padding-left:22px; }
	.footer>div a + a				{ margin-left:28px; }
	.footer>div a + a:before		{ height:14px; top:0; left:-14px; transform: translateY(0); } 
	.footer>div a:nth-child(1)		{ background-size:14px; }
	.footer>div a:nth-child(2)		{ background-size:14px; }
	.footer>div a:nth-child(3)		{ display:inline; background-size:14px; }
	.footer>div a:nth-child(3):after	{ content:''; display:block; width:100%; }
	.footer>div a:nth-child(4)		{ display:inline; background-size:14px; }
	.footer>div a:nth-child(4):before	{ content:none; }
	.footer>div a:nth-child(5)		{ background-size:14px; }
	
} 
@media all and (max-width:760px){
	/* 전체메뉴 설명문 */
	.box_areaW4				{ max-width:240px;}
	.box_areaW4	div 			{ padding: 5px 8px; padding-top:10px;}
	.box_areaW4	div img 		{ width:24%;}
	.box_areaW4 .boxc		{ font-size:11px; padding: 5px 8px;}
	.box_areaW4 .boxc2		{ font-size:11px; padding: 5px 8px;}
	
	.mob2					{ display:block;}
	.pc2					{ display:none;}
}