@charset "utf-8";

html {
  min-width: 1300px;
  overflow-y: scroll;
}
/* .visual { min-height:405px; position:relative;} */
.visual {
  min-height: 405px;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.visual .bx-controls-direction {
  position: relative;
  margin: 0 auto;
  top: -202px;
  min-width: 1200px;
  max-width: 1900px !important;
}
.visual .bx-controls.bx-has-controls-direction.bx-has-pager {
  position: relative;
}
.bxslider-m > li {
  text-align: center;
}
.visual .bx-wrapper {
  position: absolute;
  left: 50%;
  margin-left: -950px;
  width: 1900px;
  max-width: none !important;
}
.visual .bx-wrapper img {
  max-width: none;
}
.visual .bx-wrapper .bx-pager {
  display: block;
}
.visual .bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  bottom: 0;
}
.visual .bx-wrapper .bx-pager.bx-default-pager a {
  margin-left: 0px;
  margin-right: 0;
  height: 4px !important;
}
.visual .bx-wrapper .bx-pager .bx-pager-item {
  margin-left: 2px;
}
.visual .bx-wrapper .bx-pager .bx-pager-item:first-child {
  margin-left: 0px;
}
.visual .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  width: 100% !important;
  text-align: center !important;
}
.visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
.visual .bx-wrapper .bx-pager.bx-default-pager a.active,
.visual .bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #333 !important;
}
.visual .bx-wrapper .bx-prev {
  background: url(../img/main/main-visual-left.png) no-repeat;
  width: 42px;
  height: 42px;
  left: 0px;
  margin-top: -21px;
}
.visual .bx-wrapper .bx-next {
  background: url(../img/main/main-visual-right.png) no-repeat;
  width: 42px;
  height: 42px;
  right: 0px;
  margin-top: -21px;
}
.visual .visual-abs {
  position: absolute;
  width: 1200px;
  margin: 0 auto;
  left: 50%;
  margin-left: -600px;
  top: 0px;
  text-align: left;
}
.visual .visual-abs > p {
  padding-left: 32px;
  color: #555555;
  letter-spacing: -0.025em;
}
.visual .visual-abs > p:first-child {
  margin-top: 100px;
  font-size: 18px;
}
.visual .visual-abs > p.subj {
  font-size: 44px;
  color: #2f2f2f;
  letter-spacing: -0.05em;
  font-weight: bold;
  margin: 5px 0px;
}
.visual .visual-abs > p.date {
  font-size: 15px;
}
.visual .visual-abs > p > a {
  margin-top: 20px;
  background: url(../img/main/visual-btn.png) no-repeat;
  width: 150px;
  height: 39px;
  overflow: hidden;
  display: inline-block;
}
.visual .visual-abs > p > a > span {
  margin: 12px 0px 0px 30px;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.05em;
  display: inline-block;
  line-height: 14px;
}

.swiper-slide-09m .slideImgBox:after {
  width: 235px;
  height: 160px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -117.5px;
  display: block;
  background: url(../images/mainVisual/visualMain-09m_leaf1.png);
  content: "";
  transition: all 1.5s ease-out;
  transform: translateY(100%);
}
.swiper-slide-09m.swiper-slide-active .slideImgBox:after {
  transform: translateY(0);
}
.mcon01 .swiper-slide.swiper-slide-09m .slideBox .smallTxt span i {
  background-color: #d56e27;
  color: #fff;
}

.mcon01 .swiper-slide-2024c {
}
.mcon01 .swiper-slide.swiper-slide-2024c .slideBox .smallTxt span i {
  background-color: #ff405f;
  color: #fff;
}
.mcon01 .swiper-slide.swiper-slide-autoc .slideBox .bigfirstTitle {
  color: #1f1f1f;
}
.mcon01 .swiper-slide.swiper-slide-autoc .slideBox .bigThirdTitle {
  color: #1f1f1f;
}
.mcon01 .swiper-slide.swiper-slide-autoc .slideBox .smallTxt span i {
  background-color: #ffd51e;
  color: #1f1f1f;
}

.mcon01 .swiper-slide.swiper-slide-autoc3 .slideBox .bigfirstTitle {
  color: #fff;
}
.mcon01 .swiper-slide.swiper-slide-autoc3 .slideBox .bigThirdTitle {
  font-size: 18pt;
  color: #fff;
}
.mcon01 .swiper-slide.swiper-slide-autoc3 .slideBox .smallTxt span i {
  background-color: #fff223;
  color: #000000;
}

.cate-title {
  float: left;
  width: 400px;
  margin-top: 30px;
}
.cate-slider {
  float: right;
  width: 789px;
  margin-top: 30px;
}
.cate-title strong {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -0.025em;
  color: #2f2f2f;
  line-height: 30px;
  padding-top: 15px;
  background: url(../img/common/bg-title-line2.png) no-repeat;
  display: inline-block;
}
.cate-title strong span {
  color: #333;
}
.cate-title p {
  font-size: 14px;
  letter-spacing: -0.025em;
  color: #555;
  line-height: 20px;
  margin-top: 20px;
}
.cate-listul > li:first-child {
  font-size: 12px;
  color: #2f2f2f;
  line-height: 15px;
  margin-bottom: 7px;
}
.cate-slider .bx-controls-direction {
  display: none;
}
.cate-slider .bx-wrapper .bx-pager {
  display: block;
  text-align: right !important;
}

.cate-slider .bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  top: -75px !important;
  height: 15px;
}
.cate-slider .bx-wrapper .bx-pager.bx-default-pager a {
  width: 15px;
  height: 15px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background: #cccccc;
  margin: 0 3px;
}
/* .cate-slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: # !important;
}*/

#main-product {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: relative;
  height: 97px;
}
#main-product .pro-cate {
  width: 1199px;
  margin: 0 auto;
  position: relative;
  border-left: 1px solid #ccc;
  height: 97px;
}
#main-product .pro-cate .buttons {
  position: absolute;
  width: 1200px;
  top: 50%;
  margin-top: -13px;
}
/* #main-product .pro-cate .buttons button { position: absolute;  outline: 0; width: 15px; height: 25px; text-indent: -9999px; z-index: 9999; border:0; } */
#main-product .pro-cate .buttons button {
  position: absolute;
  outline: 0;
  width: 15px;
  height: 25px;
  text-indent: -9999px;
  z-index: 9999;
  border: 0;
}
#main-product .pro-cate .buttons button#goToPrevSlide {
  left: -35px;
  background: url(../img/main/slide-left.png) no-repeat;
}
#main-product .pro-cate .buttons button#goToNextSlide {
  right: -35px;
  background: url(../img/main/slide-right.png) no-repeat;
}

