@charset "utf-8";
@import url('font.css');
/* 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Exo 2', 'Noto Sans KR', sans-serif;
}
ul {
  list-style: none;
}
img {
  vertical-align: top;
}
a {
  text-decoration: none;
  color: #333;
}

/* 공통클래스 */
.container {
  padding: 0 72px 0 67px;
}
.en-txt3 {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0;
}
.tit-wrap .sub-tit {
  font-size: 14px;
  font-weight: 500;
  color: rgba(65, 65, 65, 0.3);
}
.tit-wrap .sub-tit span.line {
  display: inline-block;
  width: 128px;
  height: 1px;
  background: #252525;
  opacity: 0.1;
  margin: 0 20px 0 18px;
  vertical-align: middle;
}
.tit-wrap .main-tit {
  font-size: 58px;
  font-weight: 300;
  margin: 47px 0 20px;
  line-height: 1;
}
.tit-wrap .desc {
  font-size: 18px;
  font-weight: normal;
  color: rgb(125, 125, 125);
  letter-spacing: -0.54px;
}
/* 버튼 */
.btn-view {
  display: block;
  height: 65px;
  line-height: 63px;
  overflow: hidden;
  border-radius: 33px;
  border: 2px solid #326aff;
  transform: translateZ(0);
  transition: background-color .3s ease-in-out;
  cursor: pointer;
  color: #fff;
  width: 240px;
  text-align: left;
}
.btn-view .button-effect {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  display: block;
  width: 110%;
  height: 100%;
  border-radius: 33px;
  background: #326aff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s cubic-bezier(.785, .135, .15, .86);
}
.btn-view:hover .button-effect {
  transform: scaleX(1);
  transform-origin: left;
  background: #326aff;
  border-radius: 33px;
}
.btn-view .button-inner {
  position: relative;
  display: inline-block;
  z-index: 4;
  line-height: 64px;
  text-align: left;
  color: #326aff;
  font-size: 16px;
  padding: 0 24px;
  transition: all .6s cubic-bezier(.785, .135, .15, .86), color .6s cubic-bezier(.785, .135, .15, .86);
  background: url('../image/bestProduct/b_more_plus.png') no-repeat 90%;
}
.btn-view:hover .button-inner {
  background: url('../image/bestProduct/more_plus.png') no-repeat 90%;
  color: rgba(255, 255, 255, 1);
}

html, body {
  font-family: 'Exo 2', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  color: #000;
  letter-spacing: -0.5px;
  line-height: 1.6;
  outline: none;
  overflow-x: clip;
}

