﻿@charset "utf-8";

/*common*/
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p, button, input { margin: 0;padding: 0}
ul, ol, dl {list-style: none}
ul {list-style: none; padding: 0; margin: 0}
img, fieldset, iframe {border: 0}
img {vertical-align:top}
input, select, button {vertical-align: middle}
input {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0;}
button * {position: relative}
em, address {font-style: normal}
a {text-decoration: none;color: #464646;}
.clear {clear: both;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; }
img.map, map area, button{outline: none;}


body{font-family: 'Nanum Square', sans-serif; font-size: 14px; font-weight:400; color:#464646; background-color:#ffffff; text-align: center; word-break: keep-all !important; letter-spacing: -0.5px;}
.ngd{font-family: 'Nanum Gothic', sans-serif;}
.nsq{font-family: 'Nanum Square', sans-serif;}
.pc{display: block;}
.mobile{display: none;}

a.email{color:#4d4dff}
a.email:hover, a.email:active {text-decoration: underline;}

#wrap{position:relative; width:100%; min-width:320px; margin:0px auto;}

#gnb{position:fixed; width:100%; height:94px; top:0px; left:0px; border-bottom:1px solid #e5e2e2; background-color:#ffffff; z-index: 10; font-family: 'Nanum Gothic', sans-serif; font-weight:600;}
#gnb h1{position: absolute; top:23px; left:85px;}
#gnb ul.menu{overflow: hidden; width:550px; margin:0px auto; margin-top:25px; }
#gnb ul.menu li{float:left; font-size:17px; letter-spacing:0px; margin:0px 20px; }
#gnb ul.menu li a{display: block; padding:10px;}
#gnb .right{position: absolute; top:20px; right:65px; font-size:15px; text-align: right;}
#gnb .right a{font-size:22px;}
#gnb .right a img{margin:5px; width:25px;}


#container{padding-top:94px;}
.section{padding:100px 0px; min-width:1200px; border-bottom:1px solid #ebe9e9;}
.section .wrap{position: relative; width:100%; max-width:1200px; margin:0px auto;}
#main{padding:0px; border-bottom:none;}
#contact{padding-bottom:0px;}

.section h2 {font-size:50px; margin-bottom:40px;}
.section h2 span{ border-bottom:4px solid #dd2e47;}
.section h3{font-size:20px; margin-bottom:70px; font-weight: 400; }


#main #sliderWrap {position: relative; height:730px; overflow: hidden; z-index: 2;}
#main #sliderWrap h2{position:absolute; width:400px; top:20%;  left:50%; margin-left:-200px; z-index:2; font-size:44px; color:#ffffff; z-index: 100; font-weight: 400;}
#main #sliderWrap h2 span{font-size:50px; display: block;  border:none;}
#main #sliderWrap ul{overflow: visible;}
#main #sliderWrap li p{position:relative; margin-top:300px; z-index: 2;}
#main #sliderWrap li p span{font-size:18px; display: block; color:#ffffff;}
#main #sliderWrap li p span em{font-size:24px; display: block;}

#main #sliderWrap .bxslider li{background-repeat: no-repeat;background-position: top center;background-size: cover;}
#main #sliderWrap .bx-wrapper .bx-viewport{ border: none !important;}
#main #sliderWrap .bx-controls-direction .bx-prev{position:absolute; top:50%; left:45px; margin-top:-18px; width:36px; height:36px; font-size:0px; display: block; background: url('../images/slide_arrow_prev.png') no-repeat center; background-size:contain; z-index: 100; }
#main #sliderWrap .bx-controls-direction .bx-next{position:absolute; top:50%; right:45px; margin-top:-18px; width:36px; height:36px; font-size:0px; display: block; background: url('../images/slide_arrow_next.png') no-repeat center; background-size:contain; z-index: 100; }
#main #sliderWrap .bx-pager{position: absolute; width:100%; left:0px; bottom:40px; height: 30px; z-index:1000; text-align: center; }
#main #sliderWrap .bx-pager-item {display: inline-block;}
#main #sliderWrap .bx-pager-item a{font-size:0px; background: url('../images/slide_bolt.png') no-repeat center; width:11px; height:11px; background-size:contain;  display:inline-block; margin: 0 5px; cursor: pointer;}
#main #sliderWrap .bx-pager-item a.active{background-image: url('../images/slide_boltH.png');}


#history .box {overflow: hidden; text-align: left;}
#history .box li{width:23%; margin:1%; height:200px; float:left;}
#history .box li span{display: block; width:100%; height:100%; border:1px solid #eae8e8; background-repeat: no-repeat; background-position-x:right; background-position-y: 95%;}
#history .box li.m1 span{background-image: url('../images/history_img1.png');}
#history .box li.m2 span{background-image: url('../images/history_img2.png');}
#history .box li.m3 span{background-image: url('../images/history_img3.png');}
#history .box li.m4 span{background-image: url('../images/history_img4.png');}
#history .box li.m5 span{background-image: url('../images/history_img5.png');}
#history .box li.m6 span{background-image: url('../images/history_img6.png');}
#history .box li.m7 span{background-image: url('../images/history_img7.png'); background-position-y: 90%;}
#history .box li span p.date{font-size:24px; margin-top:28px; margin-left:20px; font-weight: 600;}
#history .box li span p.txt{font-size:16px; margin-top:23px; margin-left:20px;}

#business .boxWrapper {position: relative; min-height: 476px; max-width: 3000px;  margin: 0 auto;} 

#business .bx-controls-direction .bx-prev{position:absolute; top:50%; left:45px; margin-top:-18px; width:36px; height:36px; font-size:0px; display: block; background: url('../images/slide_arrow_prev.png') no-repeat center; background-size:contain; z-index: 100; }
#business .bx-controls-direction .bx-next{position:absolute; top:50%; right:45px; margin-top:-18px; width:36px; height:36px; font-size:0px; display: block; background: url('../images/slide_arrow_next.png') no-repeat center; background-size:contain; z-index: 100; }

#business .box{overflow: hidden; text-align: left; height:476px;}
#business .box .leftContainer{float:left; width:50%; height:100%; background-color: #bc162c; overflow: hidden;}
#business .box .rightContainer{float:left; width:50%; height:100%; background-color: #333130; overflow: hidden;}
#business .box .bujaeContainer{float:left; width:50%; height:100%; background-color: #4d4dff; overflow: hidden;}
#business .box .left{float:left; width:50%;height:100%;   background-repeat: no-repeat;background-position: top center;background-size: cover;}
#business .box .right{float:right; width:50%;height:100%; }
#business .box .right  span{color:#ffffff; margin:30px; display: block;}
#business .box .right p.txt1{font-size:36px; margin-top:35px;}
#business .box .right p.txt2{font-size:18px; margin-top:15px;}
#business .box .right em.btn{margin-top:28px; display: block;}
#business .box .right em.btn a{display: inline-block; padding:13px 50px 13px 35px; font-size:16px; border:1px solid #ffffff; color:#ffffff;  background-image: url('../images/business_arrow.png'); background-repeat: no-repeat; background-position: 85% 50%; }
#business .box .right em.down a {display: inline-block; margin-top: 15px; padding:13px 50px 13px 35px; font-size:16px; border:1px solid #ffffff; color:#ffffff;  background-image: url('../images/footer_down_img.png'); background-repeat: no-repeat; background-position: 90% 50%; }

#contact{border-bottom:none;}
#contact .box{width:100%; max-width:1024px; margin:0px auto; margin-top:70px;}
#contact .box li {display:inline-block; margin:0px 25px; vertical-align: top;}
#contact .box li span{}
#contact .box li p{font-size:26px;}
#contact .map {width:100%; height:590px; margin-top:70px; background-color: #c0c0c0;}


#footer{border-top:3px solid #dd2e47; padding-top:70px; padding-bottom:100px; background-color: #18181d; border-bottom:none; }
#footer .wrap{max-width:1024px; font-size:14px; text-align: left; color:#d1d5dc;}
#footer .wrap a{color:#d1d5dc;}
#footer ul{padding-right:150px;}
#footer li{margin-bottom:3px; display: block;}
#footer li span{display: inline-block; margin-right:20px;}
#footer li.txt1{font-size:16px; margin-bottom:17px;}
#footer li.txt1 span{margin-right:20px;}
#footer li.txt1 span.line{padding-right:20px; background-image: url('../images/footer_bar.jpg'); background-repeat: no-repeat; background-position: 100% 2px;}
#footer li.txt1 span.tel{color:#dd2e47;}
#footer li.txt1 span.tel a{color:#dd2e47;}
#footer li .down{position: absolute; right:0px; top:0px;}
#footer li .down a{display: inline-block; padding:10px; padding-right:40px; background-color: #474e5d; border:1px solid #ffffff; background-image: url('../images/footer_down_img.jpg'); background-repeat: no-repeat; background-position: 95% 5px; }


/*개인정보취급방침*/
#wrap.policy .wrap{max-width:1005px; margin:0px auto; text-align: left; padding:50px 10px; font-size:16px; color:#838289;}
#wrap.policy dl{margin:30px 0px;}
#wrap.policy h1{font-size:32px; margin-bottom:30px;}
#wrap.policy dl dt{color:#000000; font-weight: 600;}
#wrap.policy dl.txt1 dt{margin-bottom:20px; color:#838289; font-weight: 400;}
#wrap.policy dl.txt1 dd{color:#000000;}
#wrap.policy em{color:#000000; font-weight: 600;}
#wrap.policy em a{color:#000000; font-weight: 600;}
#wrap.policy em.red{color:#dd2e47;}
#wrap.policy em.red a{color:#dd2e47;}
#wrap.policy p.txt2{margin-bottom:20px;}


.layerPop {position: fixed; display:none; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; background-color: #00000080;}
.layerPop .layerBody {position: relative; background-color: #fff; top: 15%; margin: 0 auto; max-width: 500px;}
.layerPop .layerClose {position: absolute; top: 0; right: 0; transform: translate(0, -150%); cursor: pointer;}
.layerPop .bujaeWrapper {overflow: hidden; padding: 30px; display: flex; justify-content: space-between; }
.layerPop .bujae {width:50%; text-align: center; }
.layerPop .bujaeImg {width: 50%; margin: 40px auto; }
.layerPop .bujaeTitle { display:inline-block; font-size: 18px; font-weight:bold; color: #fff; background-color: #4d4dff; padding: 10px 20px; border-radius: 30px;}
.layerPop .bujaeDown a {display: block; text-align: left; color: #d1d5dc; background-color: #474e5d; margin: 5px auto; width: 50%; padding: 10px 5px 10px 10px; background-image: url(../images/footer_down_img.jpg); background-repeat: no-repeat; background-position: 95% 50%; border-radius: 8px; }

@media (min-width: 0px) and (max-width: 799px){
	body{ font-size: 12px;}
	.pc{display: none;}
	.mobile{display: block;}
	img{width:100%;}
	.wid10{width:10%; height:auto;}.wid20{width:20%; height:auto;}.wid30{width:30%; height:auto;}.wid40{width:40%; height:auto;}.wid50{width:50%; height:auto;}
	.wid60{width:60%; height:auto;}.wid70{width:70%; height:auto;}.wid80{width:80%; height:auto;}.wid90{width:90%; height:auto;}.wid100{width:100%; height:auto;}
	
	.section{min-width:320px; width:96%; padding:50px 2%;}
	.section h2 {font-size:35px; margin-bottom:30px;}
	.section h2 span{ border-bottom:3px solid #dd2e47;}
	.section h3{font-size:14px; margin-bottom:30px;}
	
	
	#gnb{height:50px;}
	#container{padding-top:50px;}
	#gnb h1{position: relative; top:0px; left:0px; width:100px; margin:0px auto; margin-top:12px;}
	#gnb .bar{width:50px; position: absolute; top:0px; left:0px; padding:0px 10px;}
	#gnb .tel{width:45px; position: absolute; top:3px; right:-5px; padding:0px 10px;}
	
	#gnbFade {display: none; background: #000;position: fixed;left: 0;top: 0;width: 100%; height: 100%;opacity: .80; -moz-opacity:0.8; -khtml-opacity:0.8; filter:alpha(opacity=80); z-index: 99;}
	#gnbOpen{display:none; position: fixed; background-color: #ffffff; width:250px; height:100%; top:0px; left:-250px; z-index: 100; text-align: left; font-family: 'Nanum Gothic', sans-serif;}
	#gnbOpen h1 img{width:100px; margin:30px;}
	#gnbOpen ul.menu{margin-top:0px;}
	#gnbOpen ul.menu li{font-size:18px; font-weight:600; border-bottom:1px solid #ebebeb; padding:15px 30px;}
	#gnbOpen .gnbClose{position: absolute; top:-10px; right:-80px; z-index: 2;}
	
	#main{width:100%;}
	#main #sliderWrap{height:auto;}
	#main #sliderWrap h2{font-size:30px;}
	#main #sliderWrap h2 span{font-size:30px;}
	#main #sliderWrap .bx-controls-direction {display: none;}
	#main #sliderWrap li p{position: absolute; top:40%; width:300px; left:50%; margin-top:0px; margin-left:-150px;}
	#main #sliderWrap li p img{width:130px;}
	#main #sliderWrap li p span{font-size:16px;}
	
	
	#history .box li{width:48%; height:160px;}
	#history .box li span{background-size: 100%;}
	#history .box li span p.date{font-size:18px; margin:10px;}
	#history .box li span p.txt{font-size:14px; margin:10px;}
	
	
	#business .box{height:auto; text-align: center;}
	#business .box .right span img{width:60px;}
	#business .box .leftContainer{width:100%;}
	#business .box .rightContainer{width:100%;}
	#business .box .left{width:100%;}
	#business .box .right{width:100%;}
	#business .box .right p.txt1{font-size:20px; margin-top:20px;}
	#business .box .right p.txt2{font-size:14px; margin-top:10px;}
	#business .box .right em.btn{margin-top:20px;}
	#business .box .right em.btn a{padding:10px 20px; padding-right:30px; font-size:14px;  background-repeat: no-repeat; background-position: 92% 50%; }
	#business .box .right em.down a{padding:10px 20px; padding-right:30px; font-size:14px;  background-repeat: no-repeat; background-position: 92% 50%; }
	
	
	#contact .box{margin-top:30px;}
	#contact .box li{display: block; margin:30px 0px;}
	#contact .box li span img{width:50px;}
	#contact .box li p {font-size:16px;}
	#contact .map{margin-top:30px; height:300px;}
	
	#footer {padding-top:30px; padding-bottom:30px;}
	#footer .wrap{font-size:12px;}
	#footer ul{padding-right:20px;}
	#footer li{margin-bottom:1px; }
	#footer li span{margin-right:10px;}
	#footer li.txt1{font-size:14px; margin-bottom:10px;}
	#footer li.txt1 span.line{background-size:2px 11px; background-image: url('../images/footer_bar.jpg'); background-position: 100% 2px;}
	#footer li .down{position: relative; margin-bottom:15px;}
	#footer li .down a{padding:5px; padding-right:20px; background-size: 12px; background-position:95% 3px}
	
	
	/*개인정보취급방침*/
	#wrap.policy .wrap{padding:30px 10px; font-size:12px; color:#838289;}
	#wrap.policy dl{margin:20px 0px;}
	#wrap.policy h1{font-size:25px; margin-bottom:20px;}
	#wrap.policy dl.txt1 dt{margin-bottom:15px;}
	#wrap.policy p.txt2{margin-bottom:10px;}

	
	.layerPop .layerBody { min-width: 80%; max-width: 90%;}
	.layerPop .bujaeDown a { width: inherit;}
}


@media (min-width: 800px) and (max-width: 1200px) {
	.section{min-width:320px;}
	#gnb h1{left:20px;}
	#gnb .right{right:20px;}
	#gnb ul.menu{width:470px;}
	#gnb ul.menu li{margin:0px 10px; }
	#main #sliderWrap {height:600px;}
	#main #sliderWrap h2{top:15%;}
	#history .box li span {background-size: 180px;}
	#history .box li span p.date{margin-top:15px;}
	#history .box li span p.txt{margin-top:15px;}
	#business .box .right em.btn a{padding:10px; padding-right:40px;}
	#business .box .right em.down a{padding:10px; padding-right:40px;}
	#contact .box li{}
	#contact .box li p{font-size:20px;}
	#footer{padding:50px 0px;}
}
@media (min-width: 800px){
	#main #sliderWrap .bx-viewport, .bx-wrapper{position:absolute;width:100%;height:100% !important; top:0; left:0;}
	#main #sliderWrap .bxslider, .bxslider li{height: 100% !important;}
}



