@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

body#main{overflow:hidden;}

/* header */
#header {position:fixed;left:0;top:0;right:0;z-index:90;}
#header .contain{height:100px;max-width:100%;padding:0 30px;}
#header .sitelogo {position:absolute; top:30px; left:30px; z-index:2}
#header .sitelogo a {display:block;}
#header .sitelogo a img.on{display:none;}

#gnb{padding-right:160px;}
#gnb>ul {display:flex; justify-content:flex-end;margin:0 -58px;} 
#gnb>ul>li {position:relative; text-align:center; padding:0 58px;}
#gnb>ul>li>a {position:relative; display:inline-block; color:#fff; font-size:22px; line-height:100px; font-weight:600;transition:.1s;}

#wrapper.active #header .sitelogo a img.off{display:none;}
#wrapper.active #header .sitelogo a img.on{display:block;}
#wrapper.active #header #gnb>ul>li>a {color: var(--snd);}
#wrapper.active .btn-m-menu{background-image: url('/images/common/menu-on.png');}

#wrapper.head_st2 #header .sitelogo a img.off{display:none;}
#wrapper.head_st2 #header .sitelogo a img.on{display:block;}
#wrapper.head_st2 #header #gnb>ul>li>a {color: var(--snd);}
#wrapper.head_st2 .btn-m-menu{background-image: url('/images/common/menu-on.png');}

#wrapper.white #header .sitelogo a img.off{display:block !important;}
#wrapper.white #header .sitelogo a img.on{display:none !important;}
#wrapper.white #header #gnb>ul>li>a {color: #fff !important;}
#wrapper.white .btn-m-menu{background-image: url('/images/common/menu.png') !important;}
/* #sub #header{position:absolute;} */
/* #header.header-up{transform:translateY(-100%);} */


.contain {position:relative; max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;width:100%;}
#contArea {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

