* { box-sizing: border-box; }
html {scroll-behavior: smooth;}
body {margin: 0; color: #111111; background: #fffff; line-height: 1.45; font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;}
a {color: inherit; text-decoration: none;}
button {font: inherit; cursor: pointer; border: 0; background: none;}
img {display: block; max-width: 100%;}
ul, ol {margin: 0; padding: 0; list-style: none;}
.d-none {display: none;}
.intro-wrap {width:100%; height: 100vh; min-height: 100vh; overflow-x: hidden;
             display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}

.intro-header {width: 100%; flex: 0 0 80px; background-color: #000000;
               display: flex; flex-direction: row; justify-content: center; align-items: center;}
.intro-brand-mark {height: 45px;}

.intro-main   {width: 100%; flex: 1 1 auto; background-color: #000000;}
.intro-main-section {width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;}

.section-content {flex: 1 1 0; height: 100%;
                  display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; position: relative;}
.section-img {flex: 1 1 auto; height: 100%; object-fit: cover; opacity: 0.6;}
.section-img:hover {opacity: 1;}

.section-span {position: absolute; top: 64.2%; color: #ffffff; text-align: center; line-height: 1.825; z-index: 5;}
.intro-center-name {font-size: 32px; font-weight: 700;}
.intro-center-sub  {font-size: 24px;}
.section-span-bg {position: absolute; top: 60%; background-color: #000000; width: 80%; height: 175px; opacity: 0.4;}
.section-content:has(.section-span:hover) .section-img {opacity: 1;}
.section-content:has(.section-span-bg:hover) .section-img {opacity: 1;}

.intro-footer {width: 100%; flex: 0 0 80px; background-color: #000000; color: #ffffff;
               display: flex; flex-direction: row; justify-content: center; align-items: center;}
.intro-footer span {font-size: 16px;}

@media (max-width: 850px) {
.intro-main-section {flex-direction: column;}
.section-content {width: 100%; max-height: 400px;}

.section-span {top: 46.5%;}
.section-span-bg {top: 40%; height: 150px;}
}

@media (max-width: 800px) {
.intro-footer span {font-size: 13px;}
}

@media (max-width: 400px) {
.section-span {top: 63%;}
.section-span-bg {top: 60%; height: 90px;}
.intro-center-name {font-size: 22px;}
.intro-center-sub  {font-size: 16px;}
}