@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

html {
   scroll-behavior: smooth;
   font-family: "Noto Sans KR", sans-serif;
}

html,
body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

body {
   background-color: #fff;
}

button {
   background: none;
   cursor: pointer;
   transition: all 0.2s ease;
}

button:focus-visible {
   outline: 3px dotted #ff3300;
   outline-offset: 2px;
}

button:hover {
   filter: brightness(1.08);
}

#visitCounter {
   display: none;
}

#menuarea {
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   height: 79px;
   display: flex;
   align-items: center;
   justify-content: center;
   column-gap: 30px;
   background-color: #fff;
   border-bottom: 1px solid #e0e0e0;
   z-index: 99999;
   box-sizing: border-box;
}

#menuarea #logo_menu {
   margin-right: 600px;
}

#logo_menu img {
   display: block;
}

#menu_list {
   display: flex;
   align-items: center;
   column-gap: 30px;
}

#mobile_menu_btn {
   display: none;
}

.menu {
   color: #c6c6c6;
   font-size: 16px;
   font-weight: 600;
   border: none;
   white-space: nowrap;
}

.menu:hover,
.menu.active {
   color: #1a8a6c;
}

.pageWrap {
   width: 100%;
   height: calc(100vh - 79px);
   overflow-y: auto;
   overflow-x: hidden;
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
}

.area {
   width: 100%;
   height: calc(100vh - 79px);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 40px;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   box-sizing: border-box;
}

.objGroup {
   transform-origin: center center;
   transition: transform 0.3s ease;
}

.area_0 {
   background-color: #1a8a6c;
}

.area_0 .objGroup {
   display: flex;
   align-items: center;
   flex-direction: column;
   row-gap: 50px;
   text-align: center;
}

.area_0 #obj_text_1 {
   font-size: 20px;
   font-weight: 400;
   color: #add6cb;
   white-space: nowrap;
}

.area_0 #obj_text_1 .highlight_h {
   color: #fff;
}

.area_0 #obj_text_2 {
   font-size: 16px;
   font-weight: 500;
   color: #fff;
   white-space: nowrap;
}

.area_0 #btn_movearea {
   width: 218px;
   height: 48px;
   margin-top: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   column-gap: 20px;
   background: url(../images/btn_bg.png) no-repeat center;
   border: none;
   font-weight: 600;
   color: #fff;
   font-size: 20px;
   white-space: nowrap;
}
.area_2 .objGroup,
.area_3 .objGroup,
.area_4 .objGroup {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   row-gap: 25px;
   text-align: center;
}
.area_2 .hearder,
.area_3 .hearder,
.area_4 .hearder {
   color: #393939;
}
.area_2 .hearder .h_title,
.area_3 .hearder .h_title,
.area_4 .hearder .h_title {
   font-size: 30px;
   font-weight: 600;
   margin-bottom: 10px;
}
.area_2 .hearder .h_text,
.area_3 .hearder .h_text,
.area_4 .hearder .h_text {
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 20px;
}
.area_2 .objBoxGroup,
.area_3 .objBoxGroup {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
}
.area_2 .objBox,
.area_3 .objBox {
   width: 230px;
   height: 230px;
   background-color: #f6f6f6;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
.area_2 .objBox .deco {
   width: 20px;
   height: 3px;
   background-color: #26896c;
   margin-bottom: 10px;
}
.area_2 .objBox .deco_title {
   font-size: 20px;
   font-weight: 600;
   color: #26896c;
   margin-bottom: 30px;
}
.area_2 .objBox .deco_text {
   font-size: 16px;
   font-weight: 400;
   color: #393939;
}
body.isMobile .area_2 .objBox,
body.isMobile .area_3 .objBox {
   box-sizing: border-box;
}

body.isMobile .area_2 .objBox .deco {
   width: clamp(14px, 2vw, 20px);
   height: clamp(2px, 0.4vw, 3px);
   margin-bottom: clamp(6px, 1vw, 10px);
}

body.isMobile .area_2 .objBox .deco_title {
   font-size: clamp(15px, 2vw, 20px);
   margin-bottom: clamp(14px, 2vw, 30px);
   line-height: 1.3;
   text-align: center;
}

body.isMobile .area_2 .objBox .deco_text {
   font-size: clamp(12px, 1.5vw, 16px);
   line-height: 1.5;
   text-align: center;
   padding: 0 10px;
   box-sizing: border-box;
}
.area_3 .objBox {
   position: relative;
   overflow: hidden;

   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(5px) saturate(100%);
   -webkit-backdrop-filter: blur(5px) saturate(100%);

   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 24px;

   box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      background 0.3s ease;
}

.area_4 .objGroup {
   display: flex;
   flex-direction: column;
   align-items: center;
   row-gap: 30px;
}

.area_4 .sendArea {
   width: 700px;
   display: flex;
   flex-direction: column;
   row-gap: 20px;
}

.area_4 .sendGroup {
   display: flex;
   align-items: center;
   column-gap: 24px;
}

.area_4 .sendGroup .text {
   width: 110px;
   flex-shrink: 0;
   font-size: 16px;
   font-weight: 600;
   color: #393939;
   padding-top: 0;
   box-sizing: border-box;
}

.area_4 .sendGroup_5 {
   align-items: flex-start;
}

.area_4 .sendGroup_5 .text {
   padding-top: 14px;
}
.area_4 .guideline {
   font-size: 17px;
   color: #393939;
   font-weight: 400;
}
.area_4 input,
.area_4 select,
.area_4 textarea {
   width: 100%;
   height: 52px;
   border: 1px solid #d9d9d9;
   border-radius: 20px;
   padding: 0 16px;
   box-sizing: border-box;
   font-size: 15px;
   font-family: "Noto Sans KR", sans-serif;
   background: rgba(255, 255, 255, 0.75);

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.area_4 textarea {
   height: 180px;
   padding: 16px;
   resize: none;
}

.area_4 .phoneWrap,
.area_4 .emailWrap {
   display: flex;
   align-items: center;
   gap: 10px;
}

.area_4 #phone_direct {
   width: 140px;
   flex-shrink: 0;
}

.area_4 #phone_middle,
.area_4 #phone_last {
   flex: 1;
}