/* #main-product .pro-cate .bx-wrapper {
}*/
#main-product .slide {
  float: left;
  position: relative;
  width: 109px !important;
}
/* #main-product .slide:first-child {
}*/
#main-product .slide > a {
  text-align: center;
  width: 100%;
  display: inline-block;
  padding-top: 67px;
  line-height: 20px;
  padding-bottom: 10px;
  font-size: 14px;
  color: #555;
  letter-spacing: -0.025em;
  border-right: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#main-product .slide.active2 > a {
  color: #fff;
}
#main-product .slide.active2 > span {
  background: url(../img/main/slide-arr.png) no-repeat;
  width: 21px;
  height: 11px;
  display: inline-block;
  position: absolute;
  margin-left: 44px;
  margin-top: 97px;
  top: 0px;
  left: 0px;
}
#publicMethods {
  height: 108px !important;
}
#main-product .slide > a.cate01 {
  background: url(../img/main/ico-m03.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate01 {
  background: #4da7ef url(../img/main/ico-m03-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate02 {
  background: url(../img/main/ico-m02.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate02 {
  background: #4da7ef url(../img/main/ico-m02-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate03 {
  background: url(../img/main/ico-m04.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate03 {
  background: #4da7ef url(../img/main/ico-m04-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate04 {
  background: url(../img/main/ico-m01.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate04 {
  background: #4da7ef url(../img/main/ico-m01-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate05 {
  background: url(../img/main/ico-m06.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate05 {
  background: #4da7ef url(../img/main/ico-m06-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate06 {
  background: url(../img/main/ico-m07.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate06 {
  background: #4da7ef url(../img/main/ico-m07-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate07 {
  background: url(../img/main/ico-m10.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate07 {
  background: #4da7ef url(../img/main/ico-m10-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate08 {
  background: url(../img/main/ico-m11.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate08 {
  background: #4da7ef url(../img/main/ico-m11-ov.png) no-repeat center 20px;
}
#main-product .slide > a.cate09 {
  background: url(../img/main/ico-m08.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate09 {
  background: #4da7ef url(../img/main/ico-m08-ov.png) no-repeat center 20px;
}
/*
#main-product .slide > a.cate10 { background:url(../img/main/ico-m09.png) no-repeat center 20px; }
#main-product .slide.active2 > a.cate10 { background:#4da7ef url(../img/main/ico-m09-ov.png) no-repeat center 20px; }
 */
#main-product .slide > a.cate11 {
  background: url(../img/main/ico-m12.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate11 {
  background: #4da7ef url(../img/main/ico-m12-ov.png) no-repeat center 20px;
}
/*
#main-product .slide > a.cate12 { background:url(../img/main/ico-m13.png) no-repeat center 20px; }
#main-product .slide.active2 > a.cate12 { background:#4da7ef url(../img/main/ico-m13-ov.png) no-repeat center 20px; }
 */
#main-product .slide > a.cate13 {
  background: url(../img/main/ico-m05.png) no-repeat center 20px;
}
#main-product .slide.active2 > a.cate13 {
  background: #4da7ef url(../img/main/ico-m05-ov.png) no-repeat center 20px;
}

.pro-list {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60px;
  min-height: 650px;
  display: none;
}
.pro-list.active {
  display: block;
}
.pro-list > ul > li {
  float: left;
  margin: 30px 63px 0px 0px;
}
.pro-list > ul > li.list3li {
  margin: 30px 0px 0px 0px;
}
.sname {
  margin-top: 10px;
  line-height: 35px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #555 !important;
}
.sname a {
  color: #555;
}

.main-area {
  width: 1200px;
  margin: 0 auto;
}
.main-tab {
  position: relative;
  float: left;
  margin-right: 20px;
  height: 308px;
}
.main-tab > ul {
  border-top: 1px solid #b5d8c9;
}
.main-tab > ul > li {
  float: left;
  border-left: 1px solid #ddd;
}
.main-tab > ul > li:first-child {
  border-left: none;
}
.main-tab > ul > li > a {
  width: 197px;
  display: inline-block;
  line-height: 37px;
  height: 37px;
  color: #555;
  letter-spacing: -0.025em;
  text-align: center;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
  color: #2f2f2f;
  font-weight: bold;
}
.main-tab > ul > li > a.last {
  width: 198px;
}
.main-tab > ul > li > a.active {
  background: #f0f9fc;
}
.main-tab > ul > li > a.active > span {
  border-bottom: 1px solid #8f9495;
}
.main-tab > ul > li > ul {
  position: absolute;
  top: 90px;
  left: 0px;
  display: none;
  height: 217px;
}
.main-tab > ul > li > ul.active {
  display: block;
}
.main-tab > ul > li > ul > li {
  float: left;
  position: relative;
}
.main-tab > ul > li > ul > li .v-play {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 217px;
}
.main-tab > ul > li > ul > li:first-child {
  margin-right: 20px;
}
.main-tab > ul > li > ul > li > ul > li:first-child {
  font-size: 15px;
  color: #555;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: -0.025em;
  margin-top: 10px;
  margin-bottom: 15px;
}
.main-tab > ul > li > ul > li > ul > li {
  font-size: 13px;
  color: #888888;
  line-height: 20px;
  width: 370px;
}
.main-tab > ul > li > ul > li > ul > li.btn-tab {
  margin-top: 20px;
}
.main-tab > ul > li > ul > li > ul > li.btn-tab > a {
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  width: 128px;
  display: inline-block;
  background: #cbe2d8 url(../img/main/video-arr.png) 124px 8px no-repeat;
  line-height: 29px;
  height: 30px;
  color: #fff;
  font-size: 13px;
  margin-bottom: 5px;
  padding-left: 21px;
  letter-spacing: -0.025em;
  font-weight: bold;
}
.main-tab > ul > li > ul > li > ul > li.btn-tab > a:hover {
  background: #a0ccb9 url(../img/main/video-arr.png) 124px 8px no-repeat;
}
.mslider {
  float: left;
  width: 388px;
  height: 308px;
}

.mslider .bx-wrapper .bx-prev {
  left: 0px !important;
  background: url(../img/main/mslider-left.png) no-repeat !important;
  width: 39px !important;
  height: 39px !important;
  margin-top: -19px !important;
}
.mslider .bx-wrapper .bx-next {
  right: 0px !important;
  background: url(../img/main/mslider-right.png) no-repeat !important;
  width: 39px !important;
  height: 39px !important;
  margin-top: -19px !important;
}
.mslider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  width: 100% !important;
  text-align: right !important;
  top: -30px !important;
  position: absolute;
  height: 15px;
}
.mslider .bx-wrapper .bx-pager {
  padding-top: 0px !important;
  display: block !important;
}
.mslider .bx-wrapper .bx-pager.bx-default-pager a {
  width: 15px;
  height: 15px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background: #cccccc;
  margin: 0 3px;
}
.mslider .bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #f5f59c !important;
}

.m-ft-banner {
  width: 1200px;
  margin: 0 auto;
}
.m-ft-banner > ul {
  overflow: hidden;
}
.m-ft-banner > ul > li {
  float: left;
  width: 384px;
  overflow: hidden;
  margin-left: 20px;
  border: 1px solid #ccc;
  background: #5f7ffa;
  height: 88px;
}
.m-ft-banner > ul > li:first-child {
  margin-left: 0px;
}
.m-ft-banner > ul > li.banner01 {
  background: #f5f7fa url(../img/main/bg-ico01.png) no-repeat 40px 11px;
}
.m-ft-banner > ul > li.banner02 {
  background: #f5f7fa url(../img/main/bg-ico02.png) no-repeat 40px 11px;
}
.m-ft-banner > ul > li.banner03 {
  width: 386px;
  background: #f5f7fa url(../img/main/bg-ico03.png) no-repeat 40px 11px;
}
.m-ft-banner > ul > li > a {
  padding-left: 147px;
  height: 100%;
  display: inline-block;
  width: 100%;
}
.m-ft-banner > ul > li > a > strong {
  line-height: 25px;
  font-size: 18px;
  padding-top: 20px;
  font-weight: normal;
  display: inline-block;
  color: #2f2f2f;
}
.m-ft-banner > ul > li > a > p {
  line-height: 20px;
  font-size: 13px;
  color: #666666;
}

/* new index */
#newWrapper {
  position: relative;
  width: 100%;
  height: auto;
  font-family: "Noto Sans KR", "Arial";
  overflow: hidden;
}

#container {
  position: relative;
  width: 100%;
}

#container .w1200 {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-top: 70px;
  box-sizing: border-box;
}

#container .mTop {
  padding-top: 40px;
}

#container .w1200 h2 {
  font-family: "arial", "Noto Sans KR" !important;
  font-size: 20px;
  color: #000;
  letter-spacing: -0.05em;
  font-weight: bold;
  padding-bottom: 4px;
  box-sizing: border-box;
  text-align: center;
}

#container .w1200 .subTitle {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  font-size: 11px;
  font-weight: 400;
  color: #000;
  padding: 2px 6px;
  margin: 0 0 20px;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: pre-wrap;
}

#container .w1200.mcon-magazine h2 {
  text-align: left;
}

#container .w1200.mcon-magazine .subTitle {
  position: static;
  left: auto;
  transform: none;
  text-align: left;
}

.mcon01 .swiper-container {
  visibility: hidden;
}

.mcon01 .swiper-container.swiper-ready {
  visibility: visible;
}

.mcon01 .swiper-slide {
  width: 398px;
  height: 207px;
}

.mcon01 .swiper-slide .slideBox {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
}

.mcon01 .swiper-slide .slideBox .slideInfoBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.mcon01 .swiper-slide .slideBox .slideImgBox {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 207px;
  overflow: hidden;
  border-radius: 5px;
}

.mcon01 .swiper-slide .slideBox .slideImgBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}

.mcon01 .swiper-slide .slideBox .slideImgBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mcon01 .swiper-slide .slideBox .bigfirstTitle {
  font-size: 54px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -2px;
  overflow: hidden;
  line-height: 1.1;
}

.mcon01 .swiper-slide .slideBox .bigfirstTitle span {
  display: inline-block;
  transform: translate3d(0, 150%, 0);
  transition: all 0.7s;
}

.mcon01 .swiper-slide .slideBox .bigSecondTitle {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -2px;
  overflow: hidden;
  line-height: 1.1;
  margin-top: 15px;
}

.mcon01 .swiper-slide .slideBox .bigSecondTitle span {
  display: inline-block;
  transform: translate3d(0, 150%, 0);
  transition: all 0.7s;
}

.mcon01 .swiper-slide .slideBox .bigThirdTitle {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -2px;
  overflow: hidden;
  line-height: 1.1;
  margin-top: 15px;
}

.mcon01 .swiper-slide .slideBox .bigThirdTitle span {
  padding-bottom: 10px;
  display: inline-block;
  transform: translate3d(0, 150%, 0);
  transition: all 0.7s;
}

.mcon01 .swiper-slide .slideBox .smallTxt {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
}

.mcon01 .swiper-slide .slideBox .smallTxt span {
  display: inline-block;
  margin-top: 35px;
  transform: translate3d(0, 150%, 0);
  transition: all 0.7s;
}

.mcon01 .swiper-slide .slideBox .smallTxt span i {
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 25rem;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  margin-right: 2px;
  box-sizing: border-box;
  font-style: normal;
  color: rgba(0, 0, 0);
}

.mcon01 .swiper-slide02 .slideBox .slideInfoBox {
  top: 25%;
}

.mcon01 .swiper-slide02 .slideBox .bigfirstTitle {
  font-size: 45px;
  text-align: center;
  color: #15b67b;
}

.mcon01 .swiper-slide02 .slideBox .bigThirdTitle {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: #15b67b;
}

.mcon01 .swiper-slide03 .slideBox .smallTxt span i {
  color: #23c3d7;
}

.mcon01 .swiper-slide04 .slideBox .smallTxt span i {
  color: #86c03b;
}

.mcon01 .swiper-slide05 .slideBox .smallTxt span i {
  color: #f87edd;
}

.mcon01 .swiper-slide06 .slideBox .smallTxt span {
  font-weight: 700;
  font-size: 24px;
}

.mcon01 .swiper-slide07 .slideBox .smallTxt span i {
  border: 1px solid #deb0f8;
  background: #fff;
  color: #c683ec;
}

.mcon01 .swiper-slide08 .slideBox .slideInfoBox {
  top: 25%;
}

.mcon01 .swiper-slide08 .slideBox .bigfirstTitle {
  font-size: 45px;
  text-align: center;
  color: #1470c2;
}

.mcon01 .swiper-slide08 .slideBox .bigThirdTitle {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: #165a98;
}

.mcon01 .swiper-slide-active .slideBox .bigfirstTitle span {
  transition-delay: 0.3s;
  transform: translate3d(0, 0%, 0);
}

.mcon01 .swiper-slide-active .slideBox .bigSecondTitle span {
  transition-delay: 0.3s;
  transform: translate3d(0, 0%, 0);
}

.mcon01 .swiper-slide-active .slideBox .bigSecondTitle.twoLine span {
  transition-delay: 0.6s;
  transform: translate3d(0, 0%, 0);
}

.mcon01 .swiper-slide-active .slideBox .bigThirdTitle span {
  transition-delay: 0.9s;
  transform: translate3d(0, 0%, 0);
}

.mcon01 .swiper-slide-active .slideBox .smallTxt span {
  transition-delay: 1.2s;
  transform: translate3d(0, -31%, 0);
}

.mcon01 .heroControls {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.mcon01 .heroControls a.swiper-prev,
.mcon01 .heroControls a.swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 25rem;
  border: 1px solid rgba(0, 0, 0, 15%);
  background: rgba(255, 255, 255, 80%);
  transition: all 0.2s;
  pointer-events: auto;
}

.mcon01 .heroControls a.swiper-prev {
  left: -57px;
}

.mcon01 .heroControls a.swiper-next {
  right: -57px;
}

.mcon01 .heroControls a.swiper-prev:hover,
.mcon01 .heroControls a.swiper-next:hover {
  background: #ffffff;
}

.mcon01 .heroControls a.swiper-prev span {
  display: block;
  width: 16px;
  height: 16px;
  background: url("/images/newMain/icon_leftArrow_dark2.png") 0 0 no-repeat;
}

.mcon01 .heroControls a.swiper-next span {
  display: block;
  width: 16px;
  height: 16px;
  background: url("/images/newMain/icon_rightArrow_dark2.png") 0 0 no-repeat;
}

.mcon02 {
  position: relative;
}

.mcon02 .newProductLink {
  position: relative;
  display: block;
}

.mcon02 .newProductLink .imgWrap {
  position: relative;
  width: 170px;
  height: 170px;
  overflow: hidden;
  border-radius: 14px;
}

.mcon02 .newProductLink .imgWrap .rankNum {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.mcon02 .newProductLink .imgWrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: all 0.3s;
  background: #f6f6f6;
}

.mcon02 .newProductLink:hover .imgWrap img {
  width: 107%;
}

.mcon02 .newProductLink .imgWrap span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 0;
  height: 0;
  background: rgba(160, 160, 160, 0.1);
  transition: all 0.2s;
}

.mcon02 .newProductLink .imgWrap span i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 0;
  height: 0;
  background: url("/images/newMain/icon_plus.png") center center no-repeat;
}

.mcon02 .newProductLink p {
  font-size: 15px;
  color: #000000;
  letter-spacing: -0.05em;
  font-weight: 400;
  padding-top: 8px;
  box-sizing: border-box;
}

.mcon02 .newProductLink .priceTxt {
  display: none;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.03em;
  padding-top: 4px;
  box-sizing: border-box;
}

.mcon02 .newProductLink p span {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 15px;
  height: 12px;
  background: url("/images/newMain/icon_moreArrow.png") 0 0 no-repeat;
  /* opacity: 0.5; */
  transition: all 0.3s;
}

.mcon02 .newProductLink:hover p span {
  opacity: 1;
}

.mcon02 a.swiper-prev {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, 40%);
}

.mcon02 a.swiper-next {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, 40%);
}

