/* reset */
* { margin:0; padding:0; box-sizing: border-box; }
html { font-family: 'Montserrat', sans-serif;  font-size: 62.5%; letter-spacing:-0.025em; }
a { text-decoration:none; }
ul, ol { list-style:none; }


/* common */
.thin { font-weight: 100; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }

.neon { text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8); }
.main-tit { font-size: 8rem; position: absolute; top: -12rem; left: -5rem; z-index: 1; }

html, body { background-color: #1F1F1F; color: #FFFFFF; box-sizing: border-box; overflow-x: hidden; }
section { position: relative; }
.container { width: 100%; max-width: 180rem; margin: 0 auto; padding: 0 6rem; }
img { width: 100%; }

body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-thumb { background: #666; border-radius: 10rem; }


/* header */
header { width: 100%; height: 10rem; padding: 0 6rem; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; z-index: 99999; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
header .logo a { font-size: 3rem; color: white;}

/* header .toggle-box { display: none; } */
header #checkbox { display: none; }
header .toggle { position: relative; width: 4rem; height: 4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition-duration: .5s; }
header .bars { width: 100%; height: 0.4rem; background-color: #FFFFFF; border-radius: 4px; }
header #bar2 { transition-duration: .8s; }
header #bar1, header #bar3 { width: 70%; }

header #checkbox:checked + .toggle .bars { position: absolute; transition-duration: .5s; }
header #checkbox:checked + .toggle #bar2 { transform: scaleX(0); transition-duration: .5s; }
header #checkbox:checked + .toggle #bar1 { width: 100%; transform: rotate(45deg); transition-duration: .5s; }
header #checkbox:checked + .toggle #bar3 { width: 100%; transform: rotate(-45deg); transition-duration: .5s; }
header #checkbox:checked + .toggle { transition-duration: .5s; transform: rotate(180deg); }


/* main */
.main .circle-wrap { padding-bottom: 62%; }
.main .circle-wrap .circle { width: 62%; height: 0; padding-bottom: 62%; position: absolute; border-radius: 100%; background: linear-gradient(180deg, #148c44 0%, rgba(31, 35, 51, 0.00) 100%); filter: blur(25px); }
.main .circle-wrap .circle.one {  animation: CircleOne 3s linear Infinite; }
.main .circle-wrap .circle.two { right: 0; animation: CircleTwo 3s linear Infinite; }

.main .main-txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.main .main-txt h1 { font-size: 12rem; line-height: 1; margin-bottom: 2rem; }
.main .main-txt h3 { font-size: 3.2rem; line-height: 1; }

@keyframes CircleOne {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes CircleTwo {
  0% { transform: rotate(-90deg); }
  100% { transform: rotate(-450deg); }
}


/* about */
.about .container { display: flex; justify-content: center; gap: 8rem; padding-top: 30rem; padding-bottom: 18rem; }
.about .left { position: relative; }

.about .right { max-width: 75rem; }
.about .right .about-txt { font-size: 2rem; word-break: keep-all; margin-bottom: 8rem; line-height: 1.6; }
.about .right .tit { font-size: 2.8rem; color: #3cbb78; text-shadow: 0 0 20px rgba(9, 241, 106, 0.6); margin-bottom: 2rem; }
.about .right .list-wrap li strong { display: block; position: relative; font-size: 2rem; padding-left: 1.4rem; margin-bottom: 0.8rem; }
.about .right .list-wrap li strong::before { content: ''; display: block; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #FFFFFF; position: absolute; top: 1.1rem; left: 0; }
.about .right .list-wrap li ul li { font-size: 1.6rem; padding-left: 1.4rem; }
.about .right .list-wrap > li + li { margin-top: 1.6rem; }
.about .img { position: relative; width: 300px;}
.about .img .bg-img { display: block; width: 100%; height: 100%; background-color: #1F1F1F; position: absolute; top: 0; left: 0; }

/* work */
.work .container { padding-bottom: 25rem; }
.work .main-tit { max-width: 132rem; width: 100%; left: 50%; transform: translateX(-50%); z-index: 10; }
.work .work-wrap { display: flex; gap: 6rem; max-width: 123rem; margin: auto; margin-bottom: 8rem; }
.work .work-wrap .img-wrap { width: 66rem; height: 33rem; overflow: hidden; position: relative; }
.work .work-wrap .img-wrap img { width: 100%; }

.work .work-wrap .desc-wrap { position: relative; }
.work .work-wrap .desc-wrap h3 { font-size: 2.8rem; color: #3cbb78; margin-bottom: 1.6rem; }
.work .work-wrap .desc-wrap h4 { font-size: 2rem; margin-bottom: 1.6rem; }
.work .work-wrap .desc-wrap ul { display: flex; flex-wrap: wrap; gap: 2.4rem; font-size: 1.6rem; }

.work .work-wrap .desc-wrap .button { position: absolute; display: block; bottom: 0; left: 0; padding: 15px 20px; font-size: 16px; font-weight: 600; border: 2px solid #414141; color: white; background-color: transparent; cursor: pointer; border-radius: 10px; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); }
.work .work-wrap .desc-wrap .button:hover { border-color: #3cbb78; box-shadow: 0 0 20px rgba(9, 241, 106, 0.6); }
.work .work-wrap .desc-wrap .button:active { box-shadow: 0 0 10px rgba(9, 241, 106, 0.6); }
.work .work-wrap .desc-wrap .button.site { left: 10rem; }

/* swiper */
.work .swiper-pagination { bottom: 2rem; }
.work .swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; margin: 0 0.6rem !important; background-color: #D9D9D9; opacity: 1; transition: all 0.3s; }
.work .swiper-pagination-bullet-active { width: 3.2rem; background-color: #3cbb78; border-radius: 3.2rem; box-shadow: 0 0 20px rgba(9, 241, 106, 0.6);
}

.work .work-wrap .desc-wrap > * { opacity: 0; transform: translateY(50px); transition: 0.2s; }
.work .swiper-slide-active .work-wrap .desc-wrap > * { opacity: 1; transform: translateY(0); transition: 1s; }

.work .work-wrap .img-wrap::before {  content: ''; display: block; width: 100%; height: 100%; background-color: #1F1F1F; position: absolute; top: 0; left: 0; }
.work .swiper-slide-active .work-wrap .img-wrap::before { width: 0; transition: width 1s; }

.work .work-wrap .img-wrap .bg-img { display: block; width: 100%; height: 100%; background-color: #1F1F1F; position: absolute; top: 0; left: 0; }


/* footer */
footer { text-align: center; margin-bottom: 6rem; }
footer p { font-size: 1.4rem; margin-bottom: 1.6rem; }
footer span { font-size: 1.2rem; }



/* modal */
.modal-active { position: fixed; top: 0; left: 0; overflow: hidden; width: 100%; }

#modal-container { position: fixed; display: block; height: 100%; width: 100%; top: 0; left: 0; transform: scale(0); z-index: 999999; }
#modal-container .modal-bg { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.8); }
#modal-container .modal-bg .modal { max-width: 90rem; width: 90%; height: 70%; display: inline-block; position: relative; border-radius: 2rem; box-shadow: 0 0 20px rgba(9, 241, 106, 0.6); border: 2px solid #3cbb78; background-color: #1a1a1a; overflow-x: hidden; top: 0; padding: 4rem 2.4rem; }

#modal-container .modal-bg .modal::-webkit-scrollbar { width: 10px;  }
#modal-container .modal-bg .modal::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,1); border-radius: 10px;  border: 4px solid rgb(26, 26, 26, 1); }
#modal-container .modal-bg .modal::-webkit-scrollbar-track { background-color: rgba(0,0,0,0); }

#modal-container .modal-bg .modal::-webkit-scrollbar-button:vertical:start:decrement,
#modal-container .modal-bg .modal::-webkit-scrollbar-button:vertical:start:increment,
#modal-container .modal-bg .modal::-webkit-scrollbar-button:vertical:end:decrement {
  display: block;
}

#modal-container.on { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
#modal-container.on .modal-bg .modal { transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
#modal-container.on.out { transform: scale(1); animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
#modal-container.on.out .modal-bg .modal { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

#modal-container .modal-bg .modal .modal-inner { display: flex; flex-direction: column; justify-content: center; max-width: 50rem; min-height: 100%; margin: auto; }
/* #modal-container .modal-bg .modal .thumbnail { width: 100%; } */
#modal-container .modal-bg .modal .thumbnail-mob { width: 100%; max-width: 20rem; margin: 1.2rem auto 0; }
#modal-container .modal-bg .modal .hash { margin: 1.2rem 0; display: flex; gap: 1rem; font-size: 1.4rem; }
#modal-container .modal-bg .modal h3 { font-size: 2.4rem; color: #7bc8a6; margin-top: 4rem; }
#modal-container .modal-bg .modal ul:not(.hash) { word-break: keep-all; font-size: 1.4rem; margin-top: 0.8rem;  list-style: square; }
#modal-container .modal-bg .modal ul:not(.hash) li + li { margin-top: 0.8rem; }

  
@keyframes unfoldIn {
  0% { transform: scaleY(0.005) scaleX(0); }
  50% { transform: scaleY(0.005) scaleX(1); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes unfoldOut {
  0% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(0.005) scaleX(1); }
  100% { transform: scaleY(0.005) scaleX(0); }
}
@keyframes zoomIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes zoomOut {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}





@media (max-width: 1199px) {
    .about .container { flex-wrap: wrap; gap: 4rem; }
    .work .work-wrap { flex-wrap: wrap; gap: 4rem; justify-content: center; }
    .work .work-wrap .desc-wrap { width: 66rem; height: 23rem; }
    .work .main-tit { max-width: 78rem; }
}

@media (max-width: 769px) {
    .container { padding: 0 2.4rem; }
    .main-tit { font-size: max(12vw, 56px); left: -7vw; }
    
    header { height: 6rem; padding: 0 2.4rem; }
    header .logo { font-size: 2rem; }
    header .toggle { width: 3rem; height: 3rem; gap: 0.7rem; }
    header .bars { height: 0.3rem; }

    .main .circle-wrap { height: 100vh; padding-bottom: 0; }
    .main .circle-wrap .circle-box { height: 62vw; position: relative; top: 50%; transform: translateY(-50%); }
    .main .main-txt h1 { font-size: 16vw; margin-bottom: 1.2rem; }
    .main .main-txt h3 { font-size: 4vw; }

    .about .container { padding-top: 6rem; padding-bottom: 20rem; gap: 2.4rem; }
    .about .right .about-txt { font-size: 1.6rem; margin-bottom: 4rem; }
    .about .right .tit { font-size: 2.4rem; margin-bottom: 1.2rem; }
    .about .right .list-wrap li strong { font-size: 1.6rem; }
    .about .right .list-wrap li ul li { font-size: 1.4rem; }

    .work .container { padding-bottom: 20rem; }
    .work .work-wrap { gap: 2.4rem; }
    .work .work-wrap .img-wrap { height: auto; }
    .work .work-wrap .desc-wrap { height: 20rem; }
    .work .work-wrap .desc-wrap h3 { font-size: 2.4rem; margin-bottom: 1.2rem; }
    .work .work-wrap .desc-wrap h4 { font-size: 1.6rem; margin-bottom: 1.2rem; }
    .work .work-wrap .desc-wrap ul { font-size: 1.4rem; gap: 1.2rem; }
}

@media (max-width: 500px) {
    .main-tit { left: -2.4rem; }
}