@charset "utf-8";

.clear_both{clear:both;}

#wrap{width:100%;position:relative;}
#header{z-index:5;width:100%;}
.logo{width:100%;padding-top:25px;text-align:center; height:80px; border-bottom:2px solid #dfe1e5; }
.logo img{width:170px;}
.inner_header{z-index:5; width:100%;}
.inner_header #gnb{width:660px; height:60px; margin:0 auto;}
.inner_header #gnb li { display:inline-block; line-height:60px; font-size:20px; font-weight:bold; padding:0 42px;}
.inner_header #gnb li a{color:#000;}
@media screen and ( min-width:1201px ){
#nav{display: none;}
div.category{display: none;}
}
#container{}
.common_box{position:relative;width:1080px;padding:80px 0;margin:0 auto; text-align:center;}
.common_box h2{font-size:54px; color:#333c45; padding-bottom:50px; }

.main_visual{width:100%;height:500px;background-color:#d2dde6; }
.main_visual2{width:100%;height:500px;background-color:#dfe2e5; }
.main_visual3{width:100%;height:500px;background-color:#ffd400; }

.visual_cont{position:relative;width:1080px; margin:0 auto; height:500px;}
.visual_cont .pic01{position:absolute; top:20px; right:0;}
.visual_cont .pic02{position:absolute; top:20px; right:0;}
.visual_cont .pic03{position:absolute; top:30px; right:0;}
.visual_text{position:absolute;left:80px;top:140px; text-align:left;font-weight:bold;}
.visual_text p.txt1{font-family: 'NanumSquare';font-size:54px;}
.visual_text p.txt2{font-family: 'NanumSquare';font-size:18px;}
.visual_text2{font-family: 'NanumSquare';position:absolute;left:80px;top:90px; text-align:left;font-weight:bold;}
.visual_text2 p.txt1{font-family: 'NanumSquare';font-size:54px;line-height:62px;}
.visual_text2 p.txt2{font-family: 'NanumSquare';font-size:18px;margin-top:15px;}

.slide{text-align:center; position:relative; width:100%; display: block;height:500px;}
.slide_ul{display: block;}
.slide_ul>li{position:absolute;list-style:none;z-index:10;top:0;width:100%; display: block;}
.slide_ul>li img{}

.show{display:block;}

/* 하단 동그라미 버튼 CSS*/
.slide_btn>li{float: left; margin:0 5px 5px 0;}
.slide_btn>li>a{display:block; width: 14px; height:14px; background: url(../../images/main/spr.png) -24px -125px; text-indent: -999em; }
.slide_btn>li>a.active{background-position: 0 -126px;}

.slide_btn{z-index:100; position:absolute; top:470px; left:50%;}

.slide_btn:after{content:''; display:block; clear:both;}
.slide_btn{*zoom:1;}

.section1{width:880px; margin:0 auto;}
.section1 > div:nth-child(4n){margin-right:0;}
.section1 .sec1_box{width:200px; float:left; margin-right:140px; }
.section1 .sec1_box .pic{height:60px; line-height:60px; }
.section1 .sec1_box h3{margin-top:30px; margin-bottom:10px; font-size:24px; color:#333c45;}
.section1 .sec1_box p{line-height:20px; color:#333c45; }

.section2{background-color:#ebebeb; }
.section2 .sec2_cont{ width:1062px; margin:0 auto; padding:0;}
.section2 .sec2_cont .more{ text-align: right; height:40px; width:100%; }
.section2 .sec2_cont a{ color:#000; font-weight: bold;}
.section2 .sec2_cont :nth-child(5n){margin-right:0;}
.section2 .sec2_box{width:250px; height:370px;background-color:white;border:1px solid #ccc; float:left; margin-right:20px;}
.section2 .sec2_box h3{background-color:black; height:60px; line-height:60px;color:white;}
.section2 .sec2_box img{}
.section2 .sec2_box p{width:85%; margin:0 auto;color:#666; font-size:13px;}
.section2 .sec2_box .pic{height:130px; margin:40px 0; line-height:130px; }
.section2 .mr_none{margin-right:0;}

.section3{}
.section3 ul{overflow:hidden;}
.section3 ul li{float:left; border:1px solid #ccc; width:250px; margin:0 10px 30px 10px; padding:10px 0;}
.section3 ul li p {border-top:1px dotted #666; width:180px; text-align: center;padding:10px 0;}
.section3 ul li img{display:inline-block;}
.section3 ul li a{ color:#666;}


#footer{background-color:#808080; color:#fff;}
.footer_inner{width:1000px; color:#fff; margin:0 auto;padding:40px 0;}
.footer_inner li{display: inline;}
.footer_inner li.add03{display: block;}


/* 태블릿  */
@media screen and ( min-width:799px ) and ( max-width:1200px ) {
	.logo img{width:170px;}

	.inner_header{display:none;width:300px;}
	.inner_header #gnb{display:none;width:300px;}

	#nav{position:absolute; top:20px; right:20px; cursor:pointer; z-index:200;}

	/*카테고리(스펙)*/
	div.category{position:absolute;	width:100%;	height:100%;background:rgba(0,0,0,0.7);	border-bottom:1px solid #ddd;z-index:300;}
	div.category .menu_area{background-color:#fff; background:rgba(255,255,255,0.97);width:80%; height:100%;float:right;}
	div.category .menu_area ul{padding:40px 0 0 100px;}
	div.category .menu_area li a{font-size:20px; color:#000; width:160px; line-height:50px; border-bottom:1px solid #ccc;}
	img.btn_close{position:absolute;top:-60px; right:20px; cursor:pointer;}

	img.btn_close{position:absolute;top:-60px; right:20px; cursor:pointer;}

	/*메뉴 슬라이드 기능*/
	div.category{top:-100%; opacity:0; transition:all 400ms ease;}/*부모(position)의 높이만큼 올려준다*/
	div.category.open{top:80px; opacity:1;}/*클릭!== 제이쿼리*/

	.common_box{position:relative;width:100%; padding:70px 0;margin:0 auto; text-align:center;}
	.common_box h2{font-size:40px; color:#333c45; padding-bottom:50px; }

	.main_visual{height:450px;}
	.main_visual2{height:450px;}
	.main_visual3{height:450px; }

	.visual_cont{position:relative;width:100%; margin:0 auto; height:450px;}
	.visual_cont .pic01{position:absolute; top:40px; right:0;}
	.visual_cont .pic02{position:absolute; top:30px; right:0;}
	.visual_cont .pic03{position:absolute; top:45px; right:0;}
	.visual_cont img{width:80%;}
	.visual_text{font-weight:700;position:absolute;left:40px;top:120px; text-align:left;font-weight:bold;z-index:2;}
	.visual_text p.txt1{font-size:44px;font-family: 'NanumSquare';font-weight:700;letter-spacing:-1px;}
	.visual_text p.txt2{font-size:14px;font-family: 'NanumSquare';}
	

	.visual_text2{position:absolute;left:40px;top:90px; z-index:2;}
	.visual_text2 p.txt1{font-family: 'NanumSquare';font-weight:700;letter-spacing:-2px;font-size:44px;line-height:54px;}
	.visual_text2 p.txt2{font-family: 'NanumSquare';font-size:14px;margin-top:8px;;}
	
	.slide{text-align:center; position:relative; width:100%; display: block;height:450px;}
	.slide_btn{z-index:100; position:absolute; top:420px; left:50%;}

	.section1{width:690px; margin:0 auto;}
	.section1 div:nth-child(4n){margin-right:0;}
	.section1 .sec1_box{width:190px; float:left; margin-right:60px;}
	.section1 .sec1_box .pic{height:60px; line-height:60px; }
	.section1 .sec1_box h3{margin-top:30px; margin-bottom:10px; font-size:22px; color:#333c45;}
	.section1 .sec1_box p{line-height:20px; color:#333c45; letter-spacing:-0.5px;}

	.section2{width:100%; background-color:#ebebeb;}
	.section2 .sec2_cont{width:722px; margin:0 auto; padding:0; }
	.section2 .sec2_cont > div:nth-child(3n){margin-right:0;}
	.section2 .sec2_box{width:350px; height:370px;background-color:white;border:1px solid #ccc; float:left; margin-right:20px; margin-top:20px;}	
	.section2 .sec2_box h3{background-color:black; height:60px; line-height:60px;color:white;}
	.section2 .sec2_box img{}
	.section2 .sec2_box p{width:85%; margin:0 auto;color:#666; font-size:13px;}
	.section2 .sec2_box .pic{height:130px; margin:40px 0; line-height:130px; }
	.section2 .mr_none{margin-right:0;}

	.section3{width:90%; margin:0 auto;}
	.section3 ul li{width:30%;}

	.footer_inner{width:80%; letter-spacing: -0.8px; text-align: center;}
	.footer_inner .add01{display: block;}

}
/* 모바일~타블렛 */
@media screen and ( min-width:481px ) and ( max-width:798px ) {
	.logo img{width:170px;}

	.inner_header{display:none;width:300px;}
	.inner_header #gnb{display:none;width:300px;}
	#nav{position:absolute; top:20px; right:20px; cursor:pointer; z-index:200;}
	
	/*카테고리(스펙)*/
	div.category{position:absolute;	width:100%;	height:100%;background:rgba(0,0,0,0.7);	border-bottom:1px solid #ddd;z-index:300;}
	div.category .menu_area{background-color:#fff; background:rgba(255,255,255,0.97);width:80%; height:100%;float:right;}
	div.category .menu_area ul{padding:40px 0 0 100px;}
	div.category .menu_area li a{font-size:20px; color:#000; width:160px; line-height:50px; border-bottom:1px solid #ccc;}
	img.btn_close{position:absolute;top:-60px; right:20px; cursor:pointer;}

	img.btn_close{position:absolute;top:-60px; right:20px; cursor:pointer;}

	/*메뉴 슬라이드 기능*/
	div.category{top:-100%; opacity:0; transition:all 400ms ease;}/*부모(position)의 높이만큼 올려준다*/
	div.category.open{top:80px; opacity:1;}/*클릭!== 제이쿼리*/

	.common_box{position:relative;width:100%; padding:70px 0;margin:0 auto; text-align:center;}
	.common_box h2{font-size:36px; color:#333c45; padding-bottom:50px; }

	.main_visual{height:340px;}
	.main_visual2{height:340px;}
	.main_visual3{height:340px;}
	.visual_cont{width:95%; height:340px; padding:0;}
	.visual_cont .pic01{position:relative; }
	.visual_cont .pic02{position:relative; }
	.visual_cont .pic03{position:relative; }
	.visual_cont .pic01 img{width:45%; position:absolute; top:5px; right:0;}
	.visual_cont .pic02 img{width:40%; position:absolute; top:0; right:0;}
	.visual_cont .pic03 img{width:48%; position:absolute; top:0; right:0;}

	.visual_text{font-weight:700;position:absolute;left:30px;top:80px; text-align:left;font-weight:bold;z-index:2;}
	.visual_text p.txt1{font-size:36px;font-family: 'NanumSquare';font-weight:700;letter-spacing:-1px;}
	.visual_text p.txt2{font-size:14px;font-family: 'NanumSquare';}
	

	.visual_text2{position:absolute;left:30px;top:30px; z-index:2;}
	.visual_text2 p.txt1{font-family: 'NanumSquare';font-weight:700;letter-spacing:-2px;font-size:36px;line-height:54px;}
	.visual_text2 p.txt2{font-family: 'NanumSquare';font-size:14px;margin-top:8px;;}
	
	.slide{text-align:center; position:relative; width:100%; display: block;height:340px;}
	.slide_btn{z-index:100; position:absolute; top:310px; left:50%;}

	.section1{width:570px; margin:0 auto;}
	.section1 > div:nth-child(4n){margin-right:0;}
	.section1 .sec1_box{width:170px; float:left; margin-right:30px;}
	.section1 .sec1_box .pic{height:60px; line-height:60px; }
	.section1 .sec1_box h3{margin-top:30px; margin-bottom:10px; font-size:20px; color:#333c45;}
	.section1 .sec1_box p{line-height:20px; color:#333c45; letter-spacing:-0.5px; font-size:13px;}

	.section2{width:100%; background-color:#ebebeb;}
	.section2 .sec2_cont{width:582px; margin:0 auto; padding:0; }
	.section2 .sec2_cont > div:nth-child(3n){margin-right:0;}
	.section2 .sec2_box{width:280px; height:370px;background-color:white;border:1px solid #ccc; float:left; margin-right:20px; margin-top:20px;}	
	.section2 .sec2_box h3{background-color:black; height:60px; line-height:60px;color:white;}
	.section2 .sec2_box img{}
	.section2 .sec2_box p{width:85%; margin:0 auto;color:#666; font-size:13px;}
	.section2 .sec2_box .pic{height:130px; margin:40px 0; line-height:130px; }
	.section2 .mr_none{margin-right:0;}

	.section3{width:90%; margin:0 auto;}
	.section3 ul li{width:45%;}

	.footer_inner{width:80%; letter-spacing: -0.8px; text-align: center;}
	.footer_inner .add01{display: block;}

}
/* 모바일 */
@media screen and ( max-width:480px ) {
	.logo img{width:170px;}

	.inner_header{display:none;width:300px;}
	#nav{position:absolute; top:27px; right:20px; cursor:pointer; z-index:200;}
	#nav img{width:20px;}
	/*카테고리(스펙)*/
	div.category{position:absolute;	width:100%;	height:100%;background:rgba(0,0,0,0.7);	border-bottom:1px solid #ddd;z-index:300;}
	div.category .menu_area{background-color:#fff; background:rgba(255,255,255,0.97);width:80%; height:100%;float:right;}
	div.category .menu_area ul{padding:40px 0 0 100px;}
	div.category .menu_area li a{font-size:20px; color:#000; width:160px; line-height:50px; border-bottom:1px solid #ccc;}
	img.btn_close{position:absolute;top:-53px; right:20px; cursor:pointer;width:20px;}


	/*메뉴 슬라이드 기능*/
	div.category{top:-100%; opacity:0; transition:all 400ms ease;}/*부모(position)의 높이만큼 올려준다*/
	div.category.open{top:80px; opacity:1;}/*클릭!== 제이쿼리*/
	
	.common_box{width:100%; padding:60px 0;min-height:400px;margin:0 auto; text-align:center;}
	.common_box h2{width:300px;font-size:28px; color:#333c45; padding-bottom:32px; margin:0 auto; }
	
	.main_visual{height:450px;}
	.main_visual2{height:450px;}
	.main_visual3{height:450px;}
	.visual_cont{position:relative;width:85%; margin:0 auto; height:450px;}
	.visual_cont .pic01{position:absolute; top:120px; right:0;}
	.visual_cont .pic02{position:absolute; top:110px; right:0;}
	.visual_cont .pic03{position:absolute; top:170px; right:0;}
	.visual_cont .pic01 img{width:100%;}
	.visual_cont .pic02 img{width:80%;}
	.visual_cont .pic03 img{width:82%;}

	.visual_text{top:20px;left:0;width:100%;text-align:center;font-weight:bold;}
	.visual_text p.txt1{font-size:34px;}
	.visual_text p.txt2{display:none;}

	.visual_text2{left:0;top:10px;width:100%; z-index:2;text-align:center;font-weight:bold;}
	.visual_text2 p.txt1{font-size:34px;line-height:46px;}
	.visual_text2 p.txt2{display:none;}
	
	.slide{text-align:center; position:relative; width:100%; display: block;height:450px;}
	.slide_btn{z-index:100; position:absolute; top:420px; left:48%;}

	.section1{width:100%;}
	.section1 .sec1_box{width:100%; padding:0; margin-bottom:50px;}
	.section1 .sec1_box .pic{height:60px; line-height:60px; }
	.section1 .sec1_box .pic img{}
	.section1 .sec1_box h3{margin-top:20px; margin-bottom:10px; font-size:22px; color:#333c45;}
	.section1 .sec1_box p{line-height:20px; color:#333c45; }

	.section2{width:100%; background-color:#ebebeb;}
	.section2 .sec2_cont{width:300px; margin:0 auto; padding:0; }
	.section2 .sec2_box{width:100%; height:200px;background-color:white;border:1px solid #ccc; margin:8px auto;  }
	.section2 .sec2_box h3{background-color:black; height:50px; line-height:50px;color:white;}		
	.section2 .sec2_box .pic{height:130px; line-height:130px; margin:0; width:38%;float:left; }
	.section2 .sec2_box .pic img{width:110px; }
	.section2 .sec2_box p{width:60%; padding:40px 10px 0 0;color:#666; font-size:13px;  float:right;}

	.section2 .mr_none{margin-right:0;}

	.section3{width:80%; margin:0 auto;}
	.section3 ul li{width:100%; margin:10px 0;}

	.footer_inner{width:90%; letter-spacing: -0.8px;}
	.footer_inner .add01{display: block;}

}
