@charset "utf-8";

/*
================================================================================
LAYOUT
================================================================================
*/

/* header */
#wrap {min-width:1450px;}
#header {width:100%;height: 100px; position:absolute;left:0;top:0; z-index:400; background :#fff;}
.headerWrap { position:relative; width:1080px; height:100px; margin:0 auto;}
.headerWrap.group { height:35px;}
#header .temp {height: 100px; width:100%; margin:0 auto;}

/* logo */
.headerWrap .logo {position:absolute;top:0;left:0px;font-size:0;text-indent:-10000px;line-height:0; width:230px; height:100px; background:url('../images/common/ci.png') no-repeat left 10px center;}
.headerWrap .logo a { display:block; width:230px; height:100px; box-sizing:border-box;}

/* gnb menu */
.bn_siteMap{ display:block; position:absolute; right:0px; top:23px; width:50px; height:50px; background:url('../images/common/btn_siteMap_b.png') no-repeat 100% 50%; font-size:0; filter: alpha(opacity=80); opacity: 0.8;  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out}
.bn_siteMap:hover{filter: alpha(opacity=100); opacity: 1;}

/* gnb 메뉴 */
.topBox,
#gnb > li:last-child { display:none}
#gnb {position:absolute; right:180px; top:0;} /*메뉴위치*/
#gnb:after {display:block; content:""; clear:both;}
#gnb > li {position:relative; text-align:center; float:left; }
#gnb > li .tit > a {color:#333; font-size: 1.125em; display:block;padding:0;width: 130px;line-height:100px; font-weight:700;font-family: '나눔스퀘어','Nanum Square';}
#gnb > li:nth-child(1) .tit > a,
#gnb > li:nth-child(1) > div { width:130px;} 
#gnb > li:nth-child(2) .tit > a,
#gnb > li:nth-child(2) > div { width:130px;} 
#gnb > li:nth-child(3) .tit > a,
#gnb > li:nth-child(3) > div { width:130px;} 
#gnb > li:nth-child(4) .tit > a,
#gnb > li:nth-child(4) > div { width:130px;} 
#gnb > li:nth-child(5) .tit > a,
#gnb > li:nth-child(5) > div { width:130px;} 

#gnb > li .tit a:hover,
#gnb > li .tit a:focus,
#gnb > li .tit a:active,
#gnb > li .tit a.on {color:#ed1a3b; }

#gnb > li .tit a::after	{ content:""; position: absolute;left: 15%;width: 70%;height: 5px;padding:1px 0;border-bottom:4px solid #ed1a3b; opacity: 0;-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;-moz-transition: opacity 0.2s, -moz-transform 0.2s;transition: opacity 0.2s, transform 0.2s;-webkit-transform: translateY(-5px);-moz-transform: translateY(-5px);transform: translateY(-5px);z-index:9;}
#gnb > li a::after	{bottom: 0;-webkit-transform: translateY(5px);-moz-transform: translateY(5px);transform: translateY(5px);}
#gnb > li a.on::after,
#gnb > li a:hover::after,
#gnb > li a:focus::after{opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}

#gnb > li.over .tit a{color: #ed1a3b !important;}
#gnb > li.over .tit a::after{opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}

/* 하위메뉴 bg height:120px;-- 높이값 */
#gnb > li > div {display:none;height: 249px;padding:8px 0;position:absolute;}
#gnb > li.over > div { background:#f6f6f6;}
#gnb > li:first-child > div{ margin-left:-1px; border-left:0;}
#gnb > li:last-child > div{ border-right:0; margin-right:-1px;}
#gnb > li > div > ul > li {float:none; padding:0; background:none; font-size:0.95em; letter-spacing:-0.05em; font-weight:400; position:relative;}
#gnb > li > div > ul > li:first-child {margin-top:0;}
#gnb > li > div > ul > li > a {display:block; color:#959595; padding:6px 2px 6px 2px; font-size: 0.95em;}