.mcon03 .allProdTabBtnWrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}

.mcon03 .allProdTabBtnWrap li {
  position: relative;
  display: block;
  width: 78px;
}
.mcon03 .allProdTabBtn {
  padding-bottom: 3px;
  display: block;
}

/* 2024-06-12 */
.mcon03 .allProdTabBtn.active {
  border-bottom: #000 solid 1px;
}
/* 2024-06-12 */
.mcon03 .allProdTabBtn span:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 25rem;
  /* border: #e1e1e1 solid 1px; */
  box-sizing: border-box;
  /* background: #ffffff; */
  /* background: #000000; */
  margin: 0 auto;
  transition: all 0.3s;
}
/* 2024-06-12 */
.mcon03 .allProdTabBtn.active span:first-child {
  background-color: #000000 !important;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 5px 0 rgba(171, 171, 171, 0.205);
  border: #000 solid 1px;
}

.mcon03 .allProdTabBtn span:first-child i {
  display: block;
  width: 100%;
  height: 100%;
}
/* 2024-06-12 */

.mcon03 .allProdTabBtn01 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product01_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn02 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product02_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn03 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product03_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn04 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product04_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn05 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product05_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn06 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product06_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn07 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product07_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn08 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product08_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn09 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product09_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn10 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product10_off.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn11 span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product11_off.svg") center
    center / 70% no-repeat;
}

