/* A A A : A : A : A : */ #division4A_rectangle { width : 100%; height : auto; padding : clamp(50px,7vw,120px) 20px; text-align : center; } #division4A_rectangle .sectionWrap { width : 100%; height : auto; display : inline-block; max-width : 1400px; } #division4A_rectangle .titBox { width : 100%; height : auto; } #division4A_rectangle .titBox .top { font-size : clamp(42px,4.1vw,50px); color : #000; font-weight : 800; line-height : 1em; } #division4A_rectangle .titBox .topBack { font-size : clamp(42px,4.1vw,50px); font-weight : 700; display : inline-block; color : #FFAF00; background : #000; width : auto; line-height : 1em; padding : 0.1em 0.1em 0.15em; margin : 0.2em 0;} #division4A_rectangle .titBox .sub { font-size : clamp(18px,1.7vw,20px); word-break : keep-all; } #division4A_rectangle .arrow { width : 100%; height : auto; } #division4A_rectangle .arrow svg { font-size : clamp(32px,3.1vw,45px); color : #BCBCBD; transform : rotate(90deg); margin : 0.8em 0;} #division4A_rectangle .slideWrap .rectangleRight { right : 0; justify-content : flex-end; } #division4A_rectangle .slideWrap .rectangleRight svg { font-size : clamp(32px,3.1vw,45px); color : #BCBCBD; transition : .2s;} #division4A_rectangle .slideWrap .rectangleLeft { left : 0; justify-content : flex-start;} #division4A_rectangle .slideWrap .rectangleLeft svg { font-size : clamp(32px,3.1vw,45px); color : #BCBCBD; transform : rotate(180deg); transition : .2s;} #division4A_rectangle .slideWrap .rectangleRight::after, #division4A_rectangle .slideWrap .rectangleLeft::after { display : none;} #division4A_rectangle .slideWrap .rectangleRight:hover svg, #division4A_rectangle .slideWrap .rectangleLeft:hover svg { color : #FFAF00; transition : .2s; transform : scale(1.2);} #division4A_rectangle .slideWrap .rectangleLeft:hover svg { transform : rotate(180deg) scale(1.2);} #division4A_rectangle .slideWrap { width : 100%; height : auto; position : relative; } #division4A_rectangle .slideWrap .rectangleSwiper { width : 90%;} #division4A_rectangle .slideWrap .rectangleBox { width : 100%; height : auto; padding-top : 187%; position : relative; overflow : hidden; } #division4A_rectangle .slideWrap .rectangleBox::before { content : ""; display : block; position : absolute; top : 0; left : 0; width : 6%; height : 6%; background-image : url("../../../Image/saleMarkBack.png"); background-size : contain; background-position : right top; background-repeat : no-repeat;} #division4A_rectangle .slideWrap .rectangleBox .productImg { width : 100%; height : 97%; object-fit : cover; position : absolute; bottom : 0; left : 0; z-index : 1; transition : .3s; } #division4A_rectangle .slideWrap .rectangleBox:hover .productImg { filter : brightness(0.6); transition : .3s; } #division4A_rectangle .slideWrap .rectangleBox .mark { width : auto; height : auto; display : inline-flex; flex-direction : column; background : #E0605D; align-items : center; z-index : 1; position : absolute; top : 0; left : 6%; padding : 6% 2% 7%; border-bottom-left-radius : 50px; border-bottom-right-radius : 50px; } #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum { font-size : clamp(25px,2.4vw,30px); color : #fff; line-height : 1em; font-weight : 800; } #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum span { font-size : clamp(15px,1.4vw,20px); line-height : 1em; } #division4A_rectangle .slideWrap .rectangleBox .mark .sale { font-size : clamp(15px,1.4vw,20px); line-height : 1em; color : #fff; font-weight : 800; } #division4A_rectangle .slideWrap .rectangleBox .infoBox { width : 100%; height : auto; display : flex; flex-direction : column; position : absolute; bottom : 3%; left : 0; z-index : 2; align-items : flex-start; padding-left : 6%; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .line { width : 15%; height : 4px; background : #000; transition : .3s; } #division4A_rectangle .slideWrap .rectangleBox:hover .infoBox .line { background : #fff; transition : .3s; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap { width : 100%; height : auto; margin : 4% 0; text-align : left; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .name { font-size : clamp(17px,1.6vw,20px); color : #000; line-height : 1em; transition : .3s; font-weight : 500; } #division4A_rectangle .slideWrap .rectangleBox:hover .infoWrap .name { color : #fff; transition : .3s; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .origin { font-size : clamp(17px,1.6vw,20px); color : #fff; line-height : 1em; transition : .3s; margin : 0.2em 0; font-weight : 500; position : relative; width : auto; display : inline-block; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .origin span { font-size : inherit; color : inherit; line-height : inherit; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .origin::before { width : 102%; height : 2px; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); display : block; content : ""; background : #E0605D;} #division4A_rectangle .slideWrap .rectangleBox:hover .infoWrap .origin { opacity : .6; transition : .3s; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .price { font-size : clamp(20px,1.9vw,23px); color : #000; line-height : 1em; transition : .3s; font-weight : 500; } #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .price span { font-size : inherit; color : inherit; line-height : inherit;} #division4A_rectangle .slideWrap .rectangleBox:hover .infoWrap .price { color : #fff; transition : .3s;} #division4A_rectangle .slideWrap .rectangleBox .infoBox a { font-size : clamp(13px,1.2vw,15px); color : #fff; background : #000; line-hieght : 1em; display : inline-block; padding : 0.6em 1.2em; transition : .3s;} #division4A_rectangle .slideWrap .rectangleBox:hover .infoBox a { background : #fff; color : #000; transition : .3s;} @media (min-width:641px) and (max-width:829px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_rectangle .slideWrap .rectangleBox { padding-top : 135%;} #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum { font-size : clamp(20px,3.1vw,25px);} #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum span { font-size : 14px;} #division4A_rectangle .slideWrap .rectangleBox .mark .sale { font-size : 14px;} } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_rectangle .titBox .top { font-size : clamp(36px,5.6vw,42px);} #division4A_rectangle .titBox .topBack { font-size : clamp(36px,5.6vw,42px);} #division4A_rectangle .arrow svg { font-size : clamp(26px,4vw,32px); margin : 0.6em 0;} #division4A_rectangle .slideWrap .rectangleRight svg, #division4A_rectangle .slideWrap .rectangleLeft svg { font-size : clamp(26px,4vw,32px);} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .productImg { filter : brightness(0.6); transition : .3s; } #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoBox .line { background : #fff; transition : .3s;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoWrap .name, #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoWrap .price { color : #fff; transition : .3s;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoWrap .origin { opacity : .6; transition : .3s;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox a { background : #fff; color : #000; transition : .3s;} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_rectangle .titBox .top, #division4A_rectangle .titBox .topBack { font-size : 8vw;} #division4A_rectangle .titBox .sub { font-size : 4.3vw;} #division4A_rectangle .arrow svg { font-size : 9vw; margin : 0.3em 0;} #division4A_rectangle .slideWrap .rectangleSwiper { width : 100%;} #division4A_rectangle .slideWrap .rectangleBox { padding-top : 110vw;} #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum { font-size : 5.5vw;} #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum span, #division4A_rectangle .slideWrap .rectangleBox .mark .sale { font-size : 4vw;} #division4A_rectangle .slideWrap .rectangleBox .infoBox .infoWrap .origin { margin : 0.3em 0;} #division4A_rectangle .slideWrap .rectangleRight, #division4A_rectangle .slideWrap .rectangleLeft { display : none;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .productImg { filter : brightness(0.6); transition : .3s; } #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoBox .line { background : #fff; transition : .3s;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoWrap .name, #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoWrap .price { color : #fff; transition : .3s;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox .infoWrap .origin { opacity : .6; transition : .3s;} #division4A_rectangle .slideWrap .swiper-slide.swiper-slide-active .rectangleBox a { background : #fff; color : #000; transition : .3s;} } @media (max-width:300px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_rectangle .onlyMobile { display : none!important;} #division4A_rectangle .titBox .top, #division4A_rectangle .titBox .topBack { font-size : 30px;} #division4A_rectangle .titBox .sub { font-size : 15px;} #division4A_rectangle .slideWrap .rectangleBox { padding-top : 135vw;} #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum { font-size : 20px;} #division4A_rectangle .slideWrap .rectangleBox .mark .saleNum span, #division4A_rectangle .slideWrap .rectangleBox .mark .sale { font-size : 14px;} }