/* ******************************************************************************************************************************************************** */ /* */ /* */ /* Menu (Jquery를 이용한 업다운 메뉴) - UpdownMenu */ /* */ /* */ /* ******************************************************************************************************************************************************** */ /* ******************************************************************************************************************************************************** */ /* PC버전 CSS */ /* ******************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /*div의 line-height로 인한 bottom 공백 제거*/ .swiper-slide { line-height:0; } #Swiper_Gallery_View_fullWrap { display : inline-block; width : 100%; height : auto; position : relative; text-align : center; margin-top : 60px; padding : 40px 0px 0px 0px; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_fullWrapTitle { font-size : 50px; font-weight : 400; color : #b4b5b5; font-style : italic; display : none; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_fullWrapTitle .bold_title { font-size : 50px; font-weight : 600; color : #b4b5b5; font-style : italic; } #Swiper_Gallery_View_fullWrap .sub_title { font-size : 22px; font-weight : 600; color : #999; font-style : italic; } #Swiper_Gallery_View_fullWrap .TitBox { width : 100%; height : auto; } #Swiper_Gallery_View_fullWrap .TitBox .engTitTop { font-size : calc(10px + 0.8vw); color : #999; line-height : 1.2em; } #Swiper_Gallery_View_fullWrap .TitBox .engTit { font-size : calc(12px + 0.8vw); color : #333; font-weight : 700; line-height : 1.2em; } #Swiper_Gallery_View_fullWrap .TitBox .engTit span { font-size : inherit; font-weight : inherit; color : #9F0C3D; line-height : 1.2em; } #Swiper_Gallery_View_fullWrap .TitBox .tit { font-size : calc(14px + 0.9vw); color : #333; margin : calc(7px + 0.1vw) 0 calc(10px + 1vw); word-break : keep-all; font-weight : 200; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Wrap { width : 100%; height : auto; display : inline-block; margin-top : 40px; line-height : 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; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Wrap:hover .Swiper_View_Contents_Wrap { box-shadow : 0px 0px 15px #BDBDBD; 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; } #Swiper_Gallery_View_fullWrap .TitleWrap { width : 100%; height : auto; padding : 10px 0px; display : none; } #Swiper_Gallery_View_fullWrap .TitleWrap img { width : 70%; max-width : 280px; } #Swiper_Gallery_View_fullWrap .TitleWrap p { font-size : 45px; font-weight : 600; color : #ccc; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Title { font-size : 35px; font-weight : 600; color : #000; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_subTitle { font-size : 16px; font-weight : 300; color : #000; margin-bottom : 45px; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select { width : 100%; height : auto; max-width : 1060px; display : inline-block; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab { width : 46%; height : auto; display : inline-block; padding : 12px 2%; border : 0; background : none; position : relative; color : #999; font-weight : 300; font-size : 20px; text-align : center; cursor : pointer; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab.on { color : #000; font-weight : 600; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab .Lines_Tab { width : 98%; height : 3px; display : inline-block; position : absolute; left : 1%; top : 0; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab .Lines_Tab:before { width : 98%; height : 3px; display : inline-block; position : absolute; left : 1%; top : 0; background-color: #b1aaaa; content : ''; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab .Lines_Tab:after { width : 0%; height : 3px; display : inline-block; position : absolute; left : 50%; top : 0; background-color: #000; content : ''; 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; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab.on .Lines_Tab:after { width : 98%; height : 3px; display : inline-block; position : absolute; left : 1%; top : 0; background-color: #000; content : ''; 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; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap { width : 100%; margin-left : 0%; position : relative; overflow : hidden; padding : 0px; margin-top : 0px; line-height : 0; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents { width : 100%; height : auto; text-align : center; display : inline-block; line-height : 0; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a { width : 100%; height : auto; display : inline-block; position : relative; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap { width : 100%; height : auto; display : inline-block; position : relative; padding-top : 120%; overflow : hidden; text-align : center; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap .Swiper_View_Contents1_Image { height : 100%; position : absolute; transform : translate(-50%, -50%); left : 50%; top : 50%; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap { width : 100%; height : 100%; position : absolute; left : 0; bottom : 0; background-color: rgba(0,0,0,0.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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .cateName { position : absolute; left : 5%; top : 5%; background-color : #9F0C3D99; padding : 3px 15px; font-weight : 400; transition : 0.3s all ease-in-out; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .cateName p { font-size : 15px; color : #fff; transition : 0.3s all ease-in-out; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .cateName { background-color : #9f0c3d; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .cateName p { color : #fff000; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap { background-color: rgba(0,0,0,0.6); 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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap { width : 85%; height : 20%; position : absolute; left : 7.5%; bottom : 13px; 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; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap { bottom : 55px; 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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap { width : 100%; height : 100%; text-align : left; position : absolute; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { font-size : 22px; color : #fff; font-weight : 400; height : 30px; text-shadow : 2px 2px 2px #333; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; 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; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { height : 36px; 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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Descript { font-size : 17px; color : #fff; font-weight : 300; overflow :hidden; opacity : 0; height : 0; width : 100%; text-overflow : ellipsis; white-space : nowrap; display : inline-block; 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; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Descript { opacity : 1; height : auto; 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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on { font-size : 15px; color : #333; font-weight : 400; width : 20px; background-color : #fff; height : 0; opacity : 0; overflow : hidden; 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; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on { height : 32px; opacity : 1; padding : 3px 10px; width : 112px; margin : 3px 0px 0 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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on:hover { background-color : #980000; color : #fff000; 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; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { width : 25%; min-width : 50px; height : 3px; display : inline-block; background-color : #fff; box-shadow : 2px 2px 2px #333; 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; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { width : 90%; 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; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-prev { position : absolute; display : inline-block; right : 0; top : 0; width : 33.4%; height : 150%; background-color : rgba(255,255,255,0.5); opacity : 0.5; 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; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-prev .prev_icon { position : absolute; display : inline-block; left : 35%; top : 25%; width : 30%; height : 15%; background-image : url(../../../../Image/icon/next_black.png); background-position : center center; background-repeat : no-repeat; background-size : 90% auto; opacity : 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; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-next { position : absolute; display : inline-block; left : 0; top : 0; width : 33.4%; height : 150%; background-color: rgba(255,255,255,0.5); opacity : 0.5; 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; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-next .next_icon { position : absolute; display : inline-block; right : 35%; top : 25%; width : 30%; height : 15%; background-image : url(../../../../Image/icon/prev_black.png); background-position : center center; background-repeat : no-repeat; background-size : 90% auto; opacity : 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; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents:hover .swiper-button-prev ,#Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents:hover .swiper-button-next { opacity : 1; transition : all ease-in-out .7s; -o-transition : all ease-in-out .7s; -ms-transition : all ease-in-out .7s; -moz-transition : all ease-in-out .7s; -webkit-transition : all ease-in-out .7s; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents:hover .swiper-button-prev .prev_icon ,#Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents:hover .swiper-button-next .next_icon { opacity : 0.5; transition : all ease-in-out .7s; -o-transition : all ease-in-out .7s; -ms-transition : all ease-in-out .7s; -moz-transition : all ease-in-out .7s; -webkit-transition : all ease-in-out .7s; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-prev:hover ,#Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-next:hover { background-color: rgba(255,255,255,0.8); transition : all ease-in-out .7s; -o-transition : all ease-in-out .7s; -ms-transition : all ease-in-out .7s; -moz-transition : all ease-in-out .7s; -webkit-transition : all ease-in-out .7s; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-prev:hover .prev_icon ,#Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-button-next:hover .next_icon { opacity : 1; transition : all ease-in-out .7s; -o-transition : all ease-in-out .7s; -ms-transition : all ease-in-out .7s; -moz-transition : all ease-in-out .7s; -webkit-transition : all ease-in-out .7s; } @media (min-width: 641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************** */ /* TABLET버전 CSS */ /* ******************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Swiper_Gallery_View_fullWrap { display : inline-block; width : 100%; height : auto; position : relative; text-align : center; overflow : hidden; margin-top : 50px; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_fullWrapTitle { font-size : 38px; font-weight : 400; color : #b4b5b5; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_fullWrapTitle .bold_title { font-size : 38px; font-weight : 600; color : #b4b5b5; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap { width : 100%; margin-left : 0%; } } @media (min-width: 0px) and (max-width:640px) { /* ******************************************************************************************************************************************************** */ /* MOBILE버전 CSS */ /* ******************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Swiper_Gallery_View_fullWrap { display : inline-block; width : 90%; height : auto; position : relative; text-align : center; overflow : hidden; margin-top : 0px; margin-bottom : 0px; margin-left : 5%; padding : calc(30px + 5%) 5%; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_fullWrapTitle { font-size : 24px; font-weight : 400; color : #b4b5b5; line-height : 1em; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_fullWrapTitle .bold_title { font-size : 24px; font-weight : 600; color : #b4b5b5; } #Swiper_Gallery_View_fullWrap .sub_title { display : none; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Wrap { margin-top : 0; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Wrap:hover .Swiper_View_Contents_Wrap { box-shadow : unset; } #Swiper_Gallery_View_fullWrap .TitleWrap { padding : 0px 0px; } #Swiper_Gallery_View_fullWrap .TitleWrap p { font-size : 24px; font-weight : 600; color : #ccc; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Title { font-size : 28px; font-weight : 600; color : #000; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_subTitle { font-size : 13px; font-weight : 300; color : #000; margin-bottom : 25px; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab { width : 46%; font-size : 15px; text-align : center; cursor : pointer; letter-spacing : -1.5px; } #Swiper_Gallery_View_fullWrap .Swiper_Gallery_View_Select .Swiper_Gallery_View_Tab.on { color : #000; font-weight : 600; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap { width : 100%; margin-left : 0%; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents1 .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Title { font-size : 14px; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents1 .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Date { font-size : 12px; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap { padding-top : 100%; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap .discount { opacity : 0.8; } #Swiper_Gallery_View_fullWrap .Swiper_View_Contents_Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap .event_sort { opacity : 1; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap ,.swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap { background-color: rgba(0,0,0,0); } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap ,.swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap { bottom : 55px; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap { display : none; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { height : 36px; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { height : 33px; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Descript { opacity : 1; height : auto; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on ,.swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on ,.swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on:hover { display : none; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { width : 90%; } }