/* on */
/* 2024-06-11phj*/

.mcon03 .allProdTabBtn01:hover span:first-child i,
.mcon03 .allProdTabBtn01.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product01_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn02:hover span:first-child i,
.mcon03 .allProdTabBtn02.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product02_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn03:hover span:first-child i,
.mcon03 .allProdTabBtn03.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product03_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn04:hover span:first-child i,
.mcon03 .allProdTabBtn04.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product04_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn05:hover span:first-child i,
.mcon03 .allProdTabBtn05.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product05_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn06:hover span:first-child i,
.mcon03 .allProdTabBtn06.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product06_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn07:hover span:first-child i,
.mcon03 .allProdTabBtn07.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product07_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn08:hover span:first-child i,
.mcon03 .allProdTabBtn08.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product08_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn09:hover span:first-child i,
.mcon03 .allProdTabBtn09.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product09_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn10:hover span:first-child i,
.mcon03 .allProdTabBtn10.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product10_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn11:hover span:first-child i,
.mcon03 .allProdTabBtn11.active span:first-child i {
  background: url("/images/newMain/m_main_icon/icon_product11_on_w.svg") center
    center / 70% no-repeat;
}

.mcon03 .allProdTabBtn:hover span:first-child {
  background: #bababa;
}

.mcon03 .allProdTabBtn.active span:first-child {
  background: #ffffff;
}

.mcon03 .allProdTabBtn span:last-child {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s;
  padding-top: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
/* 2024-06-12 */
.mcon03 .allProdTabBtn:hover span:last-child,
.mcon03 .allProdTabBtn.active span:last-child {
  color: #000;
  display: block;
}

.mcon03 .tabWrap {
  position: relative;
  padding-top: 20px;
  box-sizing: border-box;
}

.mcon03 .allProdTab {
  position: relative;
  justify-content: space-between;
  display: none;
}

.mcon03 .allProdTab01 {
  display: flex;
}

.mcon03 .allProdTab li a {
  position: relative;
  display: block;
  width: 235px;
  height: 250px;
  overflow: hidden;
}

.mcon03 .allProdTab li a img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: all 0.2s;
  background: #f7f7f7;
  /* border-radius: 10px; */
}

.mcon03 .allProdTab li a:hover img {
  width: 107%;
}

.mcon03 .allProdTab li a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background: rgba(160, 160, 160, 0.1);
  width: 0%;
  height: 0%;
  transition: all 0.2s;
}

.mcon03 .allProdTab li a span:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("/images/newMain/icon_plus.png") center center no-repeat;
  width: 0;
  height: 0;
  content: "";
  transition: all 0.2s;
}


.mcon03 .allProdTab li p {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
  padding-top: 8px;
  box-sizing: border-box;
}
/* 2024-06-03 */
.mcon04 .swiper-slide {
  overflow: hidden;
  width: 180px !important;
  height: 180px !important;
  min-width: 180px;
  min-height: 180px;
  max-width: 180px;
  max-height: 180px;
}

