@charset "utf-8";
/* ********************************************************************
 * name : 스마트솔루션
 * filename : layout.css
 * description : 전체 레이아웃 css 
 * date : 2024-02-01
********************************************************************* */

#wrap {position: relative;min-width: 320px;width: 100%;height: 100%;z-index: 300;overflow: hidden;}

/* === 헤더 === */
#header {position:absolute;min-width: 320px;width: 100%;z-index: 100;transition: all 0.4s;background: /*#ffffff14*/linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 8%) 100%);}
.headBg{background: linear-gradient(360deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 25%) 100%);width: 100%;position: absolute;top: 0;height: 100px;z-index: 1;}
#headBox{position: relative;}
#header .logo {position: absolute;top: 5vh;z-index: 100;width: 165px;;left: 4%;filter: invert(100%) sepia(93%) saturate(2%) hue-rotate(98deg) brightness(111%) contrast(101%);z-index: 100;}

.scroll .bt_menu {right: 0.7% !important;top: 15px !important;background: #236ae02b;padding: 15px;width: 25px;height: 25px;backdrop-filter: blur(5px);position: fixed !important;transition: all .5s;border-radius: 12px 5px;}
.scroll .bt_menu .etc{display:none;}
.scroll .bt_menu .lineBox{border: none !important;margin-left: -16px !important;}
.scroll .close{background:none;}

.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}

/* === 모바일메뉴 === */
#header .bt_menu {position:absolute;top: 5vh;right: 4%;z-index:110;font-size:0;display: flex;align-items: center;}
#header .bt_menu .lineBox{display: flex;flex-wrap: wrap;justify-content: center;border: 1px solid #fff;padding: 0 15px;margin-left: 22px;flex-direction: column;width: calc(62px - 30px);height: 66px;align-items: flex-start;}
#header .bt_menu i {display:block;width: 30px;height:2px;background:#fff;margin: 5px 0;position: relative;}
#header .bt_menu i:nth-child(1) {animation : menubar1 .75s forwards;}
#header .bt_menu i:nth-child(2) {animation : menubar2 .75s forwards;width:21px;}
#header .bt_menu .etc{font-size: 12px;color: #fff;/* position: absolute; *//* z-index: 1000000; */}
#header .bt_menu .etc .on{}
#header .bt_menu .etc .off{display: none;color: #212121;}
#header .close .lineBox{border: 1px solid #212121;}
#header .close i{height: 2px;width: 30px !important;background: #212121;}
#header .close i:nth-child(1) {animation :close-menubar1 0.75s forwards;}
#header .close i:nth-child(2) {animation :close-menubar2 0.75s forwards;}
#header .close .on{display: none;}
#header .close .off{display: block !important;}