/* main */ 
.main-visual{position:relative;height:100vh;overflow:hidden;/* background-color:#ff6448; */background: #FF6347;}
.glassy-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255 255 255 / 0.05);backdrop-filter: blur(32px);pointer-events: none;}
.main-visual .contain{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;}
.main-visual .logo{margin-bottom:var(--size60);}
.main-visual .more{display:flex;justify-content:center;align-items:center;width:200px;height:60px;border-radius:30px;margin:0 auto;font-size:var(--fz20);font-weight:700;line-height:1.2em;color: #fff;border:2px solid #fff;transition:.3s;}
.main-visual .more:hover{border-color:var(--snd);background-color: #fff;color:var(--snd);}
.main-visual .scroll {position:absolute; bottom:40px; left:50%;text-align:center; z-index:50; animation:move_up_down 2s linear infinite;} 
@keyframes move_up_down { 
  0%,100%{ 
    transform:translate(-50%,0); 
  } 
  50% { 
    transform:translate(-50%,15px); 
  } 
}

.section{position:relative;}
.main-bg{transition:.3s;background-color:var(--snd);}
/* .sec1{height:100vh;transition:.3s;transform-origin: center center;}
.sec1 .contain{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:1780px;}
.sec1 .txt-group{display:flex;justify-content:center;gap:var(--size300);}
.sec1 .txt-group .txt{color: #fff;font-size:var(--fz64);font-weight:300;transition:.3s;line-height:1.2em;opacity:0;}
.sec1 .txt-group .txt strong{font-weight:600;}
.sec1 .txt-group .txt.od1{opacity:1;}


.sec2 {position: relative;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:var(--snd);}
.sec2 .inner{position:relative;width:100%;text-align:center;z-index:1;}
.sec2 .txt-wrap{display:inline-block;font-size:var(--fz126);font-weight:600;line-height:1em;color: #fff;text-align:center;transition:.3s;transform:translateX(480px);opacity:0;}
.sec2 .txt-wrap .txt1{transition:.3s;}
.sec2 .txt-wrap .txt2{opacity:0;white-space:nowrap;} */


/* sec1 (통합된 sec1+sec2) 스타일 */
.sec1{height:100vh;transition:.3s;transform-origin: center center;position: relative;overflow:hidden;}
.sec1 .contain{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:1780px;}
.sec1 .txt-group{display:flex;justify-content:center;gap:var(--size200);}
.sec1 .txt-group .txt{color: #fff;font-size:var(--fz52);font-weight:300;transition:.3s;line-height:1.2em;opacity:0;}
.sec1 .txt-group .txt strong{font-weight:600;}
.sec1 .txt-group .txt.od1{opacity:1;}

/* sec1에 통합된 sec2 요소들의 스타일 */
.sec1 .inner{position:relative;width:100%;text-align:center;z-index:1;opacity:0;height:100vh;display:flex;justify-content:center;align-items:center;}
.sec1 .txt-wrap{display:inline-block;font-size:var(--fz126);font-weight:600;line-height:1em;color: #fff;text-align:center;transition:.3s;transform:translateX(480px);opacity:0;}
.sec1 .txt-wrap .txt1{transition:.3s;}
.sec1 .txt-wrap .txt2{opacity:0;white-space:nowrap;}

.wave-group {opacity:0;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;justify-content: center;flex-direction: row;flex-wrap: wrap;}
.wave-group .wave {position: absolute;top: 50%;left: 50%;width: 430px;height: 430px;transform: translate(-50%, -50%);z-index: 3;}
.wave-group .wave:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 430px;
  height: 430px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform-origin: center;
  animation: wave var(--wave-animation-duration) infinite linear;
  opacity: 0;
}

/* 각 파동에 균등한 지연 시간 적용 */
.wave-group .wave.st1::before {
  animation-delay: 0s; /* 첫 번째 파동 */
}
.wave-group .wave.st2::before {
  animation-delay: calc(var(--wave-animation-duration) / 4); /* 1초 지연 (4초/4) */
}
.wave-group .wave.st3::before {
  animation-delay: calc(var(--wave-animation-duration) / 4 * 2); /* 2초 지연 (4초/4*2) */
}
.wave-group .wave.st4::before {
  animation-delay: calc(var(--wave-animation-duration) / 4 * 3); /* 3초 지연 (4초/4*3) */
}

/* 애니메이션 키프레임 최적화 */
@keyframes wave {
  0% {
    transform: scale(0);
    opacity: 0.7;
  }
  20% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.3;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}
}
.wave-group .circle {position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%);background: var(--snd);width: 430px;height: 430px;border-radius: 50%;z-index:4;will-change: transform;}

.scroll-top{position: absolute;right:15px;top:0;display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.6);border-radius:100%;font-size:20px;font-weight:200;display:none;}



.sec3{display:flex;justify-content:center;align-items:center;/* background-color: #fff; */overflow:hidden;position:relative;height:100vh;padding-top:100px;}

.sec3 .rotate1{position: absolute;left:-200px;top:-25%;animation: rotate-ani 30s linear infinite;z-index:1;}
.sec3 .rotate2{position: absolute;right:-183px;bottom:-55%;animation: rotate-ani 30s linear infinite;z-index:1;}
@keyframes rotate-ani{
	100% {
    	transform: rotate(360deg);
    }
}