.mcon04 .swiper-slide img {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50%;
  /* width: 180px !important;
  height: 180px !important;
  min-width: 180px;
  min-height: 180px;
  max-width: 180px;
  max-height: 180px; */
}

.mcon04 .swiper-slide img:hover {
  transform: scale(1.4);
  border-radius: 50%;
}

.mcon04 a.swiper-prev {
  position: absolute;
  top: 50%;
  transform: translate(-50%, 50%);
  left: 0;
  z-index: 1;
}

.mcon04 a.swiper-next {
  position: absolute;
  top: 50%;
  transform: translate(50%, 50%);
  right: 0;
  z-index: 1;
}

.mcon05 {
  position: relative;
  width: 100%;
}

.mcon05 .w1200 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mcon05 .cntrlBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mcon05 .swiper-pagination {
  position: relative;
}

.mcon05 .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 9px;
  height: 9px;
  background: #000;
  margin: 0 3px;
}

.mcon05 .slideBox {
  position: relative;
  width: 1200px;
  height: 278px;
  margin: 0 auto;
}

.mcon05 .slideBox img {
  display: block;
  width: 687px;
  height: 278px;
  object-fit: cover;
  object-position: left center;
  border-radius: 16px;
}

.mcon05 .txtWrap {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 484px;
  overflow: hidden;
}

.mcon05 .txtWrap .title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  padding-bottom: 14px;
  box-sizing: border-box;
}

.mcon05 .txtWrap .title i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-left: 6px;
  background: url("/images/newMain/icon_youtube.png") 0 0 no-repeat;
}

.mcon05 .txtWrap .descTxt {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  line-height: 1.4em;
  height: 4.2em;
}

.mcon05 .txtWrap .moreBtn {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  padding-top: 20px;
  padding-bottom: 4px;
  box-sizing: border-box;
}

.mcon05 .txtWrap .moreBtn span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #333;
}

.mcon05 .txtWrap .moreBtn:hover span {
  animation: stretch_line 0.5s ease-in Infinite Alternate;
}

.mcon05 .swiper-container {
  height: 278px;
  overflow: hidden;
}

.mcon05 .swiper-slide {
  background: none;
}

@-webkit-keyframes stretch_line {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.mcon05 a.swiper-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 25rem;
  border: 1px solid rgba(0, 0, 0, 15%);
  background: rgba(255, 255, 255, 60%);
  z-index: 1;
  transition: all 0.2s;
  margin: 0 10px 0 15px;
}

.mcon05 a.swiper-prev:hover {
  background: rgba(255, 255, 255, 30%);
  z-index: 1;
}

.mcon05 a.swiper-prev span {
  display: block;
  width: 10px;
  height: 18px;
  background: url("/images/newMain/icon_leftArrow_dark.png") 0 0 no-repeat;
  transform: rotate(90deg);
}

.mcon05 a.swiper-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 25rem;
  border: 1px solid rgba(0, 0, 0, 15%);
  background: rgba(255, 255, 255, 60%);
  z-index: 1;
  transition: all 0.2s;
}

.mcon05 a.swiper-next:hover {
  background: rgba(255, 255, 255, 30%);
  z-index: 1;
}

.mcon05 a.swiper-next span {
  position: relative;
  top: 3px;
  display: block;
  width: 10px;
  height: 18px;
  background: url("/images/newMain/icon_rightArrow_dark.png") 0 0 no-repeat;
  transform: rotate(90deg);
}

.mcon06 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 70px;
  font-family: "Noto Sans KR", "Arial" !important;
}

.mcon06 h2 {
  font-family: "Noto Sans KR", "Arial" !important;
  font-size: 18px;
  font-weight: 700;
  color: #555;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.mcon06 .scon01 .phoneLink {
  position: relative;
  width: 350px;
  cursor: default;
  pointer-events: none;
}

.mcon06 .scon01 .phoneLink {
  display: block;
  font-family: "Montserrat" !important;
  font-size: 30px;
  font-weight: 700;
  color: #0f68ed;
  line-height: 1;
  padding-bottom: 10px;
  box-sizing: border-box;
  transition: all 0.2s;
}

.mcon06 .scon01 .phoneLink:hover {
  color: #7abdff;
}

.mcon06 .scon01 p {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}

.mcon06 .scon01 p span {
  font-weight: 900;
}

.mcon06 .scon02 {
  position: relative;
  width: 100%;
}

.mcon06 .scon02 ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  /* padding-top: 20px; */
  box-sizing: border-box;
}

.mcon06 .scon02 .qnaBtn {
  display: inline-block;
}

.mcon06 .scon02 .qnaBtn span:first-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: #f4f7fa;
  border-radius: 5px;
  transition: all 0.2s;
}

.mcon06 .scon02 .qnaBtn:hover span:first-child {
  background: #000000;
}

.mcon06 .scon02 li .qnaBtn span i {
  display: block;
  width: 100%;
  height: 100%;
}

.mcon06 .scon02 li:nth-child(1) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/01-notice.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(2) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/02-guide.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(3) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/03-qna.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(4) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/13-order-edit.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(5) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/04-faq.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(6) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/05-quote.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(7) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/06-design.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(8) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/07-shipping.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(9) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/08-return.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(10) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/09-accounting.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(11) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/10-printing.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(12) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/11-event.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 li:nth-child(13) .qnaBtn span i {
  background: url("/images/newMain/qnaIcons/12-support.png") center center / 48px 48px no-repeat;
}

.mcon06 .scon02 .qnaBtn span:last-child {
  display: block;
  font-size: 15px;
  color: #555;
  padding-top: 16px;
  line-height: 1;
  box-sizing: border-box;
  text-align: center;
}

/* .mcon06 .scon03 : 2026-09-11 개편으로 아래 "고객센터 : csWrap 구조" 블록의
   .csCardLink 공용 스타일을 그대로 사용하므로 기존 아이콘 그리드 스타일은 제거함. */

.mcon_tgt .ct_wrap {
  display: flex;
  justify-content: space-between;
  gap:22px;
}

.mcon_tgt .ct_wrap > a {
    display:flex;
    flex-direction:column;
    flex:1;
}

.mcon_tgt .ct_wrap > a img {
  width:100%;
  border-radius:5px;
  height:350px;
  object-fit: cover;
  margin-bottom:16px;
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out ;
}

.mcon_tgt .ct_wrap > a strong {
  font-size: 16px;
  font-weight: 600;
  letter-spacing:-0.5px;
  color:#222;
}
.mcon_tgt .ct_wrap > a p {
  font-size:14px;
  letter-spacing:-0.5px;
  color:#555;
}
.mcon_tgt .ct_wrap > a strong + p {
  padding-top:3px;
}

.mcon_tgt .ct_wrap > a:hover img {
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}


.youtubePopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 99999;
}

.youtubePopupBg {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 80%);
}

.youtubePopup iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
}