.mGnb {display: none;position:fixed;top:0;left:0;width:100%;height:100%;background: #ffffffe8;background-size: cover;z-index: 100;backdrop-filter: blur(10px);}
.mGnb .logo{filter: invert(35%) sepia(85%) saturate(4203%) hue-rotate(202deg) brightness(104%) contrast(106%) !important;}
.mGnb .list_wrap {width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;}
.mGnb .list_wrap ul.dept1 {display:flex;width: 1350px;}
.mGnb .list_wrap ul.dept1 > li {width: 20%;border-left: 1px solid #bbbbbb;}
.mGnb .list_wrap ul.dept1 > li:last-child{border-right: 1px solid #bbbbbb;}
.mGnb .list_wrap ul.dept1 > li > a {font-size: 20px;color: #ffffff;border-bottom: 1px solid #007aff;padding: 10px 35px;font-weight: 600;background: #007aff;border-radius: 70px;/* width: 100%; *//* display: block; *//* text-align: center; */}
.mGnb .list_wrap ul.dept1 > li > a:hover {color:#fff;}
.mGnb ul.dept2 {padding-top: 26px;}
.mGnb ul.dept2 > li {width:100%; font-size:18px; font-weight:300; padding:10px 0; color:#fff;}
.mGnb ul.dept2 > li > a {color: #212121;font-weight: 500;}
.mGnb ul.dept2 > li > a:hover {text-decoration:underline;color: #007aff;}

/* === 콘텐츠 === */
#container{position:relative;height:100%}
#container #content{position:relative;min-height:300px;}
#container #content::after{display:block;clear:both;content:''}
.c-inner{max-width:1560px;margin: 0 auto;}

/* === 푸터 === */
#footer{background: #333;padding: 8vh 4% 6vh;position: relative;overflow: hidden;}
.f-inner{display: flex;justify-content: space-between;padding-bottom: 5em;}
.f-inner .fMenu{display: flex;justify-content: flex-start;}
.f-inner .fMenu ul{}
.f-inner .fMenu ul li a{color: #fff;font-size: 34px;margin: 0 3.5em 0.3em 0;display: block;font-weight: 600;transition: all 0.5s;}
.f-inner .fMenu ul li a:hover{color:var(--main-color);}
.f-inner .fAddr{}
.f-inner .fAddr address{}
.f-inner .fAddr address ul{}
.f-inner .fAddr address ul li{font-weight: 600;color: #fff;margin-bottom: 1em;font-size: 16px;}
.f-inner .fAddr address ul li span{color:var(--main-color);display: inline-block;width: 140px;}
.f-inner .fAddr img{filter: invert(22%) sepia(1%) saturate(870%) hue-rotate(52deg) brightness(95%) contrast(92%);position: absolute;width: 900px;right: -55px;bottom: -10px;}

#footer .copy{margin-top: 2em;padding-top: 15px;color: #cdcdcd;position: relative;z-index: 1;}
#footer .copy span{font-weight: 500;color: #cdcdcd;}
#footer .copy span em{color: #cdcdcd;font-size: 14px;margin-left: 2.5em;}
#footer .copy span em a{color: #cdcdcd;transition: all 0.5s;}
#footer .copy span em a:hover{color: #818181;}

.topBtn {position: fixed;bottom: 15px;right: 15px;z-index: 10;display:none;width: 46px;height: 46px;background-color: #fff0;outline:none;text-align: center;color: #000;z-index: 1000;border: 1px solid #2b2b2b;box-sizing: border-box;cursor:pointer;
	-webkit-transition: all 0.6s;-moz-transition: all 0.6s;-o-transition: all 0.6s;-ms-transition: all 0.6s;transition: all 0.6s -webkit-border-radius:50%;-moz-border-radius: 50%;-o-border-radius: 50%;}
.topBtn i {display: inline-block;font-size: 19px;line-height: 46px;transition: all 0.3s;color: #2b2b2b;}
.topBtn:hover{background-color:var(--main-color);border: 1px solid var(--main-color);}
.topBtn:hover i {transform: translateY(-3px);color:var(--white-color);}


/*
===============================================
animation
===============================================
*/
	@keyframes menubar1 {
		0% {transform : translate(6px,6px) rotate(-45deg);} 
		100% {transform : translate(0,0) rotate(0);}
	}

	@keyframes menubar2 {
		0% {transform : translate(-6px,6px) rotate(-45deg);} 
		100% {transform : translate(0,0) rotate(0);}
	}

	@keyframes close-menubar1 {
		0% {transform: translate(0,0) rotate(0);} 
		100% {transform: translate(0px,6px) rotate(45deg);}
	}

	@keyframes close-menubar2 {
		0% {transform: translate(0,0)rotate(0);} 
		100% {transform: translate(0,-6px) rotate(-45deg);}
	}


	@keyframes gnb-line {
		from {
			filter:Alpha(opacity=0);
			height:0;
		}
		to {
			filter:Alpha(opacity=100);
			height:100%;
		}
	}

	@keyframes ani-delay{
		0%{transform: translate3d(0, 80%, 0);opacity: 0;}
		100%{transform: translate3d(0, 0, 0);opacity: 1;}
	}

	@keyframes ani-delay1{
		0%{transform: translate3d(100%, 0, 0);opacity: 0;}
		100%{transform: translate3d(0, 0, 0);opacity: 1;}
	}

	@keyframes scrollDown {
		0% {
			opacity: 0.6;
			transform:  translateY(-5px);
		}
		50% {
			opacity: 1;
			transform: translateY(5px);
		}
		100% {
			opacity: 0.6;
			transform:  translateY(-5px);
		}
	}

	@keyframes shine {
	  from  {
		opacity: 0;
		transform: scale(0.9);
	  }
	  to  {
		opacity: 1;
		transform: scale(1);
	  }
	}

	@keyframes blur {
	  from  {
		opacity: 1;
	  }
	  to  {
		opacity: 0;
	  }
	}

	@keyframes move-forever {
	  0% {
	   transform: translate3d(-90px,0,0);
	  }
	  100% { 
		transform: translate3d(85px,0,0);
	  }
	}

	@keyframes txtAni {
	  0% {
		background-position-x: -1000%;
	  }
	  33% {
		background-position-x: 1000%;
	  }
	  66% {
		background-position-x: -1300%;
	  }
	  100% {
		background: linear-gradient(90deg, #000, #fff, #000)
		-webkit-background-clip: text;
		background-clip: text;
		background-position-x: initial;
		background-size: 100%;
	  }
	}

	@keyframes bgtxt1 {
		0%{transform:translate(0,0);}
		100%{transform:translate(0,20px);}
	}

	@keyframes bgtxt2 {
		0% {transform: rotate(-1deg);}
	  25% {transform: rotate(1deg);}
	  50% {transform: rotate(-2deg);}
	  75% {transform: rotate(2deg);}
	  100% {transform: rotate(0deg);}
	}

	@keyframes bgtxt3 {
	  0% {transform: rotate(1deg);}
	  25% {transform: rotate(-1deg);}
	  50% {transform: rotate(1.5deg);}
	  75% {transform: rotate(-1.5deg);}
	  100% {transform: rotate(0deg);}
	}

	@keyframes bgtxt4 {
	  0% {transform: rotate(15deg);}
	  100% {transform: rotate(30deg);}
	}

	@keyframes scroll-down{
		0%{
			opacity: 0;
			transform: rotate(45deg) translate(-20px, -20px);
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 0;
			transform: rotate(45deg) translate(20px, 20px);
		}
	}

	@-webkit-keyframes hue {
	  from {
		-webkit-filter: hue-rotate(0deg);
	  }
	  to {
		-webkit-filter: hue-rotate(-360deg);
	  }
	}

	@keyframes lineDown{
		0%{top:-100%;}
		50%{top:0%;}
		100%{top:100%;}
	}

/*
===============================================
반응형 css
===============================================
*/

@media all and (min-width:2100px){
	.f-inner .fMenu ul li a {font-size: 38px;}
	.f-inner .fAddr address ul li {font-size: 20px;}
	#footer .copy {font-size: 18px;}
	.f-inner .fAddr img {width: 1040px;}
}

@media all and (max-width:1600px){
	#header .logo{left:3%;top: 4vh;}
	#header .bt_menu {right: 3%;top: 4vh;}
	#header .bt_menu .lineBox{height: 48px;}
}

@media all and (max-width:1280px){
    .mGnb {max-width:100%; padding-top:0;}

	.mGnb .list_wrap ul.dept1 {max-width:240px; flex-direction:column; margin:0 auto;}
	.mGnb .list_wrap ul.dept1 > li {width:100%;}
	.mGnb .list_wrap ul.dept1 > li:last-child{border-right:0;}
	.mGnb .list_wrap ul.dept1 > li > a {display: block;border-bottom: none;padding: 10px 0;font-size: 20px;margin: 15px 0;background: none;color: #007aff;}
	.mGnb .list_wrap ul.dept1 > li > a:hover {color: #000;}
	.mGnb ul.dept2 {display:none; padding-top:0;}

	.f-inner .fAddr img {width: 750px;}
}

@media all and (max-width:1080px){

	.f-inner .fMenu ul li a {font-size: 20px;}

	.hd_pops {left: 50% !important;transform: translateX(-50%);}
}

@media all and (max-width:768px){
	#footer {padding: 6vh 4% 4vh;}
	.f-inner {padding-bottom: 0;flex-direction: column;}
	.f-inner .fAddr {margin-top: 2em;}
	.f-inner .fAddr img {width: 550px;}
	.f-inner .fMenu ul li a {margin: 0 1.5em 0.3em 0;}
}

@media all and (max-width:640px){
	#header .logo{left:3%;top: 4vh;}
	#header .bt_menu {right: 3%;top: 3vh;}
	.mGnb .list_wrap ul.dept1 > li > a {padding: 0;font-size: 20px;}
	.mGnb ul.dept2 > li {font-size: 17px;}
	#header .logo img{width: 125px;}
	#header .bt_menu {top: 27px;}

	.hd_pops{width: 90% !important;height: auto !important;}
	.hd_pops_con {width: 100% !important;height: auto !important;}
	.hd_pops_con p{}
	.hd_pops img{width:100%;}
}

@media all and (max-width:550px){
	.f-inner .fAddr img {width: 350px;bottom: 13px;}
}