/* ************************************************************************************************************************************************************************ */ /* */ /* */ /* 4x3단 갤러리 */ /* */ /* */ /* ************************************************************************************************************************************************************************ */ /* 갤러리 */ /* A A A : A : A : A : */ #Board_Galler4x2 { width : 100%; height : auto; text-align : center; margin-top : 5%; position : relative; display : inline-block; } #Board_Galler4x2 .TitleWrap { width : 100%; height : auto; position : relative; } #Board_Galler4x2 .TitleWrap .backLogoWrap { width : 100%; height : auto; display : inline-block; position : absolute; left : 0; top : 0; text-align : center; z-index : -1; } #Board_Galler4x2 .TitleWrap .backLogoWrap .ImgWrap { width : 140px; height : auto; display : none; } #Board_Galler4x2 .TitleWrap .backLogoWrap .ImgWrap img { width : 100%; height : auto; } #Board_Galler4x2 .TitleWrap .contents { width : 100%; height : auto; display : inline-block; text-align : center; z-index : 2; } #Board_Galler4x2 .TitleWrap .contents .TitleFont { font-size : 60px; font-weight : 600; font-style : italic; color : rgba(0,0,0,0.5); } #Board_Galler4x2 .TitleWrap .contents .DescriptFont { font-size : 20px; font-weight : 400; font-style : italic; color : rgba(0,0,0,0.5); } #Board_Galler4x2 .TitleWrap .contents img { width : min(25vw,280px); } #Board_Galler4x2 .Board_Galler4x2_Title ,#Board_Galler4x2 .Board_Galler4x2_Title a { width : 100%; height : auto; font-size : 35px; font-weight : 600; color : #888; padding-top : 0px; transition : all ease-in-out .3s; -o-transition : all ease-in-out .3s; -ms-transition : all ease-in-out .3s; -moz-transition : all ease-in-out .3s; -webkit-transition : all ease-in-out .3s; } #Board_Galler4x2 .Board_Galler4x2_Title a:hover { color : #980000; transition : all ease-in-out .3s; -o-transition : all ease-in-out .3s; -ms-transition : all ease-in-out .3s; -moz-transition : all ease-in-out .3s; -webkit-transition : all ease-in-out .3s; } #Board_Galler4x2 .Board_Galler4x2_Descript { width : 100%; height : auto; font-size : 16px; font-weight : 300; color : #999; padding-top : 0px; } #Board_Galler4x2 .Gallery4x2 { width : 100%; height : auto; display : inline-block; margin-top : 3%; max-width : 1300px; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap { width : 100%; height : auto; float : left; margin-top : 0px; text-align : center; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Gallery4x2_Title { width : 100%; height : auto; font-size : 40px; font-weight : 700; color : #747474; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Gallery4x2_Descript { width : 100%; height : auto; font-size : 18px; font-weight : 400; color : #747474; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame { width : 100%; margin-left : 0%; margin-right : 0%; height : auto; margin-top : 0px; display : inline-block; float : left; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul { margin-top : 0px; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li { width : 24%; margin : 5px 0.5%; height : auto; float : left; overflow : hidden; padding : 0; text-align : left; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap { float : left; margin : 0 auto; width : 100%; height : auto; padding-top : 65%; position : relative; overflow : hidden; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap img { position : absolute; left : 0; top : 0; width : 100%; height : auto; transition : all ease-in-out .6s; -o-transition : all ease-in-out .6s; -ms-transition : all ease-in-out .6s; -moz-transition : all ease-in-out .6s; -webkit-transition : all ease-in-out .6s; transform : scale(1); -ms-transform : scale(1); -webkit-transform : scale(1); -o-transform : scale(1); } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask { width : 100%; height : 100%; position : absolute; background : rgba(0,0,0,0); z-index : 9; top : 0%; border-radius : 0; margin-left : 0%; transition : all ease-in-out .3s; -o-transition : all ease-in-out .3s; -ms-transition : all ease-in-out .3s; -moz-transition : all ease-in-out .3s; -webkit-transition : all ease-in-out .3s; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask h3 { position : absolute; top : 55%; height : auto; line-height : 30px; font-size : 20px; margin : -25px 0 0 0; width : 100%; text-align : center; right : 0; display : block; color : #ffffff; opacity : 0; text-shadow : 3px 3px 3px #000; transform : scale(1.5); transition : all ease-in-out 1.1s; -o-transform : scale(1.5); -o-transition : all ease-in-out 1.1s; -ms-transform : scale(1.5); -ms-transition : all ease-in-out 1.1s; -moz-transform : scale(1.5); -moz-transition : all ease-in-out 1.1s; -webkit-transform : scale(1.5); -webkit-transition : all ease-in-out 1.1s; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask h3 a { color : #ffffff; font-weight : 400; font-size : 25px; padding : 0; width : 90%; display : inline-block; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask h3 a p { color : #ffffff; font-size : 22px; font-weight : 600; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap:hover .divMask { background : rgba(0,0,0,.3); } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask h3 a:hover { color : yellow; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap:hover .divMask h3 { transform : scale(1.1); opacity : 1; -o-transform : scale(1.1); -ms-transform : scale(1.1); -moz-transform : scale(1.1); -webkit-transform : scale(1.1); } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask .spnOblique { background : rgba(255, 255, 255,.1); width : 80%; height : 220%; left : -120%; top : -90%; position : absolute; display : inline-block; transform : ratate(45deg); transition : all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transform : rotate(45deg); -o-transition : all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -ms-transform : rotate(45deg); -ms-transition : all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transform : rotate(45deg); -moz-transition : all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transform : rotate(45deg); -webkit-transition : all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap:hover .divMask .spnOblique { left : -50%; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap:hover img { transition : all ease-in-out 1.8s; -o-transition : all ease-in-out 1.8s; -ms-transition : all ease-in-out 1.8s; -moz-transition : all ease-in-out 1.8s; -webkit-transition : all ease-in-out 1.8s; transform : scale(1.3); -ms-transform : scale(1.3); -webkit-transform : scale(1.3); -o-transform : scale(1.3); } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li a { width : 95%; padding-left : 5%; font-weight : 600; font-size : 16px; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; margin : 5px 0 15px 0; } @media (min-width:641px) and (max-width:1024px) { } @media (max-width:749px) { /* ************************************************************************************************************************************************************************ */ /* */ /* */ /* 4x3단 갤러리 */ /* */ /* */ /* ************************************************************************************************************************************************************************ */ /* A A A : A : A : A : */ #Board_Galler4x2 { margin-top : 10%; } #Board_Galler4x2 .TitleWrap .backLogoWrap .ImgWrap { width : 85px; } #Board_Galler4x2 .TitleWrap .backLogoWrap .ImgWrap img { width : 100%; height : auto; } #Board_Galler4x2 .TitleWrap .contents { margin-top : 20px; } #Board_Galler4x2 .TitleWrap .contents .TitleFont { font-size : 30px; } #Board_Galler4x2 .TitleWrap .contents .DescriptFont { font-size : 14px; } #Board_Galler4x2 .TitleWrap .contents img { width : min(28vw,270px); } #Board_Galler4x2 .Board_Galler4x2_Title, #Board_Galler4x2 .Board_Galler4x2_Title a { font-size : 24px; } #Board_Galler4x2 .Gallery4x2 { margin-top : 3%; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li { width : 49%; margin : 5px 0.5%; height : auto; float : left; overflow : hidden; padding : 0; text-align : left; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap { padding-top : 65%; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap img { width : 120%; } #Board_Galler4x2 .Gallery4x2 .Main_Gallery4x2_Wrap .Main_Gallery_Frame ul li .ImgWrap .divMask h3 a { font-size : 15px; } } @media (max-width:640px) { #Board_Galler4x2 .TitleWrap .contents img { width : min(55vw,200px); } }