/* common */
a.swiper-prev.designBtn01 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 25rem;
  border: 1px solid rgba(0, 0, 0, 15%);
  background: rgba(255, 255, 255, 50%);
  z-index: 1;
  transition: all 0.1s;
}

a.swiper-next.designBtn01 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 25rem;
  border: 1px solid rgba(0, 0, 0, 15%);
  background: rgba(255, 255, 255, 50%);
  z-index: 1;
  transition: all 0.1s;
}

a.swiper-prev.designBtn01:hover {
  background: rgba(255, 255, 255, 80%);
}

a.swiper-next.designBtn01:hover {
  background: rgba(255, 255, 255, 80%);
}

a.swiper-prev span {
  display: block;
  width: 16px;
  height: 16px;
  background: url("/images/newMain/icon_leftArrow_dark2.png") 0 0 no-repeat;
}

a.swiper-next span {
  display: block;
  width: 16px;
  height: 16px;
  background: url("/images/newMain/icon_rightArrow_dark2.png") 0 0 no-repeat;
}

#equipment-vdomodal-wrap {
  display: none;
}


    /* 좌측 픽스배너 추가 - bhs */

    .left_fixBnr {
      display:flex;
      flex-direction: column;
      position:fixed;
      bottom:25px;
      left: 25px;
      z-index:6;
      background:#fff;
      padding:8px;
      border-radius:10px;
      gap:8px;
      box-shadow: 0px 0px 20px #0000001f;

      opacity: 0;
      visibility: hidden; /* 숨김 처리 시 영역 유지 없이 완벽히 숨김 */
      transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  .left_fixBnr.show {
      opacity: 1;
      visibility: visible;
  }

  .left_fixBnr ul {
      display:flex;
      flex-direction: column;
      gap:8px;
  }

  .left_fixBnr ul li a {
      width:143px;
      height:150px;
      display:block;
      overflow:hidden;
      border-radius:6px;
      border: 1px solid #0000001c;
      box-sizing: border-box;
  }

  .left_fixBnr ul li a > div{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      height: 62px;
  }

  .left_fixBnr ul li a > div p{
      color:#888;
      font-size:13px;
      letter-spacing:-1px;
  }

  .left_fixBnr ul li a > div strong{
      color:#1F1F20;
      font-size:15px;
      letter-spacing:-1px;
  }

  .left_fixBnr > button {
      font-size:1px;
      text-indent:-9999px;
      width:25px;
      height:17px;
      background:url("/images/newMain/icon_left_fixBnr_close.svg") no-repeat center;
      border:none;
      background-color:#ADADAD;
      border-radius:2px;
      transition: all 0.3s ease;
      margin:0 auto;
  }
  .left_fixBnr > button:hover {
      background-color:#333;
  }
  /*

  오늘 보지않기, 닫기 분리

  .left_fixBnr div {
      display:flex;
      justify-content:space-between;
  }
  .left_fixBnr div label {
      display:flex;
      align-items:center;
      gap:6px;
      line-height:1;
      font-size:12px;
      color:#555555;
      font-weight:600;
      letter-spacing:-0.4px;
      cursor:pointer;
  }
  .left_fixBnr div label::before {
      content:'';
      display:block;
      width:12px;
      height:12px;
      border:1px solid #00000052;
      border-radius:2px;
  }
  .left_fixBnr div label:has(input[type="checkbox"]:checked)::before {
      background:url("/images/newMain/icon_left_fixBnr_check.svg") no-repeat center;
      background-size:8px;
  } */


/* =========================================================
   2026-08-03 v3 - 피그마 디자인(node-id 8910:3) 그대로 적용
   대상: 추천상품 / 인기상품 / 고객센터·동영상가이드
   (Hero, News는 실사 콘텐츠 특성상 모서리 처리만 유지, 카드화 대상 아님)
   그림자/호버 효과 없음 - 피그마에 없는 요소는 넣지 않음
   문의상담(scon02)은 변경하지 않음
   ========================================================= */


/* ---- News : 모서리만 둥글게 (피그마와 동일하게 유지) ---- */
.mcon05 .swiper-container {
  border-radius: 16px;
}

/* ---- 추천상품 : 이미지+텍스트를 함께 감싸는 화이트 카드 (보더만, 그림자 없음) ---- */
.mcon02 .newProductLink {
  display: block;
  width: 170px;
  box-sizing: border-box;
}

.mcon02 .newProductLink p {
  padding: 8px 14px 14px;
  font-weight: 500;
  box-sizing: border-box;
}

/* ---- 인기상품 : li 전체(이미지+텍스트)를 감싸는 화이트 카드 ---- */
.mcon03 .allProdTab li {
  display: block;
  width: 235px;
  box-sizing: border-box;
}

.mcon03 .allProdTab li p {
  padding: 8px 14px 14px;
  box-sizing: border-box;
}

.mcon03 .allProdTabBtn span:first-child {
  box-sizing: border-box;
  border: 1px solid #ececec;
}

/* ---- 고객센터 / 동영상가이드 : 흰 배경 카드 + 그림자 - 2026-09-28 배경 흰색(#FFFFFF)/그림자로 교체 ---- */
.mcon06 .scon01,
.mcon06 .scon03 {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 28px 32px;
  box-sizing: border-box;
}

/* ---- 고객센터 : csWrap 구조 (전체 제목 + 2단 카드 행) - 피그마와 동일한 구조 ---- */
.mcon06.csWrap {
  display: block;
  gap: 0;
}

/* .w1200 공통 클래스의 padding-top:70px를 이 섹션만 25px로 좁힘(추석 배너와의 간격 조정) */
#container .mcon06.csWrap {
  padding-top: 25px;
}

.mcon06.csWrap .csMainTitle {
  font-family: "Noto Sans KR", "Arial" !important;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  padding-bottom: 15px;
  box-sizing: border-box;
}

.mcon06.csWrap .csMainTitle .phoneLink {
  display: inline;
  font-family: "Noto Sans KR", "Arial" !important;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  cursor: default;
  pointer-events: none;
}

.mcon06.csWrap .csRow {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
}

.mcon06.csWrap .csRow > div {
  flex: 1;
}

/* ---- 셀프에디터 / 동영상가이드 카드 : 아이콘 + 텍스트 + 화살표 한 행 (2026-09-11 피그마 개편) ---- */
.mcon06.csWrap .csCardLink {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.mcon06.csWrap .sepIcon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
}

.mcon06.csWrap .sepIcon img {
  display: block;
  width: 100%;
  height: 100%;
}

.mcon06.csWrap .sepText {
  flex: 1;
}

.mcon06.csWrap .sepText strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 6px;
}

.mcon06.csWrap .sepText p {
  font-size: 12px;
  font-weight: 400;
  color: #555555;
  line-height: 1.6;
  margin: 0;
}

