@charset "UTF-8";
/*********** S : main.scss ***********/
.main .container{
width: 100%;
/* overflow: auto;
scroll-snap-type: y mandatory; */
}
.main .container.prod-dt-view {
margin-bottom: 0;
}
.main-box.height100{
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
/* IOS 가로 스크롤 방지 */
.main.content,
.main.content .container {
width: 100vw;
overflow-x: hidden;
}
/* title_area 공통 */
.main-box .title_area{
display: block;
margin-bottom: 30px;
}
@media (min-width: 769px) {
.main-box .title_area{
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 80px;
}
}
.main .main-box .more{
display: flex;
align-items: center;
}
.main .main-box .more .view_more{
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
/* text-transform: uppercase; */
}
.main .main-box .more .view_more .icon{
margin-left: 14px;
width: 22px;
height: 22px;
background: url(https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_long_bk.svg) center no-repeat;
}
.main-box.visual{
position: relative;
}
.main-box.visual .controler{
position: absolute;
left: 50%;
top: 50%;
z-index: 900;
display: flex;
color: #fff;
}
/* index.vue 메인 슬라이더 */
.prod-dt-cate.main .slider-prod.m-ui {
display: none;
}
.prod-dt-cate.main .slider-prod .img {
margin-bottom: 15px;
}
.prod-dt-cate.main .slider-prod .img > img {
padding-bottom: 0;
border-bottom: 0 none;
}
.prod-dt-cate.main .slider-prod .txt-02 {
margin-top: 15px;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.prod-dt-cate.main .slider-prod .slider__counter {
width: auto;
position: absolute;
right: 75px;
bottom: 40px;
font-weight: 500;
font-size: 20px;
color: #ccc;
display: none;
}
.prod-dt-cate.main .slider-prod .txt-box.black {
background: rgba(0, 0, 0, 0.4);
}
/*--------------------- S : index.vue 메인 모바일 ---------------------*/
@media only screen and (orientation: portrait) and (min-height:375px) and (max-height:667px), only screen and (orientation: portrait) and (min-height:390px) and (max-height:844px), only screen and (orientation: portrait) and (min-height:428px) and (max-height:926px) {
#m-menu {
display: block;
}
header.scr-hder .hd-btns01 ul li .ico-01 {
width: 1.1875rem;
height: 1.1875rem;
}
header.scr-hder .hd-btns01 ul li .ico-03 {
width: 1.375rem;
height: 1.3125rem;
background-size: 100% 100%;
}
header.scr-hder .hd-btns01 ul li .ico-05 {
width: 1.125rem;
height: 1.25rem;
background-size: 100% 100%;
}
header.scr-hder .hd-btns01 ul li:nth-child(6) {
display: flex;
}
header.on .hd-btns01 ul li .ico-07 {
background: url("data:image/svg+xml;utf8, ");
background-size: 100% 100%;
}
}
@media only screen and (orientation: portrait) and (min-height:375px) and (max-height:667px), only screen and (orientation: portrait) and (min-height:390px) and (max-height:844px), only screen and (orientation: portrait) and (min-height:428px) and (max-height:926px) {
.main .container .main-box ul.slick-slider, .main .container .main-box .insplist-wrap ul {
margin-left: 0;
margin-right: 0;
}
.main .container .main-box .p-ui .slick-prev, .main .container .main-box.ourprod-box .ourprod-wrap.m-ui .slick-prev {
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box .p-ui .slick-next, .main .container .main-box.ourprod-box .ourprod-wrap.m-ui .slick-next {
right: 0.6875rem;
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box .slider-prod .txt-box .bannerRect {
width: 16.625rem;
height: 4.9375rem;
margin-bottom: 0;
border: 2px solid rgba(255, 255, 255, 0.7);
border-bottom: none;
}
.main .container .main-box .slider-prod .txt-box hr:nth-child(6), .main .container .main-box .slider-prod .txt-box hr:nth-child(3) {
width: 16.625rem;
border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}
.main .container .main-box .slider-prod .txt-box hr:nth-child(3) {
margin: 1rem 0;
}
.main .container .main-box .slider-prod .txt-box hr:nth-child(6) {
margin: 0;
}
.main .container .main-box .slider-prod .txt-box .btn-more:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 2.0833333333rem;
height: 2.0833333333rem;
border-radius: 1.0416666667rem;
background: #000;
opacity: 0.2;
transition: all 0.45s ease-in-out 0s;
}
.main .container .main-box .slider-prod .txt-box .btn-more:hover::after {
width: 100%;
opacity: 0.8;
}
.main .container .main-box .slider-prod .slick-list{
height: 100%;
}
.main .container .main-box .slider-prod .txt-box p.txt-02 {
font-size: 0.875rem;
line-height: 1.125rem;
margin: 0;
}
.main .container .main-box.ourprod-box > p {
margin: 0 0 3.125rem 0;
width: 86%;
font-size: 0.78125rem;
line-height: 1.21875rem;
align-self: center;
}
.main .container .main-box.ourprod-box > p > br {
display: inline-block;
content: " ";
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui {
margin-top: 0;
overflow: hidden;
max-height: 30.125rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item {
display: flex;
flex-flow: column;
justify-content: center;
padding-left: 2.25rem;
height: 28.9583333333rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item .title {
font-weight: bold;
font-size: 1.34375rem;
letter-spacing: 0.01375rem;
color: #FFFFFF;
margin-top: 1.1458333333rem;
margin-bottom: 1.6875rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item svg:first-child {
position: relative;
left: -0.625rem;
width: 8.6875rem;
height: 1.5625rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item svg:nth-child(3) {
width: 2.3125rem;
height: 2.3125rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item .btn-golmore {
position: relative;
margin-top: auto;
margin-bottom: 2.8125rem;
width: 2.875rem;
height: 1.1875rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item.stm03 svg:first-child {
left: 0;
}
.main .container .main-box.ftrd-prod-box .tab-ui, .main .container .main-box.seg-box .tab-ui {
margin-bottom: 0;
}
.main .container .main-box.insp-box .tab-ui {
margin-bottom: 0;
}
.main .container .main-box.insp-box .tab-ui .slick-slider {
display: flex;
justify-content: center;
padding: 0;
}
.main .container .main-box.insp-box .tab-ui .slick-list {
width: 17rem;
}
.main .container .main-box.insp-box .tab-ui .slick-slide {
height: fit-content;
}
.main .container .main-box.insp-box .tab-ui .slick-arrow {
padding: 0;
width: 0.75rem;
height: 1.3125rem;
}
.main .container .main-box.insp-box .tab-ui .slick-prev {
left: 1.5625rem;
}
.main .container .main-box.insp-box .tab-ui .slick-next {
right: 1.5625rem;
}
.main .container .main-box.insp-box .tab-ui .btns.type-main > ul .slick-prev {
left: 1.5625rem;
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box.insp-box .tab-ui .btns.type-main > ul .slick-next {
right: 1.5625rem;
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box.insp-box .insplist-wrap {
padding: 0;
}
.main .container .main-box.insp-box .insplist-wrap .txt-info {
bottom: 2.125rem;
padding: 0 1.375rem 0 1.375rem;
}
.main .container .main-box.insp-box .insplist-wrap .txt-info .tinfo-tit {
font-size: 0.71875rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul {
padding: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-cg {
font-size: 0.5625rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-place {
font-size: 0.75rem;
margin-top: 1.75rem;
letter-spacing: 0.0075rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-cmt {
font-size: 0.5625rem;
margin-top: 1.75rem;
line-height: 0.9375rem;
letter-spacing: 0.028125rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-cmt p {
color: #fff;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .btn-golmore {
width: 1.875rem;
height: 0.75rem;
bottom: 2.5625rem;
}
.main .container .main-box.ftrd-prod-box {
margin: 7.5rem 0 0 0;
}
.main .container .main-box.ftrd-prod-box .overscr-list-wrap .overscr-list li {
width: 13.1875rem;
height: 22.6875rem;
margin-left: 0.9125rem;
}
.main .container .main-box.ftrd-prod-box .txt-box {
padding: 1.625rem 1.125rem 0 1.125rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .info-st {
font-size: 0.5625rem;
letter-spacing: 0.028125rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .center-box .info-ti {
margin-top: 6.875rem;
font-size: 1.375rem;
letter-spacing: 0.06875rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .center-box .info-ki {
margin-top: 1rem;
font-size: 0.75rem;
letter-spacing: 0.0075rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .btn-golmore {
width: 1.6875rem;
height: 0.6875rem;
bottom: 2.0625rem;
}
.main .container .main-box.seg-box {
margin-top: 8.125rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track > li {
width: 13.1875rem;
height: 22.6875rem;
margin-left: 0.875rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track > li img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .menu-box ul {
bottom: 6.25rem;
left: 1.375rem;
flex-flow: column;
margin: 0;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .menu-box ul li ~ li {
margin-top: 0.875rem;
line-height: 0.875rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .menu-box ul li a {
font-size: 0.5625rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li:hover .seg-menu-tit span {
font-size: 1.375rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .seg-menu-tit {
padding-left: 1.375rem;
bottom: 2.0625rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .seg-menu-tit span {
font-size: 0.75rem;
}
.main .container .main-box .overscr-list, .main .container .main-box .overscr-list-wrap {
height: 22.6875rem;
}
.main .container .main-box .tab-ui .btns.type-main {
margin: 2.25rem 0 2.125rem 0;
}
.main .container .main-box .tab-ui .btns.type-main li {
margin: 0 0.1875rem;
}
.main .container .main-box .tab-ui .btns ul .btn-tab button {
height: 1.75rem;
font-weight: 600;
font-size: 0.75rem;
padding: 0 0.75rem 0 0.75rem;
line-height: inherit;
}
.main .container .w-con .short-link.type02 {
width: 100%;
height: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0 1.1875rem;
}
.main .container .w-con .short-link.type02 a {
display: flex;
justify-content: center;
width: 6.5625rem;
min-width: 10.25rem;
max-width: 10.25rem;
}
.main .container .w-con .short-link.type02 a ~ a {
margin-left: 0;
}
.main .container .w-con .short-link.type02 a:nth-child(3), .main .container .w-con .short-link.type02 a:nth-child(4), .main .container .w-con .short-link.type02 a:nth-child(5) {
margin-top: 2rem;
}
.main .container .w-con .short-link.type02 a span {
font-size: 0.75rem;
width: 6.5625rem;
}
.main .container .w-con .short-link.type02 a span:before {
margin: 0 0 1.875rem 0;
width: 3.3125rem;
height: 3.5625rem;
}
}
@media (max-width: 768px) {
#m-menu {
display: block;
}
header.scr-hder .hd-btns01 ul li .ico-01 {
width: 1.1875rem;
height: 1.1875rem;
}
header.scr-hder .hd-btns01 ul li .ico-03 {
width: 1.375rem;
height: 1.3125rem;
background-size: 100% 100%;
}
header.scr-hder .hd-btns01 ul li .ico-05 {
width: 1.125rem;
height: 1.25rem;
background-size: 100% 100%;
}
header.scr-hder .hd-btns01 ul li:nth-child(6) {
display: flex;
}
header.on .hd-btns01 ul li .ico-07 {
background: url("data:image/svg+xml;utf8, ");
background-size: 100% 100%;
}
}
@media (max-width: 768px) {
.main .container .main-box ul.slick-slider, .main .container .main-box .insplist-wrap ul {
margin-left: 0;
margin-right: 0;
}
.main .container .main-box .p-ui .slick-prev, .main .container .main-box.ourprod-box .ourprod-wrap.m-ui .slick-prev {
left: 0.6875rem;
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box .p-ui .slick-next, .main .container .main-box.ourprod-box .ourprod-wrap.m-ui .slick-next {
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box .slider-prod .txt-box .bannerRect {
width: 16.625rem;
height: 4.9375rem;
margin-bottom: 0;
border: 2px solid rgba(255, 255, 255, 0.7);
border-bottom: none;
}
.main .container .main-box .slider-prod .txt-box hr:nth-child(6), .main .container .main-box .slider-prod .txt-box hr:nth-child(3) {
width: 16.625rem;
border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}
.main .container .main-box .slider-prod .txt-box hr:nth-child(3) {
margin: 1rem 0;
}
.main .container .main-box .slider-prod .txt-box hr:nth-child(6) {
margin: 0;
}
.main .container .main-box .slider-prod .txt-box .btn-more:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 2.0833333333rem;
height: 2.0833333333rem;
border-radius: 1.0416666667rem;
background: #000;
opacity: 0.2;
transition: all 0.45s ease-in-out 0s;
}
.main .container .main-box .slider-prod .txt-box .btn-more:hover::after {
width: 100%;
opacity: 0.8;
}
.main .container .main-box .slider-prod .slick-list{
height: 100%;
}
.main .container .main-box .slider-prod .txt-box p.txt-01 {
text-align: left;
}
.main .container .main-box .slider-prod .txt-box p.txt-02 {
font-size: 0.875rem;
line-height: 1.125rem;
margin: 0;
}
.main .container .main-box.ourprod-box > p {
margin: 0 0 3.125rem 0;
width: 86%;
font-size: 0.78125rem;
line-height: 1.21875rem;
align-self: center;
}
.main .container .main-box.ourprod-box > p > br {
display: inline-block;
content: " ";
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui {
margin-top: 0;
overflow: hidden;
max-height: 30.125rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item {
display: flex;
flex-flow: column;
justify-content: center;
padding-left: 2.25rem;
height: 28.9583333333rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item .title {
font-weight: bold;
font-size: 1.34375rem;
letter-spacing: 0.01375rem;
color: #FFFFFF;
margin-top: 1.1458333333rem;
margin-bottom: 1.6875rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item svg:first-child {
position: relative;
left: -0.625rem;
width: 8.6875rem;
height: 1.5625rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item svg:nth-child(3) {
width: 2.3125rem;
height: 2.3125rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item .btn-golmore {
position: relative;
margin-top: auto;
margin-bottom: 2.8125rem;
width: 2.875rem;
height: 1.1875rem;
}
.main .container .main-box.ourprod-box .ourprod-wrap.m-ui .ourprod-slide .s-item.stm03 svg:first-child {
left: 0;
}
.main .container .main-box.ftrd-prod-box .tab-ui, .main .container .main-box.seg-box .tab-ui {
margin-bottom: 0;
}
.main .container .main-box.insp-box .tab-ui {
margin-bottom: 0;
}
.main .container .main-box.insp-box .tab-ui .slick-slider {
display: flex;
justify-content: center;
padding: 0;
}
.main .container .main-box.insp-box .tab-ui .slick-list {
width: 17rem;
}
.main .container .main-box.insp-box .tab-ui .slick-slide {
height: fit-content;
}
.main .container .main-box.insp-box .tab-ui .slick-arrow {
padding: 0;
width: 0.75rem;
height: 1.3125rem;
}
.main .container .main-box.insp-box .tab-ui .slick-prev {
left: 1.5625rem;
}
.main .container .main-box.insp-box .tab-ui .slick-next {
right: 1.5625rem;
}
.main .container .main-box.insp-box .tab-ui .btns.type-main > ul .slick-prev {
left: 1.5625rem;
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box.insp-box .tab-ui .btns.type-main > ul .slick-next {
right: 1.5625rem;
background: url("data:image/svg+xml;utf8, ");
background-size: 100%;
}
.main .container .main-box.insp-box .insplist-wrap {
padding: 0;
}
.main .container .main-box.insp-box .insplist-wrap .txt-info .tinfo-tit {
font-size: 0.71875rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul {
padding: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-cg {
font-size: 0.5625rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-place {
font-size: 0.75rem;
margin-top: 1.75rem;
letter-spacing: 0.0075rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-cmt {
font-size: 0.5625rem;
margin-top: 1.75rem;
line-height: 0.9375rem;
letter-spacing: 0.028125rem;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .tinfo-cmt p {
color: #fff;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.main .container .main-box.insp-box .insplist-wrap > ul li .dim-box .btn-golmore {
width: 1.875rem;
height: 0.75rem;
bottom: 2.5625rem;
}
.main .container .main-box.ftrd-prod-box {
margin: 7.5rem 0 0 0;
}
.main .container .main-box.ftrd-prod-box .overscr-list-wrap .overscr-list li {
width: 13.1875rem;
height: 22.6875rem;
margin-left: 0.9125rem;
}
.main .container .main-box.ftrd-prod-box .txt-box {
padding: 1.625rem 1.125rem 0 1.125rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .info-st {
font-size: 0.5625rem;
letter-spacing: 0.028125rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .center-box .info-ti {
margin-top: 6.875rem;
font-size: 1.375rem;
letter-spacing: 0.06875rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .center-box .info-ki {
margin-top: 1rem;
font-size: 0.75rem;
letter-spacing: 0.0075rem;
}
.main .container .main-box.ftrd-prod-box .txt-box .btn-golmore {
width: 1.6875rem;
height: 0.6875rem;
bottom: 2.0625rem;
}
.main .container .main-box.seg-box {
margin-top: 8.125rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track > li {
width: 13.1875rem;
height: 22.6875rem;
margin-left: 0.875rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track > li img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .menu-box ul {
bottom: 6.25rem;
left: 1.375rem;
flex-flow: column;
margin: 0;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .menu-box ul li ~ li {
margin-top: 0.875rem;
line-height: 0.875rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .menu-box ul li a {
font-size: 0.5625rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li:hover .seg-menu-tit span {
font-size: 1.375rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .seg-menu-tit {
padding-left: 1.375rem;
bottom: 2.0625rem;
}
.main .container .main-box.seg-box .overscr-list-wrap .overscr-list .slick-list .slick-track li .seg-menu-tit span {
font-size: 0.75rem;
}
.main .container .main-box .overscr-list, .main .container .main-box .overscr-list-wrap {
height: 22.6875rem;
}
.main .container .main-box .tab-ui .btns.type-main {
margin: 2.25rem 0 2.125rem 0;
}
.main .container .main-box .tab-ui .btns.type-main li {
margin: 0 0.1875rem;
}
.main .container .main-box .tab-ui .btns ul .btn-tab button {
height: 1.75rem;
font-weight: 600;
font-size: 0.75rem;
padding: 0 0.75rem 0 0.75rem;
line-height: inherit;
}
.main .container .w-con .short-link.type02 {
width: 100%;
height: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0 1.1875rem;
}
.main .container .w-con .short-link.type02 a {
display: flex;
justify-content: center;
width: 6.5625rem;
min-width: 10.25rem;
max-width: 10.25rem;
}
.main .container .w-con .short-link.type02 a ~ a {
margin-left: 0;
}
.main .container .w-con .short-link.type02 a:nth-child(3), .main .container .w-con .short-link.type02 a:nth-child(4), .main .container .w-con .short-link.type02 a:nth-child(5) {
margin-top: 2rem;
}
.main .container .w-con .short-link.type02 a span {
font-size: 0.75rem;
width: 6.5625rem;
}
.main .container .w-con .short-link.type02 a span:before {
margin: 0 0 1.875rem 0;
width: 3.3125rem;
height: 3.5625rem;
}
}
/*--------------------- E : index.vue 메인 모바일 ---------------------*/
.insp-padding {
padding: 0 5%;
}
@media (max-width: 992px) {
.prod-dt-cate .slider-prod {
height: 100vh;
}
}
@media (max-width: 768px) {
.prod-dt-cate .slider-prod {
height: 100vh;
}
}
.prod-dt-cate .slider-prod .slider {
position: relative;
height: 100vh;
}
@media (max-width: 992px) {
.prod-dt-cate .slider-prod .slider {
height: 100vh;
}
}
.youtube-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.youtube-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper{
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
position: absolute;
}
.video-wrapper .slide_video{
z-index: -1;
width: 100vw;
position: absolute;
}
/* slider fade animation */
@keyframes visualscale{
0% {
transform: scale(1); /* 애니메이션이 0%만큼 동작시 */
}
100% {
transform: scale(1.13); /* 애니메이션이 100%만큼 동작시 */
}
}
.prod-dt-cate .slider-prod .slider .slider_bg {
width: 100%;
height: 100vh;
object-fit: cover;
}
.prod-dt-cate .slider-prod .slider.slick-active .slider_bg {
animation-name: visualscale;
animation-duration: 7s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: alternate;
transform: translate3d(0, 0, 0);
/* transform-origin: 30% 30%; */
}
/* .prod-dt-cate .slider-prod .slider:nth-child(2) .slider_bg {
transform-origin: 70% 70%;
}
.prod-dt-cate .slider-prod .slider:nth-child(3) .slider_bg {
transform-origin: 70% 30%;
}
.prod-dt-cate .slider-prod .slider:nth-child(4) .slider_bg {
transform-origin: 30% 70%;
}
.prod-dt-cate .slider-prod .slider:nth-child(5) .slider_bg {
transform-origin: 55% 55%;
} */
.prod-dt-cate .slider-prod .txt-box {
position: absolute;
display: flex;
flex-flow: column;
padding: 0 0%;
justify-content: center;
background: transparent;
z-index: 300;
top: 29.5vh;
padding-left: 20px;
width: 100%;
text-align: left;
/* transform: translateY(-50%); */
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .txt-box {
top: 30vh;
padding-left: 60px;
}
}
@media (min-width: 1440px) {
.prod-dt-cate .slider-prod .txt-box {
padding-left: 80px;
padding-right: 80px;
}
}
.prod-dt-cate .slider-prod .txt-box .txt_wrap{
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #fff;
/* text-transform: uppercase; */
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .txt-box .txt_wrap{
font-size: 90px;
font-weight: 700;
}
}
/* 메인 비주얼 로고 이미지 */
.prod-dt-cate.main .slider-prod .txt-box .visual_logo{
width: auto;
height: 40px;
min-height: unset;
}
@media (min-width: 769px) {
.prod-dt-cate.main .slider-prod .txt-box .visual_logo {
width: auto;
height: 72px;
}
}
/* 메인 비주얼 로고 이미지(텍스트가 두줄일시) */
.prod-dt-cate.main .slider-prod .txt-box:has(.two_line) {
top: 22.4vh;
}
.prod-dt-cate.main .slider-prod .txt-box .visual_logo.two_line {
height: 100px;
}
@media (min-width: 769px) {
.prod-dt-cate.main .slider-prod .txt-box:has(.two_line) {
top: 21.4vh;
}
.prod-dt-cate.main .slider-prod .txt-box .visual_logo.two_line {
height: 170px;
}
}
.prod-dt-cate .slider-prod .img {
margin-bottom: 35px;
}
.prod-dt-cate .slider-prod .img > img {
display: inline-block;
width: auto;
padding-bottom: 5px;
vertical-align: top;
border-bottom: 1px solid #fff;
}
.prod-dt-cate .slider-prod .txt-01 {
margin-top: 20px;
font-size: 20px;
font-weight: 400;
color: #fff;
/* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); */
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .txt-01 {
/* margin-top: 22px; */
margin-top: 18px;
font-size: 26px;
line-height: 1.333;
/* max-width: 550px; */
overflow: hidden;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
}
@media (min-width: 1600px) {
.prod-dt-cate .slider-prod .txt-01 {
margin-top: 26px;
font-size: 30px;
}
}
.prod-dt-cate .slider-prod .text_logo {
font-size: 90px;
line-height: 103px;
font-weight: 700;
color: #fff;
}
.prod-dt-cate .slider-prod .txt-02 {
margin-top: 10px;
font-size: 24px;
font-weight: 500;
color: #fff;
}
.prod-dt-cate .slider-prod .slick-active .txt-01 {
transform: none;
opacity: 1;
transition: none;
}
.prod-dt-cate .slider-prod .slick-active .txt-02 {
transform: none;
opacity: 1;
transition: none;
}
.prod-dt-cate .slider-prod .slick-active .txt-box .btn-more {
/* opacity: 1; */
}
.prod-dt-cate .slider-prod .txt-box .btn-more {
position: relative;
display: flex;
align-items: center;
width: 169px;
height: 46px;
min-height: 46px;
margin: 0px 0 0px 0;
margin-top: 60px;
padding-left: 20px;
padding-right: 0;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
/* opacity: 0; */
/* transition: all 0.5s ease-out 1.8s; */
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .txt-box .btn-more {
margin-top: 80px;
}
}
@media (min-width: 1400px) {
.prod-dt-cate .slider-prod .txt-box .btn-more {
width: 182px;
height: 50px;
min-height: 50px;
margin-top: 100px;
}
}
.prod-dt-cate .slider-prod .txt-box .btn-more:hover span{
margin-right: 0;
transition: all 0.45s ease-in-out 0s;
}
.prod-dt-cate .slider-prod .txt-box .btn-more:after {
display: none;
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 50px;
height: 100%;
border-radius: 30px;
background: #000;
opacity: 0.2;
transition: all 0.45s ease-in-out 0s;
}
.prod-dt-cate .slider-prod .txt-box a.btn-more:hover::after {
width: 100%;
opacity: 0.8;
}
.prod-dt-cate .slider-prod .btn-more span {
position: relative;
display: block;
z-index: 100;
width: 100%;
margin-right: 20px;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #fff;
background: url(https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_long_wh.svg) right center no-repeat;
background-size: 20px;
white-space: nowrap;
transition: all 0.45s ease-in-out 0s;
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .btn-more span {
margin-right: 20px;
font-size: 16px;
background-size: 22px;
}
}
.prod-dt-cate .slider-prod .slick-dots {
position: relative;
display: flex;
overflow-x: hidden;
/* width: 1100px; */
bottom: 104px;
padding-left: 20px;
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .slick-dots {
position: absolute;
z-index: 99;
overflow: hidden;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 90%;
gap: 22px;
padding-left: unset;
}
}
@media (min-width: 1600px) {
.prod-dt-cate .slider-prod .slick-dots {
bottom: 30px;
width: calc(100% - 380px);
gap: 28px;
}
}
.prod-dt-cate .slider-prod .slick-dots li {
position: relative;
display: flex;
align-items: center;
width: 220px;
min-width: 220px;
height: 84px;
}
@media (min-width: 769px) {
.prod-dt-cate .slider-prod .slick-dots li {
width: calc((90vw - 22px * 3) / 4 );
min-width: unset;
height: 104px;
}
}
@media (min-width: 1600px) {
.prod-dt-cate .slider-prod .slick-dots li {
width: calc((80vw - 28px * 3) / 4 );
}
}
.prod-dt-cate .slider-prod .slick-dots li.slick-active .shadow {
position: absolute;
bottom: -100%;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(5px);
z-index: -1;
}
.prod-dt-cate .slider-prod .slick-dots li .dot{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 104px;
text-align: center;
}
@media (max-width: 768px) {
.prod-dt-cate .slider-prod .slick-dots li .dot{
height: 84px;
}
}
.prod-dt-cate .slider-prod .slick-dots li .dot{
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.prod-dt-cate .slider-prod .slick-dots li.slick-active .dot .bottom_line {
width: 0px;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background-color: #fff;
}
.prod-dt-cate .slider-prod .slick-dots li .dot .txt1{
color: #fff;
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
}
.prod-dt-cate .slider-prod .slick-dots li .dot .txt2{
margin-top: 8px;
font-size: 16px;
white-space: nowrap;
color: #fff;
opacity: 0.6;
}
.prod-dt-cate .slider-prod .slick-dots li ~ li {
margin-left: 0px;
}
.prod-dt-cate .slider-prod .slick-dots button {
width: 100%;
height: inherit;
background: #f0f0f0;
}
.prod-dt-cate .slider-prod .slick-dots .slick-active button {
background: #0a0a0a;
}
.prod-dt-cate .slider-prod .slick-dots .btn-pause {
width: 9px;
height: 11px;
margin-left: 14px;
}
.prod-dt-cate .slider-prod .slick-dots .btn-pause button {
width: inherit;
height: inherit;
background: url(https://img.lxhausys.com/public/images/products/ico_stop.png) center no-repeat;
}
.prod-dt-cate .slider-prod .slick-dots .btn-play {
width: 9px;
height: 11px;
margin-left: 14px;
}
.prod-dt-cate .slider-prod .slick-dots .btn-play button {
width: inherit;
height: inherit;
background: url(https://img.lxhausys.com/public/images/products/ico_play.png) center no-repeat;
}
.prod-dt-cate .slider-prod .slick-arrow {
position: absolute;
/* top: 93%; */
z-index: 200;
bottom: 72px;
width: 20px;
height: 20px;
background-position: center;
background-repeat: no-repeat;
/* transform: translateY(-50%); */
font-size: 0;
text-indent: -999999em;
}
@media (max-width: 768px) {
.prod-dt-cate .slider-prod .slick-arrow{
opacity: 0;
}
}
.prod-dt-view {
display: flex;
flex-flow: column;
justify-content: center;
}
/* ----- New Events ----- */
.main-box.new_events{
position: relative;
}
@media (min-width: 769px) {
.main-box.new_events{
}
}
@media (min-width: 769px) {
.main-box.new_events::before{
position: absolute;
content: "";
z-index: 0;
left: 50%;
width: 740px;
height: 1111px;
transform: translateX(-50%);
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
}
.main-box.new_events .tit_area{
position: absolute;
z-index: 100;
top: 60px;
left: 20px;
}
@media (min-width: 769px) {
.main-box.new_events .tit_area{
top: 150px;
left: 80px;
}
}
/* @media (min-width: 1440px) {
.main-box.new_events .tit_area{
top: 160px;
left: 80px;
}
} */
.main-box.new_events .tit-main{
margin-bottom: 18px;
text-align: left;
}
@media (min-width: 769px) {
.main-box.new_events .tit-main{
margin-bottom: 24px;
}
}
@media (min-width: 1440px) {
.main-box.new_events .tit-main{
margin-bottom: 30px;
}
}
.newevent_slider_wrap{
/* height: 110vh; */
}
@media (min-width: 769px) {
.newevent_slider_wrap{
/* height: 110vh; */
}
}
.newevent_slider_wrap .center_slider{
height: 679px;
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider{
height: unset;
}
}
/* whats new 슬라이더 커스텀 버튼 */
.newevent_slider_wrap .custom_btn_area{
position: absolute;
z-index: 60;
display: flex;
right: 20px;
bottom: 60px;
border: 1px solid #ddd;
}
@media (min-width: 769px) {
.newevent_slider_wrap .custom_btn_area{
right: 80px;
top: 322px;
bottom: unset;
width: 159px;
}
}
.newevent_slider_wrap .custom_btn_area .btn_slick_prev{
width: 54px;
height: 54px;
font-size: 0;
text-indent: -99999em;
background: #fff url('https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_left_dark_gray_big.svg') no-repeat center center;
}
@media (min-width: 768px) {
.newevent_slider_wrap .custom_btn_area .btn_slick_prev{
width: 80px;
height: 80px;
}
}
.newevent_slider_wrap .custom_btn_area .btn_slick_next{
width: 54px;
height: 54px;
font-size: 0;
text-indent: -99999em;
border-left: 1px solid #ddd;
background: #fff url('https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_dark_gray_big.svg') no-repeat center center;
}
@media (min-width: 768px) {
.newevent_slider_wrap .custom_btn_area .btn_slick_next{
width: 80px;
height: 80px;
}
}
.newevent_slider_wrap .center_slider .slick-arrow{
position: absolute;
display: none;
z-index: 20;
top: 86%;
text-indent: -999999rem;
}
.newevent_slider_wrap .center_slider .slick-prev.slick-arrow{
right: 74px;
/* background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_prev.png') no-repeat center center; */
}
@media (min-width: 768px) {
.newevent_slider_wrap .center_slider .slick-prev.slick-arrow{
right: 118px;
}
}
@media (min-width: 1600px) {
.newevent_slider_wrap .center_slider .slick-prev.slick-arrow{
right: 159px;
}
}
.newevent_slider_wrap .center_slider .slick-prev.slick-arrow:active{
/* background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_prev_on.png') no-repeat center center; */
}
.newevent_slider_wrap .center_slider .slick-next.slick-arrow{
right: 20px;
/* background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_next.png') no-repeat center center; */
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .slick-next.slick-arrow{
right: 60px;
}
}
@media (min-width: 1600px) {
.newevent_slider_wrap .center_slider .slick-next.slick-arrow{
right: 79px;
}
}
.newevent_slider_wrap .center_slider .slick-next.slick-arrow:active{
/* background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_next_on.png') no-repeat center center; */
}
.newevent_slider_wrap .center_slider .item{
display: flex;
width: calc(100vw - 40px);
height: 651px;
padding-top: 132px;
padding-bottom: 154px;
flex-direction: column;
justify-content: flex-end;
white-space: normal;
/* cursor: default; */
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .item{
width: 476px;
height: 1111px;
margin: 0 10px;
padding-top: 290px;
padding-bottom: unset;
justify-content: flex-end;
}
}
.newevent_slider_wrap .center_slider .item + .item{
/* margin-left: 14px; */
/* margin-right: 10px; */
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .item + .item{
margin-left: 34px;
margin-right: 0;
}
}
@media (max-width: 768px) {
.newevent_slider_wrap .center_slider .item.slick-current.slick-active.slick-center{
padding-left: 14px;
padding-right: 14px;
}
}
.newevent_slider_wrap .center_slider .item.slick-current{
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
cursor: pointer;
}
.newevent_slider_wrap .center_slider .item.slick-current > a {
display: block;
}
.newevent_slider_wrap .center_slider .item > a {
/*display: none;*/
}
.newevent_slider_wrap .center_slider .item.slick-current > div {
display: none;
}
.newevent_slider_wrap .center_slider .item > div {
display: block;
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .item.slick-current{
border-right: unset;
border-left: unset;
width: 740px;
white-space: normal;
}
}
/* 비활성 슬라이드: 1줄 고정 */
.slick-slide:not(.slick-current) .contents .description .des1{
display: block; /* -webkit-box 끄기 */
white-space: nowrap; /* 1줄 */
overflow: hidden;
text-overflow: ellipsis;
}
/* 현재 슬라이드: 여러 줄 확실히 강제(충돌 대비) */
.slick-slide.slick-current .contents .description .des1{
display: -webkit-box;
white-space: normal;
-webkit-box-orient: vertical;
/* -webkit-line-clamp는 위 기본/미디어쿼리 값 사용 */
}
/* des2는 항상 여러 줄 허용 (보강) */
.slick-slide .contents .description .des2{
white-space: normal !important;
}
.newevent_slider_wrap .center_slider .item .contents{
opacity: 0;
height: 157px;
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .item .contents{
height: 341px;
}
}
.newevent_slider_wrap .center_slider .item.slick-current .contents{
opacity: 1;
}
.newevent_slider_wrap .center_slider .item .img{
transform-origin: 50% 100%;
height: 156px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .item .img{
width: 476px;
height: 308px;
overflow: hidden;
}
}
/* @media (min-width: 1440px) {
.newevent_slider_wrap .center_slider .item .img{
height: 308px;
}
} */
.newevent_slider_wrap .center_slider .item.slick-current:hover .img img{
width: 110%;
height: 110%;
object-fit: cover;
transition: all 0.5s ease-in-out 0s;
}
.newevent_slider_wrap .center_slider .item .img img{
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s ease-in-out;
pointer-events: none;
}
.newevent_slider_wrap .center_slider .item.slick-current .img{
transform-origin: 50% 100%;
height: 208px;
/* padding: 0 15px; */
cursor: pointer;
}
@media (min-width: 769px) {
.newevent_slider_wrap .center_slider .item.slick-current .img{
width: 100%;
height: 480px;
padding: unset;
}
}
/* @media (min-width: 1280px) {
.newevent_slider_wrap .center_slider .item.slick-current .img{
height: 360px;
padding: unset;
}
} */
/* @media (min-width: 1440px) {
.newevent_slider_wrap .center_slider .item.slick-current .img{
height: 480px;
}
} */
.newevent_slider_wrap .item .contents .description {
cursor: pointer;
}
.item .contents .sort{
padding-left: 24px;
padding-top: 12px;
padding-bottom: 12px;
color: #666;
font-size: 14px;
line-height: 14px;
border-bottom: 1px solid #ebebeb;
}
@media (min-width: 769px) {
.item .contents .sort{
padding-left: 30px;
padding-top: 18px;
padding-bottom: 18px;
font-size: 16px;
}
}
.item .contents .description{
padding-top: 18px;
padding-left: 24px;
padding-right: 20px;
padding-bottom: 0px;
}
@media (min-width: 769px) {
.item .contents .description{
padding-top: 24px;
padding-left: 30px;
padding-right: 40px;
padding-bottom: 130px;
}
}
/* des1: 항상 2줄 */
.item .contents .description .des1{
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: #222;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* ← 2줄 고정 */
/* line-clamp: 2; // 지원 브라우저에서만 */
}
@media (min-width: 769px) {
.item .contents .description .des1{
font-size: 24px;
line-height: 1.5;
-webkit-line-clamp: 2; /* ← 데스크탑에서도 2줄 유지 */
}
}
/* des2: 항상 3줄 */
.item .contents .description .des2{
padding-top: 8px;
font-size: 15px;
line-height: 20px;
color: #666;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ← 3줄 고정 */
/* line-clamp: 3; */
}
@media (min-width: 769px) {
.item .contents .description .des2{
padding-top: 24px;
font-size: 18px;
line-height: 1.44;
-webkit-line-clamp: 3; /* ← 데스크탑에서도 3줄 유지 */
}
}
/* Main - Our products */
.ourprod-box {
margin-top: 100px;
}
.ourprod-wrap {
position: relative;
height: 880px;
min-height: 850px;
margin-top: 60px;
-webkit-transition: 1.5s ease;
transition: 1.5s ease;
}
.ourprod-wrap .ourprod-view {
height: inherit;
overflow: hidden;
}
.ourprod-wrap .ourprod-view .item {
background-size: cover;
position: absolute;
top: 0;
width: 33.3333333333%;
height: inherit;
min-height: 850px;
overflow: hidden;
/*transition:all .5s ease-in-out*/
}
.ourprod-wrap .ourprod-view .item .bgImage {
background-size: cover;
}
@media (max-width: 768px) {
.ourprod-wrap .ourprod-view .item {
width: 100%;
}
}
.ourprod-wrap .ourprod-view .item:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.07;
}
.ourprod-wrap .ourprod-view .item:first-child {
left: 0%;
background-position: center bottom;
background-size: cover;
}
.ourprod-wrap .ourprod-view .item:nth-child(2) {
left: 33.3333333333%;
background-position: bottom;
background-size: cover;
}
.ourprod-wrap .ourprod-view .item:nth-child(3) {
left: 66.6666666667%;
background-position: bottom;
background-size: cover;
}
.ourprod-wrap .ourprod-view .item .bgImage {
visibility: inherit;
opacity: 1;
width: max-content;
position: absolute;
left: 0;
top: 0;
bottom: 0;
-webkit-transition: opacity 0.1s ease, -webkit-transform 5s ease 1s;
transition: opacity 0.1s ease, -webkit-transform 5s ease 1s;
transition: opacity 0.1s ease, transform 5s ease 1s;
transition: opacity 0.1s ease, transform 5s ease 1s, -webkit-transform 5s ease 1s;
}
.ourprod-wrap .ourprod-view .item.show {
z-index: 1;
}
.ourprod-wrap .ourprod-view .item.show:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.07;
}
.ourprod-wrap .ourprod-view .item.show .bgImage {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
.ourprod-wrap .ourprod-view .item .bgImage img {
position: relative;
width: 100%;
height: 100%;
}
.ourprod-wrap .ourprod-view .item:nth-child(2) .bgImage img {
left: -33.3333333333%;
}
.ourprod-wrap .ourprod-view .item:nth-child(3) .bgImage img {
left: -66.6666666667%;
}
.ourprod-wrap .ourprod-content {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: inherit;
min-height: 880px;
}
.ourprod-wrap .ourprod-content .item {
position: relative;
float: left;
width: 33.3333333333%;
height: 100%;
}
@media (max-width: 768px) {
.ourprod-wrap .ourprod-content .item {
width: 100%;
}
}
.ourprod-wrap .ourprod-content .item:after, .ourprod-wrap .ourprod-content .item:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.ourprod-wrap .ourprod-content .item:after {
width: 100%;
background-color: #222;
opacity: 0;
-webkit-transition-delay: 2s;
transition-delay: 2s;
-webkit-transition: 2s ease;
transition: 2s ease;
}
.ourprod-wrap .ourprod-content .item:before {
width: 1px;
background-color: #fff;
opacity: 0;
-webkit-transition: 1s ease;
transition: 1s ease;
}
.ourprod-wrap .ourprod-content .item > .title {
position: absolute;
top: 41%;
left: 75px;
display: block;
font-weight: 700;
font-size: 50px;
color: #fff;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 1;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
-webkit-transform: translate(0);
transform: translate(0);
cursor: pointer;
}
.ourprod-wrap .ourprod-content .item .area .area_title .img1,
.ourprod-wrap .ourprod-content .item .title .img1 {
display: block;
width: 100%;
height: 30px;
margin-bottom: 10px;
opacity: 1;
}
.ourprod-wrap .ourprod-content .item .area .area_title .img1 img,
.ourprod-wrap .ourprod-content .item .title .img1 img {
width: auto;
}
.ourprod-wrap .ourprod-content .item .area .area_title .img2,
.ourprod-wrap .ourprod-content .item .title .img2 {
display: block;
width: 100%;
height: 50px;
margin-top: 25px;
opacity: 1;
}
.ourprod-wrap .ourprod-content .item .area .area_title .img2 img,
.ourprod-wrap .ourprod-content .item .title .img2 img {
width: auto;
}
.ourprod-wrap .ourprod-content .item .area {
position: absolute;
left: 75px;
top: 41%;
opacity: 0;
z-index: -1;
}
.ourprod-wrap .ourprod-content .item .area .area_title {
font-weight: 700;
font-size: 50px;
color: #fff;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
}
.ourprod-wrap .ourprod-content .item .area .text {
margin-top: 40px;
font-weight: 400;
font-size: 18px;
color: #fff;
line-height: 1.3;
}
.ourprod-wrap .ourprod-content .item .area .btn-lmore {
margin-top: 40px;
}
.ourprod-wrap .ourprod-content .item.on {
z-index: 1;
}
.ourprod-wrap .ourprod-content .item.on .title {
display: none;
}
.ourprod-wrap .ourprod-content .item.on:after {
opacity: 0.4;
}
.ourprod-wrap .ourprod-content .item.on:before {
opacity: 0.3;
}
.ourprod-wrap .ourprod-content .item.on .area {
opacity: 1;
z-index: 2;
}
.ourprod-wrap .ourprod-content .item.off .title {
top: 60%;
}
.ourprod-wrap .ourprod-content .item.off:before {
opacity: 0.3;
}
.ourprod-wrap .ourprod-content .item.off .title .img1,
.ourprod-wrap .ourprod-content .item.off .title .img2 {
opacity: 0;
}
.ourprod-wrap .ourprod-content .item .btn {
position: absolute;
bottom: 80px;
}
@media (max-width: 768px) {
.ourprod-wrap .ourprod-content .item .btn {
bottom: 2.9166666667rem;
}
}
.ourprod-wrap.hasDouble .ourprod-view .item {
width: 50%;
}
.ourprod-wrap.hasDouble .ourprod-view .item:nth-last-child(1) {
left: auto;
right: 0;
}
.ourprod-wrap.hasDouble .ourprod-view .item:nth-last-child(1) img {
left: auto;
right: 0;
}
.ourprod-wrap.hasDouble .ourprod-content .item {
width: 50%;
}
.ourprod-wrap.eu-m-ui {
display: none;
}
@media (max-width: 768px) {
.ourprod-wrap.eu-m-ui {
display: block;
}
}
.ourprod-wrap.eu-m-ui .ourprod-content .item {
width: 100%;
}
/* Our products */
.prod-dt-view .main-box.ourprod-box {
position: relative;
margin-top: 0;
padding-bottom: 154px;
background-color: #f8f8f8;
/* overflow-x: hidden; */
}
@media (min-width: 769px) {
.prod-dt-view .main-box.ourprod-box {
/* height: 110vh; */
overflow-x: hidden;
padding-bottom: unset;
}
}
@media (min-width: 1600px) {
.prod-dt-view .main-box.ourprod-box {
/* height: 100vh; */
}
}
.main-box.ourprod-box .title_area{
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 769px) {
.main-box.ourprod-box .title_area{
position: absolute;
z-index: 500;
padding: 0;
top: 150px;
left: 720px;
right: 80px;
}
}
@media (min-width: 1600px) {
.main-box.ourprod-box .title_area{
}
}
.main-box.ourprod-box .tit-main{
text-align: left;
margin-bottom: 18px;
}
@media (min-width: 769px) {
.main-box.ourprod-box .tit-main{
margin-bottom: 0;
}
}
.prod-dt-view .main-box.ftrd-prod-box, .prod-dt-view .main-box.seg-box {
margin-top: 216px;
}
@media (max-width: 1440px) {
.prod-dt-view .main-box.ftrd-prod-box, .prod-dt-view .main-box.seg-box {
margin-top: 151px;
}
}
@media (max-width: 768px) {
.prod-dt-view .main-box.ftrd-prod-box, .prod-dt-view .main-box.seg-box {
margin-top: 7.9583333333rem;
}
}
.prod-dt-view .main-box.ftrd-prod-box .tab-ui, .prod-dt-view .main-box.seg-box .tab-ui, .prod-dt-view .main-box.insp-box .tab-ui {
margin-top: 0;
}
.prod-dt-view .main-box.ftrd-prod-box .tab-ui .btns, .prod-dt-view .main-box.seg-box .tab-ui .btns, .prod-dt-view .main-box.insp-box .tab-ui .btns {
margin: 64px 0;
}
@media (max-width: 992px) {
.ourprod-wrap.p-ui {
display: none;
}
}
.ourprod-wrap.tab-ui {
display: none;
}
@media (max-width: 992px) {
.ourprod-wrap.tab-ui {
display: block;
}
}
@media (max-width: 768px) {
.ourprod-wrap.tab-ui {
display: none;
}
}
.ourprod-wrap.tab-ui.hasDouble {
display: none;
}
@media only screen and (max-width: 1280px) and (min-width: 769px) {
.ourprod-wrap.tab-ui {
height: 100%;
margin-top: 18px;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item {
position: relative;
height: 16.6666666667rem;
padding-left: 6.25rem;
padding-top: 3.125rem;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item img {
display: none;
width: 100%;
height: 100%;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item .title {
display: block;
font-weight: bold;
font-size: 1.34375rem;
letter-spacing: 0.01375rem;
color: #FFFFFF;
margin: 19px 0 28px 0;
cursor: pointer;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item svg:first-child {
position: relative;
display: block;
width: auto;
height: 1.5208333333rem;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item svg:last-child {
width: 2.2083333333rem;
height: 2.2083333333rem;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item .stm-info {
position: absolute;
top: 0;
left: 0;
padding: 80px 0 0 40px;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item .stm-info .stm-title {
line-height: 1;
font-weight: 700;
font-size: 27px;
color: #fff;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item .stm-info .stm-title:before {
display: block;
width: 100%;
height: 14px;
content: "";
margin-bottom: 5px;
opacity: 1;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm01 {
background: url("https://img.lxhausys.com/public/images/main/img_op_01_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm02 {
background: url("https://img.lxhausys.com/public/images/main/img_op_02_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm03 {
background: url("https://img.lxhausys.com/public/images/main/img_op_03_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm01 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_hflor.png");
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm02 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_viatera.png");
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm03 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_himacs.png");
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item .stm-info .stm-title:after {
display: block;
width: 100%;
content: "";
margin-top: 16px;
opacity: 1;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm01 .stm-title:after {
height: 26px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_hflor.png");
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm02 .stm-title:after {
height: 23px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_viatera.png");
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item.stm03 .stm-title:after {
height: 22px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_himacs.png");
}
.ourprod-wrap.tab-ui .ourprod-slide .s-item .stm-info .btn-lmore {
display: block;
margin-top: 26px;
}
.ourprod-wrap.tab-ui .ourprod-slide .slick-arrow {
position: absolute;
top: 50%;
z-index: 98;
width: 20px;
height: 20px;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.4);
background-size: auto 6px;
border-radius: 50%;
transform: translateY(-50%);
}
.ourprod-wrap.tab-ui .ourprod-slide .slick-prev {
left: 20px;
background-image: url(https://img.lxhausys.com/public/images/main/arr_left_02.png);
}
.ourprod-wrap.tab-ui .ourprod-slide .slick-prev:hover, .ourprod-wrap.tab-ui .ourprod-slide .slick-prev:active {
background-image: url(https://img.lxhausys.com/public/images/main/arr_left_02.png);
}
.ourprod-wrap.tab-ui .ourprod-slide .slick-next {
right: 20px;
background-image: url(https://img.lxhausys.com/public/images/main/arr_right_02.png);
}
.ourprod-wrap.tab-ui .ourprod-slide .slick-next:hover, .ourprod-wrap.tab-ui .ourprod-slide .slick-next:active {
background-image: url(https://img.lxhausys.com/public/images/main/arr_right_02.png);
}
}
@media only screen and (max-width: 768px) {
.ourprod-wrap {
min-height: unset;
}
.ourprod-wrap.m-ui {
height: 28.9583333333rem;
margin-top: 18px;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item {
position: relative;
height: 28.9583333333rem;
padding-left: 6.25rem;
padding-top: 9.1666666667rem;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item img {
display: none;
width: 100%;
height: 100%;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item .title {
display: block;
font-weight: bold;
font-size: 1.34375rem;
letter-spacing: 0.01375rem;
color: #FFFFFF;
margin: 19px 0 28px 0;
cursor: pointer;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item svg:first-child {
position: relative;
display: block;
width: auto;
height: 1.5208333333rem;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item svg:last-child {
width: 2.2083333333rem;
height: 2.2083333333rem;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item .stm-info {
position: absolute;
top: 0;
left: 0;
padding: 80px 0 0 40px;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item .stm-info .stm-title {
line-height: 1;
font-weight: 700;
font-size: 27px;
color: #fff;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item .stm-info .stm-title:before {
display: block;
width: 100%;
height: 14px;
content: "";
margin-bottom: 5px;
opacity: 1;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm01 {
background: url("https://img.lxhausys.com/public/images/main/img_op_01_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm02 {
background: url("https://img.lxhausys.com/public/images/main/img_op_02_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm03 {
background: url("https://img.lxhausys.com/public/images/main/img_op_03_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm01 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_hflor.png");
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm02 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_viatera.png");
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm03 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_himacs.png");
}
.ourprod-wrap.m-ui .ourprod-slide .s-item .stm-info .stm-title:after {
display: block;
width: 100%;
content: "";
margin-top: 16px;
opacity: 1;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm01 .stm-title:after {
height: 26px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_hflor.png");
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm02 .stm-title:after {
height: 23px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_viatera.png");
}
.ourprod-wrap.m-ui .ourprod-slide .s-item.stm03 .stm-title:after {
height: 22px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_himacs.png");
}
.ourprod-wrap.m-ui .ourprod-slide .s-item .stm-info .btn-lmore {
display: block;
margin-top: 26px;
}
.ourprod-wrap.m-ui .ourprod-slide .slick-arrow {
position: absolute;
top: 50%;
z-index: 98;
width: 20px;
height: 20px;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.4);
background-size: auto 6px;
border-radius: 50%;
transform: translateY(-50%);
}
.ourprod-wrap.m-ui .ourprod-slide .slick-prev {
left: 20px;
background-image: url(https://img.lxhausys.com/public/images/main/arr_left_02.png);
}
.ourprod-wrap.m-ui .ourprod-slide .slick-prev:hover, .ourprod-wrap.m-ui .ourprod-slide .slick-prev:active {
background-image: url(https://img.lxhausys.com/public/images/main/arr_left_02.png);
}
.ourprod-wrap.m-ui .ourprod-slide .slick-next {
right: 20px;
background-image: url(https://img.lxhausys.com/public/images/main/arr_right_02.png);
}
.ourprod-wrap.m-ui .ourprod-slide .slick-next:hover, .ourprod-wrap.m-ui .ourprod-slide .slick-next:active {
background-image: url(https://img.lxhausys.com/public/images/main/arr_right_02.png);
}
.ourprod-wrap.eu-m-ui {
height: 28.9583333333rem;
margin-top: 18px;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item {
position: relative;
height: 14.5833333333rem;
padding-left: 2.0833333333rem;
padding-top: 2.0833333333rem;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item img {
display: none;
width: 100%;
height: 100%;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .title {
display: block;
font-weight: bold;
font-size: 1.25rem;
letter-spacing: 0.01375rem;
color: #FFFFFF;
margin: 17px 0 25px 0;
cursor: pointer;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item svg:first-child {
position: relative;
display: block;
width: auto;
height: 1.5208333333rem;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item svg:last-child {
width: 2.2083333333rem;
height: 2.2083333333rem;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .stm-info {
position: absolute;
top: 0;
left: 0;
padding: 80px 0 0 40px;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .stm-info .stm-title {
line-height: 1;
font-weight: 700;
font-size: 27px;
color: #fff;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .stm-info .stm-title:before {
display: block;
width: 100%;
height: 14px;
content: "";
margin-bottom: 5px;
opacity: 1;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .btn-golmore {
position: relative;
display: block;
margin-top: 1.25rem;
width: 2.5rem;
height: 1rem;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm01 {
background: url("https://img.lxhausys.com/public/images/main/img_op_01_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm02 {
background: url("https://img.lxhausys.com/public/images/main/img_op_02_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm03 {
background: url("https://img.lxhausys.com/public/images/main/img_op_03_on.webp") no-repeat center center;
background-size: cover;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm01 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_hflor.png");
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm02 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_viatera.png");
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm03 .stm-title:before {
background-image: url("https://img.lxhausys.com/public/images/main/logo_himacs.png");
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .stm-info .stm-title:after {
display: block;
width: 100%;
content: "";
margin-top: 16px;
opacity: 1;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm01 .stm-title:after {
height: 26px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_hflor.png");
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm02 .stm-title:after {
height: 23px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_viatera.png");
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item.stm03 .stm-title:after {
height: 22px;
background-image: url("https://img.lxhausys.com/public/images/main/ico_op_himacs.png");
}
.ourprod-wrap.eu-m-ui .ourprod-slide .s-item .stm-info .btn-lmore {
display: block;
margin-top: 26px;
}
.ourprod-wrap.eu-m-ui .ourprod-slide .slick-arrow {
position: absolute;
top: 50%;
z-index: 98;
width: 20px;
height: 20px;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.4);
background-size: auto 6px;
border-radius: 50%;
transform: translateY(-50%);
}
.ourprod-wrap.eu-m-ui .ourprod-slide .slick-prev {
left: 20px;
background-image: url(https://img.lxhausys.com/public/images/main/arr_left_02.png);
}
.ourprod-wrap.eu-m-ui .ourprod-slide .slick-prev:hover, .ourprod-wrap.eu-m-ui .ourprod-slide .slick-prev:active {
background-image: url(https://img.lxhausys.com/public/images/main/arr_left_02.png);
}
.ourprod-wrap.eu-m-ui .ourprod-slide .slick-next {
right: 20px;
background-image: url(https://img.lxhausys.com/public/images/main/arr_right_02.png);
}
.ourprod-wrap.eu-m-ui .ourprod-slide .slick-next:hover, .ourprod-wrap.eu-m-ui .ourprod-slide .slick-next:active {
background-image: url(https://img.lxhausys.com/public/images/main/arr_right_02.png);
}
}
.ourprod-wrap .ourprod-content .item > .pro-detail-tit {
position: relative;
font-family: 'NotoSans' , sans-serif;
font-size: 38px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 1px;
opacity: 1;
text-transform: unset;
color: #fff;
top: unset;
left: -3px;
padding: 32px 0 38px 0;
transition: 0.5s ease;
cursor: pointer;
}
@media (max-width: 1440px) {
.ourprod-wrap .ourprod-content .item > .pro-detail-tit {
font-size: 27px;
letter-spacing: 0;
}
}
@media (max-width: 1280px) {
.ourprod-wrap .ourprod-content .item > .pro-detail-tit {
font-size: 1.0416666667rem;
}
}
.ourprod-wrap .ourprod-content .item.off .pro-detail-tit {
opacity: 0;
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ourprod-box .ourprod-wrap .ourprod-content .item .pd-logo {
cursor: pointer;
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ourprod-box .ourprod-wrap .ourprod-content .item .pd-icon {
cursor: pointer;
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1440px) {
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide {
width: 100%;
}
}
@media (max-width: 768px) {
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide {
padding: 0;
}
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-arrow {
display: none;
position: absolute;
z-index: 100;
top: 50%;
width: 52px;
height: 52px;
background-color: rgba(255, 255, 255, 0);
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
transform: translateY(-50%);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-prev {
left: 0;
background-image: url(https://img.lxhausys.com/public/images/products/arrw_left.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-prev:hover, .main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-prev:active {
background-image: url(https://img.lxhausys.com/public/images/products/arrw_left_02.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-next {
right: 0;
background-image: url(https://img.lxhausys.com/public/images/products/arrw_right.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-next:hover, .main.content.prod-dt-cate .container.prod-dt-view .main-box.ftrd-prod-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag-products.euSlide .slick-next:active {
background-image: url(https://img.lxhausys.com/public/images/products/arrw_right_02.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1440px) {
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide {
width: 100%;
}
}
@media (max-width: 768px) {
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide {
padding: 0;
}
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-arrow {
display: none;
position: absolute;
z-index: 100;
top: 50%;
width: 52px;
height: 52px;
background-color: rgba(255, 255, 255, 0);
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
transform: translateY(-50%);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-prev {
left: 0;
background-image: url(https://img.lxhausys.com/public/images/products/arrw_left.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-prev:hover, .main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-prev:active {
background-image: url(https://img.lxhausys.com/public/images/products/arrw_left_02.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-next {
right: 0;
background-image: url(https://img.lxhausys.com/public/images/products/arrw_right.png);
}
.main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-next:hover, .main.content.prod-dt-cate .container.prod-dt-view .main-box.seg-box .slider-margin-0 .overscr-list-wrap .overscr-list .drag_segments.euSlide .slick-next:active {
background-image: url(https://img.lxhausys.com/public/images/products/arrw_right_02.png);
}
@media (max-width: 1280px) {
.ourprod-wrap .ourprod-content .item > .title {
font-size: 1.0416666667rem;
}
}
@media (max-width: 1280px) {
.ourprod-wrap.m-ui .s-item {
padding-left: 4.1666666667rem;
padding-top: 4.1666666667rem;
}
}
@media (max-width: 768px) {
.ourprod-wrap.m-ui .s-item {
padding-left: 2.2708333333rem;
padding-top: 9.9583333333rem;
}
}
.ourprod-wrap.m-ui .s-item .title {
display: block;
font-weight: bold;
font-size: 1.34375rem;
letter-spacing: 0.01375rem;
color: #FFFFFF;
margin: 19px 0 28px 0;
cursor: pointer;
}
.ourprod-wrap.m-ui .s-item svg:first-child {
position: relative;
display: block;
left: -0.375rem;
width: 8.6875rem;
height: 1.5625rem;
}
.ourprod-wrap.m-ui .s-item svg:nth-child(3) {
width: 2.3125rem;
height: 2.3125rem;
}
.main-box.ourprod-box .custom_btn_area{
position: absolute;
z-index: 100;
display: flex;
right: 20px;
bottom: 60px;
border: 1px solid #ddd;
}
@media (min-width: 769px) {
.main-box.ourprod-box .custom_btn_area{
right: 80px;
bottom: 150px;
width: 159px;
}
}
.main-box.ourprod-box .custom_btn_area .btn_slick_prev{
width: 54px;
height: 54px;
font-size: 0;
text-indent: -99999em;
background: #fff url('https://img.lxhausys.com/public/images/icon/icon_newevent_prev.png') no-repeat center center;
}
@media (min-width: 768px) {
.main-box.ourprod-box .custom_btn_area .btn_slick_prev{
width: 80px;
height: 80px;
}
}
.main-box.ourprod-box .custom_btn_area .btn_slick_next{
width: 54px;
height: 54px;
font-size: 0;
text-indent: -99999em;
border-left: 1px solid #ddd;
background: #fff url('https://img.lxhausys.com/public/images/icon/icon_newevent_next.png') no-repeat center center;
}
@media (min-width: 768px) {
.main-box.ourprod-box .custom_btn_area .btn_slick_next{
width: 80px;
height: 80px;
}
}
/* s: 새 슬라이드 */
/* s: 왼쪽 큰 슬라이드 */
.our_product_slider_main {
position: relative;
width: 666px;
}
.our_product_slider_main .slider-target .imgbox {
display: none;
}
@media (min-width: 768px) {
.our_product_slider_main .slider-target .imgbox {
display: block;
width: 100%;
height: 1080px;
}
}
.our_product_slider_main .slider-target .imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* e: 왼쪽 큰 슬라이드 */
/* s: 오른쪽 작은 슬라이드 */
.our_product_slider_nav {
position: relative;
}
@media (min-width: 768px) {
.our_product_slider_nav {
position: absolute;
left: 500px;
top: 50%;
transform: translateY(-50%);
width: calc(100% - 500px);
}
}
.our_product_slider_nav .slider-nav {
padding-left: 20px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav {
padding-left: unset;
}
}
.our_product_slider_nav .slider-nav .slick-slide + .slick-slide {
margin-left: 14px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .slick-slide + .slick-slide {
margin-left: 20px;
}
}
.our_product_slider_nav .slider-nav .slick-current {
transition: background-color 0.3s ease-in;
}
.our_product_slider_nav .slider-nav .slick-current .disappear {
display: none;
}
.our_product_slider_nav .slider-nav .slick-slide {
position: relative;
}
.our_product_slider_nav .slider-nav .imgbox {
height: 390px;
width: 260px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .imgbox {
height: 480px;
width: 320px;
background-color: #eee;
transition: background-color 0.3s ease-in;
}
}
.our_product_slider_nav .slider-nav .slick-current .imgbox::before{
display: none;
}
.our_product_slider_nav .slider-nav .imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
.our_product_slider_nav .slider-nav .slick-current .imgbox {
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .slick-current .imgbox {
background: rgba(255, 255, 255, 0.9);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
}
}
.our_product_slider_nav .slider-nav .slick-current .imgbox img {
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .slick-current .imgbox img {
display: none;
}
}
.our_product_slider_nav .slider-nav .txtbox {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 33px;
width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox {
padding: 0 30px;
}
}
.our_product_slider_nav .slider-nav .txtbox .logowrap {
display: flex;
flex-direction: column;
justify-content: center;
}
.our_product_slider_nav .slider-nav .txtbox .logowrap img {
display: block;
height: 22px;
width: auto;
object-fit: contain;
}
.our_product_slider_nav .slider-nav .txtbox .logowrap.two_line img {
height: 44px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .logowrap img {
height: 30px;
}
.our_product_slider_nav .slider-nav .txtbox .logowrap.two_line img {
height: 60px;
}
}
.our_product_slider_nav .slider-nav .txtbox .logowrap span {
display: block;
color: #fff;
}
.our_product_slider_nav .slider-nav .txtbox .logowrap .logo {
font-size: 30px;
line-height: 35px;
font-weight: 700;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .logowrap .logo {
font-size: 38px;
line-height: 46px;
}
}
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .logo {
color: #fff;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .logo {
color: #222;
}
}
.our_product_slider_nav .slider-nav .txtbox .logowrap .sub_tit {
font-size: 14px;
line-height: 1;
font-weight: 400;
margin-top: 10px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .logowrap .sub_tit {
font-size: 16px;
}
}
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .sub_tit {
color: #fff;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .sub_tit {
color: #343434;
}
}
.our_product_slider_nav .slider-nav .txtbox .logowrap .txt_cont {
font-size: 14px;
line-height: 19px;
color: #fff;
margin-top: 20px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .logowrap .txt_cont {
display: none;
font-size: 16px;
line-height: 24px;
color: #666;
padding: 0 13px;
margin-top: 26px;
}
}
.our_product_slider_nav .slider-nav .txtbox .btnwrap {
display: block;
margin-top: 40px;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .btnwrap {
display: none;
margin-top: 56px;
}
}
.our_product_slider_nav .slider-nav .txtbox .btn-more {
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
width: 160px;
height: 50px;
min-height: 50px;
padding-left: 20px;
padding-right: 0;
border-top: 1px solid rgba(250, 250, 250, 0.4);
border-bottom: 1px solid rgba(250, 250, 250, 0.4);
opacity: 1;
transition: all 0.45s ease-in-out 0s;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .btn-more {
border-top: 1px solid rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
}
.our_product_slider_nav a.btn-more:hover::after {
display: none;
}
.our_product_slider_nav .slider-nav .txtbox .btn-more > span {
position: relative;
display: block;
width: 100%;
margin-right: 20px;
background: url(https://img.lxhausys.com/public/images/svg_icon/icon_arrow_right_long_wh.svg) right center no-repeat;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #fff;
white-space: nowrap;
transition: all 0.45s ease-in-out 0s;
text-align: left;
}
@media (min-width: 768px) {
.our_product_slider_nav .slider-nav .txtbox .btn-more > span {
background: url(https://img.lxhausys.com/public/images/icon/icon_arrow.png) right center no-repeat;
color: #222;
}
}
.our_product_slider_nav .slider-nav .txtbox .btn-more:hover > span {
margin-right: 0;
transition: all 0.45s ease-in-out 0s;
}
.our_product_slider_nav .slider-nav .txtbox .logowrap .logo_img_bk {
display: none;
}
.our_product_slider_nav .slider-nav .txtbox .logowrap .logo_img_wh {
display: block;
}
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .logo_img_bk {
display: none;
}
@media (min-width: 769px) {
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .logo_img_bk {
display: block;
}
}
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .logo_img_wh {
display: block;
}
@media (min-width: 769px) {
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .logo_img_wh {
display: none;
}
}
.our_product_slider_nav .slider-nav .slick-current .txtbox .logowrap .txt_cont {
display: block;
}
.our_product_slider_nav .slider-nav .slick-current .txtbox .btnwrap {
display: block;
}
/* s: 방향버튼 */
.our_product_slider_nav .slick-arrow {
width: 54px;
height: 54px;
border: 1px solid #DDDDDD;
}
@media (min-width: 768px) {
.our_product_slider_nav .slick-arrow {
width: 80px;
height: 80px;
}
}
.our_product_slider_nav .slick-prev {
position: absolute;
bottom: -94px;
right: 74px;
font-size: 0;
text-indent: -99999em;
background: #fff url(https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_left_dark_gray_big.svg) no-repeat center center;
border-right: unset;
}
@media (min-width: 768px) {
.our_product_slider_nav .slick-prev {
bottom: -160px;
right: 160px;
}
}
.our_product_slider_nav .slick-next {
position: absolute;
bottom: -94px;
right: 20px;
font-size: 0;
text-indent: -99999em;
background: #fff url(https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_dark_gray_big.svg) no-repeat center center;
}
@media (min-width: 768px) {
.our_product_slider_nav .slick-next {
bottom: -160px;
right: 80px;
}
}
/* e: 방향버튼 */
/* s: 슬라이드 dot */
.our_product_slider_nav .slick-dots {
position: absolute;
bottom: -86px;
left: 20px;
right: 136px;
display: flex;
}
@media (min-width: 768px) {
.our_product_slider_nav .slick-dots {
bottom: -134px;
right: 290px;
left: 230px;
}
}
.our_product_slider_nav .slick-dots li {
flex: 1;
}
.our_product_slider_nav .slick-dots li button {
text-indent: -9999px;
height: 2px;
background: #E8E8E8;
}
.our_product_slider_nav .slick-dots li.slick-active button {
background: #222;
}
/* e: 슬라이드 dot */
/* e: 오른쪽 작은 슬라이드 */
/* e: 새 슬라이드 */
/* main visual slider */
.prod-dt-cate .slider-prod .slider .bannerGradient {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 200px 60px rgba(0, 0, 0, 0.3);
}
.prod-dt-cate .slider-prod .slick-prev {
background: url("https://img.lxhausys.com/public/images/svg_icon/icon_arrow_left_main.svg") center no-repeat;
background-size: 100%;
transition: all 0.5s ease-in-out;
}
/* .prod-dt-cate .slider-prod .slick-prev:hover, .prod-dt-cate .slider-prod .slick-prev:active {
background: url("data:image/svg+xml;utf8, ") center no-repeat;
background-size: 100%;
} */
.prod-dt-cate .slider-prod .slick-next {
background: url("https://img.lxhausys.com/public/images/svg_icon/icon_arrow_right_main.svg") center no-repeat;
background-size: 100%;
transition: all 0.5s ease-in-out;
}
.prod-dt-cate.main .slider-prod .txt-box hr {
display: block;
border-width: 0;
}
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
width: 516px;
height: 169px;
min-height: 169px;
border: 6px solid rgba(255, 255, 255, 0.7);
border-bottom: none;
margin-bottom: 40px;
opacity: 0;
transition: all 0.2s ease-out 0.4s;
}
@media (max-width: 1600px) {
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
width: 500px;
height: 100px;
min-height: 100px;
}
}
@media (max-width: 1600px) {
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
width: 450px;
height: 70px;
min-height: 70px;
}
}
@media (max-width: 1280px) {
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
width: 400px;
height: 50px;
min-height: 50px;
}
}
@media (max-width: 992px) {
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
width: 400px;
height: 40px;
min-height: 40px;
}
}
.prod-dt-cate .slider-prod .slick-active .txt-box .bannerRect {
opacity: 1;
transition: all 0.4s ease-out 0.6s;
}
.prod-dt-cate.main .slider-prod .txt-box hr {
opacity: 0;
transition: all 0.2s ease-out 0.4s;
}
.prod-dt-cate.main .slider-prod .slick-active .txt-box hr {
opacity: 1;
transition: all 0.4s ease-out 0.6s;
}
.prod-dt-cate.main .slider-prod .txt-box hr:nth-child(3) {
width: 635px;
margin: 20px 0;
border-bottom: 3px solid rgba(255, 255, 255, 0.7);
}
@media (max-width: 992px) {
.prod-dt-cate.main .slider-prod .txt-box hr:nth-child(3) {
margin: 5px 0;
}
}
.prod-dt-cate.main .slider-prod .txt-box hr:nth-child(6) {
width: 516px;
border-bottom: 6px solid rgba(255, 255, 255, 0.7);
}
.prod-dt-cate .slider-prod .txt-box .btn-more:after {
width: 50px;
height: 100%;
border-radius: 30px;
background-color: #2c2c2d;
}
/* main visual slider END */
@media only screen and (min-width: 769px) {
.main.content.prod-dt-cate .slider-prod .slick-prev {
left: 60px;
}
}
@media only screen and (min-width: 1280px) {
.main.content.prod-dt-cate .slider-prod .slick-prev {
left: 50px;
}
}
@media only screen and (min-width: 769px) {
.main.content.prod-dt-cate .slider-prod .slick-next {
right: 60px;
}
}
@media only screen and (min-width: 1280px) {
.main.content.prod-dt-cate .slider-prod .slick-next {
right: 50px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1440px) {
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 769px) and (max-width: 992px) {
.prod-dt-cate.main .slider-prod .txt-box .bannerRect {
margin-bottom: 0;
}
}
.slider-prod.p-ui.main-slider {
display: block;
}
@media (max-width: 1600px) {
.gnb-section .mlist-segm .img-container .img-box {
opacity: 0;
}
}
.wrapper-cokkie .btn-close {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
padding: 0;
background: center/contain no-repeat url(https://img.lxhausys.com/public/images/svg_icon/icon_pf_search_close.svg);
}
@media (min-width: 769px) {
.wrapper-cokkie .btn-close {
top: 24px;
right: 30px;
width: 30px;
height: 30px;
}
}
/* 2024.05.20 our products slider 신규 작성 */
.our_products_slider-single{
position: absolute;
z-index: 10;
left: 0;
top:0;
opacity: 0;
width: 40%;
height: 714px;
height: 390px;
}
@media (min-width: 769px) {
.our_products_slider-single{
opacity: 1;
}
}
@media (min-width: 1024px) {
.our_products_slider-single{
height: 1080px;
}
}
.our_products_slider-single .item{
position: relative;
height: 714px;
opacity: 0;
}
@media (min-width: 769px) {
.our_products_slider-single .item{
height: 1080px;
}
}
@media (min-width: 1024px) {
.our_products_slider-single .item{
height: 1080px;
}
}
.our_products_slider-single .item.slick-current.slick-active{
opacity: 1;
}
.our_products_slider-single .slick-arrow{
display: none !important;
}
.our_products_slider-single .txt-box{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 110;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 40%;
height: 390px;
margin-left: -11px;
padding: 0 10px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 4px 4px 40px 0 rgba(0, 0, 0, 0.08);
}
@media (min-width: 769px) {
.our_products_slider-single .txt-box{
height: 370px;
}
}
@media (min-width: 1280px) {
.our_products_slider-single .txt-box{
height: 400px;
padding: 0 15px;
}
}
@media (min-width: 1600px) {
.our_products_slider-single .txt-box{
height: 480px;
padding: 0 20px;
}
}
@media (min-width: 1600px) {
.our_products_slider-single .txt-box{
height: 480px;
padding: 0 50px;
}
}
.our_products_slider-single .txt-box .detail{
text-align: center;
color: #666;
word-break: break-all;
}
@media (min-width: 769px) {
.our_products_slider-single .txt-box .detail{
margin-top: 20px;
}
}
@media (min-width: 1600px) {
.our_products_slider-single .txt-box .detail{
margin-top: 30px;
}
}
.our_products_slider-single .item .txt-box .logo_wrap{
display: flex;
justify-content: center;
}
.our_products_slider-single .item .txt-box .logo_wrap + .prod_desc{
margin-top: 10px;
}
.our_products_slider-single .item .txt-box .logo_wrap img.logo{
width: unset;
height: 30px;
}
.our_products_slider-single .item .txt-box .logo_wrap .logo_alt_text{
font-size: 30px;
font-weight: 700;
line-height: 1;
color: #222;
text-transform: uppercase;
}
.our_products_slider-single .txt-box .prod_desc{
margin: 0;
font-size: 16px;
font-weight: 400;
word-break: break-all;
text-align: center;
}
.our_products_slider-single .slick-active .txt-box .btn-more {
opacity: 1;
transition: all 0.45s ease-in-out 0s;
}
.our_products_slider-single .txt-box .btn-more {
position: relative;
display: flex;
align-items: center;
width: 160px;
height: 50px;
min-height: 50px;
margin: 0px 0 0px 0;
padding-left: 20px;
padding-right: 0;
border-top: 1px solid rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 0.5s ease-out 1s;
}
@media (min-width: 769px) {
.our_products_slider-single .txt-box .btn-more{
margin-top: 40px;
}
}
@media (min-width: 1440px) {
.our_products_slider-single .txt-box .btn-more{
margin-top: 60px;
width: 173px;
}
}
.our_products_slider-single .txt-box .btn-more:hover span{
margin-right: 0;
transition: all 0.45s ease-in-out 0s;
}
.our_products_slider-single .txt-box .btn-more:after {
display: none;
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 50px;
height: 100%;
border-radius: 30px;
background: #000;
opacity: 0.2;
transition: all 0.45s ease-in-out 0s;
}
.our_products_slider-single .txt-box a.btn-more:hover::after {
width: 100%;
opacity: 0.8;
}
.our_products_slider-single .btn-more span {
position: relative;
display: block;
width: 100%;
margin-right: 20px;
background: url(https://img.lxhausys.com/public/images/icon/icon_arrow.png) right center no-repeat;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #222;
z-index: 100;
white-space: nowrap;
text-transform: uppercase;
transition: all 0.45s ease-in-out 0s;
}
.our_products_slider-single .item .img_wrap{
height: 1080px;
}
@media (min-width: 769px) {
.our_products_slider-single .item .img_wrap{
margin-right: 100px;
}
}
@media (min-width: 1600px) {
.our_products_slider-single .item .img_wrap{
height: 1080px;
}
}
.our_products_slider-single .item .img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
}
.our_products_slider-nav{
position: relative;
padding-bottom: 150px;
}
@media (min-width: 769px) {
.our_products_slider-nav{
height: 1080px;
display: flex;
align-items: center;
margin-left: 23%;
margin-right: -10%;
padding-bottom: unset;
}
}
@media (min-width: 1024px) {
.our_products_slider-nav{
height: 1080px;
}
}
.our_products_slider-nav .item{
position: relative;
margin: 0 8px;
cursor: pointer;
}
.our_products_slider-nav .item.slick-current{
/* opacity: 0; */
}
@media (min-width: 769px) {
.our_products_slider-nav .item.slick-current{
opacity: 0;
}
}
.our_products_slider-nav .slick-arrow{
position: absolute;
right: 20px;
bottom: 60px;
width: 0;
height: 0;
border: 1px solid #ebebeb;
text-indent: -999999rem;
}
@media (min-width: 769px) {
.our_products_slider-nav .slick-arrow{
right: 220px;
/* bottom: 150px; */
width: 0;
height: 0;
}
}
.our_products_slider-nav .slick-arrow.slick-prev{
right: 74px;
background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_prev.png') no-repeat center center;
}
@media (min-width: 769px) {
.our_products_slider-nav .slick-arrow.slick-prev{
right: 16%;
margin-right: 79px;
}
}
.our_products_slider-nav .slick-prev.slick-arrow:active{
background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_prev_on.png') no-repeat center center;
}
.our_products_slider-nav .slick-arrow.slick-next{
right: 20px;
background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_next.png') no-repeat center center;
}
@media (min-width: 769px) {
.our_products_slider-nav .slick-arrow.slick-next{
right: 16%;
}
}
.our_products_slider-nav .slick-arrow.slick-next:active{
background: url('https://img.lxhausys.com/public/images/icon/icon_newevent_next_on.png') no-repeat center center;
}
.our_products_slider-nav .item .txt-box{
position: absolute;
z-index: 50;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 16px;
text-align: center;
width: 100%;
}
.our_products_slider-nav .item .txt-box .logo_wrap{
display: flex;
justify-content: center;
}
.our_products_slider-nav .item .txt-box .logo_wrap img.logo{
width: unset;
height: 30px;
}
.our_products_slider-nav .item .txt-box .logo_wrap .logo_alt_text{
font-size: 30px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}
.our_products_slider-nav .item .txt-box .logo_wrap + .prod_desc{
margin-top: 10px;
}
.our_products_slider-nav .item .txt-box .prod_desc{
margin: 0;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 1.25em;
word-break: break-all;
}
@media (min-width: 769px) {
.our_products_slider-nav .item .txt-box .prod_desc{
font-size: 16px;
}
}
.our_products_slider-nav .item .txt-box .detail{
color: #fff;
font-size: 14px;
font-weight: 400;
}
@media (min-width: 769px) {
.our_products_slider-nav .item .txt-box .detail{
display: none;
}
}
.our_products_slider-nav .item .img_wrap{
height: 390px;
background-color: #bbb;
}
@media (min-width: 769px) {
.our_products_slider-nav .item .img_wrap{
height: 370px;
}
}
@media (min-width: 1280px) {
.our_products_slider-nav .item .img_wrap{
height: 400px;
}
}
@media (min-width: 1600px) {
.our_products_slider-nav .item .img_wrap{
height: 480px;
}
}
.our_products_slider-nav .item .img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
}
.our_products_slider-nav .item .btn_area{
display: block;
width: 160px;
margin: 0 auto;
margin-top: 40px;
}
.our_products_slider-nav .item .btn_view_more{
position: relative;
display: flex;
align-items: center;
width: 160px;
height: 46px;
min-height: 46px;
margin: 0px 0 0px 0;
padding-left: 20px;
padding-right: 0;
text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
transition: all 0.5s ease-out 1s;
}
@media (min-width: 769px) {
.our_products_slider-nav .item .btn_view_more{
display: none;
}
}
.our_products_slider-nav .item .btn_view_more > span{
position: relative;
display: block;
width: 100%;
margin-right: 20px;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #fff;
white-space: nowrap;
background: url(https://img.lxhausys.com/public/images/icon/icon_viewmore.png) right center no-repeat;
transition: all 0.45s ease-in-out 0s;
}
.our_products_slider-nav .item .btn_view_more:hover > span{
padding-right: 0;
transition: all 0.45s ease-in-out 0s;
}
.our_products_slider-nav .slick-dots{
position: absolute;
display: flex;
z-index: 100;
left: 20px;
bottom: 90px;
width: 56%;
height: 2px;
}
@media (min-width: 769px) {
.our_products_slider-nav .slick-dots{
left: 44%;
bottom: 189px;
width: 58%;
transform: translateX(-50%);
}
}
.our_products_slider-nav .slick-dots > li{
width: 100%;
}
.our_products_slider-nav .slick-dots > li > button{
font-size: 0;
text-indent: -99999rem;
width: 100%;
height: 2px;
background-color: #E8E8E8;
}
.our_products_slider-nav .slick-dots > li.slick-active > button{
background-color: #222;
}
/* INSPIRATION GALLERIES */
.main-box.insp-box.inspiration_gallery {
margin-top: 0;
padding-left: 20px;
padding-right: 20px;
overflow-x: hidden;
}
@media (min-width: 769px) {
.main-box.insp-box.inspiration_gallery {
padding-left: 80px;
padding-right: 80px;
}
}
/* @media (min-width: 1280px) {
.main-box.insp-box.inspiration_gallery {
padding-left: 40px;
padding-right: 40px;
}
} */
/* @media (min-width: 1600px) {
.main-box.insp-box.inspiration_gallery {
padding-left: 80px;
padding-right: 80px;
}
} */
.inspiration_gallery .inner_content{
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 769px) {
.inspiration_gallery .inner_content {
padding-top: 150px;
padding-bottom: 150px;
}
}
.main .main-box.insp-box .tit-main{
margin-bottom: 18px;
text-align: left;
}
@media (min-width: 769px) {
.main .main-box.insp-box .tit-main{
margin-bottom: 0;
}
}
.insplist-wrap ul{
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 13px;
}
@media (min-width: 769px) {
.insplist-wrap ul{
gap: 34px;
}
}
/* ----- main design_trend ----- */
.main-box.design_trend_section{
height: 400px;
}
@media (min-width: 769px) {
.main-box.design_trend_section{
height: 600px;
}
}
.design_trend_section .design_trend_slider{
height: 400px;
}
@media (min-width: 769px) {
.design_trend_section .design_trend_slider{
height: 600px;
}
}
.design_trend_slider .slick-list{
height: 400px;
}
@media (min-width: 769px) {
.design_trend_slider .slick-list{
height: 600px;
}
}
.design_trend_slider .slick-list .slick-track{
height: 400px;
}
@media (min-width: 769px) {
.design_trend_slider .slick-list .slick-track{
height: 600px;
}
}
.design_trend_slider .slick-list .slick-track .item{
position: relative;
height: 400px;
}
@media (min-width: 769px) {
.design_trend_slider .slick-list .slick-track .item{
height: 600px;
}
}
.design_trend_slider .slick-list .slick-track .item .slider_bg{
height: 400px;
}
@media (min-width: 769px) {
.design_trend_slider .slick-list .slick-track .item .slider_bg{
width: 100%;
height: 600px;
object-fit: cover;
}
}
.design_trend_section .txt-box{
position: absolute;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background: transparent;
z-index: 300;
top: 50%;
left: 50%;
width: 80%;
text-align: center;
transform: translate(-50%,-50%);
}
@media (min-width: 769px) {
.design_trend_section .txt-box{
width: unset;
}
}
.design_trend_section .txt-box .title {
color: #fff;
font-size: 26px;
line-height: 30px;
font-weight: 700;
text-transform: uppercase;
}
@media (min-width: 769px) {
.design_trend_section .txt-box .title {
font-size: 54px;
line-height: 1;
}
}
.design_trend_section .txt-box .txt-01 {
margin-top: 20px;
color: #fff;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
opacity: 0.7;
}
@media (min-width: 769px) {
.design_trend_section .txt-box .txt-01 {
margin-top: 26px;
font-size: 20px;
line-height: 1.5;
}
}
.design_trend_slider .slick-active .txt-box .btn-more {
opacity: 1;
}
.design_trend_section .txt-box .btn-more {
position: relative;
display: flex;
align-items: center;
width: 169px;
height: 46px;
margin: 0;
margin-top: 40px;
padding-left: 20px;
padding-right: 0;
text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
opacity: 1;
/* transition: all 0.5s ease-out 1.8s; */
}
@media (min-width: 769px) {
.design_trend_section .txt-box .btn-more {
width: 182px;
height: 50px;
margin-top: 60px;
}
}
.design_trend_section .txt-box .btn-more:after {
display: none;
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 50px;
height: 100%;
border-radius: 30px;
background: #000;
opacity: 0.2;
transition: all 0.45s ease-in-out 0s;
}
.design_trend_section .txt-box a.btn-more:hover::after {
/* width: 100%; */
/* opacity: 0.8; */
}
.design_trend_section .btn-more span {
position: relative;
display: block;
width: 100%;
margin-right: 20px;
background: url(https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_long_wh.svg) right center no-repeat;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #fff;
z-index: 100;
white-space: nowrap;
/* text-transform: uppercase; */
transition: all 0.45s ease-in-out 0s;
}
.design_trend_section .txt-box a.btn-more:hover span{
margin-right: 0;
transition: all 0.45s ease-in-out 0s;
}
.design_trend_slider .slick-arrow{
display: none !important;
}
.design_trend_slider .slick-dots{
position: absolute;
display: flex;
bottom: 20px;
left: 50%;
height: 10px;
transform: translateX(-50%);
}
@media (min-width: 769px) {
.design_trend_slider .slick-dots{
bottom: 40px;
height: 12px;
}
}
.design_trend_slider .slick-dots li + li{
margin-left: 12px;
}
.design_trend_slider .slick-dots li button{
text-indent: -99999px;
font-size: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
}
@media (min-width: 769px) {
.design_trend_slider .slick-dots li button{
width: 12px;
height: 12px;
}
}
.design_trend_slider .slick-dots li.slick-active button{
background: #fff;
}
/* CASE STUDIES */
.main_case_studies_section {
position: relative;
/* height: 100vh; */
margin-top: 0;
}
@media (min-width: 769px) {
.main_case_studies_section {
height: 963px;
}
}
.main_case_studies_section .title_area{
position: absolute;
z-index: 200;
top: 60px;
left: 0;
width: 100%;
margin-bottom: 0;
padding-left: 20px;
box-sizing: border-box;
}
@media (min-width: 769px) {
.main_case_studies_section .title_area {
top: 150px;
padding-left: 80px;
padding-right: 80px;
}
}
.main_case_studies_section .tit-main{
text-align: left;
}
@media (max-width: 768px) {
.main_case_studies_section .tit-main{
margin-bottom: 18px;
}
}
/* CASE STUDIES slick */
.case_studies_slider{
height: 539px;
padding-left: 20px;
}
@media (min-width: 769px) {
.case_studies_slider{
height: 963px;
padding-left: unset;
overflow: hidden;
}
}
.case_studies_slider .item{
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 539px;
/* margin: 0 5px; */
padding-top: 170px;
padding-bottom: 60px;
}
@media (min-width: 769px) {
.case_studies_slider .item{
justify-content: center;
height: 963px;
/* margin: 0 17px; */
padding-top: 290px;
padding-bottom: 150px;
border-left: 0;
}
}
.case_studies_slider .item.slick-current{
/* border-left: 1px solid #ededed; */
}
.case_studies_slider .item.slick-current + .item.slick-active{
/* border-left: 1px solid #ededed; */
}
.case_studies_slider .item + .item{
margin-left: 6px;
}
@media (min-width: 769px) {
.case_studies_slider .item + .item{
margin-left: 10px;
}
}
.case_studies_slider .item .img_wrap{
height: 260px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 769px) {
.case_studies_slider .item .img_wrap{
height: 350px;
}
}
@media (min-width: 1600px) {
.case_studies_slider .item .img_wrap{
height: 450px;
}
}
.case_studies_slider .item .img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
transform: translate3d(0, 0, 0);
transform-origin: 50% 50%;
transition: all 0.4s ease;
aspect-ratio: 1.2;
cursor: pointer;
}
.case_studies_slider .item .img_wrap:hover img{
width: 110%;
height: 110%;
object-fit: cover;
transform: translate3d(0, 0, 0);
transform-origin: 50% 50%;
transition: all 0.5s ease;
}
.case_studies_slider .item .contents .link_area{
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 10px;
border-bottom: 1px solid #ebebeb;
}
@media (min-width: 769px) {
.case_studies_slider .item .contents .link_area{
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
}
@media (min-width: 1440px) {
.case_studies_slider .item .contents .link_area{
padding-top: 26px;
padding-bottom: 25px;
padding-right: 20px;
}
}
.case_studies_slider .item .contents .link_area .title{
color: #222;
font-size: 16px;
font-weight: 400;
line-height: 1.33;
margin-right: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
@media (min-width: 769px) {
.case_studies_slider .item .contents .link_area .title{
font-size: 16px;
margin-right: 10px;
text-align: right;
}
}
@media (min-width: 1280px) {
.case_studies_slider .item .contents .link_area .title{
font-size: 20px;
margin-right: 20px;
width: calc(100% - 50px);
}
}
.case_studies_slider .item .contents .link_area .icon{
width: 20px;
height: 20px;
background: url(https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_long_bk.svg) no-repeat center center;
}
@media (min-width: 769px) {
.case_studies_slider .item .contents .link_area .icon{
width: 22px;
height: 22px;
background-size: contain;
}
}
.case_studies_slider .slick-arrow{
position: absolute;
z-index: 100;
top: 56%;
width: 54px;
height: 54px;
background-color: rgba(0, 0, 0, 0.5);
background-position: center;
background-repeat: no-repeat;
font-size: 0;
text-indent: -99999em;
transform: translateY(-50%);
}
@media (min-width: 769px) {
.case_studies_slider .slick-arrow {
top: 475px;
transform: unset;
width: 80px;
height: 80px;
}
}
.case_studies_slider .slick-prev {
left: -20px;
background-image: url('https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_left_main.svg');
}
@media (min-width: 768px) {
.case_studies_slider .slick-prev {
left: 80px;
}
}
/* @media (min-width: 1440px) {
.case_studies_slider .slick-prev {
left: 80px;
}
} */
.case_studies_slider .slick-next {
right: 0px;
background-image: url('https://img.lxhausys.com/2024/images/svg_icon/icon_arrow_right_main.svg');
}
@media (min-width: 1440px) {
.case_studies_slider .slick-next{
right: 80px;
}
}
/* 메인 CASE STUDIES vue slick slider */
.case_studies_slider .slick-slide{
padding: 0 7px;
/* width: 320px; */
width: calc(100vw - 40px);
}
@media (min-width: 768px) {
.case_studies_slider .slick-slide{
padding: 0 17px;
width: 552px;
}
}
.case_studies_slider .slick-slide > div{
width: 100%;
height: 100%;
/* padding: 0 17px; */
}
@media (min-width: 768px) {
.case_studies_slider .slick-slide > div{
width: 100%;
height: 100%;
/* padding: 0 17px; */
}
}
.case_studies_slider .slick-list {
margin: 0 -7px;
}
@media (min-width: 768px) {
.case_studies_slider .slick-list {
margin: 0 -17px;
}
}
@media (min-width: 768px) {
.case_studies_slider .slick-track {
margin-left: 80px;
}
}
.case_studies_slider .slick-slide.slick-current .item{
/* border-left: 1px solid #ededed; */
}
@media (max-width: 768px) {
.case_studies_slider .slick-slide.slick-current .item {
border-left: 1px solid #ededed;
}
.case_studies_slider .slick-slide.slick-current + .slick-slide .item {
border-left: 1px solid #ededed;
}
}
.case_studies_slider .slick-slide.slick-current + .slick-slide.slick-active .item{
border-left: 1px solid #ededed;
}
.case_studies_slider .slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active .item{
border-left: 1px solid #ededed;
}
/* 메인 비주얼 네비게이션 슬라이더 */
.main_slider-nav{
position: absolute;
z-index: 100;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 0px);
height: 84px;
}
@media (min-width: 769px) {
.main_slider-nav{
bottom: 30px;
width: calc(100% - 380px);
height: 104px;
}
}
.main_slider-nav .item{
position: relative;
height: 84px;
/* margin: 0 14px; */
overflow: hidden;
}
@media (min-width: 769px) {
.main_slider-nav .item{
position: relative;
height: 102px;
margin: 0 14px;
overflow: hidden;
}
}
.main_slider-nav .item + .item{
/* margin-left: 28px; */
}
.main_slider-nav .item .dot{
width: 100%;
height: 84px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
}
@media (min-width: 769px) {
.main_slider-nav .item .dot{
width: 100%;
height: 102px;
}
}
/* .main_slider-nav .item.slick-current .dot{
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
} */
@keyframes visualshadow{
0% {
bottom: -100%; /* 애니메이션이 0%만큼 동작시 */
}
100% {
bottom: 0; /* 애니메이션이 100%만큼 동작시 */
}
}
.main_slider-nav .item .shadow {
position: absolute;
bottom: -100%;
left: 0;
display: block;
width: 100%;
height: 100%;
padding: 0 14px;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
z-index: -1;
}
.main_slider-nav .item.slick-current .shadow{
/* transition: 1s linear; */
/* bottom: 0; */
animation-name: visualshadow;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: alternate;
transform: translate3d(0, 0, 0);
transform-origin: 0% 0%;
}
@keyframes visualbtmline{
0% {
transform: scale(0); /* 애니메이션이 0%만큼 동작시 */
}
100% {
transform: scale(1); /* 애니메이션이 100%만큼 동작시 */
width: 100%;
}
}
.main_slider-nav .item .dot .bottom_line {
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
z-index: 10;
}
.main_slider-nav .item.slick-current .dot .bottom_line{
animation-name: visualbtmline;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: alternate;
transform: translate3d(0, 0, 0);
transform-origin: 0% 0%;
}
.main_slider-nav .item .dot .txt1{
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 1.1;
text-align: center;
white-space: nowrap;
}
@media (min-width: 769px) {
.main_slider-nav .item .dot .txt1{
font-size: 28px;
font-weight: 600;
line-height: 34px;
}
}
.main_slider-nav .item .dot .txt2{
margin-top: 7px;
font-size: 14px;
white-space: nowrap;
color: #fff;
opacity: 0.6;
}
@media (min-width: 769px) {
.main_slider-nav .item .dot .txt2{
margin-top: 4px;
font-size: 16px;
}
}
.main_slider-nav .item.slick-active{
}
.main_slider-nav .slick-arrow{
position: absolute;
z-index: 200;
bottom: 42px;
width: 20px;
height: 20px;
background-position: center;
background-repeat: no-repeat;
font-size: 0;
text-indent: -999999em;
}
.main_slider-nav .slick-prev{
left: -80px;
background: url("https://img.lxhausys.com/public/images/svg_icon/icon_arrow_left_main.svg") center no-repeat;
background-size: 100%;
transition: all 0.5s ease-in-out;
}
.main_slider-nav .slick-next{
right: -80px;
background: url("https://img.lxhausys.com/public/images/svg_icon/icon_arrow_right_main.svg") center no-repeat;
background-size: 100%;
transition: all 0.5s ease-in-out;
}
.tab-ui-nav.type_line ul li.btn-tab {
width: 50%;
}
@media (min-width: 769px) {
.tab-ui-nav.type_line ul li.btn-tab {
width: auto;
}
}
.tab-ui-nav.type_line ul li.btn-tab button{
font-size: 16px;
}
@media (min-width: 769px) {
.tab-ui-nav.type_line ul li.btn-tab button{
font-size: 24px;
}
}
/*********** E : main.scss ***********//*# sourceMappingURL=main.css.map */