@charset "utf-8";
/* ********************************************************************
 * name : JBieN
 * filename : layout.css
 * description : Àüü ·¹À̾ƿô css 
 * date : 2023-08-18
********************************************************************* */

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

/* === Çì´õ === */
#header {position: relative;min-width: 320px;width: 100%;z-index: 100;}
#headBox{position: fixed;margin: 0 auto;width:100%;z-index: 200;}
#header .logo {position: absolute;top: 33px; left:3%; z-index: 110;}
#header .logo img{width: 130px;filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(344deg) brightness(104%) contrast(101%);}
.black #header .logo img{filter: invert(0%) sepia(0%) saturate(11%) hue-rotate(309deg) brightness(94%) contrast(101%);}

/* === ¸Þ´º === */
#header .kakaotalk{display: block;width: 33px;position: absolute;right: 3%;top: 90px;text-align: center;z-index: 200;}
#header .kakaotalk span{font-size: 13px;display: block;color: #939393;transition: all 1s;}
#header .kakaotalk .icon {filter: invert(58%) sepia(4%) saturate(9%) hue-rotate(19deg) brightness(96%) contrast(92%);transition: all 1s;}
#header .kakaotalk:hover .icon{filter:invert(69%) sepia(80%) saturate(802%) hue-rotate(9deg) brightness(107%) contrast(101%);}
#header .kakaotalk:hover span{color: #f2da00;}
#header .bt_menu {position:absolute; top:35px; right:3%; z-index:110; font-size:0;}
#header .bt_menu i {display:block; width:36px; height:2px; background:var(--white-color); margin-top:8px;position: relative;transition:all 0.5s;}
#header .bt_menu i:nth-child(1) {animation : menubar1 .75s forwards;}
#header .bt_menu i:nth-child(2) {animation : menubar2 .75s forwards;}
#header .bt_menu i:nth-child(3) {animation : menubar3 .75s forwards;}
#header .bt_menu:hover i:nth-child(2) {animation : menubar2hover .75s forwards;background-color:var(--mint-color);}
#header .close i:nth-child(1) {animation :close-menubar1 0.75s forwards;background: var(--white-color);}
#header .close i:nth-child(2) {opacity : 0;}
#header .close i:nth-child(3) {animation : close-menubar3 .75s forwards; width:100%;background: var(--white-color);}

.active #headBox .logo img {filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(344deg) brightness(104%) contrast(101%);}

.black #header .bt_menu i {background:var(--black-color);}
.black #header .bt_menu:hover i:nth-child(2) {background-color:#ff5722;}
.black #header .close i:nth-child(1) {background: var(--white-color);}
.black #header .close i:nth-child(3) {background: var(--white-color);}
.black #header .logo .whiteBg{display:block;}
.black #header .logo .blackBg{display:none;}