#gnb > li.over > div li a{}
#gnb > li.over .tit > a{ color:#ec1744 !important}
#gnb > li.over > div > ul > li > a{ color:#333}
#gnb > li > div > ul > li > a:hover,
#gnb > li > .ulWrap > ul > li > a:focus, #gnb > li > .ulWrap > ul > li > a:active { color:#ec1744;}


/* util */
.util{position:absolute; top:31px; right:40px; z-index:1;}
.util li{float:left; height:35px }
.util li a{ display: inline-block; padding:0 10px 0 0px; color:#737373; line-height:35px; font-size:13px;}
.util li a:hover{ color:#ec1744;}
.util li a:hover:before{color:#737373;}
.util li a:before{ content:'/'; display:inline-block; padding-right:10px; font-size:0.9em;}
.util li:first-child a:before{ display:none;}

/* header.on */
#header.on{ background: url('../images/common/top_bg.png') repeat-x top 100px center; border-bottom:1px solid #ddd;}
#header.on:before{ content:''; display:block; background:#d8d9da; width:100%; height:1px; position:absolute; top:99px;}
#header.on #gnb > li .tit > a{ color:#333;}
#header.on .headerWrap .logo { background: url('../images/common/ci.png') no-repeat left 10px center; width:230px; height:100px;}
#header.on .headerWrap .logo a{ width:230px;}
#header.on .bn_siteMap{ background:url('../images/common/btn_siteMap_b.png') no-repeat 100% 50%;}
#header.on .util li a,
#header.on .util li a:hover:before{ color:#737373;}
#header.on .util li a:hover{ color:#ec1744;}

/* container */
#container {padding-top:100px;}
#container:after {display:block; content:""; clear:both;}

/* footer */
#footer{position:relative; padding:50px 0; background:#232323;}
.footerBox {position:relative; width:1080px; margin:0px auto; background:url("../images/common/foot_ci.png") no-repeat 0 0; box-sizing:border-box;  padding-left:235px; }
.info { margin-bottom:10px;}
.info address{ display:inline-block; color:#a8a8a8; font-style:normal;}
.info address span{display: block;float: left;margin-right: 12px;padding-right: 12px;border-right:1px solid #424242;line-height:1;margin-bottom: 10px;font-size:13px;font-weight:100;}
.info address span:last-child{ border-right:0;}
.info address .tit{  border-right:0; }
.info address .tel{border-right: 1px solid #424242;}
.info address .email{ border-right:0; color:#cf372d; padding-right:0;}
.info address .email:before{ content:''; display: inline-block; background:url('../images/common/ico_email.gif') no-repeat; width:15px; height:11px; margin-right:5px; }
.footerBox p.copyright {color:#8b8b8b;clear:both;font-size:.8em;font-weight: 100;}


/* 콘텐츠 상단으로 이동 */
footer .btn-top {width:41px;height:41px;overflow:hidden;background:rgba(0,0,0,0.4) url('../images/common/toTop.png') center center no-repeat;display:block; border-radius:7px;position:fixed;bottom:115px;right:-70px;z-index:300; -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
footer .btn-top.on {right: 10px; background-color:rgba(0,0,0,0.4);}
footer .btn-top:hover{background-color:rgba(0,0,0,0.4);}


@media screen and (max-width:1024px) {	
	body{ background:#232323; font-size: 15px;}
	#wrap,
	#header .headerWrap,
	#container,
	#footer .footerBox {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	#header .temp,
	#header .headerWrap,
	#footer .footerBox {width:100%; min-width:300px; margin:0 auto;}
	
	#wrap{width:100%; min-width:300px; margin:0 auto; background:#fff;}
	#header { position:absolute; padding-top:0; min-width:300px; height:auto;}
	.headerWrap{ height:78px;}
	#header .temp { height:auto}
	
	.util,
	.bn_siteMap{ display:none;}		
		
	/* logo */
	.headerWrap .logo { background: url('../images/common/ci.png') no-repeat left 20px center !important; width: 230px !important;height: 78px !important; background-size: 203px 33px !important;-moz-background-size:203px 33px !important;-webkit-background-size: 203px 33px !important;}
	.headerWrap .logo a{width: 230px !important;height: 78px !important;}
	
	/* mGnb */
	#mGnb {position:absolute;right:0;top:0px;z-index: 999;overflow:hidden;width: 78px;height: 78px;font-size:0;text-indent:-10000px;}		
	#mGnb a{display: block; width:100%;position: relative;height: 78px;}
	#mGnb span{position:absolute; right:20px;display: block;height:3px;width: 34px;border-bottom: 3px solid #5e5e5e; transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; -ms-transition: 0.3s all ease; -o-transition: 0.3s all ease;}
	#mGnb span:nth-child(1){top:32px;}	
	#mGnb span:nth-child(2){top:40px;}
	#mGnb span:nth-child(3){top:48px;}	
	#mGnb.mGnbOn span{ border-color:#fff; top:40px;}
	#mGnb.mGnbOn span:nth-child(1){-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);transform: rotate(45deg);}
	#mGnb.mGnbOn span:nth-child(2){ display:none;}		
	#mGnb.mGnbOn span:nth-child(3){ -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
	
	/* topBox */
	.topBox{ display:block;overflow: hidden; background: #c31b24;color:#fff;font-size: 13px; height:78px;}
	.topBox .home{ border-right:1px solid #af1820; width:78px; background:url('../images/common/ico_home.png') no-repeat 50% 50%; font-size:0; margin-right:20px;}
	.topBox li{ float:left;}
	.topBox li a{ display:block; padding:0 5px; line-height:78px; font-size:1.1em; font-weight:500; color:#e38d93;}
	.topBox li.on a,
	.topBox li a:hover{ color:#fff;}	
	.topBox li a:after{ content:'/'; display:inline-block; padding-left:10px; font-size:0.9em; font-weight:100; color:#e38d93 !important;}
	.topBox li:last-child a:after{ display:none;}	
	
	/* gnb menu */
	.gnb_wrap {position:fixed; right:-320px; top:0px; width:320px; height:100%; z-index:998; display:none;}
	.gnb_wrap .gnbIn {position:relative; height:100%;}
	.gnb_wrap nav {position:relative;width:auto;height:100%;background: #fff;overflow:hidden;overflow-y:auto;z-index:3;}
	
	#gnb > li:last-child { display:block}
	#gnb {position:static}
	#gnb > li {position:static;margin:0;padding:0;background:none;text-align:left;float:none;width:auto;border-bottom: 1px solid #ccc;border-right:none;}
	#gnb > li:nth-child(8){ display:block;}
	
	#gnb > li .tit > a {display:block;color: #282828 !important;font-size:1.2em;height:60px;line-height:60px;padding: 0px 0 0px 20px;border:none;width:auto !important;position:relative;background: url('../images/common/arrow_depth.png') no-repeat 90% center;}
	#gnb > li .tit > a:hover, 
	#gnb > li .tit > a:focus,
	#gnb > li .tit > a:active {color:#ec1744 !important;}
	#gnb > li .tit > a:after{ display:none;}
		
	#gnb > li > div {width:auto !important;position:static;left:inherit;margin:0;padding: 0px 0;border:0;height:auto;background-color: #ffffff;}
	#gnb > li > div > ul > li {margin:0;width:auto; float:none;}
	#gnb > li > div > ul > li:before{ display:none;}		
	
	/*하위메뉴*/
	#gnb > li.over .depth2{ display:block;}
	#gnb .depth2{ background:#f7f7f7; border-left:none;  height:auto;  width:100%; float:none; padding:0;}
	#gnb .depth2 li:first-child:after,
	#gnb .depth2 li:first-child:before{ display:none;}	
	#gnb > li > div > ul > li > a {display:block;font-size:1.05em;padding: 12px 0 12px 20px;color: #555;border-top: 1px solid #e2e2e2;}	
	#gnb > li > div > ul > li > a:hover,
	#gnb > li > div > ul > li > a:focus,
	#gnb > li > div > ul > li > a:active{ color:#000 !important; text-decoration:underline;}	
	#gnb > li > .ulWrap > ul > li > a:hover{ background:none;}	
	
	/* mobileblock */	
	#mobileblock{position:fixed; z-index: 997; top:0px; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); display:none;}

	
	/* container */
	#container { width:100%; padding-top:78px !important;}
	
	/* footer */	
	#footer,
	#footer.intro{padding: 0px 0px 20px 0px;}
	#footer:before{ display:none;}	
	footer .btn-top{bottom:10px}
	.footerBox{ clear:both;background: url('../images/common/foot_ci.png') no-repeat center 35px;background-size: 145px;padding:70px 0 0 0px; }
	.info{float: none;}
	.info address{margin:0 auto;text-align:center;display: block; width: 100%;}
	.info address span{display:inline-block;margin-bottom: 3px;float:inherit;margin-right:4px;padding-right:10px;}
	.info address .tit{padding-right:0;margin: 13px 0 5px 0; display: block;}
	.footerBox p.copyright{ text-align:center;}
	
}

@media screen and (max-width :640px) {
	body{ font-size:14px;}
	
	#wrap,	
	#header .temp,
	#header .headerWrap,
	#footer .footerBox {width:100%;}
	#header .headerWrap,	
	.topBox{ height:50px;}
	#container{ padding-top:50px !important;}
	
	/* logo */
	.headerWrap .logo,
	.headerWrap .logo a{ height:50px !important; width:160px !important;}
	.headerWrap .logo{ background-position:left 10px center !important; background-size: 140px 25px !important; -moz-background-size: 140px 25px !important; -webkit-background-size: 140px 25px !important;}
		
	/* topBox */
	.topBox .home{ width:50px; margin-right:15px;}
	.topBox li a{ line-height:50px;}
	
	/* mGnb */
	#mGnb{ width:50px; height:50px;}	
	#mGnb a{ padding:11px 0; height:50px;}
	#mGnb span{ width:25px; right:15px;}
	#mGnb span:nth-child(1){ top:17px;}
	#mGnb span:nth-child(2){top:25px;}
	#mGnb span:nth-child(3){top:33px;}
	#mGnb.mGnbOn span{ top:25px;}	
			
	/* Gnb */
	.gnb_wrap{ width:230px;}
	#gnb > li .tit > a{ height:50px; line-height:50px;}
	
	/* footer */	
	footer .btn-top{ bottom:10px;}	
	.info address span{font-size:13px; display:block;}
	.footerBox p.copyright,
	.info address{}
	.info address span{ margin-right: 0; padding-right: 0; }
	.info address .tel,
	.info address .fax{display:inline-block;margin-right: 4px;padding-right: 10px;margin-bottom: 8px;}
	.info address span{ border-right:0;  }
	.info address .email{ margin-bottom:20px;}
		
}

/*
================================================================================
SUB LAYOUT
================================================================================
*/
/* 왼쪽메뉴 */
#menu {position:relative;width: 1080px;height: 55px;margin:-55px auto 0 auto;text-align: center;background: rgba(0,0,0,0.5);}
#menu .tit{ display:none;}
#menu .lnb {margin:0 auto;width: 1080px;}
#menu .lnb > li{display:block; float:left; width: 100%;}
#menu .lnb > li:first-child{border-top:0;}
#menu .lnb > li > a {display:block;padding:0;font-size:1.135em; font-weight:400;color:#fff;line-height: 55px;height:55px; position:relative;border: 1px solid rgba(255,255,255,0.1);
    border-width: 0px 1px 0 0px;}
#menu .lnb > li.on > a{color:#111; font-weight:500; background: #fff !important;} 
#menu .lnb > li > a:hover, 
#menu .lnb > li > a:focus, 
#menu .lnb > li > a:active {color:#de0b1a; font-weight:500; background: rgba(255,255,255,0.85);}
#menu .lnb > li:last-child a{border:0 ;}

#menu .lnb.cols2 > li{ width: 50%;}
#menu .lnb.cols3 > li{ width: 33.3%;}
#menu .lnb.cols3 > li:last-child{ width: 33.4%;}
#menu .lnb.cols4 > li{ width: 25%;}
#menu .lnb.cols5 > li{ width: 20%;}
#menu .lnb.cols6 > li{ width: 16.5%;}
#menu .lnb.cols6 > li:last-child{ width: 17.5%; }


/* visual_area */
.visual_area{height: 250px;background:#67676f url('../images/sub/sub_visual_01.jpg') 50% 0 no-repeat;/*background-size:cover;*/}
.visual_area .txtBox{display:block;width:1080px;margin:0 auto;padding-top: 0;}
.visual_area .txtBox p{text-align:center;color:#fff;font-size:2.35em;padding-top: 85px;line-height:1.3;font-weight: 700;text-transform: uppercase;} 
.visual_area .txtBox p span{ font-size:0.26em; display:block; font-weight: 100; text-transform:capitalize;}

.visual_area.top_img01{ background-image: url('../images/sub/sub_visual_01.jpg');}
.visual_area.top_img02{ background-image: url('../images/sub/sub_visual_02.jpg');}
.visual_area.top_img03{ background-image: url('../images/sub/sub_visual_03.jpg');}
.visual_area.top_img04{ background-image: url('../images/sub/sub_visual_04.jpg');}
.visual_area.top_img05{ background-image: url('../images/sub/sub_visual_05.jpg');}
.visual_area.top_img06{ background-image: url('../images/sub/sub_visual_06.jpg');}


@media screen and (max-width:1024px) {
	.visual_area{ height: 200px; background-size:cover;}
	.visual_area .txtBox p{ display: none;}	
	.visual_area .txtBox p{padding-top:60px;} 
}
@media screen and (max-width:640px) {
	.visual_area{ height: 150px;}
	.visual_area .txtBox p{font-size:2.8em;padding-top:40px;} 
}

/* title_area */
.title_area .location{}
#sub_content .title_area{position: relative;margin: 0 auto 50px auto;width: 1080px;}
.title_area .location {text-align:left; margin:0 0 30px; position:absolute; top:0; right:0;}
.title_area .location span {display:inline-block; padding-left:15px; background:url('../images/common/icon_location_arrow.gif') no-repeat 4px center; font-size:13px; color:#6a6a6a}
.title_area .location a:last-child span {color:#242424; font-weight:700;}
.title_area .location a.home img {vertical-align:middle; margin-top:-1px}	
.title_area h2{ font-size:2.2em; line-height:1em; color: #333; margin-bottom:15px; text-align: center;}
.title_area h2:after{ content:''; display: block; margin: 28px auto 0 auto;background :#de0b1a; width: 100px; height: 2px;}

/* content */
#sub_container_wrap { background:#fff; overflow:hidden;}
.sub_content_wrap {position:relative;width: 100%;margin:0 auto;}
#sub_content{/* float:right; *//* width:1080px; */padding: 60px 0 50px 0;}
#page{clear:both; min-height:600px;}
.sub_content_wrap p{ margin-bottom:15px;}
#page table p{ margin-bottom:0;}
.fixWidth{position:relative; width:1080px; margin:0 auto; margin-bottom:50px}

.ttl01{clear: both;font-size: 1.55em; line-height: 1.2em; padding-left: 25px;color: #111;margin:50px 0 15px;position:relative;}
.ttl01:before{content:'';display: block;position: absolute;left: 0px;top: 7px;background:#fff;width: 5px;height: 5px;border:5px solid #de0b1a;border-radius:50%;}
.ttl02{clear: both; font-size:1.25em;color:#1c5ca4; margin:30px 0 10px; position: relative;}
.ttl03{clear: both;font-size:1.135em;color:#333;margin:20px 0 7px;position: relative;}
.ttl04{clear: both;font-size:1.05em;color:#555;margin:20px 0 7px;position: relative; }
.ttl04:after{ content: ''; display: block; width: 15px; height: 1px; background: #333; margin-top: 5px;}
.ttl01 span,
.ttl02 span,
.ttl03 span,
.ttl04 span{ display: inline-block; color: #323131; font-size: .9em; font-weight: 200}

.ttl01 + .ttl02 { margin-top: 0}
.ttl02 + .ttl03 { margin-top: 0}
.ttl03 + .ttl04 { margin-top: 0}



@media screen and (max-width:1024px) {
	
	/* container */
	#container { width:100%; padding-top:60px;}
	
	/* content */	
	#sub_container_wrap,
	.sub_content_wrap,
	#sub_content {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	#sub_container_wrap {width: 100%;padding-top: 0px;}
	.sub_content_wrap{width:100%; margin:0 auto 12px auto;}
	#sub_content{width:100%;max-width: 815px;padding:0 15px 20px;margin:0 auto;float: none;}	
	#page{ min-height:300px;}
	.fixWidth{width:100%;max-width: 815px; margin:0 auto 35px auto;}
	
	#sub_content .title_area{position:relative;padding-top:40px;margin-bottom:30px;width: 100%;}
	.title_area .location {text-align:left;margin:0 0 15px; top:30px;}
	.title_area .location span, .title_area .location strong {display:inline-block; padding-left:12px; background:url('../Images/common/icon_location_arrow.gif') no-repeat 3px center; color:#777}
	.title_area .location strong { font-weight:normal}
	.title_area .location a.home img {vertical-align:middle; margin-top:-1px}	
	.title_area .pageTitle{ font-size:1.6em; color:#111; margin:0 0 8px}
	
	/* tltle */
	.title_area h2{ font-size:1.8em;margin:0 0 15px}
	.title_area h2:after{ width: 70px; margin-top: 20px;}
	.ttl01{font-size:1.35em;padding-left: 21px; margin: 30px 0 10px;}
	.ttl01:before{top: 5px;border-width: 4px;}
	.ttl02{font-size: 1.15em;}	
	.ttl03{font-size: 1.05em;}
	.ttl03:before{top: 9px;}	

	

	.visual_area .txtBox{ width:auto;}
	
	
	/* 왼쪽메뉴 */
	#menu {position:static; width:auto; float:none; height: 50px; margin:-50px auto 0 auto;}
	#menu .tit {display:block;position:relative;width:100%;height:50px;line-height:50px;margin-bottom:0;color: #fff;cursor:pointer;font-size:1.3em;background: rgba(0,0,0,0.4) url("../images/common/bgLnbDepth.png") no-repeat 97% -65px;padding: 0;border: 1px solid #CCC; border-width:0 0 1px 0; }
	#menu .tit em{ display:none;}	
	
	#menu nav{display:none; position:relative; padding-bottom:0; box-shadow: 0px 5px 10px rgba(0,0,0,0.2); z-index: 50; }

	#menu .lnb{ border-width:0 0 1px 0; width:100%; margin-top:-1px; background: #fff;}
	#menu .lnb > li{width:100% !important; float: none;border-top:1px solid #d0d0d0;}
	#menu .lnb > li > a {padding:16px 20px;font-size:1.05em;line-height: 1.2; height: 50px; font-weight:400; background:#fff url('../Images/common/ico_lnb_g.png') no-repeat 96.5% center;border:0; color: #555; }
 
	#menu .lnb > li > a:hover, 
	#menu .lnb > li > a:focus, 
	#menu .lnb > li > a:active,
	#menu .lnb > li.on > a{background:#fff url('../images/common/ico_lnb_on2.png') no-repeat 96.5%  center !important; color:#ec1744; }	
	#menu .lnb > li.on > a{ font-weight:700;}
	
	
	
}

@media screen and (max-width:640px) {	
	.fixWidth{ margin-bottom:20px;}
	
	/* title */
	#sub_content .title_area { padding-top: 35px;}
	.title_area h2{ font-size:1.65em;}
	.title_area h2:after { width:55px; margin-top: 15px;}
	.title_area .location {display:none;}	
	
	.ttl01:before{ top:4px;}
	
}