/* A A A : A : A : A : */ #division3_galleryStory { width : 100%; height : auto; background : #eeefef; padding : calc(40px + 2vw) calc(20px + 1vw); text-align : center; } /* Title */ #division3_galleryStory .sectionWrap { width : 100%; height : auto; max-width : 1200px; display : inline-block; } #division3_galleryStory .sectionWrap .contentTopWrap { width : 100%; height : auto; position : relative; margin-bottom : calc(10px + 1vw); } #division3_galleryStory .sectionWrap .contentTopWrap .engTit { font-size : calc(12px + 0.8vw); color : #333; font-weight : 700; } #division3_galleryStory .sectionWrap .contentTopWrap .engTit span { font-size : inherit; font-weight : inherit; color : #9F0C3D; } #division3_galleryStory .sectionWrap .contentTopWrap .tit { font-size : calc(14px + 0.9vw); color : #333; word-break : keep-all; font-weight : 200; } #division3_galleryStory .sectionWrap .contentTopWrap a { font-size : calc(12px + 0.3vw); color : #333; display : inline-block; position : absolute; bottom : 0; right : 0; } #division3_galleryStory .sectionWrap .contentTopWrap a:hover { font-weight : 500; color : #9F0C3D; } /* Contents */ #division3_galleryStory .sectionWrap .contentWrap { width : 100%; height : auto; position : relative; } #division3_galleryStory .sectionWrap .contentWrap .galleryStory_slide { border : 2px solid #ddd; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap { width : 100%; height : auto; margin-bottom : calc(10px + 1.7vw); } /* Contents - Img */ #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox { width : 100%; height : auto; position : relative; padding-top : 60%; display : inline-block; overflow : hidden; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox img { width : 100%; height : 100%; object-fit : cover; position : absolute; left : 0; top : 0; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox .category { position : absolute; left : 2%; top : 3%; opacity : 0.7; background-color : #9F0C3D; padding : 2px 3%; display : flex; text-align : center; transition : 0.6s all ease-in-out; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox .category .category_font { color : #fff; font-weight : 200; font-size : calc(10px + 0.5vw); } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox .hover_Event { width : 0; opacity : 0; transition : 0.3s; height : 0; padding-top : 10px; position : absolute; display : flex; text-align : center; justify-content : center; align-items : center; border-radius : 100%; top : 50%; left : 50%; transform : translate(-50%, -50%); background-color : #9F0C3D99; padding : 20px 0; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox .hover_Event p { width : 150px; color : #ffffff90; font-size : calc(12px + 0.3vw); position : absolute; top : 50%; left : 50%; padding : 8px 0 5px 0; border : 1px solid #ffffff90; transition : 0.6s all ease-in-out; transform : translate(-50%, -50%); } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox .hover_Event p:hover { color : #fff000; } /* Hover Event */ #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap:hover .imgBox .category { opacity : 0; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap:hover .imgBox .hover_Event { width : 500px; height : 500px; transition : 1s; opacity : 1;} /* Contents - Text */ #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .textBox { width : 100%; background-color : #fff; height : 169px; overflow : hidden; padding : 5%; text-align : left; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .textBox p.wr_1 { font-size : calc(12px + 0.3vw); color : #9f0c3d; font-weight : 200; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .textBox p.subject { font-size : calc(15px + 0.3vw); margin-top : 5px; color : #333; font-weight : 400; line-height : 1.3em; overflow : hidden; text-overflow : ellipsis; word-break : keep-all; display : -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .textBox p.contents { width : 100%; font-size : calc(11px + 0.3vw); color : #999; font-weight : 200; line-height : 1.5em; margin-top : 5px; text-align : left; overflow : hidden; text-overflow : ellipsis; word-break : keep-all; display : -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } #division3_galleryStory .sectionWrap .contentWrap .swiper-pagination.galleryStoryPage { display : inline-block; margin-top : 30px; } #division3_galleryStory .sectionWrap .contentWrap .swiper-pagination.galleryStoryPage .swiper-pagination-bullet.swiper-pagination-bullet-active { background : #aa0d3e; } #division3_galleryStory .sectionWrap .contentWrap .swiper-pagination.galleryStoryPage .swiper-pagination-bullet { width : calc(5px + 0.3vw); height : calc(5px + 0.3vw); background : #c3c3c5; opacity : 1; } #division3_galleryStory .sectionWrap .contentWrap .swiper-pagination.galleryStoryPage .swiper-pagination-bullet:hover { background : #aa0d3e; } @media (min-width:641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* Board_Gallery_ProductView Tablet */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* Hover Event */ #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap:hover .imgBox .category { opacity : 1; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap:hover .imgBox .hover_Event { width : 0; height : 0; transition : 0s; opacity : 0;} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division3_galleryStory { padding : calc(30px + 5%) 5%; } #division3_galleryStory .sectionWrap .contentTopWrap a { position : static; margin-top : calc(1px + 1vw); } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .imgBox { height : calc(100px + 20vw); } /* Hover Event */ #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap:hover .imgBox .category { opacity : 1; } #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap:hover .imgBox .hover_Event { width : 0; height : 0; transition : 0s; opacity : 0;} } @media (max-width:400px) { #division3_galleryStory .sectionWrap .contentWrap .galleryStoryWrap .textBox { height : auto; } }