@charset "utf-8";

#m_menu_wrap {display:none}

.area_ct {position:relative;width:1200px; margin:0 auto;}
/* Layout */
#wrap {position:relative;z-index:0;width:100%; min-width:1200px}
#btn_top a{ position:fixed; width:64px; height:64px; display:block; background:url(../img/top.png) no-repeat center; right:20px; bottom:30px; background-color:none; z-index:9999}
#container {position:relative;z-index:0;width:100%; float:left;margin-top:86px;}

#gmp{position:relative;z-index:999;}



/* Menu */
#navi_wrap {position:absolute;width:100%; height:98px;z-index:999;background-color:#fff; border-bottom:solid 1px #d7d7d7; padding-top:20px; box-sizing:border-box}
#navi_wrap #navi_box {z-index:999;}
#logo {width:23%; height:auto;float:left; text-align:left; border-right:solid 2px #eaeaea; padding:5px 0}
#navi {float:right;position:relative;width:60%;z-index:9999; background-color:#fff} 
.nav_w {float:left;text-align:center;width:25%;height:38px; font-size:14px; font-weight:600}
.nav_w:after {clear:both;display:block;content:""}
.nav_w span {float:left;width:100%}
.navi_fir {position:relative;}
.navi_fir a {display:block; line-height:56px; color:#575757 !important; font-size:1.25em; font-weight:600; text-align:center; letter-spacing:-0.12em}
.navi_fir a:hover {color:#0257c0}
.navi_fir strong {font-size:100%;text-align:center}
.navi_sec {display:none;clear:left;position:absolute;top:45px;left:0;width:250px } 
.navi_sec p { font-size:14px; font-weight:600; text-align:center; border-bottom:solid 2px #000000} 
.navi_sec ul {min-height:210px;border-right:1px solid #273a5a; }/*메뉴배경블랙*/
.navi_sec li {text-align:left;padding:3px 0 3px 15px; text-align:left}
.navi_sec li a {color:#3e3e3e!important;font-size:14px; font-weight:normal }
.navi_sec li a:hover {color:#ffd820 !important; font-weight:bold}  
.navi_sec ul.end {min-height:280px;border-right:0; }
.color { background-color:#e4ddca}

#navi_bg {display:none;position:absolute;left:0px;top:87px;width:100%;height:205px;} 
#navi_bg p{ }
*:first-child+html #navi_bg {} /* z-index:-1; */
.navi_bg_img {min-height:255px;width:1200px; margin:0 auto; background:url(../img/navi_bg.png); box-sizing:border-box; border-bottom:solid 3px #424242; }
.navi_bg_img .spc_box {float:left; width:40%; height:255px}
.navi_bg_img .navi_sub_menu ul {float:left; width:15%;height:255px;border-left:solid 1px #0ecba1; padding:20px 5px 0 25px; box-sizing:border-box;font-family:'NanumSquare',sans-serif;}
.navi_bg_img .navi_sub_menu ul li { float:left; width:100%; padding:0 10px;box-sizing:border-box; line-height:2 }
.navi_bg_img .navi_sub_menu ul li a { font-size:0.95em; color:#fff}
.navi_bg_img .navi_sub_menu ul li a:hover{ color:#f7ff70 !important;}


#foot_area { float:left; width:100%; background-color:#414248; padding:44px 0 34px 0;overflow:hidden; min-width:1200px }
	.foot {width:1200px; margin:0 auto;position:relative;}
	.foot .logo { float:left; width:100px; }
	.foot .add {  float:left; width:80%;color:#989696; line-height:17px; font-size:0.75em; letter-spacing:-0.02em} 
	.foot .add span { color:#565656	}
  .foot .add em { padding:0 10px; color:#4c4f6a}
  .foot .foot_img { position: absolute; right: 0; top: -32px; background-color: #ffffff; padding:4px;}
  .foot .foot_img img { width: 74px; height: auto;}

/*.business_bx { float:left; width:100%; margin-top:120px;  position:absolute;top:200px; z-index:99;}
.business_bx ul { width:840px; margin:0 auto}
.business_bx ul li { float:left; width:25%; padding:0 10px; box-sizing:border-box}
.business_bx ul li.bus_01 a{ width:186px; height:186px; border-radius:186px; background-image:url(../img/mico_01.png); background-position: center 40px; background-color:#34ad3c; background-repeat:no-repeat; display:block; color:#fff !important}
.business_bx ul li.bus_02 a{ width:186px; height:186px; border-radius:186px; background-image:url(../img/mico_02.png); background-position: center 40px; background-color:#59941f; background-repeat:no-repeat; display:block; color:#fff !important}
.business_bx ul li.bus_03 a{ width:186px; height:186px; border-radius:186px; background-image:url(../img/mico_03.png); background-position: center 40px; background-color:#296860; background-repeat:no-repeat; display:block; color:#fff !important}
.business_bx ul li.bus_04 a{ width:186px; height:186px; border-radius:186px; background-image:url(../img/mico_04.png); background-position: center 40px; background-color:#0c437b; background-repeat:no-repeat; display:block; color:#fff !important}
.business_bx ul li .bus_txt{ margin-top:120px; float:left; width:100%; text-align:center; letter-spacing:-0.08em}
.business_bx ul li.bus_03  .bus_txt{ margin-top:110px; float:left; width:100%; text-align:center; letter-spacing:-0.08em; line-height:1.2}*/

.business_bx_s { float:left;  width:100%; margin-top:270px; position:absolute;top:350px; z-index:99;}
.business_bx_s .inner { width:1190px; margin:0 auto}
.business_bx_s ul { float:right; width:400px}
.business_bx_s ul li { float:left; width:25%; padding:0 10px; box-sizing:border-box}
.business_bx_s ul li.bus_01 a{ width:88px; height:88px; border-radius:88px; background-image:url(../img/mico_01.png); background-position: center 15px; background-color:#34ad3c; background-repeat:no-repeat; display:block; color:#fff !important; background-size:55%}
.business_bx_s ul li.bus_02 a{ width:88px; height:88px; border-radius:88px; background-image:url(../img/mico_02.png); background-position: center 11px; background-color:#59941f; background-repeat:no-repeat; display:block; color:#fff !important; background-size:45%}
.business_bx_s ul li.bus_03 a{ width:88px; height:88px; border-radius:88px; background-image:url(../img/mico_03.png); background-position: center 18px; background-color:#296860; background-repeat:no-repeat; display:block; color:#fff !important; background-size:50%}
.business_bx_s ul li.bus_04 a{ width:88px; height:88px; border-radius:88px; background-image:url(../img/mico_04.png); background-position: center 18px; background-color:#0c437b; background-repeat:no-repeat; display:block; color:#fff !important; background-size:60%}
.business_bx_s ul li .bus_txt{ margin-top:56px; float:left; width:100%; text-align:center; letter-spacing:-0.08em; font-size:12px}
/*.business_bx_s ul li.bus_03  .bus_txt{ margin-top:60px; float:left; width:100%; text-align:center; letter-spacing:-0.08em; line-height:1.2}*/


.m_contents { float:left; width:100%; box-sizing:border-box; margin-top:129px; position:absolute; top:600px; z-index:99; }
.m_contents .m_inner { background:#FFFFFF;height:170px;box-sizing:border-box}
.communite_sect { float:left; text-align:left;width:40%;padding:0 30px 0 30px; box-sizing:border-box; margin-top:20px }
.communite_sect.r_line { border-right:solid 1px #ebebeb;} 
.communite_sect p { width:100%; font-size:1.25em; font-weight:600; padding-bottom:16px; color:#171717; letter-spacing:-0.07em; position:relative; box-sizing:border-box; border-bottom:solid 1px #e4e4e4}
.communite_sect p .more a { position:absolute; width:25px; height:25px; background:url(../img/btn_mmore.png) no-repeat right center;  top:0; right:0; }
.communite_sect ul.lst { float:left; width:100%; margin-top:10px;}
.communite_sect ul.lst li { position:relative; background:url(../img/bullet_jum.png) no-repeat 0 8px; padding-left:14px; letter-spacing:-0.06em; font-size: 0.95em}
.communite_sect ul.lst li a { color:#1c1c1c}
.communite_sect ul.lst li a:hover { color:#1d6f5b}
.communite_sect ul.lst li span{ font-size:0.875em; width:40px; color:#818080; position:absolute; right:20px; top:0}
.communite_sect a:hover { color:#20715e !important; font-weight:600}
.customer_sect { float:left; text-align:left; width:20%; height:170px; padding:0 30px 0 30px; box-sizing:border-box; background-color:#828388 }
.customer_sect p.tit { font-size:1.5em; color:#000; background:url(../img/phone_ico.png) no-repeat 18px 6px; padding:10px 0 10px 24px; text-align:center; margin-top:40px; letter-spacing:-0.08em}
.customer_sect p.num { color:#ffffff; font-size:1.45em; text-align:center; margin-top:10px; letter-spacing:0}

/* visual */
.box_main_content_1 > div .btn_link a,
.box_main_content_2 .ul_nav_1 li a span,
.area_visual .ul_arrow a,
.area_visual .ul_play li a,
.ul_pos li a,
.ul_pos li span,
.box_main_content_4 .box_sns h3 span {display:block; overflow:hidden; height:0; font-size:0; line-height:100px; text-indent:-10000px;}
.box_main_content_1 > div .btn_link a,
.box_main_content_2 .ul_nav_1 li a span,
.area_visual .ul_arrow a,
.area_visual .ul_play li a,
.ul_pos li a,
.ul_pos li span,
.box_main_content_4 .box_sns h3 span {background-image:url(../img/play_main.png); background-repeat:no-repeat;}

.area_visual {overflow:hidden; position:relative; top:0; left:0; width:100%; height:729px;}
.area_visual .ul_visual li {
	display:none;
	overflow:hidden;
	position:absolute;
	top:0;
	left:1px;
	width:100%;
	height:0;
	padding-top:849px;
	background-repeat:no-repeat;
	background-position:center top;
}
.area_visual .ul_visual li.li { background-position:center }

.area_visual .ul_visual li p {display:none; position:absolute; left:50%; opacity:0; color:#333;}
.area_visual .ul_visual li p.img_opa {opacity:1;}

.area_visual .ul_arrow a {position:absolute; top:50%; left:50%; width:27px; margin-top:-27px; padding-top:54px;}
.area_visual .ul_arrow .li_prev a {margin-left:-512px; background-position:0 -40px;}
.area_visual .ul_arrow .li_next a {margin-left:485px; background-position:-50px -40px;}
.area_visual .ul_play,
.area_visual .ul_pos {position:absolute; bottom:5%; left:50%; z-index:999999}
.box_main_content_1 .ul_pos {position:absolute; bottom:10.75%; left:50%;}
.area_visual .ul_play li {position:absolute; bottom:0; left:0;}
.area_visual .ul_play li a {display:none; width:16px; padding-top:17px;}
.area_visual .ul_play li.on a {display:block;}
.area_visual .ul_play li.li_start a {background-position:-60px -85px;}
.area_visual .ul_play li.li_stop a {background-position:-40px -85px;}
.ul_pos li {float:left; width:16px; margin:0 1px;}
.ul_pos li a,
.ul_pos li span {display:block; padding-top:17px; background-position:0 -85px;}
.ul_pos li.on a,
.ul_pos li.on span {background-position:-20px -85px;}
#container {z-index:0;width:100%;height:auto;}
#container.main { height:899px}
#container .title {width:50%; position:absolute;top:190px; z-index:99; text-align:center; margin:0 25%}


@media screen and (max-width:768px)  {
.area_ct {width:100%}
#wrap {min-width:100%}
#foot_area   {min-width:100%}
#container.main { margin-top:0;}
/*.visual_wp { height:400px; background-size:cover}*/
#navi_wrap {position:absolute;width:100%; height:72px;}
#navi { display:none}
#logo {width:100%; height:auto; padding-top:0px; padding-left:12px; box-sizing:border-box}
#logo img { height:40px; width:auto}


#container {overflow:hidden;clear:left;*zoom:1; margin-top:0 }
.area_visual { height:500px;}
.area_visual .ul_visual li {background-position:center top; background-size:auto 330px; padding-top:300px}
#container.main { height:850px}
.m_contents { float:left; width:100%; box-sizing:border-box; margin-top:0; z-index:99; }
#container .title {width:60%; position:absolute;top:10%;margin:0 20%}
.contents {padding:0; position:relative; margin-top:0px}
.area_visual .ul_play,
.area_visual .ul_pos {position:absolute; top:260px; left:50%;}
.box_main_content_1 .ul_pos {position:absolute;top:260px; left:50%;}
.area_visual .ul_play li {position:absolute; top:0;left:0;}

.m_contents { float:left; width:100%; box-sizing:border-box; margin-top:0; position:absolute; top:440px; z-index:99; }


#m_menu_wrap {display:block;}
.m_depth01 {width:100%;background:#575b73;border-bottom:1px solid #464a62;}
.m_depth01 a {display:block;padding:10px 3.125%;font-size:16px;color:#ffffff !important;}
.m_depth01 a:hover {color:#FFFF00 !important}
.m_depth01 .m_depth02 {background:#7d8093;}
.m_depth01 .m_depth02 li {padding:2px 3.125%;line-height:11px !important;border-bottom:1px solid #6e7187;}
.m_depth01 .m_depth02 li:last-child {border-bottom:0}
.m_depth01 .m_depth02 a {display:block;padding-left:15px;font-size:14px; color:#d9e2f6;}
.m_depth01 .m_depth02 a.end{border-bottom:none;}
.m_depth01 .m_depth02 a:hover{color:#ffffff !important;}
.m_depth01 .m_depth02 .smenu02 {line-height:11px !important; padding:0 0 10px 15px}
#m_menu_close {position:absolute;top:12px;right:9px;z-index:99999}
.m_menu_open {position:absolute;top:12px;right:9px;z-index:99999}
.m_menu { padding-top:72px; background-color:#fff;z-index:9999}
/*MainV*/

/* visual */
.visual_bx{ float:left; width:100%; height:auto;  background-position:center top !important; background-size:130%}
.visual_bx .title{ padding-top:15%}
.visual_bx .title img { width:60%}


.business_bx_s .inner { width:80%; margin:0 auto}

.business_bx_s {  margin-top:0px;top:340px; z-index:99;}
.business_bx_s ul { width:98%;  margin-right:2%}
.business_bx_s ul li { float:left; width:25%; padding:0 10px; box-sizing:border-box; text-align:center; margin-bottom:10px}
.business_bx_s ul li.bus_01 a{ margin:0 auto; width:95px; height:95px; background-position: center 15px;}
.business_bx_s ul li.bus_02 a{ margin:0 auto; width:95px; height:95px; background-position: center 12px;}
.business_bx_s ul li.bus_03 a{ margin:0 auto; width:95px; height:95px; background-position: center 18px;}
.business_bx_s ul li.bus_04 a{ margin:0 auto; width:95px; height:95px; background-position: center 18px;}
.business_bx_s ul li .bus_txt{ margin-top:64px; }

.m_contents { margin-top:25px; }
.m_contents .m_inner { background:#FFFFFF;height:auto;}
.communite_sect { width:100%;padding:0 30px 0 30px; margin-top:20px }
.communite_sect ul.lst { float:left; width:100%; }

.customer_sect { float:left; text-align:left; width:100%; height:100px; margin-top:20px }
.customer_sect p.tit { font-size:1.6em; color:#000; background:url(../img/phone_ico.png) no-repeat 35% 10px; background-size:26px 31px; padding:10px 0 16px 24px; text-align:center; margin-top:10px; letter-spacing:-0.08em}
.customer_sect p.num { font-size:1.8em; margin-top:0px;}

#foot_area { float:left; width:100%; background-color:#414248; padding:34px 10px;min-width:100%; box-sizing:border-box}
	.foot {float:left; width:100%; position:relative;}
	.foot .foot_img { float:left; width:100%; position: relative; background-color: #ffffff; padding:10px 4px;  text-align: center; }
	.foot .foot_img img { width:auto; height: auto;}
	.foot .add {float:left; width:100%;}
	

}

@media screen and (max-width:640px) { 
#container.main { height:840px}
 
 #foot_area { padding:20px;}
.foot .logo { width:50px; margin-bottom:14px }
	.foot .add { width:100%; }
  
.m_contents { top:430px; }
.business_bx_s { top:330px;}

}



@media screen and (max-width:480px) {
#logo img { height:32px; width:auto}
.visual_bx .title img { width:70%} 

  
#container.main { height:820px}
.communite_sect { width:100%;padding:0 20px 0 20px; margin-top:20px }
.communite_sect ul.lst li span { display:none}	
.business_bx_s .inner { width:100%; margin-right:0}

.m_contents { top:410px; }
.business_bx_s { top:325px;}

}



@media screen and (max-width:440px) {

 
 .business_bx_s ul { width:98%;  margin-right:2%}
.business_bx_s ul li.bus_01 a{ margin:0 auto; width:90px; height:90px; background-position: center 15px;}
.business_bx_s ul li.bus_02 a{ margin:0 auto; width:90px; height:90px; background-position: center 15px;}
.business_bx_s ul li.bus_03 a{ margin:0 auto; width:90px; height:90px; background-position: center 19px;}
.business_bx_s ul li.bus_04 a{ margin:0 auto; width:90px; height:90px; background-position: center 15px;}

}

@media screen and (max-width:400px) {
#container.main { height:800px} 
.m_contents { top:390px; }
  
.business_bx_s ul li.bus_01 a{ margin:0 auto; width:80px; height:80px; background-position: center 15px;}
.business_bx_s ul li.bus_02 a{ margin:0 auto; width:80px; height:80px; background-position: center 10px;}
.business_bx_s ul li.bus_03 a{ margin:0 auto; width:80px; height:80px; background-position: center 19px;}
.business_bx_s ul li.bus_04 a{ margin:0 auto; width:80px; height:80px; background-position: center 15px;}
.business_bx_s ul li .bus_txt{ margin-top:54px; }

}

@media screen and (max-width:360px) {
  .business_bx_s ul { width:97%;  margin-right:4%}
.business_bx_s ul li.bus_01 a{ margin:0 auto; width:75px; height:75px; background-position: center 15px;}
.business_bx_s ul li.bus_02 a{ margin:0 auto; width:75px; height:75px; background-position: center 10px;}
.business_bx_s ul li.bus_03 a{ margin:0 auto; width:75px; height:75px; background-position: center 19px;}
.business_bx_s ul li.bus_04 a{ margin:0 auto; width:75px; height:75px; background-position: center 15px;}
.business_bx_s ul li .bus_txt{ margin-top:48px; }
}