@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */
 /* common */
 #lnb {display: none !important;}
h2 {font-size:var(--font-110); font-weight: 700;}
h3 {font-size:var(--font-32); font-weight: 700; line-height: 1.42;}
h4 {font-size:var(--font-24); font-weight: 700;}
h5 {font-size:var(--font-24); font-weight: 700;}

.main-title {line-height: 1; font-size: var(--font-en-137); font-weight: 600; text-transform: uppercase;}
.lang-en {font-weight: 600;}


/* main visual */
.main-visual{position: relative; height:var(--height-full);}
.main-visual::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 400rem; background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 100%);}
.main-visual .wrap {height: 100%;}
.main-visual__video {overflow: hidden; position: relative; width: 100%; height: 100%;}
.main-visual__video iframe{object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}

.main-visual__text{z-index: 21; position:absolute; top:0; left:0; width:100%; height: 100%;  color:#fff;}
.main-visual__text .wrap {display: flex; flex-direction: column; justify-content: flex-end; }
.main-visual__text b {position: absolute; right: 0; top: 195rem; line-height: 1.6; font-size: var(--font-18); font-weight: 500;}
.main-visual__text b::before {content:''; display: block; width: 14rem; height: 14rem; margin-bottom: 15rem; border-radius: 100%; background: var(--c-01);}
.main-visual__text h2 p{overflow:hidden; line-height:1.1; font-weight:800; font-size:var(--font-98); letter-spacing:-0.5rem;}
.main-visual__text h2 span {font-size: var(--font-en-122); font-weight: 500;}
.main-visual__text ul {display: flex; align-items: center; margin-top: 100rem; margin-bottom: 60rem; text-transform: uppercase; font-size: var(--font-14); font-weight: 100;}
.main-visual__text ul li:nth-child(2) {position: absolute; left:50%; transform: translateX(-50%);}
.main-visual__text ul li:nth-child(3) {position: absolute; right: 120rem;}
.text-hidden{opacity: 0 !important;!i;!;visibility:hidden;transition:all 0.5s ease;}

@media (min-aspect-ratio: 16/9) {
    .main-visual__video iframe{height: 56.25vw;}
  }
  @media (max-aspect-ratio: 16/9) {
      .main-visual__video iframe{width: 177.78vh;}
  }

@media all and (max-width:1023px){
    .main-visual__text b {top: 155rem;}
}

@media (max-width:860px){
    .main-visual__text b {line-height: 1.4;}
    .main-visual__text b::before {width: 12rem; height: 12rem; margin-bottom: 12rem;}
    .main-visual__text ul {margin-top: 103rem; margin-bottom: 57rem;}
    .main-visual__text ul li:nth-child(3) {right: 100rem;}
}

@media (max-width:540px){
    .main-visual {height: 600rem;}
    .main-visual::after {height: 400rem; background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 80%);}
    .main-visual__text b {top: 105rem; left:0;}
    .main-visual__text b::before {width: 8rem; height: 8rem; margin-bottom: 10rem;}
    .main-visual__text h2 {margin-bottom: 60rem;}
    .main-visual__text ul {position: absolute; left:0; bottom:20rem; margin: 0; font-size: 12rem;}
    .main-visual__text ul li {font-weight: 100;}
    .main-visual__text ul li:first-child{display: none;}
    .main-visual__text ul li:nth-child(2) {position: relative; left:0; transform: none;}
    .main-visual__text ul li:nth-child(3) {display: none;}

}

/* intro */
.main-intro {padding-top: 187rem;}
.main-intro__tag {position: relative;}
.main-intro__tag::before {z-index: 1; position: absolute; left:0; top:-50%; content:''; width: 100%; height: 70%; background: linear-gradient(0deg, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 100%);}
.main-intro__tag::after {opacity: .03; position: absolute; right: 0; bottom: -25rem; content:'MNK'; line-height: 1; font-size: 350rem; font-weight: 600; transform: translateX(25%);}
.main-intro__tag h2 {padding-top: 380rem; font-family: var(--lang-ko);}
.main-intro__tag-list {position: absolute; left:0; bottom:120rem; width: 100%; height: 120%;}

