body{text-align:center;}

.blind{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:1;z-index:99999;}

#wrap{}

#header{position:relative;z-index:999;}
#header header{}
#header .top-area{background-color:#0080cc;padding:8px 0;}
#header .top-area > div{overflow:hidden;max-width:1000px;margin:0 auto;}
#header .top-area .left{float:left;}
#header .top-area .right{float:right;color:#b4e1fb;}
#header .top-area a{display:inline-block;height:29px;line-height:29px;font-size:12px;color:#b4e1fb;padding-left:34px;}
#header .top-area a.home{background:url(../img/layout/top_icon_home.png) 0 center no-repeat;}
#header .top-area a.login{background:url(../img/layout/top_icon_login.png) 0 center no-repeat;margin-right:24px;}
#header .top-area a.join{background:url(../img/layout/top_icon_join.png) 0 center no-repeat;}
#header .top-area .user-name{font-weight:600;margin-right:10px;font-size:15px;}

#header .top-area2{position:relative;}
#header .top-area2 > div{overflow:hidden;max-width:1000px;margin:0 auto;}

#header .top-logo{float:left;}
#header .top-navi{float:right;}

#gnav{height:85px;box-sizing:border-box;}
#gnav > li{float:left;position:relative;padding:20px 0;}
#gnav > li > a{display:block;height:45px;line-height:45px;font-size:17px;font-weight:600;color:#222;box-sizing:border-box;padding:0 35px;}
#gnav > li > div{position:absolute;left:0;top:57px;z-index:1000;}
#gnav > li > div ul{overflow:hidden;display:none;white-space:nowrap;}
#gnav > li > div ul li{float:left;}
#gnav > li > div ul li a{display:block;padding:0 15px;line-height:25px;color:#5a5a5a;}
#gnav > li > div ul li a:hover{color:#151515;}
#gnav > li > div ul li.on a{color:#151515;font-weight:600;}
#gnav > li.on > a{color:#0080cc;}
#gnav > li.on > div > ul{display:block;}

#gnav > li.m1 > div{width:300px;}
#gnav > li.m2 > div{width:300px;margin-left:-50px;}
#gnav > li.m3 > div{}
#gnav > li.m4 > div{width:300px;margin-left:-30px;}
#gnav > li.m5 > div{width:200px;margin-left:-30px;}
#gnav > li.m6 > div{}
#gnav > li.m7 > div{}
#gnav > li.m8 > div{width:400px;left:inherit;right:-35px;}

/*
#gnav > li.m1 > div > ul{padding-left:320px;}
#gnav > li.m2 > div > ul{padding-left:350px;}
#gnav > li.m3 > div > ul{padding-left:300px;}
#gnav > li.m4 > div > ul{padding-left:560px;}
#gnav > li.m5 > div > ul{padding-left:680px;}
#gnav > li.m6 > div > ul{}
#gnav > li.m7 > div > ul{}
#gnav > li.m8 > div > ul{padding-left:855px;}
*/