.area_4 .email_at {
   font-size: 17px;
   font-weight: 400;
}

.area_4 #email_id {
   flex: 1;
}

.area_4 #email_domain_direct {
   flex: 1;
}

.area_4 #email_domain_select {
   width: 180px;
   flex-shrink: 0;
}

.area_4 .btn_send {
   width: 218px;
   height: 48px;
   border: none;
   border-radius: 24px;
   border: 1px solid #c6c6c6;
   color: #393939;
   font-size: 18px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   column-gap: 20px;
   margin: 0 auto;
}

.area_4 .btn_send:hover {
   transform: scale(1.02);
}
body.isMobile .area_4 .phoneWrap,
body.isMobile .area_4 .emailWrap {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 6px;
}

body.isMobile .area_4 #phone_first {
   width: 70px;
   flex: 0 0 70px;
}

body.isMobile .area_4 #phone_direct {
   width: 70px;
   flex: 0 0 70px;
}

body.isMobile .area_4 #phone_middle,
body.isMobile .area_4 #phone_last {
   min-width: 0;
   flex: 1;
}

body.isMobile .area_4 #email_id {
   min-width: 0;
   flex: 1;
}

body.isMobile .area_4 #email_domain_direct {
   min-width: 0;
   flex: 1;
}

body.isMobile .area_4 #email_domain_select {
   width: 95px;
   flex: 0 0 95px;
}

body.isMobile .area_4 .email_at {
   display: inline-flex;
   align-items: center;
}
body.isMobile .area_4 input,
body.isMobile .area_4 select,
body.isMobile .area_4 textarea {
   height: 44px;
   font-size: 13px;
   padding: 0 10px;
}

body.isMobile .area_4 textarea {
   height: 120px;
   padding: 12px 10px;
}
body.isMobileLandscape .area_4 .objGroup {
   width: calc(100vw - 20px);
   max-width: none;
   padding: 0 10px;
   box-sizing: border-box;
   flex-direction: row;
   column-gap: 20px;
}

body.isMobileLandscape .area_4 .hearder {
   width: 230px;
   flex: 0 0 230px;
}

body.isMobileLandscape .area_4 .sendArea {
   flex: 1;
   width: auto;
   max-width: none;
   min-width: 0;
}

body.isMobileLandscape .area_4 .hearder .h_title {
   white-space: nowrap;
}

body.isMobileLandscape .area_4 .hearder .h_text {
   white-space: nowrap;
   word-break: keep-all;
   line-height: 1.5;
}

body.isMobileLandscape .area_4 .sendGroup .text {
   width: 110px;
   flex-shrink: 0;
   white-space: nowrap;
   word-break: keep-all;
}

body.isMobileLandscape .area_4 .phoneWrap,
body.isMobileLandscape .area_4 .emailWrap {
   width: 100%;
}

body.isMobileLandscape .area_4 #phone_first {
   width: 90px;
   flex: 0 0 90px;
}

body.isMobileLandscape .area_4 #phone_middle,
body.isMobileLandscape .area_4 #phone_last,
body.isMobileLandscape .area_4 #email_id,
body.isMobileLandscape .area_4 #email_domain_direct {
   flex: 1;
   min-width: 0;
}

body.isMobileLandscape .area_4 #email_domain_select {
   width: 120px;
   flex: 0 0 120px;
}
.highlight_h {
   position: relative;
   display: inline-block;
   animation-name: premiumTwinkle;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   will-change: transform, filter, text-shadow, opacity;
}

