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

/* 
 * layout CSS Document
 */

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

/* header */
header{background:#fff; box-shadow:0 5px 10px rgba(0,0,0,0.10);}
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:15px;}
header h1 > a{display:block; font-weight:700; color:#1d2425 !important; font-size:25px; letter-spacing:1px;}
header h1 > a span{display:inline-block; margin-right:5px;}
header h1 > a i{opacity:0; display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background:#fff url(../images/common/logo_hover.png) no-repeat 0 0; font-size:0px; transition:all 0.3s ease 0s;}
header h1 > a:hover i{opacity:1;}
header .tel{display:inline-block; position:absolute; right:0; top:0; width:315px; height:70px; line-height:70px; box-sizing:border-box; padding:0 50px 0 70px; background:url(../images/common/bg_black.gif) repeat 0 0; color:#fff; font-size:22px; font-weight:700; text-align:center; transition:all 0.3s ease-out 0s;} 
header .tel:before{content:''; display:block; position:absolute; left:30px; top:50%; width:24px; height:25px; margin-top:-13px; background:url(../images/common/icon_tel.png) no-repeat 50% 0;}
header.nav-up h1{top:5px;}

/* gnb */
header{position:relative; z-index:999;}
header nav{margin-right:360px;}
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:21px 55px;}
header nav > ul > li:last-child{padding-right:0px;}
header nav > ul > li > a{position:relative;}
header nav > ul > li > a,
header nav > ul > li > a:link,
header nav > ul > li > a:visited{display:block; position:relative; font-size:18px; font-weight:400; color:#1e2526; 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:#f3b449;}
header nav > ul > li > ul{display:none; position:absolute; top:55px; left:0px; z-index:90; width:100%; min-width:170px; box-sizing:border-box; box-shadow:2px 2px 0px rgba(0,0,0,0.2);}
header nav > ul > li > ul > li > a{display:block; position:relative; padding:5px 15px; background:#fff; color:#444; letter-spacing:-1px; font-weight:300; font-size:16px;}
header nav > ul > li > ul > li > a:hover,
header nav > ul > li > ul > li > a:focus{color:#2349c8;}
header nav > ul > li > ul > li:first-child > a {padding:20px 5px 5px 15px}
header nav > ul > li > ul > li:last-child > a {padding:5px 5px 20px 15px}
header nav > ul > li > ul > li:last-child > ul{right:0px; left:auto;}
header nav > ul > li > ul > a.open{display:none;}
header nav > ul > li > a em{display:block; transform:scale(1,1); transform-origin:0 100%; transition:all 0.3s ease 0s;}
header nav > ul > li > a i{opacity:0; display:block; position:absolute; top:0px; left:0; width:100%; height:100%; background:#fff; text-align:center; transform:scale(1,0); transform-origin:0 0; transition:all 0.3s ease 0s;}
header nav > ul > li > a:hover i{opacity:1; transform:scale(1,1);}
header nav > ul > li > a:hover em{transform:scale(1,0);}

.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;}
footer span a{color:#80868e !important;}

.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;}

/* 긴급상담 */
.btn_kakaoch{display:block; position:fixed; right:15px; top:100px; width:85px; height:85px; animation:bounce2 2s infinite; background:#222; text-align:center; border-radius:50%; font-size:14px; color:#fff !important;}
.btn_kakaoch img{display:block; margin:14px auto 3px; width:30px;}
.btn_kakaoch.btn_ctc{top:195px; background:#148f77;}
@keyframes bounce2{0%, 60% {transform: translateY(0);}20%, 80%{transform: translateY(4px);} 40%, 100%{transform: translateY(-2px);}}


@media all and (min-width:1400px){		
	footer,
	.container.sub{min-width:1400px;}	
	.tab_area,
	.container.sub,
	.container .content{width:1400px; margin:0 auto; 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; width:100%;}
	header.nav-up nav > ul > li{padding-top:10px; padding-bottom:10px;}
	header.nav-up .tel{height:47px; line-height:47px;}
	.btn_m_menu{display:none;}
	
	.container.sub{padding-top:78px;}
    
    .btn_kakaoch{right:50px;}
}

@media all and (max-width:1340px){
	header nav > ul > li{padding-left:25px; padding-right:25px;}
}

@media all and (max-width:1129px){
	body.active{overflow-y:hidden; left:-40%;}
	header h1{position:static; margin:15px 0; vertical-align:middle;}
	.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;}
	header .tel{right:55px;}
	.gnb_area .bg ul > li:not(.home) > a i{display:inline-block; margin-left:5px; font-size:13px;}

	.container .content{padding:30px 15px 40px;}
	.location{padding-top:15px;}
	
	footer{padding-left:10px; padding-right:10px;}
}

@media all and (max-width:768px){
	header .tel{background:transparent; color:#1d2425;}
	header .tel:before{left:40px; background-image:url(../images/common/icon_tel_b.png);}
    
    .btn_kakaoch{top:90px; width:65px; height:65px; font-size:12px;}
    .btn_kakaoch img{margin:11px auto 3px; width:20px;}
    .btn_kakaoch.btn_ctc{top:165px;}
}

@media all and (max-width:600px){
	header{height:55px;}
	header h1{line-height:55px; margin:0px;}
	header .tel{width:210px; height:55px; line-height:55px; padding:0 0 0 25px;}
	header .tel:before{left:0px;}
}

@media all and (max-width:490px){
	header h1 > a{font-size:20px;}
	.tab_area ul > li > a{line-height:1.2em;}
	header .tel{width:auto; font-size:16px;}
	.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%;}
	header .tel:before{width:17px; height:18px; margin-top:-8px; background-size:100%;}
}

@media all and (max-width:440px){
	header .tel{right:45px;}
	header h1 > a{font-size:17px;}
}

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

@media all and (max-width:340px){
	header .tel{font-size:14px; padding:0 5px;}	
}