@charset "utf-8";
html,body {width:100%;  overflow-x:hidden}
body {overflow-y:visible;overflow-x:auto;}
#wrap {/*position:relative;*/overflow:hidden; min-width:320px;}
/* z-index */
#header-wrap {z-index:5009; position:absolute;}
#container-wrap{z-index:2001;  position:relative; clear:both}
#footer-wrap{z-index:2006;  position:relative;}
.container{position:relative;z-index:3001; max-width:1200px; margin:0 auto; padding:10px}

/*서브 비쥬얼*/

#sub-visual{position:relative; background-image:url(../images/common/subBG06.jpg); background-repeat: no-repeat;  background-size:auto 150px; background-position:center bottom; min-height:150px; padding-top:100px; box-sizing: content-box;}
.subBG1 {background-image:url(../images/common/subBG01.jpg) !important;}
.subBG2 {background-image:url(../images/common/subBG02.jpg) !important;}
.subBG3 {background-image:url(../images/common/subBG03.jpg) !important;}
.subBG4 {background-image:url(../images/common/subBG04.jpg) !important;}
.subBG5 {background-image:url(../images/common/subBG05.jpg) !important;}
.subBG6 {background-image:url(../images/common/subBG05.jpg) !important;}
.subBG7 {background-image:url(../images/common/subBG05.jpg) !important;}
.bg51 {background:#F9F9F9;}
/*.bg51:before {content:""; display:block; position:absolute;  background:#F9F9F9; width:3000px; height:100%; min-height:500px; left:-1000px; top:-50px}*/
.pageheader {position:absolute; width:100%; left: 50%; top:50%;  transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -40%);-webkit-transform: translate(-50%, -50%); z-index: 1; text-align:center; margin-top:40px}
.pageheader h3{font-family: 'AritaDotum';font-size:1.5em; font-weight:900; color:#fff}
.pageheader p{font-family: 'Montserrat', sans-serif; font-weight:800; font-size:1.125em; font-weight:300; text-align:center; color:#fff;}




/*페이지정보*/

.pagelocation:after { display: block;content: '';clear: both;}
.pagelocation>ul>li {display: inline-block;font-size: 14px; text-transform: uppercase; color:#fff; line-height:30px}
.pagelocation>ul>li:first-child:before {display:inline-block; vertical-align:middle;font-family: LineAwesome; font-size:16px; content: "\f237"; padding: 0 5px 0 0; line-height:0}
.pagelocation>ul > li + li:before {color: inherit; opacity: 0.5;font-family: LineAwesome; font-size:14px; content: "\f112";/*padding: 0 5px 0 4px;*/ vertical-align:middle;}
.pagelocation>ul li a{color:#fff}

.pageoption{position:relative; float:right; /*float:right;display:flex; flex-direction:row; justify-content: right; text-align:right*/}
.pageoption >a {display:inline-block; width:35px; height:42px; text-align:center; line-height:42px;}
.pageoption > .btn-sns{color:#0167c3;}
.pageoption > .btn-print{color:#666}
.pageoption a:before {font-family: LineAwesome; font-size:24px;  text-indent:0; line-height:42px;}
.pageoption > .btn-sns:before {content:"\f2f2";color:#0167c3}
.pageoption > .btn-print:before {content:"\f2c7"; color:#333}

/*SNS공유*/
.pageoption .snsShareBox{width:100%; position:absolute; z-index:90; top:45px; left:0; height:0 ; overflow:hidden; }
.pageoption ul.snsShare {border:1px solid #ebebeb;}
.pageoption ul.snsShare.active{display:block;}
.pageoption ul.snsShare li a {display:block; width:100%; background:#fff; line-height:40px; color:#666; text-align:center; font-size:12px}
.pageoption ul.snsShare li a:before {display:inline-block; vertical-align:middle;font-family: LineAwesome; font-size:16px; content: "\f1d7";}
.pageoption ul.snsShare li:first-child a:before {content: "\f1d7";}
.pageoption ul.snsShare li:nth-child(2) a:before {content: "\f35a";}
.pageoption ul.snsShare li:nth-child(3) a:before {content: "\f268";}
.pageoption ul.snsShare li a:hover {color:#FFF; transition: all 0.2s;}
.pageoption ul.snsShare li:first-child a:hover {background:#315199; }
.pageoption ul.snsShare li:nth-child(2) a:hover {background:#0099ff; }
.pageoption ul.snsShare li:nth-child(3) a:hover {background:#333; }

@media only screen and (min-width:768px){
	.pageoption {margin-top:-44px;}
}

@media only screen and (min-width:1000px){
		#sub-visual{min-height:450px; background-size:auto 300px; padding-top:0; background-repeat:no-repeat}
		.pageheader { margin-top:60px;}
		.pageheader h3 {font-size:2.750em; line-height:normal}
		.pagelocation {margin-top:20px}
		
		
	}	


/* =====================================
   container-wrap
===================================== */
#container-wrap{}
.sub-title {position:relative; padding:30px 0; border-bottom:1px dashed #cccccc;}
.sub-title h3 {display:inline-block; font-size:1.250em; font-weight:700; color:#333; line-height:42px}


@media only screen and (min-width:980px){
	#container-wrap .container { min-height:500px}
	.sub-title {padding:50px 0 30px 0;}
	.sub-title h3 { font-size:2.125em;}
}
@media only screen and (min-width:1200px){
	#container-wrap{padding:30px 0}
}

/* =====================================
   footer-wrap
===================================== */
/*footer*/
#footerWrap{width:100%; background:#333; padding:15px 0;}
#footerWrap > div {position:relative;}
.footmenu {text-align:center; margin:0 -0.5% 20px -0.5%; overflow:hidden }
.footmenu li{display:inline-block; width:49%; margin:0 0 0 0}
.footmenu li a{display:block; font-size:0.938em; color:#bbb; font-weight:300; padding: .5em 0; white-space:nowrap; border:1px solid #666; }
.footmenu li:first-child a {color:#2fb2f4;}

address {color:#bbb; margin-top:15px}
address > p {margin:0.3em 0; text-align:center}
address > p.tel a,address > p.tel span{color:#fff; font-weight:400}
address > span {color:#ccc; font-weight:300}
address > p.copyright {font-size:12px;}
address > p.copyright > span {color:#cdcdcd; font-weight:300}

#pageup {position: fixed; z-index:999 !important; right: 20px; bottom: 20px; background:#333; width: 50px; height: 50px; display: none; cursor: pointer; z-index:4000;}
#pageup:after {display:block; content:""; font-family: LineAwesome; font-size:24px; content: "\f113";  color:#f5f5f5; text-align:center; line-height:50px}


/*관련사이트 바로가기*/
#f_sec1 {text-align:center}
.d_select{position:relative; display:inline-block; width:100%; min-width:200px; margin:10px auto; text-align:left;}
.d_select>a:after { content: "\f28e"; opacity: 0.5; font-family: LineAwesome; font-size:16px; vertical-align:middle; position:absolute; right:10px}
.d_select>span, .d_select>a{display:block;cursor:pointer;color:#333; background:#aaa; line-height:40px; padding-left:15px;}
.d_select>span:after { content: "\f28e"; opacity: 0.5;font-family: LineAwesome; font-size:16px; vertical-align:middle; position:absolute; right:15px}
.d_select>div{display:none;position:absolute;left:-1px;bottom:55px;width:100%; padding:8px; background: #333;/*box-shadow: 0 0 5px 0 rgba(0, 0, 0, .15);*/transition: .2s ease-out;}
.d_select>div:after {content:""; display: block;position: absolute;left: 50%; bottom:-10px; width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #333; transform: translateX(-6px);}
.d_select>div>ul>li>a{display:block;padding: .444em .444em .444em 1em;color:#ccc;font-size:14px;font-weight:400}
.d_select>div>ul>li>a:hover{color:#fff}

.family-list .close{position:absolute; right:0; top:0; width:30px;height:30px; background:#555; color:#fff; font-size:16px; line-height:30px; text-align:center;}
.family-list .close:after {content:""; font-family: LineAwesome; font-size:18px; content: "\f191";  color:#f5f5f5; text-align:center;}
.layer-slider-ovclick{position:fixed;z-index:2600;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }
#f-baner{ position:relative; height:56px; padding:1px 0 1px 229px; z-index:5;box-sizing:border-box; max-width:1200px; margin:0 auto}
#f-baner:after{background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; width:2000px; position:absolute; z-index:-1; height:56px; display:block; content:""; top:0; left:50%;margin-left:-1000px;}
#f-baner .fban-ctrl:before{background:#eeefef; border-top:1px solid #ddd; border-bottom:1px solid #ddd; width:2000px;position:absolute; z-index:-1; height:56px; display:block; content:""; top:-1px; right:0;}
#f-baner .fban-ctrl{position:absolute; left:0; top:1px; width:229px; height:56px; z-index:5; font-size:0; border-right:1px solid #ddd;}
#f-baner .fban-ctrl h3{ width:95px; height:56px; line-height:56px; display:inline-block; vertical-align:top; font-size:14px; color:#262d35;border-right:1px solid #ddd; text-align:center;}
#f-baner .fban-ctrl a{display:inline-block; vertical-align:top; width:44px; height:56px;}
#f-baner .fban-ctrl .prev{ background:url(../images/common/banner-prev.png) no-repeat center center;}
#f-baner .fban-ctrl .play{ background:url(../images/common/banner-play.png) no-repeat center center;border-right:1px solid #ddd;border-left:1px solid #ddd;}
#f-baner .fban-ctrl .stop{ background:url(../images/common/banner-stop.png) no-repeat center center;border-right:1px solid #ddd;border-left:1px solid #ddd;}
#f-baner .fban-ctrl .next{ background:url(../images/common/banner-next.png) no-repeat center center;}

.fban-slide{}
.fban-slide li{float:left;}
.fban-slide li a{ line-height:56px; letter-spacing:-0.03em; text-align:center; display:block; letter-spacing:-0.03em; position:relative;}
.fban-slide li a img {display:inline-block;}
.fban-slide li a:after{background:#d4d5d7; width:1px ;height:14px; position:absolute; left:-1px; top:50%;margin-top:-7px; display:block; content:"";}
.fban-slide li a:hover{text-decoration:underline}

#pageup {position: fixed; z-index:9999 !important; right: 20px; bottom: 20px; background:#333; width: 50px; height: 50px; display: none; cursor: pointer; z-index:4000;}
#pageup:after {display:block; content:""; font-family: LineAwesome; font-size:24px; content: "\f113";  color:#f5f5f5; text-align:center; line-height:50px}


	@media only screen and (min-width:780px){
		.footmenu {width:100%; display:inline-block; vertical-align:middle; text-align:left; padding-right:300px; margin:0}
		.footmenu li {background:none; width:auto;}
		.footmenu li a { border:none}
		.footmenu li a:after {content:""; display:inline-block;  width:1px; height:12px; vertical-align:middle; margin: 0 5px 0 12px; background:#666;}
		
		.footmenu li:last-child a:after {display:none}
		address > p {text-align:left}
		
		address > p > span {margin:0 5px; display:inline-block}
		address > p > span:first-child {margin:0}
		address>p>span:after {content:""; display:inline-block;  width:1px; height:12px; vertical-align:middle; margin: 0 0 0 10px; background:#444;}
		address > p > span:last-child:after {display:none}
		address>p.tel>a:first-child {margin-right:15px;}
		#f_sec1 {position:absolute; right:10px; top:0}
	}
	
	@media only screen and (min-width:1200px){
	.footmenu li a {font-size:1em;}

	}
	
	
.Wingmenu {display:none; position:fixed; right:-1px; top:320px; z-index:990; width:98px}

.Wingmenu h3 {height:106px; background:url(../images/layout/wingtbg.png) no-repeat; color:#fff; padding-top:50px; text-align:center}
.Wingmenu ul {padding:25px 0 30px 0}
.Wingmenu ul:after {background: url(../images/layout/wingBG.png) no-repeat center center;width: 100%;height: 450px; position: absolute; right: 1px;bottom: 0;z-index: -1;display: block; content: "";}
.Wingmenu ul li a {display:block; text-align:center; padding-top:45px; color: #333; font-size:13px; line-height:1.2em; -webkit-transition: color 0.3s ease-out;-moz-transition: color 0.3s ease-out;-o-transition: color 0.3s ease-out;transition: color 0.3s ease-out;}
.Wingmenu ul li:nth-child(1) a { background:url(../images/layout/wingicon1.png) no-repeat center top }
.Wingmenu ul li:nth-child(2) a { background:url(../images/layout/wingicon2.png) no-repeat center top }
.Wingmenu ul li:nth-child(3) a { background:url(../images/layout/wingicon3.png) no-repeat center top }
.Wingmenu ul li:nth-child(4) a { background:url(../images/layout/wingicon4.png) no-repeat center top }
.Wingmenu ul li a:hover {color:#0e6fe5;}
.Wingmenu ul li:after {content:""; display:block; width:40px; height:1px; background:#e9e9e9; margin:10px auto }
.Wingmenu ul li:last-child:after {display:none}

@media only screen and (min-width:980px){
.Wingmenu {display:block;}
}




/*좌측 쇼하이드퀵메뉴*/


#Leftpanel{position:absolute; z-index:9990; background:#0e6fe5 url(../images/LeftpanelBG.png) left bottom no-repeat; width:220px; height:450px;left:-220px; top:165px; padding:12px; transition:left 0.5s; color:#fff; text-align:center}
#Leftpanel.on {left:0;transition:left 0.5s}
#Leftpanel .panelWrap {position:relative; width:333px; height:100%}
.Leftpanel_close {position: absolute; right: -27px;top: 0; z-index: 10;display: block;width: 27px;height: 108px;background: url(../images/btn_leftpull.png) no-repeat 0 0;text-indent: -9999px;}
#Leftpanel h4 {font-weight:400; margin:20px 0}
#Leftpanel p.telNum {color:#ffe733; font-size:22px; font-weight:800}
#Leftpanel p.mail {border-bottom:1px solid #83b4ef; padding-bottom:30px; margin-bottom:20px}
#Leftpanel a.button {font-size:0.925em; letter-spacing:-1px; font-weight:500}