@charset "UTF-8";

html, body {font-family: 'Pretendard'; font-size: 16px;}
.container { width: 100vw; height: 100vh; display: flex; position: relative; overflow: hidden;}
.logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; transition: left 0.5s ease;}
.logo img {display: block; width: 12.75rem; height: auto;}
.container .intro-item {width: 50%; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background-attachment: fixed; background-size: cover; transition: width 0.5s ease;}
.container .intro-item.left {background: no-repeat url(../images/intro/img-intro-left.png) left center/cover;}
.container .intro-item.right {background: no-repeat url(../images/intro/img-intro-right.png) left center/cover;}
.container .intro-item.left::before {content: ''; display: block; width: 100%; height: 100%; background: rgba(61, 159, 21, 0.7); position: absolute; top: 0; left: 0;}
.container .intro-item.right::before {content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 136, 179, 0.7); position: absolute; top: 0; left: 0;}
.container .intro-item .intro-content {text-align: center; z-index: 10;}
.container .intro-item .intro-title {font-size: 2.625rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem;}
.container .intro-item .intro-desc {font-size: 1.25rem; font-weight: 500; line-height: 1.5; color: #fff; margin-bottom: 2.5rem;}
.container .intro-item .intro-link {display: inline-block; font-size: 1.125rem; font-weight: 700; width: 248px; padding: 1.125rem 0; border-radius: 4px; background: #fff;}
.container .intro-item.left .intro-link {color: #51B900;}
.container .intro-item.right .intro-link {color: #0090C4;}
.container .intro-item .intro-item-footer {position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; background-color: rgba(0,0,0,.3);}
.container .intro-item .intro-item-footer strong {display: block; position: relative; padding-left: 1.5rem; font-size: 1.125rem; font-weight: 600; color: #fff; margin-right: 1.5rem;}
.container .intro-item .intro-item-footer strong::before {content: ''; display: block; width: 1rem; height: 1rem; background: no-repeat url(resource/images/intro/icon-store.png) center center/cover; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.container .intro-item .intro-item-footer .intro-btn-group {display: flex; align-items: center; gap: 1rem;}
.container .intro-item .intro-item-footer .intro-btn-group .intro-btn {width: 180px; padding: .875rem 0; border: 1px solid #fff; color: #fff; text-align: center; font-size: 1rem; font-weight: 600; border-radius: 4px; transition: all 0.2s ease-in-out;}
.container .intro-item .intro-item-footer .intro-btn-group .intro-btn:hover {background-color: #fff; color: #064B66;}
@media (max-width: 1400px) {
  html {font-size: 14px;}
  .container .intro-item .intro-item-footer .intro-btn-group .intro-btn {width: 146px;}
  .container .intro-item .intro-title {font-size: 28px;}
}
@media (max-width:1023px) {
  .logo img {width: 140px;}
  .container .intro-item .intro-item-footer {flex-direction: column; gap: 1.25rem; height: 120px;}
  .container .intro-item .intro-item-footer strong {margin-right: 0;}
}
@media (max-width:767px) {
  .container {flex-direction: column;}
  .container .intro-item {width: 100%; height: 50vh;}
  .container .intro-item.right .intro-content {padding-bottom: 40px;}
  .container .intro-item .intro-title {font-size: 24px;}
  .container .intro-item .intro-desc {font-size: 16px; margin-bottom: 18px;}
  .container .intro-item .intro-link {width: 200px; padding: 14px 0; font-size: 15px;}
  .container .intro-item .intro-item-footer .intro-btn-group .intro-btn {font-size: 14px;}
}