@charset "utf-8";
/* Pretendard 한글폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
/* Tenor Sans 영문폰트 - 포인트*/
@font-face {
  font-family: 'Tenor Sans', sans-serif;
  src: url('../fonts/tenorsans/TenorSans-Regular.ttf') format("woff");
}
/* 초기설정  */
*{margin: 0;padding: 0;box-sizing: border-box;}
html,body {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
font-weight: 500;margin: 0;padding: 0;scroll-behavior: smooth;overflow-x: hidden;position: relative;width: 100vw;height: 100%;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */}
.scroll_body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}
ul,li{list-style: none;margin: 0;}
a{text-decoration: none;color: #000;cursor: pointer;}
section{margin: 10%;}
.title{font-size: 80px;position: relative;font-weight: 800;}
.sub_title{font-weight: 600;margin-top: 20px;font-size: 20px;word-break: keep-all;}
.point_txt{font-family: 'Tenor Sans', sans-serif;}
.scroll_body{width: 100%;height: 100vh;}
.scrollbar-track.scrollbar-track-y{display: none;}
/*--------------------- main_visual 시작--------------------- */
.main_visual{width: 100vw;height: 100vh;overflow: hidden;position: relative;min-width: 375px;}
.main_visual .fix_header{width: 100%;height: 100px;display: flex;justify-content: flex-end;
  align-items: center;top:0;left:0%;z-index: 1;position: relative;}
.main_visual .fix_header .header_logo{display: block;width: 80px;height: 80px;position: absolute;
  top: 50%;left: 20px;transform: translateY(-50%);}
.main_visual .fix_header .header_logo h1{background: url(../img/logo_w.png)no-repeat;background-size: contain;
  width: 100%;height: 100%;}
.main_visual .fix_header .download{color: #fff;border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);display: block;width: 150px;
height: 45px; line-height: 45px;text-align: center;border-radius: 50px;margin-right: 20px;overflow: hidden;}
.main_visual .fix_header .download span{display: block;transition: 0.3s cubic-bezier(0, 0, 0.2, 1);font-size: 14px;}
.main_visual .fix_header .download span:last-child{background-color: rgba(255, 255, 255, 0.2);color:#fff;}
.main_visual .fix_header .download:hover {border: 1px solid  rgba(255, 255, 255, 0.2);}
.main_visual .fix_header .download:hover span{transform: translateY(-45px);}
.main_visual .bg_box{width: 1000px; height: 500px;top:50%;left: 50%;transform: translate(-50%,-50%);background-color: #000;z-index: 0;
position: absolute;border-radius: 50px;animation: boxfull 0.5s both;animation-delay: 1s;}
@keyframes boxfull{100%{width: 100%; height: 100%; border-radius: 0;}}
.main_visual .bg_txt{position: absolute;top: 21%;transform: translateY(-50%);white-space: nowrap;will-change: transform;} 
.main_visual .bg_txt .content{font-size: 440px;z-index: 1;position: absolute;font-weight: 900;color:transparent;
animation: marquee 120s linear infinite;-webkit-text-stroke: 1px transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: transparent;
animation-delay: 1.1s;}
@keyframes marquee{
  0%{transform: translateX(0%);-webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(255, 255, 255, 0.3);}
  100%{transform: translateX(-50%);-webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(255, 255, 255, 0.3);}} 
.main_visual .visual_txt{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);text-align: center;color:#fff;cursor:auto;}
.main_visual .visual_txt h2{font-size: 70px;font-weight: 800;margin-bottom: 10px;position: relative;}
.main_visual .visual_txt h2.to_left{animation: toleft 1s cubic-bezier(0, 0, 0.2, 1) both;opacity: 0;}
@keyframes toleft{
  0%{transform: translateX(200px);}
  100%{transform: translateX(0px);filter: blur(0);opacity: 1}}
.main_visual .visual_txt h2.to_right{animation: toright 1s cubic-bezier(0, 0, 0.2, 1) both;opacity: 0;}
@keyframes toright{
  0%{transform: translateX(-200px);}
  100%{transform: translateX(0px);filter: blur(0);opacity: 1}}
.main_visual .visual_txt h2 span{background: url(../img/agency.svg)no-repeat;width: 50px;height: 50px;background-size: contain;
  background-position: right;display:inline-block;position: absolute;top:20%; animation: turn 5s linear infinite;}
@keyframes turn{
  0%{transform: rotate(0);}
  100%{transform:rotate(365deg);}
}
.main_visual .scroll{position: absolute;bottom: 6%;left:50%;transform: translateX(-50%);color:#fff;
font-size: 14px;}
.main_visual .scroll::after{content: "";width: 1px;height: 9px;background: #fff;position: absolute; bottom: -25px;left: 49%;
transform: rotate(-45deg) translateX(-50%);}
.main_visual .scroll::before{content: "";width: 1px;height: 9px;background: #fff;position: absolute; bottom: -25px;left: 53%;
  transform: rotate(45deg) translateX(-50%);}
.main_visual .copy{color:#999;z-index: 1;position: absolute;bottom: 3%;left: 20px;font-size: 14px;}
/*--------------------- about 시작 --------------------- */
.about{position: relative;height: auto;margin-top: 300px;}
.about .title{text-align: center;}
.about .sub_title{text-align: center;}
.about .about_box{display: flex;margin-top:150px;}
.about .about_box .box{width: 100%;padding: 5%;}
.about .about_box .box span{font-size: 18px;display: block;margin-bottom: 3px;font-weight: bold;
position: relative; word-break: keep-all;}
.about .about_box .box span::before{content: "";background: url(../img/about_w_\ \(1\).png)no-repeat center;
  background-size: cover;width: 50px;height: 50px; position: absolute;top: -350%; left: 0; 
  animation: trun 5s linear infinite;}
.about .about_box .box strong{font-size:24px;}
.about .about_box .box p{margin-top: 20px;}
@keyframes trun{
  0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}}
.about .about_box .box_2{animation-delay: 0.5s;}
.about .about_box .box_3{animation-delay: 1s;}
.about .about_box .box_1 span::before{filter: invert(1);}
.about .about_box .box_2 span::before{background: url(../img/about_\ \(2\).png)no-repeat center;}
.about .about_box .box_3 span::before{background: url(../img/about_\ \(3\).png)no-repeat center;}
/*--------------------- wedo 시작 --------------------- */
.wedo{margin-top: 300px;position: relative;}
.wedo .sub_title{margin-left:5px;}
.wedo .object{width: 300px;height: 300px;
position: absolute;top:-55px;right: -35px;background-size: cover;opacity: 0.03;}
.wedo .wedo_box{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;margin-top:50px;width: 100%;}
.wedo .wedo_box .box{border: 1px solid #eee;border-right: none; position: relative;height: 280px;
;border-bottom: none;overflow: hidden;}
.wedo .wedo_box .box:hover{border: none;}
.wedo .wedo_box .box::before{content: "";width: 100%;height: 100%;position: absolute;top: 0;background-color: #00000080;
opacity: 0;}
.wedo .wedo_box .box:hover::before{opacity: 1;}
.wedo .wedo_box .box:nth-child(1){animation-delay: 0.1s;}
.wedo .wedo_box .box:nth-child(2){animation-delay: 0.2s;}
.wedo .wedo_box .box:nth-child(3){animation-delay: 0.3s;}
.wedo .wedo_box .box:nth-child(4){animation-delay: 0.4s;}
.wedo .wedo_box .box:nth-child(5){animation-delay: 0.5s;}
.wedo .wedo_box .box:nth-child(6){animation-delay: 0.6s;}
.wedo .wedo_box .box:nth-child(7){animation-delay: 0.7s;}
.wedo .wedo_box .box:nth-child(8){animation-delay: 0.8s;}
.wedo .wedo_box .box:nth-child(9){animation-delay: 0.9s;}
.wedo .wedo_box .box:nth-child(10){animation-delay: 1s;}
.wedo .wedo_box .box:nth-child(5),.wedo .wedo_box .box:nth-child(10){border-right: 1px solid #eee;}
.wedo .wedo_box .box:nth-child(6),.wedo .wedo_box .box:nth-child(7),.wedo .wedo_box .box:nth-child(8),
.wedo .wedo_box .box:nth-child(9),.wedo .wedo_box .box:nth-child(10){border-bottom: 1px solid #eee;}
.wedo .wedo_box .box img{filter: opacity(0);transition: 1s;width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;}
.wedo .wedo_box .box:hover img{filter: opacity(1);z-index: -1;transform: scale(1.1);}
.wedo .wedo_box .box h6{font-size: 22px;text-transform: uppercase;position: absolute;top:37%;left: 0%;
  transition: 0.3s;font-weight: 700;padding: 0 10%;word-break: break-word;}
.wedo .wedo_box .box::after{content: "";width: 0px;height: 2px;background-color: #000;  
position: absolute; top: 33%; left: 10%;}
.wedo .wedo_box .box:hover::after{background-color: #fff;transition: 0.3s cubic-bezier(0, 0, 0.2, 1);width: 50px;}
.wedo .wedo_box .box span{position: absolute; top: 55%;left: 0%;transition: 0.3s;word-break: keep-all;  padding: 0 10%}
.wedo .wedo_box .box:hover h6,.wedo .wedo_box .box:hover span{color: #fff;}
/*--------------------- portfolio 시작 --------------------- */
.portfolio{margin-top: 300px;}
.portfolio .title{text-align: center;}
.portfolio .sub_title{text-align: center;margin-bottom: 100px;}
.portfolio .con{display: grid;grid-template-columns: 1fr 1fr 1fr;gap:1%;}
.portfolio .con .item{width: 100%;height: 100%;display: block;cursor: pointer;position: relative;}
.portfolio .con .item .img_box{width: 100%;height: 100%;position: relative;overflow: hidden;}
.portfolio .con .item .img_box::after{content: "";width: 100%; height: 100%;background:linear-gradient(130deg, rgba(0,0,0,0.3)5%,rgba(0,0,0,0)40%);
position: absolute;top: 0;left: 0;z-index: 1;transition:0.3s cubic-bezier(0, 0, 0.2, 1);}
.portfolio .con .item .img_box:hover::after{background:linear-gradient(130deg, rgba(0,0,0,0.5),rgba(0,0,0,0.5));}
.portfolio .con .item .img_box img{width: 100%; height: 100%;object-fit: cover;transition: 1s;z-index: -1;position: relative;}
.portfolio .con .item:hover .img_box img{z-index: -1;border-radius: 30px;transform: scale(1.1)}
.portfolio .con .item .txt_box{position: absolute;top: 5%;left: 5%;z-index: 2;}
.portfolio .con .item .txt_box span{font-size: 12px;color: #fff;text-transform: uppercase;font-weight: 600;}
.portfolio .con .item .txt_box P{font-size: 24px;color: #fff;font-weight: 600;margin-top: 10px;}
.portfolio .con .item .item_tag{position: absolute;bottom: 5%;left: 0%;z-index: 2;transition:0.3s cubic-bezier(0, 0, 0.2, 1);opacity: 0;}
.portfolio .con .item .item_tag p{color: #fff;}
.portfolio .con .item:hover .item_tag{left: 5%; opacity: 1;}
.portfolio .more_btn{display: block;border: 1px solid #eee;text-align: center;width: 130px;margin: 100px auto; overflow: hidden;font-weight: 600;
height:60px;line-height: 60px;border-radius: 50px;font-size: 20px;position: relative;transition:0.3s cubic-bezier(0, 0, 0.2, 1);}
.portfolio .more_btn:hover{color: #fff;border: 1px solid #000;}
.portfolio .more_btn::after{content: "More"; position: absolute;width: 100%;height: 100%;background-color: #000;
bottom: -120%;left: 0;transition: 0.3s;color: #fff;transition: 0.3s;font-weight: 600;}
.portfolio .more_btn:hover::after{bottom: 0;transition: 0.3s;}
.portfolio .more_btn.close::after{content: "Close"; position: absolute;width: 100%;height: 100%;background-color: #fff;
  bottom: 0%;left: 0;transition: 0.3s;color: #000;transition: 0.3s;}
.portfolio #con_2{display: none;margin-top: 3%;}
/*--------------------- modal 시작 --------------------- */
.modal.open{opacity : 1;z-index: 999; filter: blur(0px);}
.modal{width: 100%;height: 100vh;background-color: #fff;position: fixed;top: 0;left: 0;opacity: 0;filter: blur(5px);transition: 0.5s;z-index: -1;}
.modal .header{border-bottom: 1px solid #000;height: 70px;}
.modal .header .trigger{display: block;width: 70px; height: 70px;position: relative;margin-left: auto;}
.modal .header .trigger span{width: 50px;height: 1px;background-color: #000;position: absolute;top: 50%;transform: rotate(-45deg);}
.modal .header .trigger span:nth-child(2){transform: rotate(45deg);}
.modal .swiper {position: relative;width: 100%;height: calc(100% - 70px);}
.modal .swiper .swiper-wrapper .swiper-slide{display: flex;align-items: flex-start;}
.modal .swiper .swiper-wrapper .swiper-slide .desc{width: 20%;height: calc(100vh - 170px);padding: 50px 20px 50px 3%;background-color: #fff;border-right: 1px solid #000;}
.modal .swiper .swiper-wrapper .swiper-slide .desc .title{font-size: 36px;text-align: left;word-break: keep-all;font-weight: 700;}
.modal .swiper .swiper-wrapper .swiper-slide .img{display: flex;width: 80%;height: calc(100% - 100px);align-items: center;justify-content: flex-start;padding: 1%;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box.publishing{height: 100%;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box a{display: block;height: 100%;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box.publishing img{object-fit: cover;object-position: top;transition: 3s;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box.publishing:hover img{object-position: bottom;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box.publishing::after{bottom: 0px;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box{position: relative;margin-right:1%;width: 33%;background-color: #fff;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box:last-child{margin-right: 0;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box::after{content: "";position: absolute;bottom: 3px;left: 0;
  background: linear-gradient(transparent,#00000070);width: 100%;height: 20%;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box img{object-fit: contain;width: 100%;height: 100%;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box iframe{height: 100%;width: 100%;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt{position: absolute;bottom:50px;left: 50%;transform: translateX(-50%);
text-align: center;color: #fff;width: 100%;z-index: 999;font-weight: 600;}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt .main_txt{font-size: 20px;margin-top: 15px}
.modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt .sub_txt{text-transform: uppercase;}
.modal .swiper .info_fix{position: absolute;top: 150px;left: 3%;z-index: 99;max-width: 270px;width: 17%;font-weight: 600;}
.modal .swiper .info_fix .info_left{float: left;width: 40%;}
.modal .swiper .info_fix .info_left li{margin-bottom:30px; color:#d7d7d7}
.modal .swiper .info_fix .info_right{float: right;width: 60%;}
.modal .swiper .info_fix .info_right li{margin-bottom:30px;}
.modal .swiper .swiper-navigation{display: flex;height: 100px;bottom: 100px;position: relative;    justify-content: space-between;
  align-items: flex-end;border-top:1px solid #000 ;background-color: #fff;}
.modal .swiper .swiper-pagination-fraction{bottom: auto;width: 20%;height: 100%;line-height: 100px;position: relative;border-right: 1px solid #000;
  font-size: 24px;background-color: #fff;font-weight: 600;}
.modal .swiper .swiper-button-prev,
.modal .swiper .swiper-rtl .swiper-button-next{top: auto;bottom: auto;left: 0;width: 40%;position: relative;height: 100%;border-right: 1px solid #000;background: #fff;}
.modal .swiper .swiper-button-next,
.modal .swiper .swiper-rtl .swiper-button-prev{top: auto;bottom:auto;right: 0;width: 40%;position: relative;height: 100%;background: #fff;}
.modal .swiper-button-next{background-image: none;position: relative;}
.modal .swiper-button-prev{background-image: none;position: relative;}
.modal .swiper-button-next:after,.modal .swiper-button-prev:after{content:"";width: 35px;height: 35px;
display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)rotate(45deg);;}
.modal .swiper-button-next:after{border-right: 1px solid #000;border-top: 1px solid #000;}
.modal .swiper-button-prev:after{border-left: 1px solid #000;border-bottom: 1px solid #000;content: ""!important;}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{opacity: 1;}
.modal .swiper-button-prev.swiper-button-disabled::after {opacity: 0.35;}
.modal .swiper-button-next.swiper-button-disabled::after {opacity: 0.35;}
/*--------------------- marquee 시작 --------------------- */
.marquee{width: 100vw; margin-bottom: 100px; display: flex;overflow-x: hidden;}
.marquee_1{margin: 0;color: #fff;
text-shadow:
1px 1px 0 #eee,
-1px -1px 0 #eee,  
1px -1px 0 #eee,
-1px 1px 0 #eee,
1px 1px 0 #eee;}
.marquee_2{justify-content: flex-end;color: #fff;
text-shadow:
1px 1px 0 #eee,
-1px -1px 0 #eee,  
1px -1px 0 #eee,
-1px 1px 0 #eee,
1px 1px 0 #eee;}
.marquee p {font-size: 130px;font-weight: 700;}
/*--------------------- with 시작 --------------------- */
.with{margin-top: 300px;}
.with .sub_title{margin-left:5px;}
.with .brand_area{display: flex; flex-wrap: wrap;justify-content: flex-start;
  align-items: center;margin-top: 100px;width: 100%;}
.with .brand_area .brand{text-align: center;width: calc(100% / 5);margin:10px 0;}
.with .brand_area .brand img{width: 200px;}
/*--------------------- contact 시작 --------------------- */
.contact{margin: 0;position: relative;background-color: #fafafa;padding: 100px 0;}
.contact .title{margin: 0 10%;border-bottom: 1px solid #eee;padding-bottom: 10px;}
.contact .title img{width: 57px;margin-left: 14px;transition: 0.3s;}
.contact>div{display: flex;margin-top: 50px;justify-content: center;align-items: center;margin: 0 10%;}
.contact ul{width: 50%;padding: 100px;}
.contact ul li{font-weight: 600;word-break: keep-all;margin-bottom: 30px;}
.contact ul li .table{font-size:18px;margin-bottom:7px;}
.contact ul li .contents{font-size:16px;color:#888}
.contact iframe{width: 50%;}
/*--------------------- footer 시작 --------------------- */
footer{background-color: #000;margin: 0;padding: 30px 0;cursor: auto;}
.footer_inner{margin: 0 10% ;display: flex;}
.footer_logo{width: 15%;align-self: center;}
.footer_logo img{width: 100%;height: auto;}
.footer_left{font-size: 14px;margin-left: 50px;color: #999;width: 60%;}
.footer_left .etc li{padding:3px 0;}
.footer_left .etc li span{position: relative;margin: 0 15px;}
.footer_left .etc li span::after{width: 1px; height: 12px;background: #999;
  content: '';margin-top: -5px;right: 0;position: absolute;top: 50%;}
.footer_left .link a{display: inline-block;position: relative;color: #eee;margin-bottom: 30px;}
.footer_left .link a::after{content: "";width: 0;height: 1px;background-color: #eee;position: absolute;
  bottom: -3px; left: 0;transition: 0.3s;}
.footer_left .link a:hover::after{width: 100%;}
.footer_left .link span{position: relative;margin: 0 15px;}
.footer_left .link span::after{width: 1px;height: 12px;background: #eee;content: '';
margin-top: -5px;right: 0;position: absolute;top: 50%;}
.footer_left .copy{margin-top: 20px;color: #575757;}
.footer_right{width: 40%;text-align: right;position: relative;}
.footer_right .family_site{width: 220px;padding: 10px 0px;border: none;background-color: transparent;
  border-bottom: 1px solid #999;cursor: pointer;}
.footer_right .family_site span{text-align: left;display: inline-block;width: 90%;
  font-size: 14px;color: #fff;position: relative;font-weight: 500;}
.footer_right .family_site span::after{content: ""; background: url(../img/icon/down_w.png)no-repeat center;
  width: 15px; height: 15px; top: 0;right: 0;position: absolute;}
.footer_right ul{width: 220px;height: 40px; position: absolute;right: 0;background-color: #000;transition: 0.1s;}
.footer_right ul li{text-align: left;padding: 10px;font-size: 14px;}
.footer_right ul li a{display: block;color: #eee;opacity: 0;}
.footer_right ul.list{display: block; background-color: #1a1a1a; }
.footer_right ul.list li a{opacity: 1;font-weight: 500;}
/*--------------------- top button 시작 --------------------- */
.fix-btn{width: 50px;height: 50px;position: fixed; bottom: 200px;right: 3%;
border-radius: 50%; background: url(../img/up.png)no-repeat center; transition: 0.3s cubic-bezier(0, 0, 0.2, 1);
background-color: #fff; border: 1px solid #eee; display: inline-block;cursor: pointer;
text-align: center; line-height: 100px;color: transparent;font-size: 14px;z-index: 999;}
.fix-btn:hover{background-color: #000;color: #fff;line-height: 50px;border: 1px solid #000;}
/*--------------------- 스크롤 시 이벤트--------------------- */
.scroll_animate{animation: fadeup 0.5s ease-in both; transition: 0.5s;}
@keyframes fadeup{
  0%{transform: translateY(30px);}
  100%{opacity: 1; transform: translateY(0px);filter: blur(0);}}
.scroll_hidden{filter: blur(5px);opacity: 0;}
/*--------------------- 미우스 커서--------------------- */
#mouse-cursor {position: absolute;top:0;left: 0;will-change: transform;transform: translate3d(-100%, -100%, 0);transition:all 0.1s ease-out;
  pointer-events: none;mix-blend-mode: difference;z-index: 99999999;mix-blend-mode: initial !important;}
#mouse-cursor > div {position: relative;width: 25px;height: 25px;background-color: rgba(122, 122, 122, 0.52);font-family: 'Tenor Sans', sans-serif;
  font-size: 8px;border-radius: 50%;display: flex;align-items: center;justify-content: center;
  --cursor-scale: 1;transform: scale3d(var(--cursor-scale), var(--cursor-scale), 1);
  will-change: transform;transition:all 0.3s ease-out;z-index: 9999;}
#mouse-cursor > div::after {content: attr(data-name);position: absolute;color: #fff;
  transform: scale(0.5);white-space: nowrap;}
.cursor-text-mode {z-index: 9999;}
.cursor-text-mode > div {opacity: 1!important;background-color: rgba(122, 122, 122, 0.78)!important}