@charset "UTF-8";

@import "2024popup-css.css"; 



html {scroll-behavior: smooth;}
body {margin:0px; font-family: 'Noto Sans Korean','돋움', Dotum, sans-serif; letter-spacing:-0.06em;}
.skip {position:absolute; overflow:hidden; height:0; width:0; font-size:0; visibility:hidden;}
a, a:visited, a:link, a:hover { text-decoration:none; box-sizing: border-box;}
div, ul, li,dl,dt {margin:0px; padding:0px; list-style-type: none;}
h2{margin:0}

.mouse {
	position: absolute;
	left: 50%;
	width: 50%;
	pointer-events: none;
	background-color: #c9161e;
	border-radius: 100%;
	opacity: 0;
	z-index: 9999;
}

/* Styles for the main cursor */
.cursor {
	width: 30px;
	height: 30px;
	-webkit-transform: translate(-15px,-15px);
					transform: translate(-15px,-15px);
	filter: blur(22px);
}
.cursor.hover {
	width: 4px;
	height: 4px;
	-webkit-transform: translate(-2px,-2px);
					transform: translate(-2px,-2px);
	filter: blur(0px);
}

/* Styles for the followers */
.follow-cursor.first {
	width: 160px;
	height: 160px;
	
background: url('/img-2024/cross.png') no-repeat ;
	-webkit-transform: translate(-80px,-80px);
					transform: translate(-80px,-80px);
	
}
.follow-cursor.second {
	width: 20px;background:#ff3740;
	height: 20px;
	-webkit-transform: translate(-10px,-10px);
					transform: translate(-10px,-10px);
	filter: blur(10px);
	-webkit-transition: .18s linear;
					transition: .18s linear;
}
.follow-cursor.third {
	width: 15px;
	height: 15px;
	-webkit-transform: translate(-15px,-15px);
					transform: translate(-15px,-15px);
	filter: blur(15px);
	-webkit-transition: .34s linear;
					transition: .34s linear;
}
.follow-cursor.fourth {
	width: 4px;
	height: 4px;
	-webkit-transform: translate(-2px,-2px);
					transform: translate(-2px,-2px);
	filter: blur(4px);
	-webkit-transition: .75s linear;
					transition: .75s linear;
}
.follow-cursor.fifth {
	width: 3px;
	height: 3px;
	-webkit-transform: translate(-1.5px,-1.5px);
					transform: translate(-1.5px,-1.5px);
	filter: blur(1px);
	-webkit-transition: 1s linear;
					transition: 1s linear;
}
.follow-cursor.hover {
	width: 172px;
	height: 172px;
	-webkit-transform: translate(-36px,-36px);
					transform: translate(-36px,-36px);
	filter: blur(0px);
	background: transparent;
	border: 1px solid #FF004C;
	border-radius: 0;
}
.follow-cursor.hover.second {
	-webkit-transform: translate(-36px,-36px) rotate(72deg);
					transform: translate(-36px,-36px) rotate(72deg);
}
.follow-cursor.hover.third {
	-webkit-transform: translate(-36px,-36px) rotate(288deg);
					transform: translate(-36px,-36px) rotate(288deg);
}
.follow-cursor.hover.fourth {
	-webkit-transform: translate(-36px,-36px) rotate(144deg);
					transform: translate(-36px,-36px) rotate(144deg);
}
.follow-cursor.hover.fifth {
	-webkit-transform: translate(-36px,-36px) rotate(216deg);
					transform: translate(-36px,-36px) rotate(216deg);
}

.top {position:fixed;z-index:10;width:100%}

#header{font-weight:600;background:#fff ;transition: all 0.3s ease;padding:50px 0px 0 0;width:100%;}
#header .main-logo img {float:right;opacity:0;top:25px;width:150px;transition: all 0.3s ease;z-index:1;margin-right:50px}
#header.active  .main-logo img {opacity:1;transition: all 0.3s ease;z-index:2;margin-top:15px}
#header.active{padding:0px 0;transition: all 0.3s ease;border-bottom:1px solid #d7d6d6;z-index:2;overflow:hidden}