.wrap {}
/* fixed */
/* side-left */
.side-left {
  position: fixed;
  left: 21px;
  bottom: 90px;
  z-index: 999999;
  transition: 0.5s;
  width: 137px;
  height: 137px;
  border-radius: 25px;
  box-shadow: 0 0 40.9px 2.2px rgba(0, 0, 0, 0.14);
  background-color: rgb(50, 106, 255);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.side-left img {
  margin: 0 auto;
}
.side-left p {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 9px 0 13px;
  line-height: 1;
}
.side-left span {
  font-size: 12px;
  font-weight: 300;
  color: #fff;
  line-height: 1.2;
}

.side-right {
  position: fixed;
  right: 21px;
  bottom: 90px;
  z-index: 999999;
  transition: 0.5s;
}
.side-right .side-menu {
  border-radius: 5px;
  margin-bottom: 8px;
  overflow: hidden;
}
.side-right .side-menu li {
  height: 79px;
  width: 79px;
  background: #191919;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.side-right .side-menu li.store {
  background: #2b2b2b;
}
.side-right .side-menu li.qna {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.side-right .side-menu li.mall {
  background: #326aff;
}
.side-right .side-menu li:hover {
  background: #326aff;
}
.side-right .side-menu li img {
  cursor: pointer;
}
.side-right .side-menu li span {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-top: 8px;
  line-height: 1.2;
}
.side-right .top-button {
  width: 63px;
  height: 63px;
  border-radius: 100%;
  background-color: rgb(43, 43, 43);
  margin: 0 auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.side-right .top-button img {
  max-width: 100%;
}
.side-right .top-button span {
  display: block;
  margin-top: 8px;
  line-height: 1.2;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}

.chat-box {
  position: fixed;
  z-index: 999999;
  inset: auto 10px 20px auto;
  display: block;
}
.chat-box .chat-desc {
  margin: 12px 0px;
  padding: 20px 25px;
  display: flex;
  width: 295px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 10px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
}
.chat-box .chat-desc svg {
  display: block;
  width: 10px;
  height: 10px;
  stroke: rgb(196, 196, 196);
  position: absolute;
  top: 8px;
  right: 8px;
}
.chat-box .chat-desc .img-box {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 8px;
  margin-right: 15px;
  overflow: hidden;
  background-size: cover;
}
.chat-box .chat-desc .img-box img {
  width: 100%;
}
.chat-box .chat-desc .txt-box {}
.chat-box .chat-desc .txt-box p {
  font-size: 12px;
  font-weight: 700;
}
.chat-box .chat-desc .txt-box span {
  font-size: 12px;
  display: block;
}
.chat-box .chatbot {
  text-align: right;
  line-height: 0;
}
.chat-box .chatbot .dyc-blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}
.chat-box .chatbot svg {
  width: 50px;
  height: 50px;
}

/* 헤더영역 */
header {
  position: relative;
  z-index: 100;
}
/* header > pop */
.pop {
  background-color: #326aff;
}
.pop .container {
  position: relative;
}
.pop .popInfo {
  height: 41px;
  line-height: 41px;
  font-size: 14px;
  font-weight: 500;
}
.pop .popInfo > a {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 17px;
}
.pop .popInfo > a img {
  max-width: 100%;
}
.pop .popInfo .info-text {
  color: #fff;
}
.pop .popInfo .info-text strong {}
.pop .popClose {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  position: absolute;
  top: 0;
  right: 71px;
}
.pop .popClose span {
  color: #fff;
  font-size: 12px;
  font-weight: 100;
  line-height: 41px;
}
.pop .popClose img {
  max-width: 100%;
  cursor: pointer;
}
/* header > menu */
.menu {
  line-height: 97px;
  position: relative;
}
.menu .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu #logo {
  width: 231px;
}
.menu #logo img {
  vertical-align: middle;
}
.menu nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menu nav .main-menu {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Noto Sans KR';
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 46px;
}
.menu nav .main-menu > li {
  transition: 0.4s;
}
.menu nav .main-menu > li > a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 97px;
  font-family: 'Noto Sans KR';
}
.menu nav .main-menu > li:hover > a {
  color: #326aff;
}
.menu nav .main-menu > li > a::after {
  position: absolute;
  left: 0;
  bottom: 31px;
  width: 100%;
  height: 2px;
  background: #326aff;
  content: '';
  opacity: 0;
  transition: 0.5s;
}
.menu nav .main-menu > li:hover > a::after {
  opacity: 1;
}
.menu nav .main-menu > li .submenu-wrap {
  width: calc(100vw - 14px);
  height: 0;
  border-radius: 0 0 20px 20px;
  background: #fff url('../image/header/submenu_bg.png') no-repeat 99% bottom;
  position: absolute;
  top: 97px;
  left: 50%;
  z-index: 999;
  transition: all 0.5s ease;
  overflow: hidden;
  transform: translateX(-50%);
  margin-top: -2px;
}
.menu nav .main-menu > li .submenu-wrap.active {
  height: 400px;
  transition: all 0.5s ease;
}
.menu nav .main-menu > li .submenu-wrap .submenu {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #f4f4f4;
}
.menu nav .main-menu.fixed > li .submenu-wrap .submenu {
  border-top: 1px solid #f4f4f4;
}
.menu nav .main-menu > li .submenu > a {}
.menu nav .main-menu > li .submenu > li {
  /* padding-top: 30px; */
}
.menu nav .main-menu > li .submenu > li > a {
  text-align: center;
}
.menu nav .main-menu > li .submenu > li > ul {}
.menu nav .main-menu > li .submenu > li > ul > li {
  padding: 0 60px;
  text-align: left;
  line-height: 1.6;
  position: relative;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 4px;
}
.menu nav .main-menu > li .submenu > li > ul > li:first-child::before {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  content: '';
}
.menu nav .main-menu > li .submenu > li:last-child > ul > li:first-child:before {
  display: none;
}
.menu nav .main-menu > li .submenu > li > ul > li:first-child {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  margin-bottom: 30px;
  position: relative;
}
.menu nav .main-menu > li .submenu > li > ul > li:hover > a {
  color: #326aff;
}
.menu nav .main-menu > li .submenu > li > ul > li a {}
.menu .h-info-right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18.2px;
}
.menu .h-info-right .log-in {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu .h-info-right .log-in li {
  position: relative;
  padding: 0 11px;
}
.menu .h-info-right .log-in li:last-child {
  padding-right: 44.2px;
}
.menu .h-info-right .log-in li::before {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 1px;
  height: 13px;
  opacity: 0.2;
  background: #636363;
}
.menu .h-info-right .log-in li:last-child::before {
  display: none;
}
.menu .h-info-right .log-in li a {}
.menu .h-info-right .menu-ham {
  position: relative;
}
.menu .h-info-right .menu-ham img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* 메인영역 */
main {}
/* section.visual */
section.visual {
  /* width: 100%; */
  z-index: 1;
}
.visual .sw-visual {
  position: relative;
}
.visual .sw-visual .swiper-slide {
  position: relative;
  height: calc(100vh - 138px);
  overflow: hidden;
}
.visual .sw-visual .swiper-slide .black {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -85%);
  display: inline-block;
  z-index: 9;
  pointer-events: none;
  /* width: clamp(241px, 25.1vw, 482px); */
}
.visual .sw-visual .swiper-slide .black img {
  width: 100%;
}
.visual .sw-visual .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.visual .sw-visual .swiper-slide a .bg-dark {
  width: 100%;
  height: 100%;
}
.visual .sw-visual .swiper-slide a .bg-dark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visual .sw-visual .swiper-slide a .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  z-index: 3;
}
.visual .sw-visual .swiper-slide a .mask img {
  width: 300%;
  height: 300%;
  max-width: none;
  animation: 6s ease-in-out 0s infinite normal forwards running sw-ani;
}
@keyframes sw-ani {
  0% {
    transform: translate3d(-100%, 33.3333%, 0);
  }
  100% {
    transform: translate3d(33.3333%, -99.6667%, 0);
  }
}
.visual .sw-visual .swiper-slide a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visual .sw-visual .swiper-slide a video {
  position: absolute;
  left: 50%;
  width: 100vw;
  top: 0;
  transform: translateX(-50%);
  max-width: initial;
  pointer-events: none;
}
.visual .sw-visual .swiper-slide a video source {}

