@charset "utf-8";
/* 메인페이지 레이아웃 */


/* PC 모드에서 스와이퍼 애니메이션만 작동하게 설정 */
.animate-title {
    transform: translateX(150px);
    transition: transform 1.8s ease;
}

.animate-element {
    transform: translateX(220px);
    transition: transform 2.2s ease;
}

.animate-top {
    transform: translateY(50px);
    transition: transform 2.2s ease;
}

.swiper-slide-active .animate-title,
.swiper-slide-active .animate-element,
.swiper-slide-active .animate-top{
    transform: translate(0, 0);
}


body {overflow: hidden; }
.main *{word-break: keep-all;}
#hd{-webkit-backdrop-filter:none;backdrop-filter: none;background:transparent;}
#container{max-width:100vw;}


/* 스와이퍼 풀페이지 설정 */
.main .main-swiper { 
  width: 100%; 
  height: 100vh;
  height: 100svh;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden;
}

.main .swiper-wrapper {
    height: 100vh;
    height: 100svh;
}

.main .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.mian .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  margin:16px;
}
.main .swiper-pagination-vertical.swiper-pagination-bullets, 
.main .swiper-vertical>.swiper-pagination-bullets{
  left:8px;
  right:auto;
}

.main .swiper-pagination-bullet{
  width:10px;
  height:10px;
  background:#fff;
  border:1px solid #395896;
  opacity:1;
}
.main .swiper-pagination-bullet-active{
  background:#395896;

}


/* 스와이퍼 내부 공통 레이아웃 */

.main .section { display: flex; justify-content: center; align-items: center; font-size: 5vw; font-weight: 800;}
.main .sec_inner{position:relative;width:100%;padding:90px 60px 16px;}
.main_wr{width:100%;display:flex;flex-flow:row nowrap;justify-content: center;align-items:flex-end;gap:50px;}



.main .sec_title{
  /* 최소 60px ~ 최대 140px */
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 7.3vw, 12.75rem);
  text-transform: uppercase;
}

.main .sec_sub {
  /* 최소 32px ~ 최대 60px */
  font-family: 'MaruBuri';
  font-size: clamp(2rem, 3.1vw, 3.75rem);
  font-weight:400;
  text-transform: uppercase;
}
.main .sec_sub.eng{
  font-family: "Playfair Display", serif;
}

.main .sec_tit {
    /* 최소 24px ~ 최대 32px */
  font-family: 'MaruBuri';
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  font-weight:400;
}

.main .sec_content {
    /* 최소 16px ~ 최대 20px */
  font-family: 'MaruBuri';
  font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  line-height: 1.6;
  font-weight:400;
}

.main .btn_text {
    /* 최소 15px ~ 최대 18px */
  font-family: 'MaruBuri';
  font-size: clamp(0.938rem, 0.9vw + 0.1rem, 1.125rem);
  font-weight:400;
}

.main small {
  /* 최소 12px ~ 최대 14px */
  font-size: clamp(0.75rem, 0.7vw + 0.2rem, 0.875rem);
}



