@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;}
header h1 > a{display:block; font-family:'Verdana'; font-weight:600; color:#1a9ca7 !important; font-size:23px; letter-spacing:5px;}
header h1 > a > span{color:#face49;}
header .tel{display:inline-block; position:absolute; right:15px; top:20px; padding-left:35px; color:#1a9ca7; font-size:18px; font-weight:700; background:url(../images/common/bg_gumi_tel.png) no-repeat 0 3px;} 
header .tel a{color:#1a9ca7;}
header .tel{ display: none; }

/* gnb */
header nav{margin-right:270px;}
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 60px;}
header nav > ul > li:last-child{padding-right:0px;}
header nav > ul > li > a,
header nav > ul > li > a:link,
header nav > ul > li > a:visited{display:block; position:relative; font-size:20px; letter-spacing:-1px; font-weight:400; color:#444;}
header.nav-up nav > ul > li > a{display:block; position:relative; font-size:20px; letter-spacing:-1px; font-weight:400; color:#444;}
header nav > ul > li > a:after{content:''; display:block; height:3px; margin-top:10px; background:#face49; 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:#444;}
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; 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;}

.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:-moz-calc(100% / 2);}
.tab_area .col03 > li{width:calc(100% / 3); width:-moz-calc(100% / 3);}
.tab_area .col04 > li{width:calc(100% / 4); width:-moz-calc(100% / 4);}
.tab_area .col05 > li{width:calc(100% / 5); width:-moz-calc(100% / 5);}
.tab_area .col06 > li{width: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 address > span a{color:#80868e !important;}
footer p{margin-top:5px;}

footer .btn_kakaoch{display:block; position:fixed; top:80px; right:15px; transform:none; width:90px; height:90px; background:linear-gradient(135deg, #1a9ca7, #105f66); z-index:1000; border-radius:16px; text-align:center; color:#fff; font-weight:500; font-size:14px; box-shadow:3px 3px 10px rgba(0, 0, 0, 0.2);}
footer .btn_kakaoch img{display:block; margin:10px auto 5px; width:46px;}

.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_top{ display: none; }

@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;}
    
    footer .btn_kakaoch{top:50%; right:20px; transform:translateY(-50%);}
    footer .btn_kakaoch img{display:block; margin:10px auto 5px; width:46px;}
}
	
@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;}
	header.nav-up{background:#fff; 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; 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{position:static; margin:15px 0 15px 10px; color:#1e1a19; vertical-align:middle; background:url(../images/common/bg_gumi_tel01.png) no-repeat 0 3px;}
	header .tel a{color:#1e1a19;}
	
	.container .content{padding:30px 15px 40px;}
	.location{padding-top:15px;}
	
	footer{padding-left:10px; padding-right:10px;}
}

@media all and (max-width:768px){
    footer .btn_kakaoch{width:65px; height:65px; font-size:13px; border-radius:12px;}
    footer .btn_kakaoch img{margin:8px auto 2px; width:30px;}
}

@media all and (max-width:550px){
	header .tel{padding-left:0; background:none; font-size:15px;}
}

@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:440px){
	/* header h1{margin:3px 0 0;} */
	/* header .tel{display:block; margin:3px 0;} */
}

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

.portfolio_area {
	.list { display: grid;
		@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
		@media (width < 768px) { grid-template-columns: repeat(2, 1fr); gap: 24px 8px; }
	}
	.img { position: relative; aspect-ratio: 460 / 350;
		&::after, &::before { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; opacity: 0; transition: all 0.5s ease 0s; content: ""; }
		&::after { z-index: 2; background: rgba(0, 0, 0, 0.4); }
		&::before { z-index: 3; border: 1px solid rgba(255, 255, 255, 0.5); transform: scale(1.1, 1.1); transform-origin: 50% 50%; transition: all 0.5s ease 0s; }
		a:hover & {
			&::after { opacity: 1; }
			&::before { transform: scale(0.9, 0.9); opacity: 1; }
			img { transform: scale(1.1, 1.1); }
			.txt { transform: translateY(0); opacity: 1; }
		}
		img { -o-object-fit: cover; object-fit: cover; }
	}
	.info { display: grid; gap: 4px; margin-top: 8px; }
	.name { font-weight: 700; text-wrap: balance; word-break: keep-all;
		@media (width >= 768px) { font-size: 18px; }
		@media (width < 768px) { font-size: 16px; }
	}
	.category { font-size: 14px; }
}

.portfolio_area {
	.list { display: grid;
		@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); gap: 50px; }
		@media (360px <= width < 768px) { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
		@media (width < 360px) { grid-template-columns: 1fr; gap: 30px; }
	}
	.img { position: relative; aspect-ratio: 460 / 350;
		&::after, &::before { display: none; }
	}
	.name { font-weight: 700; text-wrap: balance; word-break: keep-all;
		@media (width >= 768px) { font-size: 20px; }
		color: #000;
	}
	.name { font-weight: 700; text-wrap: balance; word-break: keep-all;
		@media (width >= 768px) { font-size: 20px; }
		color: #000;
		position: relative;
	}
	.name svg {
		position: relative;
		top: 50%;
		left: -30px;
		transform: translateY(-40%);
		transition: all 0.3s ease 0s;
		opacity: 0;
		visibility: hidden;
	}
	.name:hover svg {
		left: 0;
		opacity: 1;
		visibility:visible;
	}
	li a:hover .name svg {
		left: 0;
		opacity: 1;
		visibility:visible;
	}
	.category { margin-top: 18px; }
	.info { margin-bottom: 50px;
		@media (width <= 768px) { margin-bottom: 0; }
	}
	.img {
		a:hover & {
			img { transform: scale(1.1); }
		}
		img {
			transition: transform .25s cubic-bezier(.215, .61, .355, 1);
		}
	}
}

/* aside menu */
.aside_menu{ position: fixed; top: 98px; right: 45px; z-index: 999; transition: 0.4s ease-out; }
.aside_menu.move-btn{ top: 40px; }
.aside_menu a + a{ margin-top: 10px; }
.aside_menu a:last-child{ margin-top: 15px; }
a.btn_contact{ display: flex; justify-content: center; align-items: center; position:relative; width:84px; height:84px; z-index:999; line-height:1.3; background:linear-gradient(-37deg, #0470dc, #13f1fc); box-shadow:9px 17px 31px 0px rgba(0, 0, 0, 0.3); font-weight:100; font-size:14px; color:#fff; text-align:center; transition:all 0.4s ease-out 0s; border-radius:130px; box-sizing:border-box;}
a.btn_contact:hover{box-shadow:-1px 7px 31px 0px rgba(0, 0, 0, 0.3);}
a.btn_call_icon{ padding: 0; background: #404040; border-radius:100px; box-shadow: 9px 17px 31px 0px rgba(0, 0, 0, .34);}
a.btn_call_icon img{ height: 18px; }
a.btn_call{ display: none; margin-right: 10px; border-bottom:1px solid rgba(255,255,255,0.5); font-size:16px; color:#fff; text-align:right; transition:all 0.4s ease-out 0s;z-index: 9999;}
a.btn_call i{display:block; margin-bottom:0px; font-size:13px;}
a.btn_call.btn_callSub.move-btn.color-change{border-bottom:1px solid #bababa; color:#222;}
a.btn_kakaoch{ flex-direction: column; padding:16px 0; background:linear-gradient(-37deg, #0355a7, #0fbdc7); font-weight:500;}
a.btn_kakaoch img{display:block; margin:0 auto 5px; width:30px;}
@media(min-width:1131px){
	.call-icon{ display: none; }
}
@media(max-width:1130px){
	.aside_menu{right:4%;}
	.call-text{ display: none; }
}
@media(max-width:639px){
	.aside_menu{ top: auto; bottom: 40px; }
	.aside_menu.move-btn{ top: auto; }
	.aside_menu a + a{ margin-top: 5px; }
	a.btn_contact{ width:66px; height:66px; font-size:12px;}
    a.btn_kakaoch img{width:20px; height:20px;}
	a.btn_call_icon{ display: flex; }
	a.btn_call{display: none;}
}