#header .main-logo2 {overflow:hidden;padding:0px 0 0 0;transition: all 0.3s ease;}
#header .main-logo2 img {float:right;opacity:0;top:25px;width:150px;transition: all 0.3s ease;z-index:1;margin-right:70px;}
#header .logo-ani2 img{width:13px;opacity:0;position:absolute;top:20px;right:-10px;transition: all 0.3s ease;}
#header.active .main-logo2 {overflow:hidden;padding:15px 0 0 0;transition: all 0.3s ease;}
#header.active .main-logo2 img {opacity:1;transition: all 0.3s ease;z-index:2;margin-top:15px;}
#header.active .logo-ani2 img{opacity:1;animation:logoani 5s infinite alternate;top:3px;transition: all 0.3s ease;}
@keyframes logoani {
        0% {opacity: 0;right:150px;transform: rotate( 0deg );}
        20% {opacity: 1;right:-10px;transform: rotate( 720deg );}
		100% {opacity: 1;transform: rotate( 720deg )}
    }


.main-menu {overflow:hidden;margin:0 50px 0 125px;background:#fff  ; padding:20px 0;float:left;transition: all 0.5s ease;letter-spacing:-2px} 
.main-menu ul li {float:left;padding:0px 50px 0px 0px;font-size:28px;transition: all 0.3s ease;}
.main-menu ul li a {color:#000}


.main {transition: transform 1.5s;padding:0 0 100px 0}

.main-ani {position: absolute; top:45%;left:50%;transform: translate(-50%, -45%);width:1200px;}
.main-ani .ani-text1 {font-size:36px;color:#666;font-weight:900;letter-spacing:-2px;margin:50px 0 80px 0}
.main-ani .ani-text2 {}
.main-ani .ani-text2 span {float:left;display:inline-block;}
.main-ani .ani-text2 span img {height:115px;margin:0 20px 0 0 }
.main-ani .ani-text3 {position:absolute;right:10px;top:95px}
.main-ani .ani-text3 img { opacity:0;  animation: markani 8s 3s infinite alternate;height:90px;}
.main-ani .ani-text4 {clear:both;font-size:60px;color:#000;font-weight:600;letter-spacing:-2px;padding:80px 0 0px 0;opacity:0; }

.test_obj { position: relative; animation: fadeInDown 8s infinite alternate;	 }
.test_obj2 { position: relative; animation: fadeInleft 8s 2s infinite alternate;	 }
@keyframes fadeInDown {
        0% { opacity: 0; transform: translate3d(0, -130%, 0);        }
        20% {opacity: 1;transform: translateZ(0);        }
        100% {opacity: 1;transform: translateZ(0);        }
    }
@keyframes fadeInleft {
        0% {opacity: 0; transform:translateX(30%);}
        20% {opacity:1;transform: translateX(0);}
        100% {opacity: 1;transform: translateX(0);}
    }
 :is(.anitext1, .anitext2, .anitext3, .anitext4, .anitext5, .anitext6, .anitext7) {  opacity:0;  animation: bubble 8s infinite alternate;  animation-fill-mode: forwards;}

.anitext1 { animation-delay: 0.5s;}
.anitext2 { animation-delay: 0.8s;}
.anitext3 {  animation-delay: 1.1s;}
.anitext4 {  animation-delay: 1.4s;}
.anitext5 {  animation-delay: 1.8s;}
.anitext6 {  animation-delay: 2.1s;}
.anitext7 {  animation-delay: 2.4s;}

@keyframes bubble {
  from {
    transform: rotateY( 180deg );
  }
  20% {opacity:1;
    transform:rotateY( 360deg );
  }
  100% {opacity:1;
    transform:rotateY( 360deg );
  }
}
   

@keyframes markani {
        0% {opacity: 0;transform: rotate( 0deg );}
        15% {opacity: 1;transform: rotate( 720deg );}
		100% {opacity: 1;transform: rotate( 720deg )}
    }

.section-main {overflow: hidden;    width: 100%;    height:100vh;	position:relative;}
.section-main .background {overflow:hidden;position: absolute;top: 0;left: 0; width: 100%;    height: 100%;    background: #fff;}
.section-main .background video {position: absolute;    top: 0;    left:50%;    width:65%;    height: 100%;transform: translateX(-50%);background: #fff;-webkit-mask-image: -webkit-radial-gradient(white, black);    -webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;}
.section-main .scroll-down { z-index: 2; position: absolute; bottom: 40px; right: 0; left: 0; margin: auto; width: 40px; height:100px;}
.section-main .scroll-down::before { content: ''; position: absolute; top:0px; left: 0; width: 100%; height: 100%; background: url('/img-2024/mouse-img3.png') no-repeat center / auto; animation: scroll-down ease 2s infinite; opacity: 0; transform: translateY(-20px); }

.scroll-down2 { z-index: 2; position: absolute; bottom: 20px; right: 0; left: 0; margin: auto; width: 40px; height:20px;}
.scroll-down2::before { content: ''; position: absolute; top:0px; left: 0; width: 100%; height: 100%; background: url('/img-2024/mouse-img3.png') no-repeat center bottom; animation: scroll-down2 ease 2s infinite; opacity: 0; transform: translateY(-20px); }
.is-hidden{  opacity:0;}

@keyframes scroll-down {
    0% { transform: translateY(-20px); opacity: 0; }
    40%, 60% { transform: translateY(0px); opacity: 0.7; }
    100% { transform: translateY(20px); opacity: 0; }
}
@keyframes scroll-down2 {
    0% { transform: translateY(-40px); opacity: 0; }
    50% { transform: translateY(0px); opacity: 0.7; }
    100% { transform: translateY(20px); opacity: 0; }
}

.section-business {padding:80px 0px 80px 125px;background:#f9f7f7}
.section-partners {padding:50px 125px 0px 125px;}
.section-carrer {padding:80px 0px 0px 0px;width:50%;float:left}
.section-event{padding:80px 0px 0 0;float:right;width:50%;}
.section-marquee {clear:both;padding:80px 0px}
.section-aboutus{clear:both;padding:80px 0px 0 125px;}
.section-office{padding:80px 0px 0 125px;}
.section-project {background: url('/img-2024/main-img7.png') repeat;padding:80px 125px 80px 125px; position:relative}




h2.s2024 {font-size:60px;font-weight:900;letter-spacing:-4px;padding:0 0 20px 0}
h3.s2024 {font-size:32px;font-weight:900;letter-spacing:-2px;padding:0}
div.s2024-com {font-size:24px;font-weight:500;padding:0 100px 0 0}
div.s2024-com2 {font-size:24px;font-weight:500;padding:0 0px 0 0}

.busi-model {display:flex;width:100%;padding:60px 0 80px 0}
.busi-model > div {width:33%;;text-align:center;}
.busi-model > div ul li:first-child {height:300px;}
.busi-model-text {font-size:42px;font-weight:600;line-height:50px;padding:80px 0 0 0}
.busi-model-text span {font-size:28px;font-weight:100}
.model1-warp {position: relative;  overflow: hidden;}
.model2-warp {position: relative;  overflow: hidden;}


.section-carrer .event-warp > div {margin-right:5px}
.event-warp {}
.event-warp > div {;text-align:center;background:#c9161e;color:#fff;padding:100px 0 100px 0;transition: all 0.5s ease;}
.event-warp > div:first-child {}
.event-warp > div:hover {background:#870006;transition: all 0.5s ease;}
.event-warp > div ul li:first-child {font-size:60px;font-weight:900;}
.event-warp > div ul li:nth-child(2) {font-size:24px;font-weight:500;line-height:30px;padding:0 0 80px 0}
a.event-btn {background:#b5141b url('/img-2024/main-img-arr4.png') no-repeat 100px 40px ;color:#fff;font-size:36px;padding:10px 250px 10px 80px;border-radius:40px;transition: all 0.5s ease;}
a.event-btn:hover {background:#fff url('/img-2024/main-img-arr3.png') no-repeat 150px 40px ;color:#000;transition: all 0.5s ease;}

.aboutus-btn {margin:50px 0 0 0}
a.aboutus-btn {background:#fff url('/img-2024/main-img-arr3.png') no-repeat 200px 40px ;color:#000;font-size:36px;padding:10px 250px 10px 80px;border-radius:45px;border:1px solid #000;font-weight:500;letter-spacing:-2px;transition: all 0.5s ease;}
a.aboutus-btn:hover {background:#000 url('/img-2024/main-img-arr3.png') no-repeat 250px 40px ;color:#fff;transition: all 0.5s ease;}




.main .section-marquee {position:relative;overflow:hidden;min-width:1024px;height:100px;}
.main .section-marquee .textMove {
    display: flex;
    position: absolute;top:50px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:1;
    pointer-events: none;
}

.main .section-marquee .textMove span {
    display: block;
    padding: 0 100px 0px 100px;
    color: #d6d3d3;
    font-weight:900;
    font-size: 150px;
    line-height: 1.25;
    letter-spacing: -6px;
    white-space: nowrap;
    animation: textMove 30s linear infinite
}

@keyframes textMove {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}




@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

.offic-warp {border:1px solid #686868;border-radius:40px;margin:30px 125px 0  0}
.offic-warp iframe {border-radius:40px;}

.office-2box {margin:0px 125px 0  0}

.office-2box ul {display:flex}
.office-2box ul li {width:100%;}
.office-2box ul li:last-child {margin-left:0px}
.office-2box ul li:last-child .s2024-com{padding-bottom:20px}
.office-2box ul li div.offic-warp {margin:0px 0 0 0}


.flow_banner {overflow: hidden;display: flex;;margin: 0px auto;}
.flow_banner .list {display: flex;overflow: visible;}
.flow_banner .list > li {white-space: nowrap;font-size: 14px;;padding: 50px 50px 10px 50px;display:block;position:relative;}
.flow_banner .list > li > img {width:150px;top:50%;transform: translate(0, -50%) }

.flow_banner .list > li > div > img {width:100px;}
.flow_banner .list > li > div {;text-align:center;position: absolute;opacity:0;transition: all ease 0.5s;border:1px solid #dbdbdb;background:#fff;top:-5px;left:50%;border-radius:10px;box-shadow:0px 0px 10px rgba(0,0,0,0.1);transform: translate(-50%, 0%)}
/*.flow_banner .list > li:nth-child(1):hover div {opacity:1;;top:0px;left:50%;padding:0 10px 10px 10px;transform: translate(-50%, 0%)}
.flow_banner .list > li:nth-child(2):hover div {opacity:1;;top:0px;left:50%;padding:10px;transform: translate(-50%, 0%)}
.flow_banner .list > li:nth-child(3):hover div {opacity:1;;top:0px;left:50%;padding:10px;transform: translate(-50%, 0%)}
.flow_banner .list > li:nth-child(4):hover div {opacity:1;;top:0px;left:50%;padding:10px;transform: translate(-50%, 0%)}
.flow_banner .list > li:nth-child(5):hover div {opacity:1;;top:0px;left:50%;padding:10px;transform: translate(-50%, 0%)}
.flow_banner .list > li:nth-child(6):hover div {opacity:1;;top:0px;left:50%;padding:10px;transform: translate(-50%, 0%)}*/
.flow_banner .list > li:hover div {opacity:1;;top:0px;left:50%;padding:10px;transform: translate(-50%, 0%);min-width:150px}
.flow_banner .list > li > div a.homelink {font-size:12px;color:#777}
.flow_banner .list > li > div a.filelink1 {font-size:13px;font-weight:500;display:block;background:#f6f7f8;color:#4b5e6e;padding:4px 10px;border-radius:5px;margin-top:8px;}
.flow_banner .list > li > div a.filelink2 {font-size:13px;font-weight:500;display:block;background:#eef3f8;color:#4b5e6e;padding:4px 10px;border-radius:5px;margin-top:3px;}
.flow_banner .list > li > div a.filelink3 {font-size:13px;font-weight:500;display:block;background:#e3edf5;color:#4b5e6e;padding:4px 10px;border-radius:5px;margin-top:3px;}

@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}







.scene { z-index:20;margin:0 auto;padding:80px 0 0 0;	width: 200px;	height: 200px;	perspective: 600px;}

.cube { 	position: relative;	width: 100%;	height: 100%;	transform-style: preserve-3d;	transform: translateZ(-100px);	animation: rotation 5s infinite;}

.cube__face {	position: absolute;	width: 100%;	height: 100%;	color: #fff;	font-size: 24px;	display: flex;	justify-content: center;	align-items: center;}
.cube__face--front {		background: rgba(30, 30, 30, 0.7);		transform: rotateY(0deg) translateZ(100px);	}
.cube__face--back {		background: rgba(24, 24, 24, 0.7);		transform: rotateY(180deg) translateZ(100px);	}
.cube__face--right {		background: rgba(200, 200, 200, 0.7);		transform: rotateY(90deg) translateZ(100px);	}
.cube__face--left {		background: rgba(165, 165, 165, 0.7);		transform: rotateY(-90deg) translateZ(100px);	}
.cube__face--top {		background:rgba(137, 137, 137, 0.7);		transform: rotateX(90deg) translateZ(100px);	}
.cube__face--bottom {		background: rgba(103, 103, 103, 0.7);		transform: rotateX(-90deg) translateZ(100px);	}
@keyframes rotation {
	0% {
		transform: translateZ(-100px) rotate3d(0,0,0);
	}
	100% {
		transform: translateZ(-100px) rotate3d(1,0,1,360deg);
	}
}



.model2{  height: 200px;  width: 200px;  position: absolute;  top:5%;  left: 50%;  margin: 0 auto;  transform: translate(-50%, 5%);}
.square{  height: 94%;  width: 94%;  background: white;  position: absolute;  top: 50%;  left: 50%;  margin: -47% 0 0 -47%;}
.black{   background:#4e4e4e;    animation: rotate 10s infinite linear; }

@keyframes rotate{
  0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }	
}


.model2 {
  svg {width:650px; }
}
/* Animation setup */

@keyframes hex-pop-in {
  0% {
    fill:gray; transform: translateY(0);
  }
  100% {
    fill: #fff;transform: translateY(1%);
  }
}


/* Apply to hex */

.first-1-stripe {  animation: hex-pop-in 1.4s linear alternate infinite;}
.first-2-stripe {  animation: hex-pop-in 1.6s linear alternate infinite;}
.first-3-stripe {  animation: hex-pop-in 1.8s linear alternate infinite;}
.second-1-stripe {  animation: hex-pop-in 2.0s linear alternate infinite;}
.second-2-stripe {  animation: hex-pop-in 2.2s linear alternate infinite;}
.second-3-stripe {  animation: hex-pop-in 2.4s linear alternate infinite;}
.third-1-stripe {  animation: hex-pop-in 2.6s linear alternate infinite;}
.third-2-stripe {  animation: hex-pop-in 2.8s linear alternate infinite;}
.third-3-stripe {  animation: hex-pop-in 3.0s linear alternate infinite;}





.container {  position: relative;  width: 100%;  min-height: 100%;}
.circles,
.circle-container,
.circle{  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;    width: 100px;  height: 100px;}
.circles {  animation: z 10s linear infinite alternate;}
.circle {  border: 1px solid #4e4e4e;  border-radius: 100%;  opacity: 0;}
@keyframes x1 {
  0% {
    transform: rotateX(0deg) translate(-150px,0);
    opacity: 0;
  }
  25% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateX(0deg) translate(150px,0);
    opacity: 0;
  }
  75% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateX(0deg) translate(-150px,0);
    opacity: 0;
  }
  
}
@keyframes x2 {
  0% {
    transform: rotateX(0deg) translate(150px,0);
    opacity: 0;
  }
  25% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateX(0deg) translate(-150px,0);
    opacity: 0;
  }
  75% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateX(0deg) translate(150px,0);
    opacity: 0;
  }
  
}
@keyframes y1 {
  0% {
    transform: rotateY(0deg) translate(0,-150px);
    opacity: 0;
  }
  25% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateY(0deg) translate(0,150px);
    opacity: 0;
  }
  75% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg) translate(0,-150px);
    opacity: 0;
  }
}
@keyframes y2 {
  0% {
    transform: rotateY(0deg) translate(0,150px);
    opacity: 0;
  }
  25% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateY(0deg) translate(0,-150px);
    opacity: 0;
  }
  75% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg) translate(0,150px);
    opacity: 0;
  }
}
@keyframes z {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}




/* ---- */








.project-sw-warp {overflow:hidden}
.project-sw-warp > ul {}
.project-sw-warp > ul > li:first-child {float:left;width:45%;}
.project-sw-warp > ul > li:last-child {width:50%;float:right;padding:20px 20px 40px 20px;}
.project-btn {clear:both;margin-top:50px;}
button.project-btn {display:block;background:#fff url('/img-2024/main-img-arr3.png') no-repeat 100px 40px ;color:#000;font-size:36px;padding:10px 250px 10px 80px;border-radius:45px;border:1px solid #000;font-weight:500;letter-spacing:-2px;transition: all 0.5s ease;cursor:pointer}
button.project-btn:hover {background:#000 url('/img-2024/main-img-arr3.png') no-repeat 150px 40px ;color:#fff;transition: all 0.5s ease;}

.project-sw-warp .swiper {max-width:600px}
.project-sw-warp .swiper-wrapper  {height:auto;}
.project-sw-warp .swiper-pagination {z-index:100 !important;bottom:-30px !important;}
.project-sw-warp .swiper-pagination-bullet {width:15px; height:15px;background-color:rgba(0,0,0,0.3); opacity:1;}
.project-sw-warp .swiper-pagination-bullet-active{width:50px; height:15px; background-color:#000 ; border-radius: 20px;;;;}

.project-sw-warp .swiper-button-next {display:block;position:absolute;background:#c9161e;padding:0px 8px 0 8px;border-radius:10px;color:#fff;right:-10px;;top:50%}
.project-sw-warp .swiper-button-next::before {content:'';display:block;position:absolute;top:12px;right:15px;width:15px;height:15px;border-width:3px 3px 0 0;border-style:solid;border-color:#dididi;border-radius:10%;transform:rotate(45deg);}
.project-sw-warp .swiper-button-next::after {display:none}
.project-sw-warp .swiper-button-prev {display:block;position:absolute;background:#c9161e;padding:0px 8px 0 8px;border-radius:10px;color:#fff;left:-10px;;top:50%}
.project-sw-warp .swiper-button-prev::before {content:'';display:block;position:absolute;top:12px;right:10px;width:15px;height:15px;border-width:3px 3px 0 0;border-style:solid;border-color:#dididi;border-radius:10%;transform:rotate(225deg);}
.project-sw-warp .swiper-button-prev::after {display:none}

.loader {}
.loader ul li:last-child {font-size:21px;color:#000;font-weight:500}
.loader span {height:160px;font-weight:900;margin:0;padding:0;font-size:60px;color:rgba(0, 0, 0, 0.5);background-size: 80% 100%;background-position: left 0px bottom -40px;background-repeat:repeat-x;-webkit-background-clip: text;-moz-background-clip:text;background-clip: text;background-image:url("/img-2024/main-img6.png");animation: wave 5s infinite  linear}

@keyframes wave {
    0% {
        background-position: left 0px bottom -100px;
    }
    100% { 
        background-position: left 1500px bottom 120px;
    }
}


/* ---- */

.slider-page {background:linear-gradient(227deg, rgba(197,0,20,1), rgba(0,0,0,1) 15%);;padding: 30px 30px 20px 30px;box-shadow:0px 0px 10px rgba(0,0,0,0.7);border-radius:20px;text-align:center;}
.slider-page img {margin:0 auto;border-radius:20px;width:100%}
.slider-page {font-size:28px;color:#c9c7c8}
.slider-page span {font-size:18px}



@media (max-width: 1600px) {
}


@media (max-width: 1400px) {

.office-2box ul {display:block}
.office-2box ul li {width:100%;}

.office-2box ul li:last-child {margin-left:0px}
.office-2box ul li:last-child .s2024-com{padding-bottom:20px;margin-top:00px}
}


@media (max-width: 1200px) {


.main-ani {width:600px;transition: all 0.5s ease;}
.main-ani .ani-text1 {font-size:24px;;letter-spacing:-1px;margin:50px 0 80px 0}
.main-ani .ani-text2 span img {height:60px;margin:0 10px 0 0 }
.main-ani .ani-text3 {right:-15px;top:115px}
.main-ani .ani-text3 img {height:50px}
.main-ani .ani-text4 {font-size:36px;}



.section-business {padding:50px 30px 50px 30px;}
.section-partners {padding:50px 30px 0px 30px;}
.section-event{padding:80px 0px 0 0;}
.section-marquee {padding:80px 0px 0 0}
.section-aboutus{padding:100px 0px 0 30px;}
.section-office{padding:100px 0px 0 30px;}
.section-project {background: url('/img-2024/main-img7.png') repeat;padding:80px 30px 30px 30px; position:relative}


#header .main-logo2 img {transition: all 0.3s ease;margin-right:30px;}
#header.active .main-logo2 img {transition: all 0.3s ease;margin-top:10px;}




.main-menu {margin:0 30px;}
.main-menu ul li {font-size:21px;padding:0px 20px 0px 0px;}
#header .main-logo img {margin-right:30px}

h2.s2024 {font-size:50px}
div.s2024-com {font-size:20px;padding:0 0px 0 0}
div.s2024-com2 {font-size:20px;padding:0 0px 0 0}

.model2 {
  svg {width:300px; }
}

button.project-btn {background:#fff ;color:#000;font-size:24px;padding:10px 80px;border-radius:45px;border:1px solid #000;;font-weight:500;letter-spacing:-2px;transition: all 0.5s ease;}
button.project-btn:hover {background:#000 ;color:#fff}

	a.aboutus-btn {background:#fff ;color:#000;font-size:24px;padding:10px 80px;border-radius:45px;border:1px solid #000;font-weight:500;letter-spacing:-2px;transition: all 0.5s ease;}
	a.aboutus-btn:hover {background:#000 ;color:#fff}
	
	a.event-btn {background:#b5141b ;color:#fff;font-size:24px;padding:10px 80px;border-radius:40px;transition: all 0.5s ease;}
	a.event-btn:hover {background:#fff ;color:#000}

.event-warp > div ul li:first-child {font-size:35px;}
.event-warp > div ul li:nth-child(2) {font-size:16px;}

.loader span {font-size:50px}
.loader ul li:last-child {font-size:18px;}

.offic-warp {border:1px solid #686868;border-radius:40px;margin:30px 30px 0  0}


.office-2box {margin:0px 30px 0  0}

.busi-model {padding:50px 0 50px 0}
.busi-model-text {font-size:36px;font-weight:600;line-height:30px;padding:30px 0 0 0}
.busi-model-text span {font-size:18px;font-weight:100}

.busi-model > div ul li:first-child {height:200px;}

.scene { z-index:20;margin:0 auto;padding:50px 0 0 0;	width: 80px;	height: 80px;	perspective: 600px;}

.cube { 	position: relative;	width: 100%;	height: 100%;	transform-style: preserve-3d;	transform: translateZ(-50px);	animation: rotation 5s infinite;}

.cube__face {	position: absolute;	width: 100%;	height: 100%;	color: #fff;	font-size: 18px;	display: flex;	justify-content: center;	align-items: center;}
.cube__face--front {		background: rgba(30, 30, 30, 0.7);		transform: rotateY(0deg) translateZ(40px);	}
.cube__face--back {		background: rgba(24, 24, 24, 0.7);		transform: rotateY(180deg) translateZ(40px);	}
.cube__face--right {		background: rgba(200, 200, 200, 0.7);		transform: rotateY(90deg) translateZ(40px);	}
.cube__face--left {		background: rgba(165, 165, 165, 0.7);		transform: rotateY(-90deg) translateZ(40px);	}
.cube__face--top {		background:rgba(137, 137, 137, 0.7);		transform: rotateX(90deg) translateZ(40px);	}
.cube__face--bottom {		background: rgba(103, 103, 103, 0.7);		transform: rotateX(-90deg) translateZ(40px);	}
@keyframes rotation {
	0% {
		transform: translateZ(-50px) rotate3d(0,0,0);
	}
	100% {
		transform: translateZ(-50px) rotate3d(1,0,1,360deg);
	}
}



.model2{  height: 100px;  width: 100px;  position: absolute;  top:10%;  left: 50%;  margin: 0 auto;  transform: translate(-50%, 10%)}
.square{  height: 94%;  width: 94%;  background: white;  position: absolute;  top: 50%;  left: 50%;  margin: -47% 0 0 -47%;}
.black{   background:#4e4e4e;    animation: rotate 10s infinite linear; }

@keyframes rotate{
  0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }	
}



.container {  position: relative;  width: 100%;  min-height: 100%;}
.circles,
.circle-container,
.circle{  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;    width: 50px;  height: 50px;}
.circles {  animation: z 10s linear infinite alternate;}
.circle {  border: 1px solid #4e4e4e;  border-radius: 100%;  opacity: 0;}
@keyframes x1 {
  0% {
    transform: rotateX(0deg) translate(-50px,0);
    opacity: 0;
  }
  25% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateX(0deg) translate(50px,0);
    opacity: 0;
  }
  75% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateX(0deg) translate(-50px,0);
    opacity: 0;
  }
  
}
@keyframes x2 {
  0% {
    transform: rotateX(0deg) translate(50px,0);
    opacity: 0;
  }
  25% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateX(0deg) translate(-50px,0);
    opacity: 0;
  }
  75% {
    transform: rotateX(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateX(0deg) translate(50px,0);
    opacity: 0;
  }
  
}
@keyframes y1 {
  0% {
    transform: rotateY(0deg) translate(0,-50px);
    opacity: 0;
  }
  25% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateY(0deg) translate(0,50px);
    opacity: 0;
  }
  75% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg) translate(0,-50px);
    opacity: 0;
  }
}
@keyframes y2 {
  0% {
    transform: rotateY(0deg) translate(0,50px);
    opacity: 0;
  }
  25% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  50% {
    transform: rotateY(0deg) translate(0,-50px);
    opacity: 0;
  }
  75% {
    transform: rotateY(360deg) translate(0,0);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg) translate(0,50px);
    opacity: 0;
  }
}
@keyframes z {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}


.main .section-marquee {position:relative;overflow:hidden;min-width:100px;}


.main .section-marquee .textMove span {
    padding: 0;
    font-size: 100px;
    animation: textMove 22s linear infinite
	}


}
@media (max-width: 860px) {
.project-sw-warp > ul > li:first-child {float:none;width:100%}
.project-sw-warp > ul > li:last-child {width:90%;float:none;padding:50px 15px;}

}
@media (max-width: 768px) {


.main-ani {width:400px;transition: all 0.5s ease;}
.main-ani .ani-text1 {font-size:18px;;letter-spacing:-1px;margin:20px 0 30px 0;font-weight:600}
.main-ani .ani-text2 span img {height:38px;margin:0 10px 0 0 }
.main-ani .ani-text3 {right:-15px;top:38px}
.main-ani .ani-text3 img {height:40px}
.main-ani .ani-text4 {font-size:24px;padding:40px 0 0px 0;}


h2.s2024 {font-size:36px}


.slider-page {font-size:21px;color:#c9c7c8}
.slider-page span {font-size:16px}




.section-carrer {padding:100px 0px 0px 0px;width:100%;float:none}
.section-event{padding:5px 0px 0 0;float:none;width:100%;}


.event-warp {display:block}
.event-warp > div {width:100%; padding:50px 0;margin:5px 0 0 0}
#header.active {padding:0px 0 10px 0}
.navbar_burger {display:block;left:50px;padding:5px 0 0  70px;position:fixed;transition: all 0.5s ease;}
.main-menu {display:none;padding:20px 0 10px 0;transition: all 0.5s ease;}
.main-menu ul{transition: all 0.5s ease;}

	

.offic-warp iframe {height:400px}


}

@media (max-width: 480px) {

.main-ani {width:320px;transition: all 0.5s ease;}
.main-ani .ani-text1 {font-size:16px;;letter-spacing:-1px;font-weight:500}
.main-ani .ani-text2 span img {height:32px;margin:0 5px 0 0 }
.main-ani .ani-text3 {right:-5px;top:50px}
.main-ani .ani-text3 img {height:25px}
.main-ani .ani-text4 {font-size:21px;}



.container {  position: relative;  width: 100%;  min-height: 100%;margin-top:50px}
.busi-model {display:block;width:100%;padding:50px 0 50px 0}
.busi-model > div {width:100%;;text-align:center;padding: 0 0 50px 0;}
.busi-model > div ul li:first-child {height:100px;}

.mini{padding:80px 0 0 0}
}




/* 모바일 버전 입력*/
.navbar_overlay {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.5);  z-index: 998;  opacity: 0;  pointer-events: none;  transition: opacity 0.1s ease;}
.navbar_burger {  position: fixed;  top:5px;  left:-50px;transition: all 0.5s ease;  cursor: pointer;  color: #000;}
.navbar_burger_back {  position: fixed;  top: 1.5rem;  right: 1.5rem;  cursor: pointer;  color: #fff;}
.navbar_menu {  position: fixed;  top: 0;left:0%;  width: 50%;  height: 100%;  background-color: #333;  padding: 0 2rem;  display: flex;  flex-direction: column;  justify-content: center;  align-items: flex-start;  transform: translateX(-100%);  z-index: 999;  color: #000;  transition: transform 0.3s ease;}
.navbar_menu a {  position: relative;  color: #ffffff;  font-size: 1.5rem;  margin-left: 1rem;  margin-bottom: 3rem;  text-decoration: none;}
.navbar_menu.active {  transform: translateX(0);}
.navbar_overlay.active {  opacity: 1;  pointer-events: auto;}