.box_link{display:flex;flex-flow:column nowrap;width: 120px;}
.box_link a{display:flex;flex-flow:column nowrap;justify-content:center;align-items: center; gap:30px;padding:32px 20px;font-size: clamp(0.85rem, 1vw + 0.1rem, 1.1rem);font-weight: 300;text-align:center;line-height: 1.4;background:#fff;border:1px solid transparent;border-radius: 20px;transition:0.2s;}
.box_link a:hover{color:#fff;background:#395896;}
.box_link.blue a{color:#fff;background:#395896;}
.box_link.blue a:hover{color:#333;background:#fff;border:1px solid #395896;}
.box_link a span{display:flex;flex-flow:column nowrap;}
.box_link a img{width:24px;}
.box_link a:hover .box_link_img{display:none;}
.box_link a .box_link_img_hover{display:none;}
.box_link a:hover .box_link_img_hover{display:block;}

#sec-main{background:#f8f8f8;}
#sec-main .main_left{position:relative;width:50%;}
#sec-main .sec_title{position:absolute;top:3vh;left:80%;z-index: 1;}
#sec-main .main_img_01{width:100%;max-height:68vh;object-fit: contain;}
#sec-main .main_right{width:50%;}
#sec-main .company_typo{position:absolute;top:16vh;right:11vw;font-size: clamp(7.5rem, 20vw, 24.25rem);color:rgba(57, 88, 150, 0.1);transition: transform 2.6s ease;}
#sec-main .main_point{display:flex;flex-flow:row nowrap;align-items:center;gap:16px;margin-bottom:40px;font-weight:600;color:#395896;}
#sec-main .main_point_line{width:50px;height:2px;background:#395896;}


#sec-about{background:#fff;position:relative;}
#sec-about:after{content:'';display:block;position:absolute;top:50%;left:0;transform:translate(0,-50%);z-index:-1;width:100%;height:40vh;background:#f1f0f0;transition:0.2s;}
#sec-about .sec_inner{padding-bottom:90px;}
#sec-about .main_wr{justify-content:center;align-items: center;}
#sec-about .main_left{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items: flex-end;gap:50px;position:relative;width:calc(100% - 330px);}
#sec-about .main_left .title_wr{position:absolute;top:0;left: 50%;z-index: 1;margin-left: -40%;}
#sec-about .main_left .sec_title{margin-bottom:20px;}
#sec-about .main_left .sec_sub{display:block;}
#sec-about .main_left .sec_content{margin-bottom: 60px;}
#sec-about .main_left .main_img_02{max-width:100%;max-height:70vh;aspect-ratio: 647/1021; object-fit: cover;box-shadow:0 0 40px rgba(0,0,0,0.2);}
#sec-about .main_right{display:flex;flex-flow:column nowrap;justify-content: center;align-items: center;}
#sec-about .main_right .about_link{display:flex;flex-flow:column nowrap; gap:30px;}
#sec-about .main_right .about_link a{display:flex;flex-flow:row nowrap;justify-content: space-between;align-items: center;width:16vw;min-width:180px;border-bottom:1px solid #9e9e9e;}
#sec-about .main_right .about_link a span{border-bottom:2px solid transparent;}
#sec-about .main_right .about_link a:hover span{border-bottom:2px solid #000;}
#sec-about .main_right .about_link img{width:20px;}


#sec-business {position:relative;color:#fff;background:url(/img/sec-business_bg.jpg) no-repeat center/cover;}
#sec-business .sec_inner {position: relative;width: 100%;height: 100vh;height: 100svh;display: flex;flex-flow: column;align-items: center;justify-content: center;}
#sec-business .main_wr {height:100%;justify-content:center;align-items:normal;}
#sec-business .main_left {display:flex;flex-flow:column nowrap;gap:80px;width:55%;}
#sec-business .content_wr {padding:10px 0 10px 20px;display:flex;flex-flow:column nowrap;gap:30px;border-left:1px solid #fff;}
#sec-business .link_txt{display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;width: 240px;padding: 10px 20px;color: #333;background: #fff;border:1px solid transparent;border-radius: 20px;transition:0.2s;}
#sec-business .link_txt:hover{color:#fff;background:transparent;border:1px solid #fff;}
#sec-business .link_txt img{width:24px;}
#sec-business .link_txt .icon_hover{display:none;}
#sec-business .link_txt:hover .icon_normal{display:none;}
#sec-business .link_txt:hover .icon_hover{display:block;}


#sec-business .main_right{width:30%;min-width:360px;max-width:400px;padding-bottom: 14vh;display: flex;flex-flow: column nowrap;justify-content: flex-end;}
#sec-business .business_link {display:flex;flex-flow:column nowrap;justify-content:center;align-items: center;gap:14px;position: relative;}
#sec-business .business_link:before{content: '';display: block;position: absolute;top: 32/2px;left: 0;width: 1px;height: calc(100% - 32px);background: #fff;}
#sec-business .business_link:after{content: '';display: block;position: absolute;top: 32/2px;right: 0;width: 1px;height: calc(100% - 32px);background: #fff;}
#sec-business .business_link a{position: relative;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:calc(100% - 100px);height:32px;padding:0 20px;text-align: center;color:#fff;border-radius:50px;transition:0.2s;}
#sec-business .business_link a:hover{justify-content:space-between;color:#000;background:#fff;}
/* #sec-business .business_link a:hover{text-align: left;color:#000;background:#fff;border-radius:50px;} */
#sec-business .business_link a:before {content: '';display: block;position: absolute;top: 50%;left: -50px;width: 40px;height: 1px;background: #fff;}
#sec-business .business_link a:after {content: '';display: block;position: absolute;top: 50%;right: -50px;width: 40px;height: 1px;background: #fff;}
#sec-business .business_link img{display:none;width:20px;}
#sec-business .business_link a:hover img{display:block;}

#sec-ourspace {background:#e8e8e8;}
#sec-ourspace .main_wr{align-items: center;}
#sec-ourspace .main_left{position:relative;display: flex;flex-flow: column nowrap;gap:clamp(12px,1.8vw,60px);width:50%;padding:90px 0 16px 140px;}
#sec-ourspace .main_left .content_wr{display:flex;flex-flow:row-reverse nowrap;justify-content: flex-end;align-items: flex-end;gap:40px;}
#sec-ourspace .main_left .main_img_03{width:45%;object-fit: contain;}


#sec-ourspace .main_right{position: relative;width:50%;height:100vh;height:100svh;text-align: center;}
#sec-ourspace .main_right .main_img_04_wr{width:100%;height:100vh;height:100svh;overflow:hidden;}
#sec-ourspace .main_right .main_img_04{width:100%;height:100vh;height:100svh;object-fit: cover;object-position: center;}
#sec-ourspace .main_right .box_link{position:absolute;bottom:30px;left:calc(-120px / 2);}


#sec-artists{background:linear-gradient(#fff, #e5eaf1);}
#sec-artists .main_wr{justify-content: space-between;align-items: center;gap:20px;}
#sec-artists .main_left{position:relative;z-index:3;width:35%;height:100vh;height:100svh;min-width:500px;padding:clamp(100px, 7vw, 200px) 20px 16px clamp(60px, 7vw, 100px);}
#sec-artists .main_left .content_wr{margin-top: clamp(20px, 3vw, 50px);}
#sec-artists .main_left .content_wr .sec_content{margin-top: 20px;}
#sec-artists .main_left .box_link{position:absolute;bottom:90px;right:0px;}
#sec-artists .main_right{position: relative;width:65%;}
#sec-artists .main_right .artists_latest_wr{position: relative;width:100%;}

#sec-partnership .sec_inner{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;gap:clamp(8px, 1vw, 40px);text-align:center;}
#sec-partnership .box_link{width:auto;}
#sec-partnership .box_link a{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items: center;gap:80px;padding:12px 36px;text-align:left;}



#sec-community {position:relative;color:#fff;background:url(/img/sec-community_bg.jpg) no-repeat center/cover;}
#sec-community .sec_inner{display:flex;flex-flow:column nowrap;justify-content: center;}
#sec-community .community_top{display:flex;flex-flow:row nowrap;justify-content: space-between;align-items: flex-end;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid #fff;}
#sec-community .community_bottom{display:flex;flex-flow:row nowrap;justify-content: space-between;align-items: flex-start;}
#sec-community .link_txt{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;gap:40px;padding-bottom:10px;color:#fff;border-bottom:transparent;}
#sec-community .link_txt:hover{border-bottom:1px solid #fff;}
#sec-community .link_txt img{width:24px;}



#sec-contact{background:#f4f4f4;}
#sec-contact .main_wr{flex-direction:row-reverse;align-items: flex-start;}
#sec-contact .main_left{width:50%;height:100vh;height:100svh;overflow:hidden;}
#sec-contact .main_left .main_img_05{width:100%;height:100vh;height: 100svh;object-fit: cover;object-position: center;}
#sec-contact .main_right{display:flex;flex-flow:column nowrap;justify-content: center;align-items: flex-start;gap: 2vw;width:50%;height: calc(100vh - 200px);height: calc(100svh - 200px);padding-top: 90px;}
#sec-contact .text_wr{display:flex;flex-flow:column nowrap;gap:clamp(10px, 1.5rem,30px);}
#sec-contact .link_wr{display:flex;flex-flow:column nowrap;gap:clamp(10px, 1.5rem,30px);}
#sec-contact .link_wr a{display:flex;flex-flow:row nowrap;align-items: center;gap:10px;padding-bottom: 10px;border-bottom: 1px solid transparent;}
#sec-contact .link_wr a:hover{border-bottom: 1px solid #000;}
#sec-contact .link_wr img{width:24px;object-fit: contain;}


#sec-contact #ft{position:fixed;bottom:0;left:0;width:100%;font-size:14px;background:rgba(0,0,0,0.8);}


@media all and (max-width: 2056px) {
  #sec-ourspace .main_left{width:60%;padding:90px 0 16px 80px;}
  #sec-ourspace .main_right{width:40%;}
  #sec-artists .main_left .box_link{position:static;width: 70%;min-width: 240px;max-width: 280px;margin-top:20px;}
  #sec-artists .main_left .box_link a{flex-flow: row;justify-content: space-between;text-align: left;padding: 16px 20px;}
  #sec-artists .main_left .box_link a .mo_hide{display:none;}
}


@media all and (max-width: 1300px) {
  #sec-about .sec_inner{padding:60px;}
  #sec-about .main_left{width:calc(100% - 240px);gap:20px;}
  #sec-about .main_left .main_img_02{max-height:50vh;}
  #sec-about .main_left .sec_content{margin-bottom:0;}
  #sec-ourspace .main_left .content_wr{flex-direction: column;justify-content: flex-start;align-items: flex-start;gap:20px;}
  #sec-ourspace .main_left .content_wr .mo_hide{display:none;}
  #sec-ourspace .main_left .main_img_03{width:35%;}
  #sec-ourspace .main_right .box_link{left:calc(-134px / 2);}
}




/* 반응형: 모바일에서는 일반 스크롤처럼 보이게 */
/* 모바일 상태 (980px 이하) */
@media all and (max-width: 980px) {
  body, html {overflow-x: hidden;overflow-y: auto !important;height: auto !important;}
  #hd{-webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);background-color: #f5f5f580;}
  .main .main-swiper{height: 100vh;height: 100svh;overflow: hidden;}
  .main .swiper-wrapper {display: block !important;height: auto !important;}
  .main .swiper-slide {height: auto !important;min-height: 100vh;min-height: 100svh; display: block !important;}
  .main .swiper-pagination-bullet{width:8px;height:8px;}
  .main .swiper-pagination-vertical.swiper-pagination-bullets, 
  .main .swiper-vertical>.swiper-pagination-bullets{
    left: auto;
    right:0px;
  }
  .main .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
  .mian .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin:20px 8px;
  }
  .main .sec_inner{height:auto;min-height:100vh;min-height: 100svh;padding:90px 60px;}
  .main .main_wr{flex-direction:column;align-items: flex-start;min-height:100vh;min-height: 100svh;}
  #sec-main .main_right{width:100%;text-align:center;}
  #sec-main .company_typo{right:14vw;}
  #sec-main .main_point{justify-content:center;}

  #sec-about:after{height:20vh;background:#fafafa;}
  #sec-about .sec_inner{padding:60px 30px;}
  #sec-about .main_left{width:100%;}
  #sec-about .main_left .title_wr{top: -50px;left:10%;margin-left:0;}
  #sec-about .main_left .main_img_02{max-width:320px;}
  #sec-about .main_right .about_link a{min-width:280px;}

      
  #sec-business .sec_inner{height:auto;}
  #sec-business .main_left{width:100%;gap:40px;}
  .main #sec-business .sec_content{font-weight:500;}
  .main #sec-business .main_left .sec_content{text-shadow:0 0 8px #000;}
  .main #sec-business .link_txt.sec_content{text-shadow:none;}
  #sec-business .main_right{display:flex;flex-flow:row nowrap;justify-content: flex-end;width:100%;min-width:100%;padding-bottom:0;}
  #sec-business .business_link{width:300px;}
  #sec-business .business_link a{width:calc(100% - 60px);}
  #sec-business .business_link a:before{left:-30px;width:20px;}
  #sec-business .business_link a:after{right:-30px;width:20px;}

  #sec-ourspace .main_left{width:100%;}
  
  #sec-ourspace .main_right{width:100%;height:auto;}
  #sec-ourspace .main_right .main_img_04_wr,
  #sec-ourspace .main_right .main_img_04{height:auto;min-height:60vh;}
  #sec-ourspace .main_right .box_link{bottom:80px;left:auto;right:20px;}


  #sec-artists .main_left{width:100%;height:auto;padding-bottom:60px;}
  #sec-artists .main_right{width:100%;}

  #sec-partnership .box_link{margin-top:40px;}

  #sec-contact {overflow-y: auto; /* 내용이 길어지면 내부에서 스크롤이 생기도록 */
    -webkit-overflow-scrolling: touch;}
  #sec-contact .main_wr{display:block;}
  #sec-contact .main_left{width:100%;height:auto;}
  #sec-contact .main_left .main_img_05{height:60vh;}
  #sec-contact .main_right{gap:50px;width:100%;height:auto;padding:90px 30px 30px;}

  #sec-contact #ft{position:static;padding-bottom:100px;background:#111214;}
}


@media all and (max-width: 767px) {
  #sec-about .main_left .main_img_02{max-width:260px;}
  #sec-business:after{content:'';display:block;position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,0.6);}
  #sec-ourspace .main_left{padding:90px 60px;}
  #sec-ourspace .main_left .main_img_03{width:100%;}
  #sec-community .community_top{flex-direction: column;gap:40px;align-items: flex-start;}
  #sec-community .community_bottom{flex-direction: column;gap:40px;align-items: flex-end;text-align:right;}
}

@media all and (max-width:540px){
  .box_link{width:106px;border-radius: 10px;}
  .box_link a{gap:10px;padding:20px 10px;line-height: 1.4;}
  .box_link a img{width:20px;}
  .main .sec_inner{padding:90px 30px;}
  #sec-about .main_left .title_wr{left:0;}
  #sec-artists .main_left{min-width:auto;}
  #sec-artists .main_left .box_link{position:static;width: auto;max-width: 60%;min-width:240px;margin:60px 0;}
  #sec-artists .main_left .box_link a{flex-direction:row;justify-content: center;gap:30px;}
  #sec-artists .main_left .box_link br{display:none;}
  #sec-contact .main_left .main_img_05{height:30vh;}
}

@media all and (max-width: 500px) {
  #sec-main .main_left{width:100%;}
  #sec-main .sec_title{position:static;margin-bottom:40px;}

  #sec-about .main_left{flex-direction:column;justify-content:center;align-items:center;}
  #sec-about .main_left .title_wr{position:static;}
  #sec-about .main_left .sec_content{margin-top:20px;}
  #sec-about .main_right{margin-bottom:80px;}

  #sec-business .main_right{justify-content: center;}
}