.sec3 .contain{z-index:1;}
.flex-circle{display:flex;justify-content:center;opacity:0;}
.flex-circle .col{margin:0 -300px;}
.flex-circle .circle{position:relative;display:flex;justify-content:center;align-items:center;width:600px;height:600px;border-radius:100%;background-color: var(--snd);color: #fff;text-align:center;border:2px solid var(--pri);transition:.3s;}
.flex-circle .circle .inner{width:100%;transition:.3s;opacity:0;}
.flex-circle .circle .tit{margin-bottom:10px;font-size:var(--fz42);font-weight:700;line-height:1.2em;}
.flex-circle .circle .num{margin-bottom:30px;font-size:var(--fz100);font-weight:700;line-height:1em;font-family: 'Freesentation';}
.flex-circle .circle .tt{font-size:var(--fz24);font-weight:500;line-height:1.4em;}

.flex-circle .col.st2 .circle{background-color: #fff;}
.flex-circle .col.st2 .circle .tit{color:var(--dark);}
.flex-circle .col.st2 .circle .num{color:var(--snd);}
.flex-circle .col.st2 .circle .tt{color:var(--dark);}
.flex-circle .circle .rotate{position: absolute;left:0;top:0;right:0;bottom:0;border-radius:100%;animation: 10s circle_rotate linear infinite;opacity:0;}
.flex-circle .circle .rotate:after{content:'';width:24px;height:24px;background-color:var(--snd);border-radius:100%;position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);}

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

.sec4{height:100vh;display:flex;justify-content:center;align-items:center;padding-top:100px;}
.sec4 .contain{max-width:1460px;}
.main-work{opacity:0;width:100%;}
.main-work .title{margin-bottom:35px;font-size:var(--fz66);text-align:center;font-weight:700;line-height:1.2em;color: #fff;}
.cate-slider .cate{margin-bottom:40px;}
.cate-slider .cate ul{display:flex;justify-content:center;gap:20px;}
.cate-slider .cate ul li a{display:inline-flex;justify-content:center;align-items:center;min-width:140px;height:42px;border-radius:21px;padding:0 15px;border:1px solid #fff;color: #fff;font-size:var(--fz20);font-weight:700;line-height:1.2em;transition:.1s;}
.cate-slider .cate ul li.active a{background-color:var(--snd);border-color:var(--snd);}
.cate-slider .slider{position:relative;padding:0 160px;}
.cate-slider .slider .slick-list{margin:0 -20px;}
.cate-slider .slider .item{padding:0 20px;}
.cate-slider .slider .item a{display:block;position:relative;}
.cate-slider .slider .item .pic {position:relative; height:0; padding-bottom:79.81%; overflow:hidden;}
.cate-slider .slider .item .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.cate-slider .slider .item .hover{display:flex;align-items:flex-end;position: absolute;left:0;top:0;width:100%;height:100%;background-color:var(--snd);transition:.3s;opacity:0;}
.cate-slider .slider .item .hover .txt{width:100%;padding:25px 40px;color: #fff;line-height:1.4em;}
.cate-slider .slider .item .hover .txt .type{margin-bottom:10px;font-weight:500;letter-spacing:0;line-height:1.4em;}
.cate-slider .slider .item .hover .txt .tit{font-size:var(--fz28);font-weight:700;line-height:1.4em;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;}
.cate-slider .slider .item a:hover .hover{opacity:1;}
.cate-slider .slider .slick-arrow{display:block;position: absolute;width:31px;height:56px;top:50%;transform:translateY(-50%);background-color:transparent;background-repeat:no-repeat;background-size:contain;border:none;font-size:0;transition:.1s;}
.cate-slider .slider .slick-prev{left:0;background-image: url('/images/main/work-prev.png');background-position:0 50%;}
.cate-slider .slider .slick-next{right:0;background-image: url('/images/main/work-next.png');background-position:100% 50%;}
.main-work .btn-wrap{margin-top:55px;text-align:center;}
.main-work .btn-more{display:inline-flex;justify-content:center;align-items:center;padding:0 60px;height:60px;border-radius:30px;border:2px solid var(--snd);color:var(--snd);transition:.3s;font-size:var(--fz20);font-weight:700;line-height:1.2em;}
.main-work .btn-more:hover{background-color:var(--snd);border-color:var(--snd);color: #fff;}

.sec5{height:100vh;display:flex;justify-content:center;align-items:center;background-color: #000;color: #fff;text-align:center;position:relative;}
.sec5 .tit{font-size:var(--fz72);font-weight:700;line-height:1.03em;}
.sec5 .tt{margin-top:40px;font-size:var(--fz40);line-height:1.2em;}

.typing-container {
  display: inline-block;
  position: relative;
}

.typing-container .tit {
  position: relative;
}

/* 깜빡이는 커서 스타일 */
.typing-container .tit::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 0;
  height: 100%;
  width: 2px; /* 커서 너비 */
  background-color: #fff; /* 커서 색상 - 사이트 테마 색상과 동일하게 설정 */
  animation: cursor-blink 0.7s infinite; /* 깜빡임 애니메이션 */
}

/* 타이핑이 끝난 후 커서 숨김 효과 */
/* .typing-container.typing-done .tit::after {
  display: none;
} */

/* 커서 깜빡임 애니메이션 */
@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.doc-contact .contain{max-width:1460px;}
.doc-contact .intro{display:flex;justify-content:center;align-items:center;height:100vh;text-align:center;}
.doc-contact .intro .tit{font-size:var(--fz126);font-weight:700;line-height:1.03em;color:var(--snd);opacity:0;transform:translateY(60px)}
.doc-contact .intro .wrap{opacity:0;transform:translateY(60px)}
.doc-contact .intro .tt{margin:50px 0 25px;font-size:var(--fz32);line-height:1.2em;color:var(--snd);}
.doc-contact .intro .more-arr{display:inline-block;}
.doc-contact .intro .more-arr img{height:60px;}
.doc-contact .intro .more-arr:hover {animation: up_down 1.5s ease-in-out infinite;}
@keyframes up_down { 
  0%, 100% { 
    transform: translateY(0); /* Y축(상하) 이동으로 변경 */
  } 
  50% { 
    transform: translateY(-15px); /* 위로 이동하도록 음수값 사용 */
  } 
}
.doc-contact .content{display:flex;align-items:center;padding:var(--size100) 0;max-width:1200px;margin:0 auto;}
.doc-contact .content form{width:100%;}
.doc-contact .content .input-area{margin-bottom:60px;}
.doc-contact .content .input-area p{margin-bottom:40px;font-size:var(--fz26);font-weight:600;letter-spacing:0;color:var(--snd);line-height:1.3em;}
.doc-contact .content .input-area p:last-child{margin-bottom:0;}
.doc-contact .content .input-area input.input{height:var(--fz32);background-color:transparent;border:none;text-align:center;font-family:'Freesentation';font-weight:500;color: var(--snd);font-size:var(--fz26);background:none;padding:0 15px;}
.doc-contact .content .input-area input.input::placeholder{color:rgba(245,110,74,.4);}
.doc-contact .content .input-area input.input:focus{outline:none;}
.doc-contact .content .input-area p .group .wd1{max-width:380px;width:100%;}
.doc-contact .content .input-area p .group .wd2{max-width:270px;width:100%;}
.doc-contact .content .input-area p .group .wd3{max-width:480px;width:100%;}
.doc-contact .content .input-area p .group .wd4{max-width:200px;width:100%;}
.doc-contact .content .input-area p .group .wd5{max-width:380px;width:100%;}
.doc-contact .content .input-area p .group .wd6{max-width:370px;width:100%;}

.file-wrap{display:flex;align-items:center;margin-top:40px;}
.file-wrap .btn{display:inline-flex;align-items:center;padding:0 20px;height:50px;border-radius:32px;cursor: pointer;margin-right:20px;color: #f56e4a;border:1px solid var(--snd);background-color: #fff;font-size:var(--fz26);font-weight:600;letter-spacing:0;}
.file-wrap .upload-name{min-width:0;width:1%;flex:1 1 auto;padding:0 !important;text-align:left !important;pointer-events:none;}
.file-wrap input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}

.doc-contact .btn-wrap{display:flex;justify-content:center;}
.doc-contact .btn-wrap .btn{display:flex;justify-content;align-items:center;background-color:transparent;border:none;}
.doc-contact .btn-wrap .btn .txt{display:inline-flex;align-items:center;padding:0 30px;height:60px;border-radius:32px;margin-right:20px;background-color:var(--snd);color: #fff;font-size:var(--fz32);font-weight:600;line-height:1.2em;}
.doc-contact .btn-wrap .btn .arr{display:flex;align-items:center;}




.real-cont {padding:0 0 var(--size150);}
.real-cont.none{padding-bottom:0;}

/* footer */
#footer {background-color: #000;font-size:var(--fz15);line-height:1.5em;color: #fff;}
#footer .contain{max-width:1460px;}
#footer .foot-info{padding:40px 0;border-bottom:1px solid #333;}
#footer .foot-info .contain{display:flex;align-items:center;}
#footer .foot-info .logo{margin-right:40px;}
#footer .foot-info address {min-width:0;width:1%;flex:1 1 auto;font-style:normal;margin-bottom:-5px;margin-right:20px;}
#footer .foot-info address .row{display:flex;flex-wrap:wrap;margin:0 -20px 5px;}
#footer .foot-info address .row:last-child{margin-bottom:0;}
#footer .foot-info address .row dl{display:flex;padding:0 20px;margin-bottom:5px;font-weight:500;}
#footer .foot-info address .row dl dt{margin-right:10px;color: #878787;}
#footer .foot-info .sns ul{display:flex;gap:36px;}
#footer .foot-btm{padding:25px 0;}
#footer .foot-btm .foot-menu ul{display:flex;gap:30px;}
#footer .foot-btm .foot-menu ul li a{display:block;position:relative;padding-left:27px;}
#footer .foot-btm .foot-menu ul li a:before{content:'';position: absolute;left:0;top:.1em;width:17px;height:17px;background:url('/images/common/foot-link.png')no-repeat 0 50%/contain;}

.quick{position: fixed;left:0;width:100%;bottom:30px;padding:0 30px;z-index:100;transition:.3s;max-width:1780px;width:100%;pointer-events:none;display:flex;}
.quick ul li{margin-bottom:20px;}
.quick ul li:last-child{margin-bottom:0;}
.quick ul li a{display:flex;align-items: center;width:60px;height:60px;border-radius:60px;background-color:var(--snd);color: #fff;transition:.6s;overflow:hidden;pointer-events:auto;}
.quick ul li a .ic{display:flex;justify-content:center;align-items:center;flex-shrink: 0;width:60px;}
.quick ul li a .ic img{height:30px;}
.quick ul li a p{white-space: nowrap;/* margin-left:30px; */opacity: 0;transform: translateX(-20px);transition: opacity 0.3s ease, transform 0.3s ease;font-size:var(--fz18);font-weight:600;line-height:1.2em;}
.quick ul li a:hover{/* padding:0 25px; */width:auto;padding-right:25px;}
/* .quick ul li a:hover .ic{width:auto;} */
.quick ul li a:hover p{opacity: 1;transform: translateX(0);}

#main .quick{opacity:0;}
#main .quick.visible {opacity: 1;visibility: visible;}


/* for mobile */
.only-mobile {display:none;}
.btn-m-menu {display:block; position:absolute; top:50%; margin-top:-11px; right:30px; width:28px; height:22px;  text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out;background:url('/images/common/menu.png')no-repeat 100% 50%/contain;}
.mobile-navigation {display:flex;justify-content:center;align-items:center;position:fixed; top:0; right:0; width:100%; height:100vh;/*  overflow:auto; */ transition:.1s ease-in-out; /* -ms-transform:translateY(-100%); transform:translateY(-100%); */ background-color:var(--snd); z-index:-100;opacity:0;}
.mobile-navigation:after{content:'';position: absolute;right:0;bottom:0;width:1216px;height:403px;background:url('/images/common/menu-bg.png')no-repeat 100% 50%/contain;}
.mobile-navigation .head{position:absolute;left:0;top:0;right:0;}
.mobile-navigation .head .contain{display:flex;justify-content:space-between;align-items:center;max-width:1780px;width:100%;height:100px;}
.mobile-navigation .close {display:block;width:32px;height:32px;background:url('/images/common/menu-close.png')no-repeat 100% 50%/contain;}

.mobile-navigation .nav-menu{position:relative;z-index:1;width:100%;padding:0 30px;}
.mobile-navigation .nav-menu>ul>li{margin-bottom:var(--size30);text-align:center;}
.mobile-navigation .nav-menu>ul>li:last-child{margin-bottom:0;}
.mobile-navigation .nav-menu>ul>li>a{font-size:var(--fz72);font-weight:700;line-height:1.2em;color:rgba(255,255,255,.3);transition:.3s;}
.mobile-navigation .nav-menu>ul>li>a:hover{color: #fff;}


/* .mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:201;} */

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {/* -ms-transform:translateY(0); transform:translateY(0); */z-index:202;opacity:1;}
html.menu-opened .mobile-overlay {display:block;}



@media screen and (max-width: 768px) {
  html, body {
    overscroll-behavior-y: none;
    -webkit-overscroll-behavior-y: none;
  }
  
  /* 섹션 높이 정확히 설정 */
  .section {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
  }
}