.visual .sw-visual .sw-page {
  /* width: 23.84%; */
  display: flex;
  justify-content: center;
  max-width: 1516px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  left: 50%;
  transform: translateX(-50%);
  gap: 1.16%;
  bottom: calc(90px + 59.781px);
  position: absolute;
  z-index: 10;
}

.visual .sw-visual .time {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.visual .sw-visual .time svg {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* section.oneOnly */
section.oneOnly {
  padding: 105px 0 140px;
}
.oneOnly .tit-wrap {
  /* position: relative; */
  max-width: 1516px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}
.oneOnly .tit-wrap .sub-tit {
  font-size: 14px;
  font-weight: 500;
  color: rgba(65, 65, 65, 0.3);
}
.oneOnly .tit-wrap .sub-tit span {}
.oneOnly .tit-wrap .sub-tit span.line {
  display: inline-block;
  width: 128px;
  height: 1px;
  background: #252525;
  opacity: 0.1;
  margin: 0 20px 0 18px;
  vertical-align: middle;
}

.oneOnly .tit-wrap .main-tit {
  font-size: 58px;
  font-weight: 300;
  margin: 47px 0 20px;
  line-height: 1;
}
.oneOnly .tit-wrap .main-tit span.en-txt3 {
  line-height: 1;
}

.oneOnly .tit-wrap .desc {
  font-size: 18px;
  font-weight: normal;
  color: rgb(125, 125, 125);
  letter-spacing: -0.54px;
}

.oneOnly .menu-padding {
  position: relative;
  max-width: 1516px;
  width: 100%;
  margin: 47px auto 0;
  padding: 0 15px;
  text-align: center;
}
.oneOnly .menu-padding .imgMenu {
  font-size: 0;
  display: flex;
  justify-content: center;
  gap: 1.29%;
}
.oneOnly .menu-padding .imgMenu li {
  vertical-align: middle;
  width: 22.73%;
  transition: 0.3s;
  overflow: hidden;
  border-radius: 20px;
  /* position: relative; */
}
.oneOnly .menu-padding .imgMenu li:hover {
  transform: scale(1.032);
}
.oneOnly .menu-padding .imgMenu li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.oneOnly .menu-padding .imgMenu li a .txtbox {
  width: 100%;
  height: 100%;
  padding: 35px 30px 66px;
  text-align: left;
  z-index: 9;
  transition: 0.5s ease-in;
  position: absolute;
  top: 0;
  left: 0;
}
.oneOnly .menu-padding .imgMenu li:hover a .txtbox {
  background: rgba(0, 0, 0, 0.5);
}
.oneOnly .menu-padding .imgMenu li a .txtbox .txt-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.oneOnly .menu-padding .imgMenu li a .txtbox .txt-wrap span {}
.oneOnly .menu-padding .imgMenu li a .txtbox .txt-wrap span.up-tit {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  position: relative;
  line-height: 1;
  text-transform: uppercase;
  transition: 0.3s;
}
.oneOnly .menu-padding .imgMenu li a .txtbox .txt-wrap span.up-tit::before {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  content: '';
  background: #fff;
  opacity: 0;
  transition: 0.3s;
}
.oneOnly .menu-padding .imgMenu li:hover a .txtbox .txt-wrap span.up-tit {
  font-size: 22px;
}
.oneOnly .menu-padding .imgMenu li:hover a .txtbox .txt-wrap span.up-tit::before {
  opacity: 1;
}
.oneOnly .menu-padding .imgMenu li a .txtbox .txt-wrap span.hidden-desc {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 25px;
  line-height: 1.47;
  font-weight: 500;
  letter-spacing: -2.38px;
  color: rgb(255, 255, 255);
  opacity: 0;
  transition: 0.5s ease-in;
}
.oneOnly .menu-padding .imgMenu li:hover a .txtbox .txt-wrap span.hidden-desc {
  opacity: 1;
}

/* .section.smarttech */
.section.smarttech {
  /* overflow: hidden; */
}
.smarttech .tit-wrap {
  max-width: 1516px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}
.smarttech .tit-wrap .sub-tit {
  font-size: 14px;
  font-weight: 500;
  color: rgba(65, 65, 65, 0.3);
}
.smarttech .tit-wrap .sub-tit span {}
.smarttech .tit-wrap .sub-tit span.line {
  display: inline-block;
  width: 128px;
  height: 1px;
  background: #252525;
  opacity: 0.1;
  margin: 0 20px 0 18px;
  vertical-align: middle;
}
.smarttech .tit-wrap .main-tit {
  font-size: 58px;
  font-weight: 300;
  margin: 47px 0 20px;
  line-height: 1;
}

.smarttech .img-menu {
  position: relative;
  margin-top: 29px;
  height: 752px;
  background: url('../image/smartTech/sec02_bg_0.png') no-repeat center;
  transition: 0.4s;
}
.smarttech .img-menu .change-bg {
  position: absolute;
  top: 50%;
  /* left: 50%; */
  transform: translateY(-50%);
}
.smarttech .change-bg .desc-top {}
.smarttech .change-bg .desc-top li {
  text-align: center;
}
.smarttech .change-bg .desc-top li span {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: normal;
  text-transform: capitalize;
  letter-spacing: -0.9px;
}
.smarttech .change-bg .desc-top li p {
  margin: 20px 0 19px;
  color: #fff;
  font-size: 58px;
  letter-spacing: -3.48px;
  font-weight: 300;
  line-height: 1;
}
.smarttech .change-bg .desc-top li span:last-child {}

.smarttech .change-bg .line-wrap {
  padding-top: 7%;
  text-align: center;
}
.smarttech .change-bg .line-wrap .desc-bottom {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100vw;
  position: relative;
}
.smarttech .change-bg .line-wrap .desc-bottom::before {
  position: absolute;
  content: '';
  /* top: 77px; */
  top: 70px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transition: 1.3s;
  z-index: -5;
}
.smarttech .change-bg .line-wrap .desc-bottom.on::before {
  width: 100%;
}
.smarttech .change-bg .line-wrap .desc-bottom li {
  position: relative;
}
.smarttech .change-bg .line-wrap .desc-bottom li::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  padding: 120px;
  border-radius: 25px;
  background: #326aff;
  transition: 0.5s;
  z-index: -5;
  opacity: 0;
}
.smarttech .change-bg .line-wrap .desc-bottom li.active::before {
  opacity: 1;
}
.smarttech .change-bg .line-wrap .desc-bottom li .img-icon {}
.smarttech .change-bg .line-wrap .desc-bottom li .img-icon img {}
.smarttech .change-bg .line-wrap .desc-bottom li .dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #fff;
  margin: 29px auto 14px;
  position: relative;
}
.smarttech .change-bg .line-wrap .desc-bottom li .main-tit {
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -1.5px;
  color: #fff;
  display: block;
}
.smarttech .change-bg .line-wrap .desc-bottom li .more-veiw {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  position: relative;
  margin-top: 35px;
  opacity: 0;
  transition: 0.4s ease-in-out;
  transition-delay: 0.2s;
}