.mcon06.csWrap .sepArrow {
  flex: none;
  font-size: 21px;
  font-weight: 600;
  color: #285cce;
  letter-spacing: -1px;
}

/* =========================================================
   2026-08-03 - 문의상담(Section: Inquiry) 신규 UI 적용
   실제 아이콘(SVG)은 그대로 사용, 원형 배경 + 아이템별 컬러 틴트만 추가
   링크/호버(검정 배경 전환) 기능은 그대로 유지
   ========================================================= */
.mcon06 .scon02 .qnaBtn span:first-child {
  border-radius: 15px;
}

.mcon06 .scon02 li:nth-child(1) .qnaBtn span:first-child { background: #FFF2F6; }
.mcon06 .scon02 li:nth-child(2) .qnaBtn span:first-child { background: #FFE5DD; }
.mcon06 .scon02 li:nth-child(3) .qnaBtn span:first-child { background: #FFEADA; }
.mcon06 .scon02 li:nth-child(4) .qnaBtn span:first-child { background: #FFEED2; }
.mcon06 .scon02 li:nth-child(5) .qnaBtn span:first-child { background: #FFF9E8; }
.mcon06 .scon02 li:nth-child(6) .qnaBtn span:first-child { background: #F6FFE6; }
.mcon06 .scon02 li:nth-child(7) .qnaBtn span:first-child { background: #E8FFEC; }
.mcon06 .scon02 li:nth-child(8) .qnaBtn span:first-child { background: #DFF6FF; }
.mcon06 .scon02 li:nth-child(9) .qnaBtn span:first-child { background: #E8EFFF; }
.mcon06 .scon02 li:nth-child(10) .qnaBtn span:first-child { background: #F7F4FF; }
.mcon06 .scon02 li:nth-child(11) .qnaBtn span:first-child { background: #FFEAFA; }
.mcon06 .scon02 li:nth-child(12) .qnaBtn span:first-child { background: #FEEEF3; }
.mcon06 .scon02 li:nth-child(13) .qnaBtn span:first-child { background: #E5E6E8; }

/* 호버 시 배경을 항목별 배경색 계열의 진한 색으로 전환 (아이콘은 on.svg가 흰색으로 유지) */
.mcon06 .scon02 li:nth-child(1) .qnaBtn:hover span:first-child { background: #e8467c; }
.mcon06 .scon02 li:nth-child(2) .qnaBtn:hover span:first-child { background: #f2836b; }
.mcon06 .scon02 li:nth-child(3) .qnaBtn:hover span:first-child { background: #f5a05a; }
.mcon06 .scon02 li:nth-child(4) .qnaBtn:hover span:first-child { background: #f4b34b; }
.mcon06 .scon02 li:nth-child(5) .qnaBtn:hover span:first-child { background: #f2c53d; }
.mcon06 .scon02 li:nth-child(6) .qnaBtn:hover span:first-child { background: #8cb52a; }
.mcon06 .scon02 li:nth-child(7) .qnaBtn:hover span:first-child { background: #4cb96b; }
.mcon06 .scon02 li:nth-child(8) .qnaBtn:hover span:first-child { background: #33b6d8; }
.mcon06 .scon02 li:nth-child(9) .qnaBtn:hover span:first-child { background: #3b6fe0; }
.mcon06 .scon02 li:nth-child(10) .qnaBtn:hover span:first-child { background: #7b52c9; }
.mcon06 .scon02 li:nth-child(11) .qnaBtn:hover span:first-child { background: #d54ec0; }
.mcon06 .scon02 li:nth-child(12) .qnaBtn:hover span:first-child { background: #e8467c; }
.mcon06 .scon02 li:nth-child(13) .qnaBtn:hover span:first-child { background: #8a8f99; }

/* ---- 실제 렌더링 대조로 발견한 "피그마엔 없는 부가 요소" 제거 ---- */
.mcon02 .newProductLink p span {
  display: none;
}

.mcon03 .allProdTabBtnWrap {
  border-bottom: none;
}

.mcon03 .allProdTabBtn.active {
  border-bottom: none;
}


/* =========================================================
   2026-09-11 - 문의상담 아이콘 크기·간격 피그마(node 9995:449) 실측으로 재수정
   실측: 아이콘 박스 62~64px 정사각, 13개 항목이 1200px 컨테이너에 꽉 차게
   양끝 정렬(첫 항목 왼쪽 끝/마지막 항목 오른쪽 끝) + 나머지는 균등분배
   아이콘-라벨 간격 실측 약 12px, 라벨 11.79px(≈12px)/bold/#262626

   2026-09-11 추가 수정 - "주문 수정/취소" 등 이름이 긴 항목 때문에 간격이
   들쭉날쭉해 보이는 문제 수정: space-between은 각 li의 실제 콘텐츠 폭(긴 라벨일수록
   li가 넓어짐)을 기준으로 분배해서 항목마다 간격이 달라졌었음. 대신 1200px를 13등분한
   고정폭 슬롯(각 92.3077px)을 만들고, 그 슬롯 한가운데에 아이콘+라벨을 정렬 - 라벨이
   슬롯보다 길면 좌우로 살짝 넘치되(nowrap) 슬롯 자체는 항상 정확히 균등 배치됨.
   ========================================================= */

.mcon06 .scon02 ul {
  justify-content: flex-start;
  gap: 0;
}

.mcon06 .scon02 li {
  width: calc(1200px / 13);
  display: flex;
  justify-content: center;
}

.mcon06 .scon02 .qnaBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mcon06 .scon02 .qnaBtn span:first-child {
  width: 64px;
  height: 64px;
  flex: none;
}

.mcon06 .scon02 .qnaBtn span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: #262626;
  padding-top: 12px;
  white-space: nowrap;
}

/* ---- 인기상품 탭 : space-between 제거, 고정 간격 26px, 원 44px ---- */
.mcon03 .allProdTabBtnWrap {
  justify-content: flex-start;
  gap: 26px;
}

.mcon03 .allProdTabBtnWrap li {
  width: auto;
}

.mcon03 .allProdTabBtn span:first-child {
  width: 37px;
  height: 37px;
  margin: 0;
}

.mcon03 .allProdTabBtn span:last-child {
  font-size: 11px;
  padding-top: 6px;
  margin-bottom: 0;
}

/* =========================================================
   2026-08-03 - 인기상품 카드 : 이미지 실제 비율(700x700, 1:1 정사각형)에 맞춰
   카드를 정사각형으로 수정 + 사이즈 축소 + 카드 간 간격 확대
   ========================================================= */
.mcon03 .allProdTab {
  justify-content: center;
  gap: 28px;
}

.mcon03 .allProdTab li {
  width: 200px;
}

.mcon03 .allProdTab li a {
  width: 200px;
  height: 200px;
  border-radius: 14px;
}

/* ---- 인기상품 카드 상품명 : 추천상품 카드와 동일하게 좌측 정렬 + 굵게 ---- */
.mcon03 .allProdTab li p {
  text-align: left;
  font-weight: 700;
  padding: 8px 14px 14px;
}

/* ---- Hero 공지사항 팝업 ---- */
.mcon01 .heroNoticePopup {
  position: absolute;
  top: 350px;
  right: 0;
  width: 246px;
  background: #ffffff;
  border-radius: 17px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 10;
}

.mcon01 .heroNoticePopup .hnpHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}

.mcon01 .heroNoticePopup .hnpHeadLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.mcon01 .heroNoticePopup .hnpIcon {
  display: block;
  flex: none;
}

.mcon01 .heroNoticePopup .hnpTitle {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}

.mcon01 .heroNoticePopup .hnpClose {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: #999999;
  cursor: pointer;
  padding: 0;
}

.mcon01 .heroNoticePopup .hnpClose:hover {
  color: #333333;
}

.mcon01 .heroNoticePopup .hnpList li:not(:last-child) a {
  border-bottom: 1px solid #f0f0f0;
}

.mcon01 .heroNoticePopup .hnpList li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  box-sizing: border-box;
  transition: color 0.15s;
}

.mcon01 .heroNoticePopup .hnpList li a:hover .hnpSubject {
  color: #a855c9;
}

.mcon01 .heroNoticePopup .hnpSubject {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.mcon01 .heroNoticePopup .hnpDate {
  flex: none;
  font-size: 8px;
  font-weight: 700;
  color: #707070;
}

.mcon03 .allProdTab li .priceTxt {
  display: none;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.03em;
  text-align: left;
  padding: 0 14px 14px;
  box-sizing: border-box;
}

/* ---- 인기상품 카테고리 탭 : 이모지 + 텍스트 필(pill) 버튼 형태로 변경 ---- */
.mcon03 .allProdTabBtnWrap {
  flex-wrap: wrap;
  gap: 14px;
  row-gap: 8px;
}

.mcon03 .allProdTabBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: #f5f5f7;
  border-radius: 18px;
  box-sizing: border-box;
  transition: none;
}

.mcon03 .allProdTabBtn span:first-child {
  position: relative;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 18px;
  margin: 0;
  background: none;
  border: none;
  font-size: 13px;
  line-height: 1;
  transition: none;
}

.mcon03 .allProdTabBtn span:last-child {
  display: inline-flex;
  align-items: center;
  height: 18px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  line-height: 1;
  transition: none;
  padding-top: 0;
  margin-bottom: 0;
}

.mcon03 .allProdTabBtn:hover,
.mcon03 .allProdTabBtn.active {
  background: #000;
}

.mcon03 .allProdTabBtn:hover span:first-child,
.mcon03 .allProdTabBtn.active span:first-child {
  position: relative;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  background: none;
}

.mcon03 .allProdTabBtn:hover span:last-child,
.mcon03 .allProdTabBtn.active span:last-child {
  display: inline-flex;
  align-items: center;
  height: 18px;
  color: #fff;
}

/* ---- 인기상품 카테고리 탭 : 이모지 제거 + 플랫 텍스트 탭 디자인 (2026-09-09) ---- */
.mcon03 {
  text-align: center;
}

.mcon03 .allProdTabBtnWrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  row-gap: 4px;
  border-bottom: none;
  background: #f5f5f7;
  border-radius: 999px;
  padding: 6px;
  box-sizing: border-box;
}

.mcon03 .allProdTabBtnWrap li {
  width: auto;
}

.mcon03 .allProdTabBtn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: none;
  border-radius: 999px;
  box-sizing: border-box;
  transition: none;
}

.mcon03 .allProdTabBtn span:first-child,
.mcon03 .allProdTabBtn span:last-child {
  position: static;
  top: auto;
  display: inline-flex;
  align-items: center;
  height: auto;
  font-size: 14px;
  font-weight: 500;
  color: #4e5968;
  line-height: 1;
  padding-top: 0;
  margin: 0;
  background: none;
  border: none;
  transition: none;
}

.mcon03 .allProdTabBtn:hover {
  background: #e8e8ea;
}

.mcon03 .allProdTabBtn:hover span:first-child,
.mcon03 .allProdTabBtn:hover span:last-child {
  color: #000;
}

.mcon03 .allProdTabBtn.active {
  background: #000;
}

.mcon03 .allProdTabBtn.active span:first-child,
.mcon03 .allProdTabBtn.active span:last-child {
  color: #fff;
  font-weight: 700;
}

/* ---- 인기랭킹 TOP10 상품 카드 : 피그마 신규 카드 UI (크림 배경 + 테두리 + 이미지 컨테인) ---- */
.mcon02 .newProductLink .imgWrap {
  width: 170px !important;
  height: 209px !important;
  background: #F6F6EE !important;
  border: 0.5px solid #CECECE !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

.mcon02 .newProductLink .imgWrap img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: none !important;
}

.mcon02 .newProductLink:hover .imgWrap img {
  width: 100% !important;
}

.mcon02 .newProductLink p {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}

/* ---- 인기랭킹 TOP10 순위 뱃지 : 피그마 신규 UI (검정 원형, 이미지 우하단 겹침, "N위") ---- */
.mcon02 .newProductLink .imgWrap .rankNum {
  top: auto !important;
  left: auto !important;
  bottom: 10px !important;
  right: 10px !important;
  min-width: 56px !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  position: absolute !important;
  transform: none !important;
  transition: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ---- 카테고리별 상품(allProdTab) 카드: 당일출고/TOP10 섹션과 동일한 UI로 통일
   (크림 배경 + 테두리 + 이미지 컨테인, 170x209) ---- */
.mcon03 .allProdTab li { width: 170px; }
.mcon03 .allProdTab li a {
  width: 170px !important;
  height: 209px !important;
  border-radius: 12px !important;
  background: #F6F6EE !important;
  border: 0.5px solid #CECECE !important;
  box-sizing: border-box !important;
  overflow: hidden;
}
.mcon03 .allProdTab li a img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: none !important;
}
.mcon03 .allProdTab li a:hover img { width: 100% !important; }
/* 상품명(가격 위 텍스트) 가운데 정렬 */
.mcon03 .allProdTab li p { text-align: center !important; }
/* 섹션 제목과 카테고리 탭바 사이 간격 20px */
.mcon03 h2 { margin-bottom: 20px !important; }
/* 카테고리 탭바 배경색을 신뢰 섹션(누적회원수 등) 카드 배경색과 통일 */
.mcon03 .allProdTabBtnWrap { background: #f7f6f3 !important; }

/* 2026-09-11: 푸터 스타일은 사이트 전체(주문서/게시판 등)에 적용되어야 해서
   common.renewal.css로 이동함 - index.css는 메인페이지에만 로드되는 파일이라
   다른 페이지에서는 푸터 마크업만 있고 스타일이 안 먹는 문제가 있었음. */