@charset "utf-8";

/* Base */

:root {
  --primary: #B3001A;
}


.section-cate {font-size: 24px; font-weight: 700; font-family: var(--font-secondary);color:var(--primary);}
.section-sbj {font-size: 62px; font-weight: 700; }
.section-sbj-sml {font-size: 40px; letter-spacing: -0.01em; }
.section-desc {font-size: 20px;font-weight: 600; padding-block: 1.5em; display: block;}

.link-more {padding: .5em 1.5em; background: #E4E4E4; border-radius: 50px;display: flex; align-items: center; justify-content: center;  transition: .3s ease; cursor: pointer;font-weight: 600; font-size: 22px; color:#707070;  flex-shrink: 0;}
.link-more.gray {background:#E8E8E8; padding: .5em 1em; color: #717171; }
.link-more.white {border:1px solid #fff; background: transparent;color:#fff;}
.link-more.primary {background: transparent; border: 1px solid var(--primary);color:var(--primary);}

.link-more.type2 {font-size: 17px; font-family: var(--font-secondary);}

@media (hover:hover){
  .link-more.type2:hover {background: var(--primary); color: #fff;}
}



#fp-nav {transform: translate(0px, -23%); opacity: 0; transition: .3s ease; pointer-events: none; }
#fp-nav ul {display: flex; flex-direction: column; gap: 50px;align-items: center;}
#fp-nav ul li {margin: 0; width: 12px;height: 12px; background: #AFAFAF; border-radius: 50%;}

#fp-nav ul li .fp-tooltip {font-size: 17px; color:#707070; width: auto; opacity: 1; top: -7px; font-family: var(--font-primary);}
#fp-nav ul li .fp-tooltip.right {right: 38px;}

#fp-nav ul li a {display: flex; align-items: center; justify-content: center; }
#fp-nav ul li a span {background: transparent; z-index: 1; width: 12px;height: 12px;  display: block; margin: 0; position: static; transition: none;}

#fp-nav ul li:has(.active) {background: transparent;}
#fp-nav ul li a.active {}
#fp-nav ul li a.active span {background: var(--primary);border:1px solid #fff; margin: 0; position: static; width: 12px; height: 12px;}
#fp-nav ul li a.active span::before {content:""; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 23px; height: 23px; background: rgba(179, 0, 26,.2); border-radius: 50%;z-index: -1;}
#fp-nav ul li a.active ~ .fp-tooltip {color:var(--primary); font-weight: 600; font-size: 20px;}
#fp-nav ul li:hover a.active span {margin: 0 ; width: 12px; height: 12px;}

#fp-nav ul li:not(:last-child)::before {content:""; position: absolute; top:100%; left:50%; transform: translate(-50%,0); width: 1px ; height: 60px; border:1px dashed #ACACAC;} 
#fp-nav ul li:nth-child(1){display: none;}
#fp-nav ul li:nth-child(4)::before {display: none;}
#fp-nav ul li:nth-child(5){display: none;}
#fp-nav ul li:nth-child(6){display: none;}

.fp-viewing-Household #fp-nav {opacity: 1; pointer-events: initial;}
.fp-viewing-cafe_restaurant #fp-nav {opacity: 1; pointer-events: initial;}
.fp-viewing-whole_house #fp-nav {opacity: 1; pointer-events: initial;}



.main-visual {width: 100%; height: 100%;}
.main-visual .visual-slide {width: 100%; height: 100%; position: relative;}
.main-visual .visual-slide.shadow::before {content:""; position: absolute;width: 50%; height: 100%; background:linear-gradient(to right, rgba(0, 0, 0,.3) , transparent); top:0; left:0;}
.main-visual .visual-slide .visual-slide-video {width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; z-index: -1;}
.main-visual .visual-slide .container--wide {height: 100%; height: 100%; display: flex; align-items: flex-end; }
.main-visual .visual-slide .text-cont {color:#fff;margin-bottom: 300px;}
.main-visual .visual-slide .title { font-size: 50px; font-family: var(--font-tertiary); font-weight: 700; line-height: 1.3; text-transform: uppercase; opacity: 0; transform: translateY(50px); transition: opacity 1s, transform 1s;}
.main-visual .visual-slide .desc {font-size: 20px; font-weight: 500; opacity: .8; margin-top: 1.2em; display: block; opacity: 0; transform: translateY(50px); transition: opacity 1s, transform 1s;}
.main-visual .controller {position: relative; bottom:228px; height: 50px; left:0;z-index:1; width: 280px; }
.main-visual .controller .pagination {position: relative; width: 100%; }

.pagination .swiper-pagination-bullet { width:0px; height: 40px ;background: none;transition:0.7s ease-in-out;}
.pagination .swiper-pagination-bullet .num {opacity: 0.8;display: flex; align-items: flex-end; color:#fff; font-size: 27px; font-weight: 400;  margin-bottom: 12px; opacity: 0; position: absolute;top:0; left:0;  gap: 5px;}
.pagination .swiper-pagination-bullet .bar {width:280px ;height: 3px; background: rgba(255, 255, 255, 0.4);  position: absolute; bottom:0; left: 0;}
.pagination .swiper-pagination-bullet .bar .inner { width: 0;  height: 100%; background: #fff; transform: scaleX(0); transform-origin: left;  transition: transform 2.7s linear;  }
.pagination .swiper-pagination-bullet-active .num{width:100%; opacity: 1; line-height: 1;}
.pagination .swiper-pagination-bullet-active .num .index_num {font-size: 17px; color:rgba(255, 255, 255,0.62); }

.init .pagination .swiper-pagination-bullet-active .bar .inner {width: 100%; height: 100%; background: #fff; transform: scaleX(1); transform-origin: left;  }
.init .pagination .swiper-pagination-bullet-active:nth-child(2) .bar .inner {transition: transform 4.7s linear;}
.main-visual .controller .navigation { position: absolute;top:-6px; right:0; width: 80px; height: 32px; z-index:111;}
.main-visual .controller .navigation > svg {display: block;}
.navigation .swiper-button-prev {left: 0; width: 31px; height: 31px;}
.navigation .swiper-button-next {right: 0; width: 31px; height: 31px;}
.navigation .swiper-button-next::after,
.navigation .swiper-button-prev::after {display: none;}


.init.main-visual .visual-slide.swiper-slide-active .title {opacity: 1; transform: translateY(0);}
.init.main-visual .visual-slide.swiper-slide-active .desc {opacity: 1; transform: translateY(0);}


/* product */
.product {position: relative;}
.product .link-more {width: 163px;}

.product-wrapper {display: grid; grid-template-columns: repeat(2, 1fr); height: 100%;}
.product-bg {position: relative; overflow: hidden;}
.product-bg img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.product-content {display: flex; align-items: center;}
.product-content .wrapper {padding-left: 190px; padding-top: 50px; width: calc((var(--container-wide-width) / 2) + 50px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.product-content .txt-cont {margin-bottom: 20px;}
.product-content .txt-cont .head {}
.product-content .txt-cont .head .section-cate {}
.product-content .txt-cont .head .section-sbj {}
.product-content .txt-cont .section-desc {}
.product-content .product-img {margin-left: -50px; max-width: none;}
.product-content .icon-cont {display: flex; flex-direction: column; gap: 15px; padding-top: 100px;}
.product-content .icon-cont .item {display: flex; gap: 20px; align-items: center;}
.product-content .icon-cont .item .icon {width: 72px; height: 72px; border-radius: 50%; border:1px solid var(--primary);background: #fff; display: flex; align-items: center; justify-content: center;}
.product-content .icon-cont .item .txt {font-size: 25px; font-weight: 500;}

.product.whole-house .product-bg img {object-position:top;}

@media (hover:hover) {
  .product .link-more:hover {background: var(--primary);}
  .product .link-more:hover .txt { color: #fff;}
}

@media screen and (max-width:1799px) {
  .product-content .wrapper {padding-left: 150px;}
  .product-content .icon-cont {padding-top: 40px;}
}

@media screen and (max-width:1599px) {
  .product-content .txt-cont .head .section-sbj {font-size: 40px;}
  .product-content .wrapper {padding-left: 90px; padding-top: 100px;}
  .product-content .icon-cont {padding-top: 40px;}
  .product-content .txt-cont .section-desc {font-size: 18px; padding-block: 1em;}
  .product .link-more {width: 160px; font-size: 18px;}
  .product-content .icon-cont .item .txt {font-size: 20px;}
  .product-content .icon-cont .item .icon {width: 60px; height: 60px;}
}



.electronic .elec-wrapper {width: 100%; height: 100%;}
.electronic .container--wide {display: flex; flex-direction: column; gap: 120px; height: 100%; justify-content: center; }
.electronic .content-top {width: 515px; margin-left: auto;}
.electronic .content-bot {display: flex; gap: 33px; ;}
.electronic .content-bot .company {background: var(--primary); color:#fff; width: 303px; padding: 30px 25px 25px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 20px;}
.electronic .content-bot .company .link-more {margin-left: auto;}
.electronic .content-bot .company .desc {font-size: 20px; line-height: 1.65;}
.electronic .content-bot .item {}
.electronic .content-bot .item {position: relative; width: 515px; height: 332px;border-radius: 20px; }
.electronic .content-bot .item .link-more {position: absolute; bottom:calc(100% + 17px);right:0;}
.electronic .content-bot .item .thumb {border-radius: 20px; }

.elec-thumb {position: absolute;  width: 100%; height: 100%; top: 0 ;left: 0; display: grid; grid-template-columns: repeat(2,1fr); pointer-events: none;}
.elec-thumb .elec-bg {overflow: hidden;width: 100%; height: 100%; position: relative;}
.elec-thumb .elec-bg .electronic-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.elec-thumb .elec-bg-half {position: absolute;bottom:0; width: 100%; height: 59%; background: #F6F6F6;;z-index: -2;}


@media (hover:hover) {
  .electronic .content-bot .company:hover .link-more {background: #fff; color:var(--primary)}
  .electronic .content-bot .item:hover .link-more {background: var(--primary); color:#fff;}
}







/* etc */
.etc {}
.etc .content {color:#fff; display: flex; align-items: flex-end; justify-content: space-between;padding-top: 100px;}
.etc .content .etc-ls {display: grid; grid-template-columns: repeat(2,1fr);}
.etc .content .etc-ls .item {width: 286px; height: 286px; display: flex; flex-direction: column; padding: 42px 10px 44px 47px ; justify-content: space-between;}
.etc .content .etc-ls .item:nth-child(1) {grid-column:2;}
.etc .content .etc-ls .item.primary {background:var(--primary);}
.etc .content .etc-ls .item.primary-light {background:var(--primary-light);}
.etc .content .etc-ls .item.white {background:#fff; color:#333;}
.etc .content .etc-ls .item .title {font-size: 28px; font-family: var(--ff-secondary); text-transform: uppercase; line-height: 1; font-weight: 600;}


@media screen and (max-width:1399px){
  .etc {padding-top: 70px;}
  .mp-news__head .section-tit-sml {font-size: 24px;}
}

@media screen and (max-width:767px){
}

/* News */
.mp-news {position: relative; display: flex; gap: 50px; padding-top: 57px; margin-bottom: 58px; margin-top: 146px;}
.mp-news .bar {position: absolute; top: 0; left: 0; width: 100%; border-top: 3px solid #262626;}
.mp-news__head {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 31%; flex-shrink: 0; }
.mp-news__head .section-tit-sml {font-size: 44px; font-weight: 700; line-height: 1.44;  margin-bottom: 0.6em;}
.mp-news__head .link-more {background: transparent; border:1px solid var(--primary); }
.mp-news__head .link-more .txt {color:var(--primary);}
.mp-news__ls {width: 100%;}
.mp-news__ls.board-empty {width: 100%; height: auto; background: #fff;border-radius: 20px; border:1px solid var(--light-gray3); font-size: 20px; display: flex; align-items: center; justify-content: center;}
.mp-news__ls li:not(:last-child) {border-bottom: 1px solid #dfdfdf;}
.mp-news__ls li a {display: flex; width: 100%; justify-content: space-between; gap: 2em; font-size: 20px; padding: 18px 15px 18px 25px;}
.mp-news__ls li:first-child a {padding-top: 0;}
.mp-news__ls li:last-child a {padding-bottom: 0;}
.mp-news__ls li a .tit {}
.mp-news__ls li a .date {flex-shrink: 0; font-size: 15px; color: #A8A8A8;}

@media (hover:hover) {
  .mp-news__head .link-more:hover {background: var(--primary); }
  .mp-news__head .link-more:hover .txt {color: #fff;}
  .mp-news__ls li a:hover {opacity: 0.5;}
}

@media screen and (max-width:1399px){
  .mp-news {flex-direction: column;}
  .mp-news__head {width: 100%; flex-direction: row; align-items: center;}
  .mp-news__head .section-tit-sml {font-size: 30px; margin-bottom: 0;}
  .mp-news__ls li a {font-size: 18px;}
  .mp-news__ls.board-empty {height: 200px;}
}


@media screen and (max-width:767px){
  .mp-news__head {padding: 0; gap: 10px;}
  .mp-news__ls li a {font-size: 16px; padding: 15px 10px;}

}


/* Quick */
.quick_card {display: grid; grid-template-columns: repeat(3, 1fr); gap: 41px;margin-bottom: 125px;}

.quick_card__item {padding-bottom: 27px; border-bottom: 2px solid #dfdfdf;}
.quick_card__item a {display: flex; flex-direction: column; height: 100%;}
.quick_card__item .thumb {margin-bottom: 25px; display: block; border-radius: 20px; }
.quick_card__item .thumb.video-box {padding-bottom: 50%;}
.quick_card__item .cont {display: flex;  align-items: flex-end; height: 100%; justify-content: space-between;}
.quick_card__item .cont .wrap {display: flex; flex-direction: column; align-items: flex-start; height: 100%;}
.quick_card__item .cont .tit {font-weight:600;font-size: 26px; text-transform: uppercase; }
.quick_card__item .cont .desc {line-height: 1.5;font-size: 16px; margin-top: 0.6em;}
.quick_card__item .cont .more-link {margin-left: auto; margin-top: auto;}



@media screen and (max-width:1399px){
  .etc {padding-top: 100px;}
  .link-more {font-size: 14px;}
  .quick_card {gap: 10px;margin-bottom: 80px}
  .quick_card__item .cont {align-items: flex-start; gap: 15px;}
  .quick_card__item .thumb {border-radius: 10px;}
  .quick_card__item .thumb .btn--play {width: 60px; height: 60px;}
  .quick_card__item .cont {flex-direction: column;}
  .quick_card__item .cont .tit {font-size: 20px;}
  .quick_card__item .cont .desc {font-size: 15px;}
  .mp-news {padding-top: 40px;}
}

@media screen and (max-width:767px){
  .etc {padding-top:80px;}
  .mp-news__head {flex-direction: row; }
  .mp-news__head .section-tit-sml {font-size: 25px;}
  .mp-news {margin-bottom: 60px;}
  .quick_card {grid-template-columns: repeat(1,1fr);}
  .link-more.gray {width: 100%; text-align: center;}
  .quick_card__item {padding-bottom: 10px;}
  .quick_card {gap: 20px;}
}



@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .main-visual {  height: 100vh !important;}
  .fp-tableCell {height: auto !important; }
  .fp-section {height: auto !important; }

  .section-cate {font-size: 19px;}
  .section-sbj {font-size: 35px;}
  .section-desc {font-size: 17px;}
  .section-sbj-sml {font-size: 30px;}
  .main-visual .visual-slide .title {font-size: 34px;}
  .main-visual .visual-slide .desc {font-size: 18px;}
  .pagination .swiper-pagination-bullet .num {font-size: 22px;}
  .pagination .swiper-pagination-bullet-active .num .index_num {font-size: 15px;}
  .product-content {width: calc(100% - 20px); }
  .product-content .wrapper {width: 100%;padding-left: 30px; padding-block: 100px;}
  .product-content .icon-cont .item .txt {font-size: 18px;}
  .product-content .icon-cont .item .icon {width: 60px; height: 60px;}
  .product-content .icon-cont .item .icon img {width: 35px; height: 35px;}
  .product.cafe .product-wrapper .product-bg {order: 1;}
  .electronic .container--wide {padding-top: 100px;}

  .electronic .section-cate {font-size: 17px;}
  .electronic .content-bot {display: grid; grid-template-columns: repeat(2,1fr);}
  .electronic .content-bot .company {grid-column: 2; width: 100%;}
  .electronic .content-bot .company .desc {font-size: 17px;}
  .electronic .content-bot .item {width: 100%; height: auto;}
  .link-more.type2 {font-size: 14px;}
  .electronic .container--wide {gap: 50px;}
  .elec-thumb {grid-template-columns: repeat(1,1fr);}
  .elec-thumb .elec-bg {height: 50%;}
  .electronic .content-top {width: 100%;}
  .electronic .section-sbj-sml {color:#fff;} 
  .electronic .content-bot {margin-bottom: 100px;}
  .electronic .content-bot .item .link-more {bottom: 20px; right: 20px; background: rgba(255, 255, 255,0.5);}
  .mp-news {margin-top: 0px;}
}
@media screen and (max-width: 767px) {
  .main-visual .visual-slide .text-cont {margin-bottom: 168px;}
  .main-visual .visual-slide .title  {font-size: 24px;}
  .main-visual .visual-slide .desc {font-size: 16px;}
  .main-visual .controller {width: 100%; bottom: 100px;}
  .pagination .swiper-pagination-bullet .bar {width: 100%;}
  .product-wrapper {display: flex; flex-direction: column;}
  .section-sbj {font-size: 29px;}
  .section-cate {font-size: 17px;}
  .section-desc {font-size: 16px;}
  .product-content .icon-cont {padding-top: 50px;}
  .product-content .icon-cont .item .txt {font-size: 16px;}
  .product-content .icon-cont .item .icon img {width: 27px; height: 27px;}
  .product-content {width: 100%;}
  .product-content .wrapper {padding-inline: 20px; padding-block: 30px;}
  .product-bg {width: 100%; height: 300px;}
  .product-bg img {position: relative; }
  .product-content .icon-cont {padding-top: 20px;}
  .product-content .txt-cont {width: 100%;}
  .product .link-more {width: 100%;}
  .product-content .icon-cont .item .icon {width: 53px; height: 53px;}
  .product.cafe .product-wrapper .product-bg {order: 0;}
  .product-content .wrapper {padding-block: 30px 85px;}
  .section-sbj-sml {font-size: 20px;}
  .electronic .content-bot {display: flex; flex-direction: column; gap: 18px}
  .electronic .content-bot .company {gap: 24px;}
  .electronic .content-bot .item {border-radius: 10px !important;}
  .link-more.type2 {min-width: 140px;}
  .mp-news__head {flex-direction: column;}
}