/* section.product */
section.product {
  position: relative;
}
.product .tit-wrap {
  /* position: relative; */
  max-width: 1516px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 100px 0 60px;
}
.product .tit-wrap .sub-tit {
  font-size: 14px;
  font-weight: 500;
  color: rgba(65, 65, 65, 0.3);
}
.product .tit-wrap .sub-tit span {}
.product .tit-wrap .sub-tit span.line {
  display: inline-block;
  width: 128px;
  height: 1px;
  background: #252525;
  opacity: 0.1;
  margin: 0 20px 0 18px;
  vertical-align: middle;
}

.product .tit-wrap .main-tit {
  font-size: 58px;
  font-weight: 300;
  margin: 47px 0 20px;
  line-height: 1;
}
.product .tit-wrap .main-tit span.en-txt3 {
  line-height: 1;
}

.product .tit-wrap .desc {
  font-size: 18px;
  font-weight: normal;
  color: rgb(125, 125, 125);
  letter-spacing: -0.54px;
}
/* ===================================================== */
.product .menu-scroll {
  display: flex;
  /* text-align: left; */
  justify-content: center;
  /* align-items: flex-start; */
  /* position: absolute;
  left: 0;
  top: 0; */
  position: relative;
  /* max-width: 1516px; */
  /* padding: 0 15px; */
  /* height: 945px; */
  /* width: 100%;
  z-index: 9;
  position: relative; */

}
.product .menu-scroll .left-menu {
  position: sticky;
  top: 0;
  height: fit-content;
}
.product .menu-scroll .left-menu .img-box {
  position: relative;
}
.product .menu-scroll .left-menu .img-box img {
  height: 100vh;
}
.product .menu-scroll .left-menu .img-box .btn-view {
  position: absolute;
  bottom: 12%;
  left: 26%;
}
/* .product .menu-scroll .left-menu .img-box .btn-view .button-effect {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  display: block;
  width: 110%;
  height: 100%;
  border-radius: 33px;
  background: #326aff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s cubic-bezier(.785, .135, .15, .86);
}
.product .menu-scroll .left-menu .img-box .btn-view:hover .button-effect {
  transform: scaleX(1);
  transform-origin: left;
  background: #326aff;
  border-radius: 33px;
} */
.product .menu-scroll .left-menu .img-box .btn-view .button-inner {
  width: 241px;
}
/* .product .menu-scroll .left-menu .img-box .btn-view:hover .button-inner {
  background: url('../image/bestProduct/more_plus.png') no-repeat 90%;
  color: rgba(255, 255, 255, 1);
} */