.mGnb {display: none; position:fixed; top:0; left:0; width:100%; height:100%; background:#161616;z-index: 100;}
.mGnb .box{display: flex;flex-wrap: wrap;align-items: flex-end;height: calc(100vh - 7.5vw);box-sizing: border-box;padding: 0 3%;}

.mGnb .box .info{width: 50%;}
.mGnb .box .info ul{display: flex;flex-wrap: wrap;}
.mGnb .box .info ul li{width:36%; color:var(--white-color);padding-bottom: 30px;font-size: 20px;}
.mGnb .box .info ul li:nth-child(3) {width:100%} 
.mGnb .box .info ul li h5{color: #54c3b5;margin-bottom: 5px;font-weight: 500;}
.mGnb .box .info ul li p{font-weight: 400;}

.mGnb .box .list_wrap {position: relative;width: 50%;}
.mGnb .box .list_wrap:after{content:'';position:absolute;top:0;left:0;border-left: 1px solid #878787;animation: gnb-line 2s cubic-bezier(0.2, 0, 0.2, 1) both;}
.mGnb .box .list_wrap ul {display: flex;flex-direction: column;padding-left: 50px;padding-top: 30px;}
.mGnb .box .list_wrap ul > li {display: flex;align-items: center;}

.mGnb .box .list_wrap ul > li > a {display: block;position: relative;margin: 10px 0;color:var(--white-color);padding-bottom: 25px;font-weight: 900;font-size: 70px;line-height: 70px;text-transform: uppercase;}
.mGnb .box .list_wrap ul > li > a span {display: block;height: 50px;overflow: hidden;transition: .5s all;}
.mGnb .box .list_wrap ul > li > a span:nth-child(1) {height: 40px;overflow: hidden;}
.mGnb .box .list_wrap ul > li > a span:nth-child(2) p {margin-top: -40px;display: block;}
.mGnb .box .list_wrap ul > li > a:hover span:nth-child(1),
.mGnb .box .list_wrap ul > li > a:focus span:nth-child(1){transform: skewX(20deg);color:var(--mint-color);}
.mGnb .box .list_wrap ul > li > a:hover span:nth-child(2),
.mGnb .box .list_wrap ul > li > a:focus span:nth-child(2){transform: skewX(20deg);color:var(--mint-color);}
.mGnb .box .list_wrap ul > li > a::after {content: "";position: absolute;
	left: 50%;width: 0;top: calc(50% - 19px);height: 3px;background:var(--background-color); border-radius: 5px;transition: .5s all;}
.mGnb .box .list_wrap ul > li > a:hover::after,
.mGnb .box .list_wrap ul > li > a:focus::after{width: 110%;left: -5%;}
.mGnb .box .list_wrap ul > li em{margin-left: 20px;color: #fff;margin-top: -12px;font-weight: 500;font-size: 18px;}

/* ¾Ö´ÏÈ¿°ú */
.ani{animation:ani-delay 1s ease 0s forwards;opacity:0;}
.ani1{animation:ani-delay1 1s ease 0s forwards;opacity:0;}
.ani2{animation:ani-delay2 3.5s ease 0s forwards;opacity:0;}

.delay1{animation-delay:0.3s;}
.delay2{animation-delay:0.6s;}
.delay3{animation-delay:0.9s;}
.delay4{animation-delay:1.2s;}
.delay5{animation-delay:1.5s;}
.delay6{animation-delay:2.5s;}

/* === ÄÜÅÙÃ÷ === */
#container{position:relative;height:100%}
#container #content{position:relative;min-height:300px;}
#container #content::after{display:block;clear:both;content:''}


/* === ǪÅÍ === */
#footer{position: relative;background:var(--background-color);padding-top: 10em;margin-top: -2px;}
.tBox{position: relative;margin: 0 3%;}
.tBox .ftxt{font-size: 48px;color:#878787;text-transform: uppercase;font-weight: 900;background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 10s infinite linear;}
.tBox address{margin: 3em 0 6em;}
.tBox address span{position: relative;font-size:16px;color:var(--white-color);margin-right: 50px;}
.tBox address strong{font-size:16px;color:#7b7b7b;margin-right: 15px;}
.tBox address span:after{content: '';width: 1px;height: 9px;background:#777;position: absolute;top: 7px;left: -27px;}
.tBox address span:first-child:after{display:none;}
#footer .line{width:100%;height:1px;border-top:1px solid #4d4d4d;}
.fBox{padding: 4em 0 6em;margin: 0 3%;}
.fBox small{font-size:15px;color:var(--white-color);}
.fBox .utill{text-align: right;margin-top: -26px;}
.fBox .utill li{display: inline-block;margin-left: 40px;}
.fBox .utill li a{font-size:16px;color:#9a9a9a;}
.fBox .utill li a i{color:#eb5939;position: relative;}
.fBox .utill li a i:after{content: '';position: absolute;width: 2px;height: 2px;background: #9a9ab4;top: 12px;right: -27%;}
.fBox .utill li a:hover,
.fBox .utill li a:hover i{color:var(--white-color)}

.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: #333;z-index: 10;border: 1px solid #808080;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%;border-radius: 50%;}
.topBtn i {display: inline-block;font-size: 19px;line-height: 46px;transition: all 0.3s;color: #808080;}
.topBtn:hover{background-color: #fd6746;border: 1px solid #fd6746;}
.topBtn:hover i {transform: translateY(-3px);color:var(--white-color);}

.black #footer {padding-top: 5em;}

/*
===============================================
animation
===============================================
*/

@keyframes close-menubar1 {
    0% {transform:translateY(0) rotate(0);} 
    50% {transform:translateY(3px) rotate(0);} 
    100% {transform:translateY(13px) rotate(45deg);}
}

@keyframes close-menubar3 {
    0% {transform : translateY(0) rotate(0);} 
    50% {transform : translateY(-7px) rotate(0);} 
    100% {transform : translateY(-7px) rotate(-45deg);}
}

@keyframes menubar1 {
    0% {transform : translateY(8.5px) rotate(45deg);} 
    50% {transform : translateY(8.5px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}

@keyframes menubar2 {
    0% {left: 0;} 
    100% {left: 10px;}
}

@keyframes menubar2hover {
    0% {left: 10px;} 
    100% {left: 0px;}
}

@keyframes menubar3 {
    0% {transform : translateY(-9px) rotate(-45deg);} 
    50% {transform : translateY(-9px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}

@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 ani-delay2{
	0%{transform: translateZ(0) scale(0);opacity: 0;}
	100%{transform: translateZ(0) scale(1);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%;}
}

@-webkit-keyframes ButtonScale {
  0% {height:60px;}
  75% {height:70px;}
  85% {height:60px;}
  92% {height:66px;}  
  100% {height:60px;}
}

@-webkit-keyframes DropScale {
  0% {top:47px; left:61px;height:50px;width:25px;opacity:1}
  37.5% {top:25px;left:35px;height:40px;width:25px;opacity:1}
  50% {top:15px;left:18px;height:20px;width:25px;}
  75% {top:15px;left:18px;height:10px;width:12.5px;opacity:0;}  
  100% {top:15px;left:18px;height:20px;width:25px;opacity:0;}
}

/*
===============================================
¹ÝÀÀÇü css
===============================================
*/

@media all and (min-width:1921px){

	#header .logo img{width: 150px;}
	#header .kakaotalk {width: 40px;}
	#header .kakaotalk span {font-size: 16px;}
	.mGnb .box .list_wrap ul > li > a {margin: 30px 0;font-size: 120px;line-height: 90px;}
	.mGnb .box .list_wrap ul > li em {margin-top: 35px;font-size: 20px;}
	.mGnb .box .info ul li {font-size: 24px;}

	.tBox .ftxt {font-size: 53px;}
	.tBox address span {font-size: 20px;}
	.fBox small {font-size: 18px;}
	.fBox .utill li a {font-size: 18px;}

}

@media all and (max-width:1850px){
	.mGnb .box .info ul li {width: 100%;}
}

@media (max-width:1600px) and (max-height:768px){
	.mGnb .box {height: calc(100vh - 0.5vw);}
}

@media all and (max-width:1380px){
	.mGnb .box .info {width: 40%;}
	.mGnb .box .list_wrap {width: 60%;}
}

@media all and (max-width:1150px){
	.black #headBox{position: absolute;}
	.black #header .kakaotalk,
	.black #header .bt_menu{position: fixed;}
	.mGnb .box .info {width: 45%;}
	.mGnb .box .list_wrap {width: 55%;}
	.mGnb .box .list_wrap ul > li {align-items: flex-start;flex-direction: column;}
	.mGnb .box .list_wrap ul > li > a {padding-bottom: 0;}
	.mGnb .box .list_wrap ul > li em {margin: -20px 0 30px;}
	.mGnb .box .list_wrap ul > li > a::after {top: calc(50% - 7px);}
}

@media all and (max-width:1080px){
	.tBox address {margin: 3em 0 3em;}
	.tBox address span {margin-right: 0;display: block;margin-top: 10px;}
	.fBox .utill {text-align: left;margin-top: 20px;}
	.fBox .utill li {margin-left: 0;margin-right:50px;}
	.fBox {padding: 2em 0 5em;}
}

@media all and (max-width:890px){
	.mGnb .box .info{display:none;}
	.mGnb .box .list_wrap {width: 100%;}
}

@media all and (max-width:768px){
	#footer {padding-top: 6em;}
}

@media all and (max-width:640px){
	#headBox{position: absolute;}
	#header .kakaotalk{position: fixed;}
	#header .bt_menu{position: fixed;}
	.mGnb .box {height: calc(100vh - 15vw);padding: 0 5%}
	.mGnb .box .list_wrap ul {padding-left: 30px;padding-top: 15px;}
	.mGnb .box .list_wrap ul > li > a {font-size: 50px;line-height: 50px;}
	.mGnb .box .list_wrap ul > li > a span:nth-child(1) {height: 30px;}
	.mGnb .box .list_wrap ul > li > a span:nth-child(2) p {margin-top: -30px;}
	.mGnb .box .list_wrap ul > li > a::after {top: calc(50% - 11px);}
	.mGnb .box .list_wrap ul > li em { font-size: 16px;margin: -20px 0 25px;}
}

@media all and (max-width:600px){
	
	#header .logo {top: 25px;left: 5%;}
	#header .bt_menu {top: 25px;right: 5%;}
	.tBox .ftxt {font-size: 35px;}

	@keyframes menubar2 {
		0% {left: 0;} 
		100% {left: 0px;}
	}

	@keyframes menubar2hover {
		0% {left: 0px;} 
		100% {left: 0px;}
	}

	#header .kakaotalk {right: 5%;}
}

@media all and (max-width:550px){
	.fBox small {font-size: 14px;}
}

@media all and (max-width:400px){
	.mGnb .box .list_wrap ul > li > a {font-size: 40px;line-height: 40px;}
	.mGnb .box .list_wrap ul > li > a span {height: 40px;}
	.mGnb .box .list_wrap ul > li > a span:nth-child(1) {height: 23px;}
	.mGnb .box .list_wrap ul > li > a span:nth-child(2) p {margin-top: -23px;}
	.mGnb .box .list_wrap ul > li > a::after {top: calc(50% - 10px);}
	.mGnb .box .list_wrap ul > li em {margin: -25px 0 20px;}
	.tBox .ftxt {font-size: 30px;}
	.black #footer {padding-top: 4em;}
}