@charset "utf-8";

.keyword-list {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; width:45%; margin-top:-15px; font-weight:300;}
.keyword-list > li {margin-top:15px; padding:6px 20px; border:1px solid var(--border-color-white);}
.keyword-list > li:not(:last-child) {margin-right:10px;}
@media screen and (max-width: 767px) {
	.keyword-list {width:80%; font-size:1.3rem;}
	.keyword-list > li {padding:5px 15px;}
}

/* [S] 2025-04-18, 김승희 : 위치 이동으로 인한 주석처리 */
/* .main-sect-cont {position:relative; z-index:1; width:100%; }
.main-sect-cont > .txt {font-size:1.8rem; line-height:1.75; letter-spacing:-1px;}
.main-sect-cont > .btn-wrap {margin-top:70px;}
@media screen and (max-width: 767px) {
	.main-sect-cont > .txt {font-size:1.4rem;}
	.main-sect-cont > .btn-wrap {margin-top:35px;}
} */
/* // [E] 2025-04-18, 김승희 : 위치 이동으로 인한 주석처리 */

/* video */
.visual-video-wrap {position:relative; height:calc(100vh + 180px); min-height:950px;}
.visual-video-wrap .video-wrap {width:100%; height:100%; background:url("/theme/v1/resources/img/main/bg_visual_test.png") center / cover no-repeat;}
.visual-video-wrap .cont-wrap {position:absolute; top:0; left:0; width:100%; height:100%;}
.visual-video-wrap .main-tit-wrap {margin-top:360px; opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.visual-video-wrap .main-txt-wrap {opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.5s;}
.visual-video-wrap hr {margin:45px 0 50px; opacity:0; transform:translateY(100px); transition:all 0.75s ease 1s;}
.visual-video-wrap .keyword-list {opacity:0; transform:translateY(100px); transition:all 0.75s ease 1s;}
.on.visual-video-wrap .main-tit-wrap,
.on.visual-video-wrap .main-txt-wrap,
.on.visual-video-wrap hr,
.on.visual-video-wrap .keyword-list {opacity:1; transform:translateY(0);}
@media screen and (max-width: 767px) {
	.visual-video-wrap {height:100vh; min-height:667px;}
	.visual-video-wrap .main-tit-wrap {margin-top:170px;}
	.visual-video-wrap hr {margin:30px 0 40px;}
}

/* 회사 소개 */
.about-hotissue-wrap {background:url("/theme/v1/resources/img/main/bg_about_hotissue.png") bottom center / 100% 550px no-repeat;}
.about-hotissue-wrap .inner {position:relative; padding-top:150px; padding-bottom:250px;}
.about-hotissue-wrap .inner .bg-h {position:absolute; top:160px; left:-165px; width:420px; height:284px; background:url("/theme/v1/resources/img/common/bg_h.png") center / cover no-repeat; opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.75s;}
.about-hotissue-wrap .inner .bg-paper {position:absolute; bottom:250px; right:30px; width:830px; height:500px; background:url("/theme/v1/resources/img/main/bg_paper.png") center / cover no-repeat; opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.about-hotissue-wrap .inner .bg-sign {position:absolute; top:170px; right:-310px; width:300px; height:400px; background:url("/theme/v1/resources/img/main/bg_sign.png") center / cover no-repeat; opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.25s;}
.about-hotissue-wrap .main-sect-cont {opacity:0; transform:translateY(100px); transition:all 0.75s ease 1s;}
.about-hotissue-wrap .main-sect-cont .sect-tit-wrap {margin-top:180px;}
.about-hotissue-wrap .main-sect-cont .btn-wrap {margin-bottom:90px;}
.on.about-hotissue-wrap .inner .bg-h,
.on.about-hotissue-wrap .inner .bg-paper,
.on.about-hotissue-wrap .inner .bg-sign,
.on.about-hotissue-wrap .main-sect-cont {opacity:1; transform:translateY(0);}
@media screen and (max-width: 1400px) {
	.about-hotissue-wrap .inner .bg-paper {right:190px; width:630px; height:400px;}
	.about-hotissue-wrap .inner .bg-sign {right:-50px; width:200px; height:300px;}
}
@media screen and (max-width: 1100px) {
	.about-hotissue-wrap .inner .bg-paper {bottom:160px; right:90px; width:530px; height:350px;}
	.about-hotissue-wrap .inner .bg-sign {top:320px; right:-100px; width:150px; height:250px;}
}
@media screen and (max-width: 767px) {
	.about-hotissue-wrap {background-position:0px 100%; background-size:170% 350px;}
	.about-hotissue-wrap .inner {padding-top:35px; padding-bottom:540px;}
	.about-hotissue-wrap .inner .bg-h {top:35px; left:-160px; width:350px; height:237px; transition:all 0.75s ease;}
	.about-hotissue-wrap .inner .bg-paper {bottom:130px; right:170px; width:535px; height:322px; transition:all 0.75s ease 0.75s;}
	.about-hotissue-wrap .inner .bg-sign {top:unset; bottom:260px; right:0; width:137px; height:250px; transition:all 0.75s ease 1s;}
	.about-hotissue-wrap .main-sect-cont {transition:all 0.75s ease 0.25s;}
	.about-hotissue-wrap .main-sect-cont .sect-tit-wrap {margin-top:100px;}
	.about-hotissue-wrap .main-sect-cont .btn-wrap {margin-bottom:0;}
}
@media screen and (max-width: 480px) {
	.about-hotissue-wrap .inner .bg-paper {right:90px;}
	.about-hotissue-wrap .inner .bg-sign {right:-80px;}
}

/* 마케팅서비스 */
.marketing-service-wrap {background:url("/theme/v1/resources/img/main/bg_marketing_service.png") center / cover no-repeat;}
.marketing-service-wrap .inner {padding-top:150px; padding-bottom:150px;}
.marketing-service-wrap .img-wrap {width:100%; height:680px; background:url("/theme/v1/resources/img/main/img_marketing_service.png") center left / auto 100% no-repeat; opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.marketing-service-wrap .main-sect-cont {opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.5s;}
.on.marketing-service-wrap .img-wrap {opacity:1; animation:shakingTopBottom 3s linear infinite 0.75s; transform:translateY(0);}
.on.marketing-service-wrap .main-sect-cont {opacity:1; transform:translateY(0);}
@media screen and (max-width: 1200px) {
	.marketing-service-wrap .img-wrap {height:540px;}
}
@media screen and (max-width: 1100px) {
	.marketing-service-wrap .img-wrap {height:500px;}
}
@media screen and (max-width: 1000px) {
	.marketing-service-wrap.type-half .left-wrap {width:40%;}
	.marketing-service-wrap.type-half .right-wrap {width:60%;}
	.marketing-service-wrap .img-wrap {height:320px;}
}
@media screen and (max-width: 800px) {
	.marketing-service-wrap.type-half .left-wrap {width:35%;}
	.marketing-service-wrap.type-half .right-wrap {width:65%;}
	.marketing-service-wrap .img-wrap {height:240px;}
}
@media screen and (max-width: 767px) {
	.marketing-service-wrap {background:url("/theme/v1/resources/img/main/bg_marketing_service_mo.png") bottom center / 100% auto no-repeat;}
	.marketing-service-wrap.type-half {flex-direction:column-reverse!important;}
	.marketing-service-wrap.type-half .left-wrap {width:100%;}
	.marketing-service-wrap.type-half .right-wrap {width:100%;}
	.marketing-service-wrap.type-half .left-wrap .inner {padding-top:0; padding-bottom:100px;}
	.marketing-service-wrap.type-half .right-wrap .inner {padding-top:125px; padding-bottom:60px;}
	.marketing-service-wrap .img-wrap {height:379px; background-position:center; transition:all 0.75s ease 0.5s;}
	.marketing-service-wrap .main-sect-cont {transition:all 0.75s ease;}
	.on.marketing-service-wrap .img-wrap { animation:shakingTopBottom 3s linear infinite 1.25s; }
}

/* 비용안내 */
.pricing-guide-wrap .inner {padding-top:180px; padding-bottom:200px;} 
.pricing-guide-wrap .left-wrap {height:720px; background:url("/theme/v1/resources/img/main/bg_pricing_guide.png") center / cover no-repeat; opacity:0; transform:translateY(200px); transition:all 1s ease;}
.pricing-guide-wrap .right-wrap {height:720px; opacity:0; transform:translateY(200px); transition:all 1s ease 0.25s;}
.pricing-guide-wrap .sect-txt-wrap {flex-wrap:wrap;}
.pricing-guide-wrap .right-wrap .img-wrap {width:100%; height:100%; background:url("/theme/v1/resources/img/main/img_pricing_guide.png") center / cover no-repeat;}
.on.pricing-guide-wrap .left-wrap,
.on.pricing-guide-wrap .right-wrap {opacity:1; transform:translateY(0);}
@media screen and (max-width: 767px) {
	.pricing-guide-wrap .inner {padding-top:125px;} 
	.pricing-guide-wrap .left-wrap {height:462px;}
	.pricing-guide-wrap .right-wrap {height:360px;}
}

/* 포트폴리오 */
.design-portfolio-wrap .inner {padding-top:180px;}
.design-portfolio-wrap .main-sect-cont {opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.design-portfolio-wrap .portfolio-slider {position:relative; right:0; left:calc(50% - 650px); width:calc(50% + 650px); padding-bottom:50px; margin:0; opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.25s;}
.design-portfolio-wrap .portfolio-slider .swiper-container {padding-right:50px; line-height:0;}
.design-portfolio-wrap .portfolio-slider .swiper-container .swiper-slide a {display:inline-block; position:relative; width:100%;}
.design-portfolio-wrap .portfolio-slider .swiper-container .swiper-slide a .txt-wrap {position:absolute; left:0; right:0; top:calc(100% - 50px); bottom:0; width:100%; padding:10px 20px; background:rgba(0, 0, 0, 0.7); font-size:1.8rem; line-height:1.8; transition: all 0.3s ease;}
.design-portfolio-wrap .portfolio-slider .swiper-container .swiper-slide a:hover .txt-wrap {top:calc(100% - 100px);}
.design-portfolio-wrap .portfolio-slider .swiper-container .swiper-notification {position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:-1000;}
.design-portfolio-wrap .portfolio-slider .swiper-pagination-progressbar {position:initial; margin:40px 0 0; height:3px; background:#333333;}
.design-portfolio-wrap .portfolio-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color:var(--color-primary);}
.design-portfolio-wrap .sect-txt-wrap .right-wrap {line-height:0;}
.design-portfolio-wrap .sect-txt-wrap .right-wrap .swiper-button-prev, 
.design-portfolio-wrap .sect-txt-wrap .right-wrap .swiper-button-next {position:static; display:inline-block; margin:0; width:40px; height:40px;}
.design-portfolio-wrap .sect-txt-wrap .right-wrap .swiper-button-prev {border:1px solid var(--color-white); background:url("/theme/v1/resources/img/common/ico_arrow_detail_white.png") center / 18px auto no-repeat; transform:rotate(180deg);}
.design-portfolio-wrap .sect-txt-wrap .right-wrap .swiper-button-next {margin-left:5px; border:1px solid var(--color-white); background:url("/theme/v1/resources/img/common/ico_arrow_detail_white.png") center / 18px auto no-repeat;}
.on.design-portfolio-wrap .main-sect-cont,
.on.design-portfolio-wrap .portfolio-slider {opacity:1; transform:translateY(0);}
@media screen and (max-width: 1400px) {
	.design-portfolio-wrap .portfolio-slider {left:50px; width:100%;}
}
@media screen and (max-width: 767px) {
	.design-portfolio-wrap .inner {padding-top:125px;}
	.design-portfolio-wrap .portfolio-slider {left:15px; width:calc(100% - 15px);}
	.design-portfolio-wrap .portfolio-slider .swiper-container {padding-right:110px;}
	.design-portfolio-wrap .portfolio-slider .swiper-container .swiper-slide a .txt-wrap {top:100% - 35px); font-size:1.4rem;}
	.design-portfolio-wrap .sect-txt-wrap .right-wrap {margin:40px 0 25px;}
	.design-portfolio-wrap .sect-txt-wrap .right-wrap .swiper-button-prev,
	.design-portfolio-wrap .sect-txt-wrap .right-wrap .swiper-button-next {width:35px; height:35px;}
}

/* 클라이언트 */
.business-partners-wrap {}
.business-partners-wrap .inner {padding-top:180px;}
.business-partners-wrap .main-sect-cont {opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.partners-rolling-wrap {position:relative; overflow:hidden; width:100vw; max-width:2560px; margin:100px auto 0; opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.25s;}
.partners-rolling-wrap::before,
.partners-rolling-wrap::after {content:""; position:absolute; top:0; z-index:1; display:inline-block; width:20%; max-width:400px; height:100%;}
.partners-rolling-wrap::before {left:0; background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);}
.partners-rolling-wrap::after {right:0; background:linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);}
.partners-rolling-wrap > div {display:flex; flex-direction:row; width:200%; margin:0 auto;}
.partners-rolling-wrap > div:not(:last-child) {margin-bottom:30px;}

/* [S] 2025-04-18, 김승희 : 메인 고객사 롤링 수정 */
.partners-rolling-wrap > div:nth-child(n) .partners-list.origin {animation:rollingRightToLeftOriginal 120s linear infinite;}
.partners-rolling-wrap > div:nth-child(n) .partners-list.clone {animation:rollingRightToLeftClone 120s linear infinite;} 
.partners-rolling-wrap > div:nth-child(2n) .partners-list.origin {animation:rollingLeftToRightOriginal 120s linear infinite;} 
.partners-rolling-wrap > div:nth-child(2n) .partners-list.clone {animation:rollingLeftToRightClone 120s linear infinite;} 
/* // [E] 2025-04-18, 김승희 : 메인 고객사 롤링 수정 */

.partners-rolling-wrap .partners-list {display:flex; flex-direction:row;}
.partners-rolling-wrap .partners-list > li {display:flex; flex-direction:column; justify-content:center; align-items:center; width:260px; height:80px; padding:20px; margin-left:20px; border-radius:20px; background-color:var(--color-white); color:var(--color-black);}
.partners-rolling-wrap .partners-list > li > img {height:100%; object-fit:contain;}

/* [S] 2025-04-18, 김승희 : 수정으로 인한 삭제 */
/* .partners-rolling-wrap .partners-first-wrap .partners-list.origin,
.partners-rolling-wrap .partners-third-wrap .partners-list.origin {animation:rollingRightToLeftOriginal 120s linear infinite;}
.partners-rolling-wrap .partners-first-wrap .partners-list.clone,
.partners-rolling-wrap .partners-third-wrap .partners-list.clone {animation:rollingRightToLeftClone 120s linear infinite;}
.partners-rolling-wrap .partners-second-wrap .partners-list.origin,
.partners-rolling-wrap .partners-fourth-wrap .partners-list.origin {animation:rollingLeftToRightOriginal 120s linear infinite;}
.partners-rolling-wrap .partners-second-wrap .partners-list.clone,
.partners-rolling-wrap .partners-fourth-wrap .partners-list.clone {animation:rollingLeftToRightClone 120s linear infinite;} */
/* // [E] 2025-04-18, 김승희 : 수정으로 인한 삭제 */

.on.business-partners-wrap .main-sect-cont,
.on.business-partners-wrap .partners-rolling-wrap {opacity:1; transform:translateY(0);} 
@media screen and (max-width: 767px) {
	.business-partners-wrap .inner {padding-top:75px;}
	.partners-rolling-wrap::before,
	.partners-rolling-wrap::after {display:none;}
	.partners-rolling-wrap {margin-top:60px;}
	.partners-rolling-wrap > div:not(:last-child) {margin-bottom:20px;}
	.partners-rolling-wrap .partners-list > li {width:180px; height:60px; padding:20px 25px; margin-left:15px;}
}

/* 소셜네트워크 */
.instagram-moments-wrap {}
.instagram-moments-wrap .inner {margin-top:180px; margin-bottom:200px;}
.instagram-moments-wrap .main-sect-cont {opacity:0; transform:translateY(100px); transition:all 0.75s ease;}
.instagram-moments-wrap .right-wrap .insta-link {color:var(--font-color-gray02); font-size:1.6rem;}
.instagram-moments-wrap .gallery-list {display:flex; flex-wrap:wrap; flex-direction:row; width:100%; margin-top:40px; opacity:0; transform:translateY(100px); transition:all 0.75s ease 0.25s;}
.instagram-moments-wrap .gallery-list > li {position:relative; width:calc((100% - 100px) /6); padding-top:25px; padding-bottom:25px; /* padding-bottom:50px; */ margin-right:20px; line-height:0;}
.instagram-moments-wrap .gallery-list > li > img {/* height:calc(100% + 50px); object-fit:cover; */}
.instagram-moments-wrap .gallery-list > li:nth-child(n+7) {margin-top:20px;}
.instagram-moments-wrap .gallery-list > li:nth-child(6n) {margin-right:0;}
.instagram-moments-wrap .gallery-list > li::after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.15); opacity:0; transition:all 0.25s ease;}
.instagram-moments-wrap .gallery-list > li:hover::after {opacity:1;}
.on.instagram-moments-wrap .main-sect-cont,
.on.instagram-moments-wrap .gallery-list {opacity:1; transform:translateY(0);} 
@media screen and (max-width: 767px) {
	.instagram-moments-wrap .inner {margin-top:125px; margin-bottom:130px;}
	.instagram-moments-wrap .right-wrap {margin-top:10px; line-height:1;}
	.instagram-moments-wrap .right-wrap .insta-link {font-size:1.2rem;}
	.instagram-moments-wrap .gallery-list {justify-content:center; margin-top:20px;}
	.instagram-moments-wrap .gallery-list > li {width:calc((100% - 20px) /3); max-width:200px; margin-right:10px;}
	.instagram-moments-wrap .gallery-list > li:nth-child(n+7) {margin-top:0px;}
	.instagram-moments-wrap .gallery-list > li:nth-child(6n) {margin-right:10px;}
	.instagram-moments-wrap .gallery-list > li:nth-child(n+4) {margin-top:10px;}
	.instagram-moments-wrap .gallery-list > li:nth-child(3n) {margin-right:0;}
}