.product .menu-scroll .right-menu {
  max-width: 1518px;
  width: 100%;
  padding: 15px 0;
}
.product .menu-scroll .right-menu ul {
  /* float: right; */
  font-size: 0;
  padding-top: 96px;
  /* width: 60.35%; */
  width: calc(1516px * 60.35 / 100);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* margin-right: -2.6%; */
  margin: 0 auto;
  /* margin: 0 0 0 auto; */
  align-items: flex-start;
}
.product .menu-scroll .right-menu ul li {
  width: 50%;
  padding: 0 4.2%;
}
.product .menu-scroll .right-menu ul li a {
  border-radius: 25px;
  overflow: hidden;
  display: block;
  /* position: relative; */
  width: 100%;
}
.product .menu-scroll .right-menu ul li a img {
  width: 100%;
}
.product .menu-scroll .right-menu ul li .main-tit {
  font-size: 22px;
  font-weight: 600;
  color: rgb(52, 52, 52);
  line-height: 1;
  display: block;
  padding: 18px 0 24px;
}
.product .menu-scroll .right-menu ul li .desc {
  display: inline-block;
  margin-right: 5px;
  padding: 0 18px;
  height: 38px;
  line-height: 36px;
  border-radius: 19px;
  border: solid 1px rgba(50, 106, 255, 0.5);
  color: #326aff;
  margin-bottom: 58px;
  font-size: 14px;
}
/*============section.landmark */
section.landmark {
  text-align: center;
  overflow: hidden;
}
.landmark .text-wrap {
  max-width: 1516px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
.landmark .text-wrap .w-landmark {
  color: rgba(231, 233, 235, 0.25);
  font-size: 267.5px;
  letter-spacing: -13.38px;
  line-height: 1;
  transition: 1s;
  display: block;
}
.landmark .text-wrap .up-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.landmark .text-wrap .up-wrap .tit-wrap {}
.landmark .text-wrap .up-wrap .tit-wrap .sub-tit {}
.landmark .text-wrap .up-wrap .tit-wrap .sub-tit span {}
.landmark .text-wrap .up-wrap .tit-wrap .sub-tit span.line {}
.landmark .text-wrap .up-wrap .tit-wrap .main-tit {}
.landmark .text-wrap .up-wrap .tit-wrap .desc {}
.landmark .text-wrap .up-wrap .btn-view {}
.landmark .text-wrap .up-wrap .btn-view .button-effect {}
.landmark .text-wrap .up-wrap .btn-view .button-inner {
  width: 225px;
}

.landmark .landbg-wrap {
  position: relative;
}
.landmark .landbg-wrap .img-wrap {
  position: relative;
  margin-top: 39px;
}
.landmark .landbg-wrap .img-wrap img {}
.landmark .landbg-wrap .line-wrap {
  position: absolute;
  left: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  width: 100%;
}
.landmark .landbg-wrap .line-wrap .landMlogo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.landmark .landbg-wrap .line-wrap .landMlogo::before {
  position: absolute;
  content: '';
  left: 0;
  top: 146px;
  width: 100%;
  height: 2px;
  opacity: 0.2;
  background-color: rgb(255, 255, 255);
}
.landmark .landbg-wrap .line-wrap .landMlogo li {
  width: 22.5%;
  text-align: left;
  display: inline-block;
  vertical-align: top;
}
.landmark .landbg-wrap .line-wrap .landMlogo li img {
  font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    /* height: 18px; */
    display: inline-block;
}
.landmark .landbg-wrap .line-wrap .landMlogo li .line_with {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  margin: 26px 0 38px;
  background-color: rgb(255, 255, 255);
  opacity: 0;
  transition: 0.5s ease-in;
}
.landmark .landbg-wrap .line-wrap .landMlogo li:hover .line_with {
  opacity: 1;
}
.landmark .landbg-wrap .line-wrap .landMlogo li::after {
  display: block;
  content: '';
  margin-top: 56px;
}

/* section.media */
section.media {
  padding-top: 116px;
  padding-bottom: 244px;
}
.media .tit-wrap {
  text-align: center;
  padding-bottom: 50px;
}
.media .tit-wrap .sub-tit {}
.media .tit-wrap .sub-tit span {}
.media .tit-wrap .sub-tit span.line {}
.media .tit-wrap .main-tit {}
.media .tit-wrap .desc {}

.media .menu-padding {
  /* position: relative; */
  max-width: 1516px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
.media .menu-padding .imgMenu {
  display: flex;
  gap: 1%;
  justify-content: center;
  align-items: center;

}
.media .menu-padding .imgMenu li {
  text-align: center;
  width: 19%;
  margin-right: 1%;
  transition: 0.3s;
  overflow: hidden;
  position: relative;
  height: 636px;
  border-radius: 15px;
}
.media .menu-padding .imgMenu li.on {
  width: 58%;
  transition: 0.3s;
}
.media .menu-padding .imgMenu li.on::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: #000;
  opacity: 0.7;
}
.media .menu-padding .imgMenu li .txtbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.media .menu-padding .imgMenu li .txtbox .txt-wrap {}
.media .menu-padding .imgMenu li .txtbox .txt-wrap .up-tit {
  font-size: 15px;
  color: #fff;
  display: block;
  line-height: 1;
  margin-bottom: 19px;
}
.media .menu-padding .imgMenu li .txtbox .txt-wrap .hidden-desc {
  display: block;
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  position: relative;
  transition: 0.3s;
  white-space: nowrap;
}
.media .menu-padding .imgMenu li.on .txtbox .txt-wrap .hidden-desc {
  font-size: 42px;
}
.media .menu-padding .imgMenu li .txtbox .txt-wrap .hidden-desc::before {
  position: absolute;
  left: 0;
  bottom: -6px;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  opacity: 0;
  transition: 0.3s;
}
.media .menu-padding .imgMenu li.on .txtbox .txt-wrap .hidden-desc::before {
  opacity: 1;
}
.media .menu-padding .imgMenu li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}








