@charset "utf-8";
@import url(animate.css);
@import url(board.css);

/* 
 * layout CSS Document
 * DaeguWeb kimhynho 
 */

/* common */
body{position:relative; left:0%; transition:all 0.5s ease 0s;}

/* header */
header{background:#fff;}
header .gnb_area{position:relative; padding:0 15px;}
header .home{display:none;}
header .home > a{display:block; padding:15px 5px; background:#7f695b; color:#fff; font-size:16px; font-weight:500; text-align:center; letter-spacing:-1px;}
header h1{display:inline-block; position:absolute; left:15px; /* top:20px; */ top: 14px; }
header h1 > a{display:block; font-family:'Verdana'; font-weight:600; color:#3951cb !important; font-size:23px; letter-spacing:5px;}

/* gnb */
header nav > ul{float:right;}
header nav:after,
header nav > ul:after{content:''; display:block; clear:both;}
header nav > ul > li{float:left; position:relative; padding:20px 30px;}
header nav > ul > li:last-child{padding-right:0px;}
header nav > ul > li > a{display:block; position:relative; font-size:17px; letter-spacing:-1px; font-weight:400; color:#444;}
header nav > ul > li > a:after{content:''; display:block; height:3px; margin-top:10px; background:#3951cb; transform:scaleX(0); transition:all 0.3s ease 0s;}
header nav > ul > li > a:hover,
header nav > ul > li > a.on,
header nav > ul > li > a.active{color:#111;}
header nav > ul > li > a:hover:after,
header nav > ul > li > a.on:after,
header nav > ul > li > a.active:after{transform:scaleX(1);}
header nav > ul > li > ul{display:none;}
header.nav-up{border-bottom-width:0px !important;}
.btn_m_menu{position:absolute; right:15px; top:50%; width:32px; height:22px; margin-top:-11px; background:url(../images/common/icon_m_menu.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
.gnb_area .bg{opacity:0; position:fixed; top:0px; right:-100%; z-index:98; width:100%; height:100%; background:rgba(0,0,0,0.6); transition:opacity 0.2s ease 0s;}
.gnb_area .bg ul{position:fixed; right:-40%; z-index:100; width:40%; background:#fff; transition:right 0.4s ease 0s;}
.gnb_area .bg:before{content:''; display:block; float:right; width:40%; height:100%; background:#fff;}
.gnb_area .bg ul > li:not(.home) > a{display:block; padding:10px 15px; background:#fafafa; border-bottom:1px solid #e6e6e6; font-size:16px;}
.gnb_area .shadow{display:none; position:fixed; left:0px; top:0px; z-index:99; width:60%; height:100%;}

/* contents */
.container.sub h2{text-align:center;}
.container.sub h2 em{display:inline-block; padding:6px 20px; border:2px solid #51555e; color:#4b4e51; letter-spacing:-1px; font-size:18px; font-weight:400;}
.container.sub h2:after{content:''; display:block; width:2px; height:39px; margin:20px auto 0; background:#51555e;}
.container .content{min-height:650px; padding:40px 15px 100px;}

/* location */
.location{padding:35px 15px 15px;}
.location ul:after{content:''; display:block; clear:both;}
.location ul > li{float:left; font-weight:300; color:#566468; vertical-align:middle;}
.location ul > li:first-child{position:relative; width:16px; text-indent:100%; overflow:hidden; white-space:nowrap;}
.location ul > li:first-child:before{content:''; display:block; position:absolute; top:2px; left:0px; width:100%; height:17px; background:url(../images/common/icon_home.png) no-repeat 50% 50%;}
.location ul > li:not(:first-child):before{content:''; display:inline-block; width:7px; height:13px; margin:0 10px -1px; background:url(../images/common/img_location.gif) no-repeat 0 0;}

/* snb tab */
.tab_area{padding:5px 15px 0;}
.tab_area ul{display:table; width:100%; table-layout:fixed;}
.tab_area ul > li{display:table-cell;}
.tab_area .col02 > li{width:calc(100% / 2); width:-webkit-calc(100% / 2); width:-moz-calc(100% / 2);}
.tab_area .col03 > li{width:calc(100% / 3); width:-webkit-calc(100% / 3); width:-moz-calc(100% / 3);}
.tab_area .col04 > li{width:calc(100% / 4); width:-webkit-calc(100% / 4); width:-moz-calc(100% / 4);}
.tab_area .col05 > li{width:calc(100% / 5); width:-webkit-calc(100% / 5); width:-moz-calc(100% / 5);}
.tab_area .col06 > li{width:calc(100% / 6); width:-webkit-calc(100% / 6); width:-moz-calc(100% / 6);}
.tab_area ul > li > a{position:relative; display:block; padding:17px 10px; box-sizing:border-box; border-bottom:1px solid #dcdddf; text-align:center; font-size:18px; font-weight:400; color:#898d92; letter-spacing:-1px;}
.tab_area ul > li > a.on{background:#fff; color:#3e4248; border-color:#51555d;}
.tab_area ul > li > a.on:after{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:1px; box-sizing:border-box; background:#51555d;}
.tab_area ul > li > a br{display:none;}

/* footer */
footer{padding:30px 0px; background:#2c2e32; color:#80868e; font-size:13px; font-weight:300; text-align:center;}
footer address > span{display:inline-block; margin:0 10px;}
footer address > span:first-child{margin-left:20px;}
footer p{margin-top:5px;}

.btn_top{opacity:0; display:block; position:fixed; right:30px; bottom:120px; z-index:80; width:45px; height:45px; box-sizing:border-box; background:rgba(255,255,255,0.7); border:1px solid #51555e; text-indent:100%; overflow:hidden; white-space:nowrap; transition:all 0.3s ease 0s;}
.btn_top:after{content:''; display:block; position:absolute; left:50%; top:50%; width:16px; height:10px; margin:-5px 0 0 -8px; background:url(../images/common/icon_top.png) no-repeat 0 0;}
.btn_top.active{opacity:1;}

@media all and (min-width:1400px){
	header .util_area,
	footer,
	.container.sub{min-width:1400px;}
	header .gnb_area,
	.tab_area,
	.container.sub,
	.container .content{width:1400px; margin:0 auto; box-sizing:border-box;}
    .inr{width:1400px; margin:0 auto; padding:20px; box-sizing:border-box;}
}
	
@media all and (min-width:1130px){
	header,
	header h1,
	header nav > ul > li{transition:all 0.3s ease-out 0s;}
	header{position:fixed; top:0px; left:0px; z-index:999; width:100%;}
	header.nav-up h1{/* top:15px; */ top: 5px;}
	header.nav-up{box-shadow:0 12px 6px rgba(0,0,0,0.06);}
	header.nav-up nav > ul > li{padding-top:15px; padding-bottom:10px;}
	.btn_m_menu{display:none;}
	
	.container.sub{padding-top:78px;}
}

@media all and (max-width:1129px){
	body.active{overflow-y:hidden; left:-40%;}
	header h1{position:static; margin:15px 0;}
	.btn_m_menu,
	header .home{display:block;}
	
	header{padding:0 15px;}
	header .gnb_area{padding:0px;}
	.gnb_area .bg.active{opacity:1; right:0px;}
	.gnb_area .bg.active ul{right:0px;}
	.gnb_area .bg.active + .shadow{display:block;}
	.gnb_area .bg.active + .shadow > a{display:block; width:100%; height:100%;}
	.btn_m_menu{right:0;}
	
	.container .content{padding:30px 15px 40px;}
	.location{padding-top:15px;}
	
	footer{padding-left:10px; padding-right:10px;}
}

@media all and (max-width:490px){
	.tab_area ul > li > a{line-height:1.2em;}
	.tab_area ul > li > a br{display:block;}
}

@media all and (max-width:480px){
	body.active{left:-60%;}
	.gnb_area .bg ul{right:-60%; width:60%;}
	.gnb_area .bg:before{width:60%;}
	.gnb_area .shadow{width:40%;}
}

@media all and (max-width:360px){
	.tab_area ul > li > a{padding:17px 5px; font-size:16px; letter-spacing:-1.5px;}
}