@keyframes premiumTwinkle {
   0% {
      transform: scale(1);
      opacity: 1;
      filter: brightness(1);
      text-shadow: none;
   }

   8% {
      transform: scale(1.08);
      filter: brightness(1.35);
      text-shadow:
         0 0 8px rgba(255, 255, 255, 1),
         0 0 18px rgba(255, 255, 255, 0.95),
         0 0 40px rgba(255, 255, 255, 0.9),
         0 0 70px rgba(255, 255, 255, 0.75);
   }

   14% {
      transform: scale(0.98);
      opacity: 0.82;
      filter: brightness(1.55);
   }

   22% {
      transform: scale(1.12);
      opacity: 1;
      filter: brightness(1.75);
      text-shadow:
         0 0 12px rgba(255, 255, 255, 1),
         0 0 24px rgba(255, 255, 255, 1),
         0 0 55px rgba(255, 255, 255, 1),
         0 0 90px rgba(255, 255, 255, 0.8);
   }

   30%,
   100% {
      transform: scale(1);
      opacity: 1;
      filter: brightness(1);
      text-shadow: none;
   }
}

body.isMobile #menuarea {
   height: 64px;
   padding: 0 18px;
   justify-content: space-between;
}

body.isMobile #menuarea #logo_menu {
   margin-right: 0;
}

body.isMobile #logo_menu img {
   width: 92px;
   height: auto;
}

body.isMobile #mobile_menu_btn {
   width: 42px;
   height: 42px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   row-gap: 6px;
   border: none;
   z-index: 100001;
}

body.isMobile #mobile_menu_btn span {
   width: 26px;
   height: 3px;
   display: block;
   background-color: #1a8a6c;
   border-radius: 10px;
   transition: 0.25s ease;
}

body.isMobile #mobile_menu_btn.open span:nth-child(1) {
   transform: translateY(9px) rotate(45deg);
}

body.isMobile #mobile_menu_btn.open span:nth-child(2) {
   opacity: 0;
}

body.isMobile #mobile_menu_btn.open span:nth-child(3) {
   transform: translateY(-9px) rotate(-45deg);
}

body.isMobile #menu_list {
   position: fixed;
   top: 64px;
   right: 0;
   width: 220px;
   padding: 20px 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   background-color: #fff;
   border-left: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
   transform: translateX(100%);
   opacity: 0;
   pointer-events: none;
   transition: 0.25s ease;
   z-index: 100000;
}

body.isMobile #menu_list.open {
   transform: translateX(0);
   opacity: 1;
   pointer-events: auto;
}

body.isMobile .menu {
   width: 100%;
   padding: 16px 22px;
   font-size: 15px;
   text-align: left;
   box-sizing: border-box;
}

body.isMobile .pageWrap {
   height: calc(100dvh - 64px);
}

body.isMobile .area {
   height: calc(100dvh - 64px);
   min-height: calc(100dvh - 64px);
}

body.isMobile .area_0 {
   align-items: center;
   justify-content: center;
}

body.isMobile .area_0 .objGroup {
   row-gap: 50px;
}

body.isMobile .area_0 #obj_text_1,
body.isMobile .area_0 #obj_text_2,
body.isMobile .area_0 #btn_movearea {
   white-space: nowrap;
}
#btn_topmove {
   position: fixed;
   right: 30px;
   bottom: 30px;
   width: 64px;
   height: 64px;
   border: none;
   border-radius: 50%;
   background-color: #1a8a6c;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   opacity: 0;
   pointer-events: none;
   transform: translateY(20px);
   transition: 0.25s ease;
   z-index: 99999;
}

#btn_topmove.show {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}

body.isMobile #btn_topmove {
   right: 18px;
   bottom: 18px;
   width: 52px;
   height: 52px;
   font-size: 13px;
}
body.isMobile .objGroup {
   transform-origin: center center;
   transition: transform 0.3s ease;
}
body.isMobile .objGroup {
   transform-origin: center center;
   transition: transform 0.3s ease;
}

body.isMobile .area img {
   max-width: 100%;
   height: auto;
   display: block;
}

body.isMobile .area_2 .objBoxGroup,
body.isMobile .area_3 .objBoxGroup {
   display: grid;
   grid-template-columns: repeat(2, 230px);
   justify-content: center;
   gap: 10px;
}

body.isMobileLandscape .area_2 .objBoxGroup,
body.isMobileLandscape .area_3 .objBoxGroup {
   grid-template-columns: repeat(4, 230px);
}
input::placeholder {
   color: #c6c6c6;
}

textarea::placeholder {
   color: #c6c6c6;
}

/* 포트폴리오 페이지용 */

.area_3 .objBox {
   height: 255px;
   padding: 18px;
   box-sizing: border-box;
   justify-content: flex-start;
}

.portScroll {
   width: 100%;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   padding-right: 4px;
   margin-top: 20px;
   box-sizing: border-box;
}

.portGrid {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px 10px;
}

.portIcon {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   color: #393939;
}

.portIconThumb {
   width: 70px;
   height: 70px;
   border-radius: 14px;
   overflow: hidden;
}

.portIconThumb img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.portIconTitle {
   width: 70px;
   margin-top: 6px;
   font-size: 11px;
   font-weight: 500;
   line-height: 1.2;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

body.isMobile .portGrid {
   grid-template-columns: repeat(2, 1fr);
   gap: 10px 6px;
}