/* 푸터영역 */
footer {
  background-color: #111b2a;
}
.f-top {
  height: auto;
  display: flex;
  max-width: 1400px;
  width: 100%;
  margin: 00 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 89px;
  color: #fff;
}
.f-top .f-two {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: clamp(0px, 4.583333vw, 88px);
}
/* footer > f-top */
.f-top .f-first {}
.f-top .f-first h2 {}
.f-top .f-first h2 img {}
.f-top .f-first p.p-num {
  margin-top: 16px;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.24px;
  text-align: left;
  color: #f2f7ff;
}
.f-top .f-first p.time {
  margin-top: 8px;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: -0.13px;
  text-align: left;
  color: rgba(199, 203, 209, 0.8);
}

.f-top .f-second {}
.f-top .f-second span {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: -0.45px;
  text-align: left;
  color: rgba(199, 203, 209, 0.8);
  margin-left: 8px;
}
.f-top .f-second span strong {
  margin-top: 7px;
  font-size: 15px;
  /* font-weight: bold; */
  color: #c7cbd1;
}

.f-top .f-third {}
.f-top .f-third .family {
  position: relative;
  width: 272px;
  height: 61px;
  line-height: 61px;
  border-radius: 18px;
  border: solid 1px rgba(247, 247, 247, 0.3);
  background: url('../image/footer/down_arr_w.png') no-repeat right 26px center;
  z-index: 3;
  transition: 0.5s;
  display: inline-block;
  text-align: left;
}
.f-top .f-third .family.on {
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #fff url('../image/footer/up_arr_b.png') no-repeat 88% center;
}
.f-top .f-third .family p {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 61px;
  padding: 0 26px;
  width: 100%;
  display: block;
  cursor: pointer;
  transition: color 0.5s;
}
.f-top .f-third .family.on p {
  color: rgb(17, 27, 42);
}
.f-top .f-third .family .family-menu {
  position: absolute;
  left: 0;
  top: 61px;
  width: 100%;
  display: none;
  z-index: -3;
  background: #fff;
  padding: 15px 26px 20px;
  border-top: 1px solid rgba(86, 93, 104, 0.2);
  border-radius: 0 0 18px 18px;
}
/* .f-top .f-third .family.on .family-menu {
  display: block;
} */
.f-top .f-third .family .family-menu li {
  line-height: 35px;
}
.f-top .f-third .family .family-menu li a {
  font-size: 16px;
  color: rgba(17, 27, 42, 0.4);
  letter-spacing: -0.32px;
  transition: 0.5s;
}

.f-top .f-third .sns {
  display: flex;
  align-items: center;
  margin-top: 27px;
  flex-direction: row;
  margin-bottom: 78px;
}
.f-top .f-third .sns a {
  position: relative;
  padding: 0 25px;
}
.f-top .f-third .sns a + a::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translate(0, -50%);
  width: 1px;
  height: 10px;
  opacity: 0.3;
  background-color: #9c9c9c;
}
.f-top .f-third .sns a img {}

.f-bottom {}
.f-bottom ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 32px;
  padding: 20px 0;
  border-top: 1px solid rgba(247, 247, 247, 0.1);
}
.f-bottom ul li {}
.f-bottom ul li a {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.93;
  letter-spacing: -0.45px;
  text-align: left;
  color: rgba(255, 255, 255, 0.3);
}
.f-bottom p{
  display: block;
  height: 39px;
  line-height: 39px;
  background: #08111f;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.2);
}