.main-intro__tag-list p {position: absolute; top: 0; left:0; display: inline-block; min-width: 180rem; padding: 20rem; text-align: center; text-transform: uppercase; font-family: var(--lang-ko); font-size: var(--font-18); font-weight: 300; background: var(--bg-01); border-radius: 60rem; border: 1px solid #888;}
.main-intro__tag-list p:nth-child(2) {left: 5%;}
.main-intro__tag-list p:nth-child(3) {left: 13.6%;}
.main-intro__tag-list p:nth-child(4) {left: 14.2%;}
.main-intro__tag-list p:nth-child(5) {left: 23.32%;}
.main-intro__tag-list p:nth-child(6) {left: 24.6%;}
.main-intro__tag-list p:nth-child(7) {left: 30.6%;}
.main-intro__tag-list p:nth-child(8) {left: 47%;}

.main-intro__tag-list p:last-child {min-width: 120rem;}
.main-intro__tag-list.is_moved p:nth-child(1) {animation: introTag01 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;}
.main-intro__tag-list.is_moved p:nth-child(2) {animation: introTag02 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation-delay: 0.1s;}
.main-intro__tag-list.is_moved p:nth-child(3) {animation: introTag03 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;}
.main-intro__tag-list.is_moved p:nth-child(4) {animation: introTag04 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation-delay: 0.1s;}
.main-intro__tag-list.is_moved p:nth-child(5) {animation: introTag05 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;}
.main-intro__tag-list.is_moved p:nth-child(6) {animation: introTag06 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation-delay: 0.3s;}
.main-intro__tag-list.is_moved p:nth-child(7) {animation: introTag07 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;}
.main-intro__tag-list.is_moved p:nth-child(8) {animation: introTag08 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation-delay: 0.7s;}

.main-intro__text {z-index: 21; position: relative; width: 50%; margin-left: auto;}
.main-intro__text h3.lang-en {margin-bottom: 20rem; line-height: 1.3;}
.main-intro__text h3.lang-en span {font-weight: 600;}
.main-intro__text h3:last-child {font-family: var(--lang-ko);}
.main-intro__text h3:last-child span {font-weight: 700;}

@keyframes introTag01{
	from{top: 0; transform: rotate(45deg);}
    50% {transform: rotate(10deg);}
    to {top: 83%; transform: rotate(0);}
}

@keyframes introTag02{
	from{top: 0; transform: rotate(45deg);}
    50% {transform: rotate(-30deg);}
    to {top: 72.8%; transform: rotate(17.44deg);}
}

@keyframes introTag03{
	from{top: 0; transform: rotate(-10deg);}
    50% {transform: rotate(15deg);}
    to {top: 81%; transform: rotate(-20deg);}
}

@keyframes introTag04{
	from{top: 0; transform: rotate(-10deg);}
    50% {transform: rotate(15deg);}
    to {top: 67%; transform: rotate(-5deg);}
}

@keyframes introTag05{
	from{top: 0; transform: rotate(-80deg);}
    50% {transform: rotate(60deg);}
    to {top: 83%; transform: rotate(0deg);}
}

@keyframes introTag06{
	from{top: 0; transform: rotate(-16deg);}
    50% {transform: rotate(-26.53deg);}
    to {top: 65%; transform: rotate(-47deg);}
}

@keyframes introTag07{
	from{top: 0; transform: rotate(-40deg);}
    50% {transform: rotate(12deg);}
    to {top: 75.7%; transform: rotate(18.52deg);}
}

@keyframes introTag08{
	from{top: 0; transform: rotate(-12deg);}
    50% {transform: rotate(-40deg);}
    to {top: 83%; transform: rotate(0);}
}

@media all and (max-width:1023px){
    .main-intro {padding-top: 150rem;}
    .main-intro__tag::after {font-size: 270rem;}
    .main-intro__tag-list p {min-width: 160rem; padding: 18rem;}
    .main-intro__text h3:last-child br {display: none;}

    .main-intro__tag-list {z-index: 1;}
    .main-intro__tag-list p:nth-child(2) {left: 8%;}
    .main-intro__tag-list p:nth-child(3) {left: 21.6%;}
    .main-intro__tag-list p:nth-child(4) {left: 20.2%;}
    .main-intro__tag-list p:nth-child(5) {left: 38.1%;}
    .main-intro__tag-list p:nth-child(6) {left: 39.4%;}
    .main-intro__tag-list p:nth-child(7) {left: 50.6%;}
    .main-intro__tag-list p:nth-child(8) {left: 75%;}

    @keyframes introTag01{
        from{top: 0; transform: rotate(45deg);}
        50% {transform: rotate(10deg);}
        to {top: 85%; transform: rotate(0);}
    }
    
    @keyframes introTag02{
        from{top: 0; transform: rotate(45deg);}
        50% {transform: rotate(-30deg);}
        to {top: 75%; transform: rotate(17.44deg);}
    }
    
    @keyframes introTag03{
        from{top: 0; transform: rotate(-10deg);}
        50% {transform: rotate(15deg);}
        to {top: 84%; transform: rotate(-20deg);}
    }
    
    @keyframes introTag04{
        from{top: 0; transform: rotate(-10deg);}
        50% {transform: rotate(15deg);}
        to {top: 68.7%; transform: rotate(9deg);}
    }
    
    @keyframes introTag05{
        from{top: 0; transform: rotate(-80deg);}
        50% {transform: rotate(60deg);}
        to {top: 85%; transform: rotate(0deg);}
    }
    
    @keyframes introTag06{
        from{top: 0; transform: rotate(-16deg);}
        50% {transform: rotate(-26.53deg);}
        to {top: 68.5%; transform: rotate(-39deg);}
    }
    
    @keyframes introTag07{
        from{top: 0; transform: rotate(-40deg);}
        50% {transform: rotate(12deg);}
        to {top: 78.2%; transform: rotate(18.52deg);}
    }
    
    @keyframes introTag08{
        from{top: 0; transform: rotate(-12deg);}
        50% {transform: rotate(-40deg);}
        to {top: 85%; transform: rotate(0);}
    }
}

@media (max-width:860px){
    .main-intro {position: relative; padding-top: 120rem;}
    .main-intro__text {z-index: 31; width: 100%; margin-left: 0;}
    .main-intro__text h3:last-child br {display: block;} 
    .main-intro__tag::before {z-index: 21; background: linear-gradient(0deg, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 30%);}
    .main-intro__tag::after {left: 50%; right: auto; bottom: 50%; font-size: 240rem; transform: translate(-50%, 50%);}
    .main-intro__tag h2 {text-align: center;}

    .main-intro__tag-list {height: 100%;}
    .main-intro__tag-list p:nth-child(2) {left: 8.2%;}
    .main-intro__tag-list p:nth-child(3) {left: 24.6%;}
    .main-intro__tag-list p:nth-child(4) {left: 24.2%;}
    .main-intro__tag-list p:nth-child(5) {left: 44.8%;}
    .main-intro__tag-list p:nth-child(6) {left: 48.1%;}
    .main-intro__tag-list p:nth-child(7) {left: 59%;}
    .main-intro__tag-list p:nth-child(8) {left: auto; right: 0;}

    @keyframes introTag01{
        from{top: 0; transform: rotate(45deg);}
        50% {transform: rotate(10deg);}
        to {top: 87%; transform: rotate(0);}
    }
    
    @keyframes introTag02{
        from{top: 0; transform: rotate(45deg);}
        50% {transform: rotate(-30deg);}
        to {top: 73.5%; transform: rotate(17.44deg);}
    }
    
    @keyframes introTag03{
        from{top: 0; transform: rotate(-10deg);}
        50% {transform: rotate(15deg);}
        to {top: 85%; transform: rotate(-20deg);}
    }
    
    @keyframes introTag04{
        from{top: 0; transform: rotate(-10deg);}
        50% {transform: rotate(15deg);}
        to {top: 66.5%; transform: rotate(9deg);}
    }
    
    @keyframes introTag05{
        from{top: 0; transform: rotate(-80deg);}
        50% {transform: rotate(60deg);}
        to {top: 87%; transform: rotate(0deg);}
    }
    
    @keyframes introTag06{
        from{top: 0; transform: rotate(-16deg);}
        50% {transform: rotate(-26.53deg);}
        to {top: 62.5%; transform: rotate(-39deg);}
    }
    
    @keyframes introTag07{
        from{top: 0; transform: rotate(-40deg);}
        50% {transform: rotate(12deg);}
        to {top: 78.2%; transform: rotate(18.52deg);}
    }
    
    @keyframes introTag08{
        from{top: 0; transform: rotate(-12deg);}
        50% {transform: rotate(-40deg);}
        to {top: 87%; transform: rotate(0);}
    }
}

@media (max-width:540px){
    .main-intro {padding-top: 70rem;}
    .main-intro::before {height: 40%;}
    .main-intro__text h3:last-child br {display: none;}
    .main-intro__tag::after {bottom: 120rem; font-size: 25vw; transform: translate(-50%, 0);}
    .main-intro__tag h2 {padding-top: 300rem;}
    .main-intro__tag-list p {min-width: 100rem; padding: 12rem; font-size: 13rem; white-space: nowrap;}
    .main-intro__tag-list p:last-child {min-width: 70rem;}

    .main-intro__tag-list {z-index: 1;}
    .main-intro__tag-list p:nth-child(2) {left: 0;}
    .main-intro__tag-list p:nth-child(3) {left: 26%;}
    .main-intro__tag-list p:nth-child(4) {left: 9.6%;}
    .main-intro__tag-list p:nth-child(5) {left: 45.8%;}
    .main-intro__tag-list p:nth-child(6) {left: 46%;}
    .main-intro__tag-list p:nth-child(7) {left:auto; right: 0;}
    .main-intro__tag-list p:nth-child(8) {left: auto; right: 0;}

    @keyframes introTag01{
        from{top: 0; transform: rotate(45deg);}
        50% {transform: rotate(10deg);}
        to {top: 87%; transform: rotate(0);}
    }
    
    @keyframes introTag02{
        from{top: 0; transform: rotate(45deg);}
        50% {transform: rotate(-30deg);}
        to {top: 74%; transform: rotate(17.44deg);}
    }
    
    @keyframes introTag03{
        from{top: 0; transform: rotate(-10deg);}
        50% {transform: rotate(15deg);}
        to {top: 79%; transform: rotate(-20deg);}
    }
    
    @keyframes introTag04{
        from{top: 0; transform: rotate(-10deg);}
        50% {transform: rotate(15deg);}
        to {top: 64.7%; transform: rotate(9deg);}
    }
    
    @keyframes introTag05{
        from{top: 0; transform: rotate(-80deg);}
        50% {transform: rotate(60deg);}
        to {top: 87%; transform: rotate(0deg);}
    }
    
    @keyframes introTag06{
        from{top: 0; transform: rotate(-16deg);}
        50% {transform: rotate(-26.53deg);}
        to {top: 62%; transform: rotate(26deg);}
    }
    
    @keyframes introTag07{
        from{top: 0; transform: rotate(-40deg);}
        50% {transform: rotate(12deg);}
        to {top: 76%; transform: rotate(0);}
    }
    
    @keyframes introTag08{
        from{top: 0; transform: rotate(-12deg);}
        50% {transform: rotate(-40deg);}
        to {top: 87%; transform: rotate(0);}
    }
}

/* about */
.main-about {padding-top: 180rem;}
.main-about__tag {margin-top: 20rem;}
.main-about__tag li {margin: 0 17rem; font-family: var(--lang-ko); font-size: var(--font-24); font-weight: 700;}
.main-about__list {gap: 0 33rem; margin-top: 80rem;}
.main-about__item {position: relative; cursor: pointer;}
.main-about__item > div {overflow: hidden; width: 100%; border-radius: 20rem; transition:var(--trans-01);}
.main-about__item .front {z-index: 1; position: relative; background: var(--bg-02);}
.main-about__item .back {opacity: 0; visibility: hidden; position: absolute; left:0; top:0; background-repeat: no-repeat;transform: rotateY(180deg);}
.main-about__item:hover .front {opacity: 0; visibility: hidden; transform: rotateY(-180deg);}
.main-about__item:hover .back {opacity: 1; visibility: visible; transform: rotateY(0deg);}
.main-about__item-inr {display: flex; flex-direction: column; height: 370rem; padding: 40rem 35rem;}
.main-about__item-inr h4 {margin-top: auto; font-size: var(--font-en-82); line-height: 1; text-align: right;}
.main-about__item-inr p {margin-top: 5rem; font-weight: 300;}
.main-about__item-inr span {text-align: right; font-size: var(--font-18); font-weight: 500;}
.main-about__item:nth-child(1) .back {background-color: #2B2494; background-image: url(../img/main/about02.svg); background-position: left bottom; background-size: 295rem;}
.main-about__item:nth-child(2) .back {background-color: #6742D7; background-image: url(../img/main/about01.svg); background-position: left 20rem bottom 17rem; background-size: 210rem;}
.main-about__item:nth-child(3) .back {background-color: #5E76EE; background-image: url(../img/main/about03.svg); background-position: left bottom 25rem; background-size: 260rem;}
.main-about__item:nth-child(4) .back {background-color: #B884E9; background-image: url(../img/main/about04.svg); background-position: left 23rem bottom 20rem; background-size: 270rem;}

@media (max-width:1200px){
    .main-about__list {grid-template-columns: repeat(2, 1fr); gap: 20rem;}
}

@media all and (max-width:1023px){
    .main-about__list {margin-top: 60rem;}
}

@media (max-width:860px){
    .main-about__item-inr {padding: 32rem 35rem 35rem;}
    .main-about__item-inr p {margin-top: 3rem;}
    .main-about__item:nth-child(1) .back {background-size: 245rem; background-position: left bottom 23rem;}
    .main-about__item:nth-child(2) .back {background-size: 190rem; background-position: left 20rem bottom 28rem;}
    .main-about__item:nth-child(3) .back {background-size: 247rem; background-position: left -6rem bottom 25rem;}
    .main-about__item:nth-child(4) .back {background-size: 245rem; background-position: left 23rem bottom 27rem;}
}

@media (max-width:540px){
    .main-about {padding-top: 90rem;}
    .main-about__tag {flex-wrap: wrap; margin-top: 12rem;}
    .main-about__tag li {margin:3rem 10rem;}
    .main-about__list {margin-top: 30rem; grid-template-columns: 1fr; gap: 10rem;}
    .main-about__item > div {border-radius: 12rem;}
    .main-about__item-inr {height: 250rem; padding: 20rem 20rem 30rem;}
    .main-about__item-inr h5 {font-size: 18rem;}
    .main-about__item-inr span {line-height: 1; margin-top: 3rem;}

    .main-about__item:nth-child(1) .back {background-size: 178rem; background-position: left bottom 11rem;}
    .main-about__item:nth-child(2) .back {background-size: 135rem; background-position: left 15rem bottom 13rem;}
    .main-about__item:nth-child(3) .back {background-size: 175rem; background-position: left -3rem bottom 18rem;}
    .main-about__item:nth-child(4) .back {background-size: 175rem; background-position: left 20rem bottom 18rem;}

	.main-about__item-inr h4{font-weight: 500;}
}

/* work */
.main-works {position: relative; margin-top: 300rem;}
.main-works h2 {opacity: 0.03; position: absolute; top: 0; width: 100%; transform: translateY(-50%);}
.main-works__list {position: relative;}
.main-works__item {position: sticky;top: 40rem;}
.main-works__item:not(:last-child) {/* margin-bottom: 20rem; */}
.main-works__item a {position: relative; overflow: hidden; border-radius: 20rem; box-shadow: 0 -10rem 50rem rgba(0, 0, 0, .5); position: relative; display: block; padding: 65rem 0 100rem;}
.main-works__item:nth-child(1) a {background-color: #20292D;}
.main-works__item:nth-child(2) a {background-color: #646E72;}
.main-works__item:nth-child(3) a {background-color: #837B78;}
.main-works__item:nth-child(4) a {background-color: #00274B;}
.main-works__item span {display: block; margin-top: 5rem; font-weight: 200; text-transform: uppercase;}
.main-works__img {overflow: hidden;width: 1000rem;margin: 0 auto;margin-top: 38rem;border-radius: 10rem;height: 623rem;position: relative;display: flex;align-content: center;align-items: center;justify-content: center;}
.main-works__item p{opacity:0.9; margin-top:20rem; font-weight:200;}

.works02 {top: 80rem;}
.works03 {top: 120rem;}
.works04 {top: 180rem;}

.main-works__item.works01 figure{background-image:url(../img/main/works04.jpg);}
.main-works__item.works02 figure{background-image:url(../img/main/works03.jpg);}
.main-works__item.works03 figure{background-image:url(../img/main/works02.jpg);}
.main-works__item.works04 figure{background-image:url(../img/main/works01.jpg);}
.main-works__img figure{position:absolute; top:0; left:0; width:100%; height:100%; background-size:100%; transition:all 0.5s ease;}
.main-works__column{position:relative;}
.main-works__column img{height:153rem;}
.main-works__column{display:grid; justify-content:center; align-items:center; grid-template-columns:1fr 1fr 1fr; gap:24rem; justify-items:center; align-content:center;}
.main-works__img:hover figure{background-size:110%;}

@media (max-width:1200px){
	.main-works__img{width:910rem; height:563rem;}
}

@media all and (max-width:1023px){
	.main-works{margin-top:160rem;}
	.main-works__item a{padding:75rem 0 50rem;}
	.main-works__img{width:780rem; height:483rem; margin-top:35rem;}
	.main-works__item span{font-size:14rem;}
	.main-works__column img{height:104rem;}
}

@media (max-width:540px){
    .main-works {margin-top: 100rem;}
    .main-works h2 {opacity: 0.1; transform: translateY(-70%);}
    .main-works__item a {padding: 37rem 20rem 20rem;border-radius: 12rem;}
    .main-works__item span {opacity: .3; margin-top: 2rem; font-size: 12rem;}
    .main-works__img {width: 100%;margin-top: 15rem;border-radius: 6rem;height: 183rem;}
    .works02 {top: 20rem;}
    .works03 {top: 40rem;}
    .works04 {top: 60rem;}

	.main-works__column{display:none; gap:7rem;}
	.main-works__item p{margin-top:15rem; padding-bottom:10rem; font-size:13rem;}
	.main-works__item p br{display:none;}
}

/* keyword */
.main-keyword {position: relative; margin-top: 150rem;}
.main-keyword::before {opacity: .1; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; left: -130rem; top: -170rem; content:''; width: 305rem; height: 305rem; background: url(../img/layout/symbol02.svg) no-repeat center / contain;}

.main-keyword .main-title {margin-bottom: 18rem;}
.main-keyword ul {flex-wrap: wrap; justify-content: center; width: 1400rem; margin:0 auto; margin-top: 50rem;}
.main-keyword ul li {margin: 6rem;}
.main-keyword ul li a {display: block; padding: 20rem 30rem; line-height: 1; font-size: var(--font-18); color: var(--b-02) !important; border-radius: 100rem; border: 1px solid rgba(255, 255, 255, .2); transition: var(--trans-01);}
.main-keyword ul li a:hover {font-weight: 600; color: var(--f-01) !important; background: var(--c-01); border-color: var(--c-01);}

@media (max-width:1480px){
    .main-keyword ul {width: auto;}
}

@media all and (max-width:1023px){
    .main-keyword::before {top: -150rem; width: 280rem; height: 280rem;}
    .main-keyword ul {margin-top: 40rem;}
}

@media (max-width:860px){
    .main-keyword {margin-top: 140rem;}
    .main-keyword::before {left: -110rem; width: 240rem; height: 240rem;}
    .main-keyword ul {margin-top: 32rem;}
    .main-keyword ul li a {padding: 18rem 22rem;}
}

@media (max-width:540px){
    .main-keyword {margin-top: 80rem;}
    .main-keyword::before {top: -66rem; left:-72rem; width: 180rem; height: 180rem;}
    .main-keyword .main-title {margin-bottom: 10rem;}
    .main-keyword h3 {font-size: 16rem;}
    .main-keyword ul {margin-top: 22rem;}
    .main-keyword ul li {margin: 3rem;}
    .main-keyword ul li a {padding: 13rem 20rem; font-size: 14rem;}
}


/* business */
.main-business {position: relative; display: flex; justify-content: space-between; margin-top: 150rem;}
.main-business::before {position: absolute; right: -90rem; top: -125rem; content:''; width: 412rem; height: 412rem; background: url(../img/layout/symbol01.svg) no-repeat center / contain;}
.main-rnd {width: 50%;}
.main-rnd b {display: block; margin-top: 15rem; margin-bottom: 3rem; font-size: var(--font-19); font-weight: 600; text-transform: uppercase;}
.main-rnd figure {overflow: hidden; width: 100%; margin-top: 40rem; border-radius: 20rem;}
.main-project {width: calc(50% - 200rem); margin-top: 458rem;}
.main-project .tabs {flex-wrap: wrap; margin-bottom: 30rem;}
.main-project .tabs li {position: relative; margin-right: 20rem; font-size: var(--font-24); font-weight: 500; color: var(--c-03); transition: var(--trans-01);}
.main-project .tabs li::before {opacity: 0; visibility: hidden; position: absolute; left:0; top: 14rem; content:''; width: 8rem; height: 8rem; border-radius: 100%; background: var(--c-01); transition: var(--trans-01);}
.main-project .tabs li.active {padding-left: 18rem; color: var(--f-01);}
.main-project .tabs li.active::before {opacity: 1; visibility: visible;}
.main-project .tab__item {overflow: hidden; position: relative; border-radius: 20rem;}
.main-project .tab-item__inr {position: relative; height: 480rem; justify-content: flex-start; padding: 40rem;}
.main-project .tab-item__inr p {margin-bottom: 3rem; font-size: var(--font-18);}
.main-project .tab-item__inr h3 {font-family: var(--lang-ko);}
.main-projects__tag {margin-top: auto; align-items: flex-end;}
.main-projects__tag li {padding: 8rem 20rem; border-radius: 100rem; border: 1px solid rgba(255, 255, 255, .5);}
.main-projects__tag li:last-child {margin-top: 5rem;}
.main-project .tab-item__bg {position: absolute; left:0; top:0; width: 100%; height: 100%; transition: var(--trans-01);}
.main-project .tab-item__bg:not(:has(img)) {background: rgba(255, 255, 255, .2);}
.main-project .tab-item__bg:not(:has(img))::before {opacity: 0.2; position: absolute; left:50%; top: 50%; content:''; width: 125rem; height: 40rem; background: url(../img/layout/noimage-logo.png) no-repeat center / contain; transform: translate(-50%, -50%);}
.main-project .tab-item__bg img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main-project .tab__item:hover .tab-item__bg {transform: scale(1.1);}

@media (max-width:1200px){
    .main-business::before {width: 340rem; height: 340rem;}
    .main-project {width: calc(50% - 80rem); margin-top: 330rem;}
    .main-project .tabs {flex-wrap: wrap;}
    .main-project .tab-item__inr {height: 420rem;}
}

@media all and (max-width:1023px){
    .main-business {flex-direction: column; margin-top: 100rem;}
    .main-business::before {top: -75rem; width: 270rem; height: 270rem;}
    .main-rnd {width: 100%;}
    .main-project {width: 100%; margin-top: 100rem;}
    .main-project .tab-item__inr {height: 580rem;}
}

@media (max-width:860px){
    .main-business::before {top: -65rem; width: 250rem; height: 250rem;}
    .main-rnd figure {margin-top: 30rem;}
}

@media (max-width:540px){
    .main-business {margin-top: 70rem;}
    .main-business::before {display: none;}
    .main-rnd figure {margin-top: 20rem; border-radius: 12rem;}
    .main-rnd b {margin-top: 12rem;}
    .main-project {margin-top: 70rem;}
    .main-project .tabs {margin-bottom: 20rem;}
    .main-project .tabs li {margin-right: 15rem;}
    .main-project .tabs li::before {top: 10rem; width: 5rem; height: 5rem;}
    .main-project .tabs li.active {padding-left: 12rem;}
    .main-project .tab__item {border-radius: 12rem;}
    .main-project .tab-item__inr {position: relative; height: 350rem; padding: 25rem 20rem;}
    .main-project .tab-item__inr br {display: none;}
    .main-project .tab-item__bg::after {opacity: .3; position: absolute; lefT:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
    .main-projects__tag li {padding: 7rem 13rem; font-size: 13rem;}
}


/* news */
.main-news {margin-top: 200rem; padding-bottom: 180rem; padding-left: 80rem;}
.main-news .swiper-pagination {display: none;}
.main-news:has(.empty_li) {margin-top: 0 !important; padding-bottom: 200rem;}
.main-news .empty_li {font-size: 0;}

@media all and (max-width:1023px){
    .main-news {margin-top: 160rem; padding-bottom: 160rem; padding-left: 40rem;}
    .main-news:has(.empty_li) {padding-bottom: 180rem;}
}

@media (max-width:860px){
    .main-news {margin-top: 120rem; padding-bottom: 120rem;}
    .gallery-container .gallery-slide {height:300rem;}
    .gallery-slide .lt_img {padding: 30rem 25rem;}
    #main #bo_gall .gall_img .no_image::after,
    #main .gallery-list__img:not(:has(img))::after,
    #main .gallery-slide figure:not(:has(img))::after {top: 83rem; width: 100rem; height: 35rem;}
}

@media (max-width:540px){
    .main-news {margin-top: 70rem; padding: 0 20rem 60rem;}
    .main-news:has(.empty_li) {padding-bottom: 80rem;}
    .gallery-container .gallery-slide {border-radius: 12rem;}
    .gallery-slide .lt_img {padding: 25rem 20rem;}
    #main #bo_gall .gall_img .no_image::after,
    #main .gallery-list__img:not(:has(img))::after,
    #main .gallery-slide figure:not(:has(img))::after {top: 95rem; width: 100rem; height: 32rem;}
    .main-news .swiper-pagination {display: flex; position: relative; justify-content: center; margin-top: 20rem; gap: 10rem;}
    .main-news .swiper-pagination-bullet {width: 10rem; height: 10rem; background: var(--bd-02);}
    .main-news .swiper-pagination-bullet-active {background: var(--c-01);}
    .main-news:has(.empty_li) .swiper-pagination {display: none;}

}

/* column */
.main-notice {overflow: hidden; position: relative; padding: 180rem 0;}
.main-notice::before {opacity: 0.045; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; right:-192rem; bottom: 100rem; content:''; width: 590rem; height: 590rem; background: url(../img/layout/symbol02.svg) no-repeat center / contain;}
.main-notice .lat > div {width: calc((100% - 60rem)/2);}
.latest-list .main-title {margin-bottom: 17rem; line-height: 1; font-size: var(--font-24); font-weight: 500;}

.latest-list li:not(:last-child) {margin-bottom: 12rem;}
/* .latest-list li {padding: 32rem 30rem; border-radius: 20rem; border: 1px solid var(--bd-03); background: var(--bg-03);}
.latest-list li a {overflow: hidden; position: relative; font-size: var(--font-18); font-weight: 600; color: var(--b-02); white-space: nowrap; text-overflow: ellipsis; transition: var(--trans-01);}
.latest-list li a::before {opacity: 0; visibility: hidden; position: absolute; left:0; top: 5rem; content:''; width: 8rem; height: 8rem; border-radius: 100%; background: var(--f-01); transition: var(--trans-01);}
.latest-list li:hover {background: var(--c-02);}
.latest-list li:hover > a {padding-left: 20rem; color: var(--f-01);}
.latest-list li:hover > a strong {color:var(--f-01);}
.latest-list li:hover > a::before {opacity: 1; visibility: visible;} */

.latest-list li a {overflow: hidden; position: relative; padding: 32rem 30rem; font-size: var(--font-18); font-weight: 600; color: var(--b-02); white-space: nowrap; text-overflow: ellipsis; border-radius: 20rem; border: 1px solid var(--bd-03); background: var(--bg-03); transition: var(--trans-01);}
.latest-list li a strong {color: var(--b-02);}
.latest-list li a::before {opacity: 0; visibility: hidden; position: absolute; left:32rem; top: 37rem; content:''; width: 8rem; height: 8rem; border-radius: 100%; background: var(--f-01); transition: var(--trans-01);}
.latest-list li.on > a {background: var(--c-02);}
.latest-list li.on > a {padding-left: 52rem; color: var(--f-01);}
.latest-list li.on > a strong {color:var(--f-01);}
.latest-list li.on > a::before {opacity: 1; visibility: visible;}

.latest-list li > p {display: none;}
.latest-cont {padding: 15rem; border-radius: 20rem; border: 2px solid var(--bd-01);}
.latest-cont__inr {overflow-y: scroll; height: 640rem; padding: 40rem 35rem; }
.latest-cont__inr::-webkit-scrollbar{width:8rem;background-color:#fafafa;border-radius: 4rem;}
.latest-cont__inr::-webkit-scrollbar-thumb:hover{background-color: var(--c-01);border-radius: 4rem;}
.latest-cont__inr::-webkit-scrollbar-thumb{background-color: var(--bd-03);border-radius: 4rem;}

.latest-cont__inr h6 {margin-bottom: 20rem; font-family: var(--lang-ko); font-size: var(--font-32); font-weight: 700; line-height: 1.4;}
.latest-cont__info {margin-bottom: 36rem; padding-bottom: 12rem; border-bottom: 1px solid var(--bd-03);}
.latest-cont__info p span {color: var(--b-02); font-size: var(--font-15); text-transform: uppercase;}
.latest-cont__info .lt_date {display: flex; align-items: center; line-height: 1; font-size: 14rem; font-weight: 300; color: var(--b-02);}
.latest-cont__info .lt_date::before {content:''; width: 13rem; height: 13rem; margin-right: 6rem; background: url(../img/layout/ic-clock.svg) no-repeat center / contain;}
.latest-cont__text {font-family: var(--lang-ko); line-height: 1.6;}
.latest-cont .btn-wrap {text-align: right; margin: 25rem 0; padding-right: 35rem;}
.latest-cont .btn-wrap a.btn-arrow {display: inline-flex !important;}

@media all and (max-width:1023px){
    .main-notice {padding: 120rem 0;}
    .main-notice::before {right: -100rem; bottom: -80rem; width: 400rem; height: 400rem;}
    .main-notice .lat {background: transparent;}
    .main-notice .lat > div {width: 100%;}
    .latest-cont {display: none;}
    .main-notice .btn-wrap {margin-top: 40rem;}
    .latest-list li > p {display: inline-flex;}
}

@media (max-width:860px){
    .latest-list li {padding: 22rem 30rem;}
}

@media (max-width:540px){
    .main-notice {padding: 70rem 0;}
    .main-notice::before {right: -57rem; bottom: -15rem; width: 200rem; height: 200rem;}
    .latest-list .main-title {margin-bottom: 10rem;}
    .latest-list li {padding: 10rem 15rem; border-radius: 12rem;}
    .latest-list li:not(:last-child) {margin-bottom: 5rem;}
    .latest-list li a {font-size: 14rem;}
    .latest-list li:hover > a {padding-left: 15rem;}
    .latest-list li:hover > a::before {width: 5rem; height: 5rem;}
    .main-notice .btn-wrap {margin-top: 20rem;}
}

 /* family */
 .main-family__list {gap: 0;height: var(--height-full);}
 .main-family__list h3 {font-size: var(--font-32); font-weight: 700; color: var(--f-01);}
 .main-family__item {position: relative;}
 .main-family__item a {display: block; width: 100%; height: 100%; transition: var(--trans-01);}
 .main-family__item a:hover {color: var(--c-01);}
 .main-family__item a > div {width: 100%; height: 100%;}
 .main-family__item::before {position: absolute; left:50%; top:0; opacity: .1; content:''; display: block; width: calc(100% - 40rem); height: 1px; background: var(--f-01); transform: translateX(-50%);}
 .main-family__item::after {opacity: .1; position: absolute; right: 0; top: 50%; content:''; display: block; width: 1px; height: calc(100% - 40rem); background: var(--f-01); transform: translateY(-50%);}
 .main-family__item:nth-child(4n)::after {display: none;}
 .main-family__item > div {height: 100%; align-items: center; justify-content: center; }
 .main-family__item svg {transition: var(--trans-02);}
 .main-family__item:hover svg {transform: rotate(180deg);}
 .main-family__item:nth-child(7):hover svg {transform: scale(1.2);}
 .main-family__item:nth-child(10):hover svg {transform: rotateY(180deg);}

 @media all and (max-width:1023px){
    .main-family__item svg {transform: scale(0.8);}
    .main-family__item:nth-child(4n)::after {display: block;}
    .main-family__item:nth-child(3n)::after {display: none;}
    .main-family__item:hover svg {transform: scale(0.8) rotate(180deg);}
    .main-family__item:nth-child(10):hover svg {transform: scale(0.8) rotateY(180deg);}
    .main-family__list {height: auto;}
    .main-family__item > div {height: 250rem;}
}

@media (max-width:540px){
    .main-family__item > div {height: 150rem;}
    .main-family__item svg {transform: scale(0.6);}
    .main-family__item:hover svg {transform: scale(0.6) rotate(180deg);}
    .main-family__item:nth-child(3n)::after {display: block;}
    .main-family__item:nth-child(10):hover svg {transform: scale(0.6) rotateY(180deg);}
}


/* board */
#main #bo_gall .gall_img .no_image,
#main .gallery-list__img:not(:has(img)),
#main .gallery-slide figure:not(:has(img)){background:rgba(255, 255, 255, .2);}
#main #bo_gall .gall_img .no_image::after,
#main .gallery-list__img:not(:has(img))::after,
#main .gallery-slide figure:not(:has(img))::after {opacity: 0.2; position: absolute; left:50%; top: 150rem; content:''; width: 125rem; height: 40rem; background: url(../img/layout/noimage-logo.png) no-repeat center / contain; transform: translate(-50%, 0);}


@media (max-width:860px){
    #main #bo_gall .gall_img .no_image::after,
    #main .gallery-list__img:not(:has(img))::after,
    #main .gallery-slide figure:not(:has(img))::after {top: 83rem; width: 100rem; height: 35rem;}
}

@media (max-width:540px){
    #main #bo_gall .gall_img .no_image::after,
    #main .gallery-list__img:not(:has(img))::after,
    #main .gallery-slide figure:not(:has(img))::after {top: 95rem; width: 100rem; height: 32rem;}
}