.snav-wrap{background:#1960a1;position:relative;z-index:998;padding:30px 0 30px 40px;width:100%;box-sizing:border-box;overflow:hidden;display:none;}
.snav-wrap ul{float:left;text-align:left;}
.snav-wrap ul li{}
.snav-wrap a{font-size:13px;color:#95aece;display:block;padding:8px 0;}
.snav-wrap a:hover{color:#fff;text-decoration:underline;}
.snav-wrap .snav1{width:134px;}
.snav-wrap .snav2{width:134px;}
.snav-wrap .snav3{width:133px;margin-right:189px;}
.snav-wrap .snav4{width:123px;}

.btn-menu{position:absolute;left:5px;top:30px;display:none;}
.btn-menu button{display:block;width:50px;height:50px;padding:5px;background:url(../img/layout/btn_menu.png) center center no-repeat;text-align:left;text-indent:-9999px;}

.sidr{position:absolute;position:fixed;top:0;left:0;height:100%;z-index:999999;width:240px;font-size:15px;background:#007ac1;}
#sidr{display:none;}
#sidr .logo{text-align:center;padding:10px 0;}
#sidr .logo img{width:50%;}
#sidr .m-navi{border-top:1px solid #006ba9;text-align:left;}
#sidr .m-navi > li{border-bottom:1px solid #006ba9;text-align:left;}
#sidr .m-navi > li > a{display:block;padding:17px 0 17px 20px;font-size:17px;font-weight:600;color:#fff;}
#sidr .m-navi-sub{background:#0066a1;display:none;}
#sidr .m-navi-sub a{display:block;padding:15px 0 15px 30px;color:#fff;font-size:16px;}
#sidr .m-navi-sub > li{border-top:1px solid #005586;}
#sidr .m-navi > li.on > ul{display:block;}

.sub-visual{text-align:center;background:#001a2b url(../img/layout/sub_visual_bg.jpg) center top no-repeat;position:relative;z-index:0;}
.sub-visual > div{padding:88px 0;text-align:center;height:230px;box-sizing:border-box;}
.sub-visual > div p{font-size:47px;color:#fff;font-weight:600;}
.sub-visual > div p:before{display:inline-block;vertical-align:middle;content:'';width:129px;height:9px;background:url(../img/layout/title_bg_left.png) 0 center no-repeat;margin-right:67px;}
.sub-visual > div p:after{display:inline-block;vertical-align:middle;content:'';width:129px;height:9px;background:url(../img/layout/title_bg_right.png) right center no-repeat;margin-left:67px;}

.sub-container{padding:50px 0;}
.sub-container.wide{width:auto;text-align:center;}

.sub-contents{width:1000px;margin:0 auto;text-align:left;box-sizing:border-box;padding-bottom:50px;position:relative;}
.sub-contents.wide{width:auto;text-align:center;}
.sub-contents.wide .max-wrap{max-width:1000px;margin-left:auto;margin-right:auto;text-align:left;}

.max-wrap{max-width:1000px;margin-left:auto;margin-right:auto;text-align:left;}

.page-top{position:relative;margin:0 auto 40px auto;max-width:1000px;text-align:left;}
.page-top h2{font-size:32px;font-weight:600;line-height:1em;height:32px;margin-bottom:15px;}
.page-top h2::after{display:inline-block;width:81px;height:16px;border-bottom:1px solid #868686;margin:0 0 0 20px;content:'';vertical-align:top;}
.page-top h2 + p{font-size:15px;}

.page-top-button{position:absolute;right:0;top:0;}
.page-top-button a{width:190px;height:50px;line-height:50px;font-size:16px;}



#footer{background:#262626;padding:40px 0;font-size:12px;font-weight:600;}
#footer footer{max-width:1000px;margin:0 auto;color:#636262;position:relative;}
#footer .footer-logo{margin-bottom:28px;}
#footer .site-info{padding:0 0 13px 0;border-bottom:1px solid #313131;}
#footer .site-info p{margin-bottom:5px;}
#footer .site-info2{max-width:1000px;padding:13px 0 0 0;position:relative;}
#footer .site-info2 p{margin-bottom:5px;}
#footer small{font-size:12px;}

#footer .family-site{position:absolute;right:0;top:13px;display:inline-block;background-color:#333;color:#9e9e9e;height:33px;width:150px;vertical-align:middle;padding:0 5px;box-sizing:border-box;margin-top:2px;text-align:left;}
#footer .family-site > span{display:block;height:33px;line-height:33px;cursor:pointer;}
#footer .family-site > span:after{content:'▲';font-size:10px;position:absolute;right:10px;top:0;}
#footer .family-site ul{display:none;width:100%;background-color:#333;color:#9e9e9e;position:absolute;left:0;bottom:33px;text-align:left;padding:5px;box-sizing:border-box;border-bottom:1px solid #262626;}
#footer .family-site ul li a{display:block;padding:6px 0;color:#9e9e9e;}
#footer .family-site ul li + li{border-top:1px solid #444;}
#footer .family-site.main{background-color:#34393d;}
#footer .family-site.main ul{background-color:#34393d;border-bottom:1px solid #111;}

#quick{position:absolute;right:-137px;top:0;z-index:99999;text-align:left;}
#quick .counsel{margin-bottom:15px;}
#quick .event{}

.go-top{font-size:15px;font-family:tahoma;padding-top:15px;padding-right:15px;text-align:center;}

/* 모달팝업2 */
.modalPopup{opacity: 0; display: none; position: relative; width: auto; border: 5px solid #fff; background-color: #fff;}
.modalPopup .popHead{background-color:#0080cc;height:50px;line-height:50px;text-align:center;color:#fff;font-size:16px;font-weight:600;}
.modalPopup .popContent{padding:20px;line-height:1.5em;}
.modalPopup .btn{height:30px;line-height:30px;padding-bottom:0;}
.modalPopup .b-close { position: absolute; right: 10px; top: 10px; width:30px;height:30px;text-align:left;text-indent:-999px;overflow:hidden;background:url(../img/layout/icon_x.png) center center no-repeat; display: inline-block; cursor: pointer;border:1px solid #fff;}

/* 모달팝업 */

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.modal {
    position: fixed;
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.fade.in{opacity:1;}

.modal-open{overflow:hidden;}
.modal-open .modal{overflow-x:hidden; overflow-y:auto;}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate3d(0,-25%,0);
    -o-transform: translate3d(0,-25%,0);
    transform: translate3d(0,-25%,0);
}

.modal.in .modal-dialog {
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.modal-backdrop.in{opacity:0.5; filter:alpha(opacity=50);}
.modal-backdrop.fade{opacity:0; filter:alpha(opacity=0);}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000;}

.modal-dialog{position:relative; width:auto; margin:10px;}

.modal-header {
    min-height: 16.43px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .close{display:none;}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
	padding:10px;
}

.modal-body {
    position: relative;
    padding: 30px;
}

.modal-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}

@media (min-width: 768px){
	.modal-dialog { width: 600px; margin: 30px auto;}
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
		box-shadow: 0 5px 15px rgba(0,0,0,.5);
	}
}



/** ~600 *************************************************************************************************************** */
@media all and (max-width:600px){

#header .top-area a.home{display:none;}

.sub-visual{background-position:center center;background-size:auto 100%;}
.sub-visual > div{padding:30px 0;height:auto;}
.sub-visual > div p{font-size:24px;}
.sub-visual > div p:before{width:60px;margin-right:10px;}
.sub-visual > div p:after{width:60px;margin-left:10px;}

.modalPopup{width:96% !important;left:1% !important;}

#footer .family-site{position:relative;right:inherit;top:0;display:block;margin-top:20px;}

}

/** 600~ *************************************************************************************************************** */
@media all and (min-width:600px){



}

/** 600~800 *************************************************************************************************************** */
@media all and (min-width:600px) and (max-width:800px){

.sub-visual > div{padding:40px 0;height:auto;}
.sub-visual > div p{font-size:40px;}

}

/** ~800 *************************************************************************************************************** */
@media all and (max-width:800px){

.sub-container{padding:30px 0;}
.page-top{margin:0 0 20px 0;}
.page-top h2{font-size:24px;height:auto;}

#footer{padding:20px 10px;}
#footer .footer-logo{margin-bottom:20px;}
#footer .footer-logo img{height:50px;}
#footer .site-info{text-align:left;}
#footer .site-info > p{margin-bottom:15px;}
#footer .site-info span{display:block;margin-bottom:5px;}
#footer .site-info span.line{display:none;}
#footer .site-info2{text-align:left;}
#footer .site-info2 > p{margin-bottom:15px;}
#footer .site-info2 span{display:block;margin-bottom:5px;}
#footer .site-info2 span.line{display:none;}

.sub-contents.wide > .tab-wrap{margin-right:10px;margin-left:10px;}


}

/** 800~1024 *************************************************************************************************************** */
@media all and (min-width:800px) and (max-width:1000px){



}

/** ~1024 *************************************************************************************************************** */
@media all and (max-width:1000px){

#header .top-area{padding:8px 10px;}
#header .top-area a.login{margin-right:10px;}
#header .top-logo{float:none;}
#header .top-logo img{height:70px;}
#header .top-navi{display:none;}

.btn-menu{display:block;top:9px;}

.sub-container{width:auto;}
.sub-contents{width:auto;margin:0 10px;}
.sub-contents.wide{margin:0;}
.sub-contents.wide .max-wrap{margin-right:10px;margin-left:10px;}

.page-top{margin:0 10px 40px 10px;}

#quick{display:none;}

}