/* ************************************************************************************************************************************************************************ */ /* */ /* */ /* Swiper_gallery_View_ConsturctionVew */ /* */ /* */ /* ************************************************************************************************************************************************************************ */ /* ************************************************************************************************************************************************************************ */ /* PC버전 CSS */ /* ************************************************************************************************************************************************************************ */ /* A A A : A : A : A : */ /*div의 line-height로 인한 bottom 공백 제거*/ .swiper-slide { line-height : 0; } #Swiper_Gallery_View_ConstructionView { width : 100%; height : auto; position : relative; text-align : center; margin : 3% 0;} #Swiper_Gallery_View_ConstructionView:before { content : ''; width : 100%; height : 60%; position : absolute; left : 0; bottom : 0; z-index : -1; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_ConstructionViewTitle { font-size : 50px; font-weight : 400; color : #b4b5b5; font-style : italic; display : none; } #Swiper_Gallery_View_ConstructionView .sub_title { font-size : 22px; font-weight : 600; color : #999; font-style : italic; display : none; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap { width : 100%; height : auto; overflow : hidden; text-align : center; line-height : 0; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap .Wrap { width : 100%; height : auto; display : flex; flex-direction : column; justify-content : space-between; align-items : flex-end; padding : 2% 0; position : relative; } #Swiper_Gallery_View_ConstructionView .TitBox { width : 100%; height : auto; } #Swiper_Gallery_View_ConstructionView .TitBox .engTitTop { font-size : calc(12px + 0.8vw); color : #333; } #Swiper_Gallery_View_ConstructionView .TitBox .engTit { font-size : calc(12px + 0.8vw); color : #333; font-weight : 700; } #Swiper_Gallery_View_ConstructionView .TitBox .engTit span { font-size : inherit; font-weight : inherit; color : #d80647; } #Swiper_Gallery_View_ConstructionView .TitBox .tit { font-size : calc(14px + 0.9vw); color : #333; margin : calc(5px + 0.1vw) 0 calc(10px + 1vw); word-break : keep-all; } #Swiper_Gallery_View_ConstructionView .TitBox .tit span { font-size : calc(10px + 0.5vw); } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap { width : 100%; height : 100%; display : flex; float : left; text-align : left; flex-direction : column; align-items : center; justify-content : space-between; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .logoBox { width: calc(70px + 5vw); } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .logoBox img { width : 100%; height : auto;} .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .sectionTit { font-size : calc(16px + 2vw); font-weight : 700; color : #dedfdf; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .slideTitWrap { width : 100%; height : auto; word-break : keep-all; text-align : center; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .subTitle { font-size : calc(9px + 0.7vw); color : rgba(99,160,208,0.5); font-weight : 600; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Title { font-size : calc(12px + 1vw); line-height : 1.2em; color : #595757; font-weight : 400; margin-top : 1%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Title span { font-size : inherit ; line-height : inherit; color : inherit; font-weight : 700; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .bottomTitle { font-size : calc(7px + 0.5vw); color : #595757; font-weight : 400; margin-top : 3%; word-break : keep-all; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .bottomTitle span { font-size : calc(7px + 0.5vw); color : #b60005; font-weight : 500; margin-top : 3%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_ButtonWrap { display : inline-block; width : 50%; text-align : left; position : absolute; left : 0; bottom : calc(20px); margin-left : 1%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left ,.Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right { cursor : pointer; padding : 2% 4%; font-size : 20px; border : 1px solid #333; color : #333; display : none; margin : 6% 1% 0 1%; transition : 0.4s; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left:hover ,.Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right:hover { background-color : #63a0d0; color : #fff; border : 1px solid #63a0d0; border-radius : 100px; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left:hover { transform : rotate(360deg); } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right:hover { transform : rotate(-360deg); } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left:focus ,.Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right:focus { outline : -webkit-focus-ring-color auto 0px; outline-color : -webkit-focus-ring-color; outline-style : auto; outline-width : 0px; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents_Wrap { width : 100%; margin : 3% auto 0; position : relative; overflow : hidden; transition : 0.6s;} .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents_Wrap:hover { box-shadow : 0 0 25px #555; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents { width : 100%; height : auto; text-align : center; display : inline-block; line-height : 0; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a { width : 100%; height : auto; display : inline-block; position : relative; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap { width : 100%; height : calc(150px + 13vw); display : inline-block; position : relative; text-align : center; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap .Swiper_View_Contents1_Image { width : 100%; height : 100%; object-fit : cover; } .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: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 : #0080CC; 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_Wrap .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_Wrap .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_Wrap .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_Wrap .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_Wrap .Wrap .Swiper_View_Contents:hover .swiper-button-prev ,.Swiper_Gallery_View_Wrap .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_Wrap .Wrap .Swiper_View_Contents:hover .swiper-button-prev .prev_icon ,.Swiper_Gallery_View_Wrap .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_Wrap .Wrap .Swiper_View_Contents .swiper-button-prev:hover ,.Swiper_Gallery_View_Wrap .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_Wrap .Wrap .Swiper_View_Contents .swiper-button-prev:hover .prev_icon ,.Swiper_Gallery_View_Wrap .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_ConstructionView { display : inline-block; width : 100%; height : auto; position : relative; text-align : center; overflow : hidden; padding : 0 5%; } #Swiper_Gallery_View_ConstructionView::before { height : 100%; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_ConstructionViewTitle { font-size : 38px; font-weight : 400; color : #b4b5b5; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_ConstructionViewTitle .bold_title { font-size : 38px; font-weight : 600; color : #b4b5b5; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap { padding : 0;} #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap .Wrap { width : 100%; height : auto; margin-left : 0%; flex-direction : column; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap { width : 100%; text-align : center; justify-content : center; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .sectionTit { display : none; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .slideTitWrap { width : 100%;} .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .subTitle { font-size : calc(6px + 1.4vw); color : #0003; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Title { font-size : calc(12px + 1.4vw); margin-top : 3%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .bottomTitle { font-size : calc(10px + 0.7vw); color : #999; margin-top : 5px; display : none; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left { position : absolute; margin : 0; left : 5%; top : 0; margin-top : 2%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right { position : absolute; margin : 0; right : 5%; top : 0; margin-top : 2%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left ,.Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right { padding : 8px 13px; background-color : rgba(0,0,0,0.5); color : #fff; border : 1px solid #63a0d0; display : none; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents_Wrap { width : 100%; padding : 0px; margin-top : 3%; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents_Wrap:hover { box-shadow : 0 0 0px #fff; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap { bottom : 20px; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on { font-size : 13px; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Go_on { height : 26px; padding : 3px 10px; width : 100px; margin-top : 6px; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { font-size : 16px; height : 23px; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { height : 23px; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { width : 25%; min-width : 50px; height : 2px; display : inline-block; background-color : #fff; box-shadow : 2px 2px 2px #666; } .swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { width : 85%; } } @media (min-width: 0px) and (max-width:640px) { /* ******************************************************************************************************************************************************** */ /* MOBILE버전 CSS */ /* ******************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Swiper_Gallery_View_ConstructionView { width : 100%; height : auto; position : relative; text-align : center; overflow : hidden; margin-top : 0px; margin-bottom : 0px; padding : 15% 5%; } #Swiper_Gallery_View_ConstructionView:before { height : 100%; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_ConstructionViewTitle { font-size : 24px; font-weight : 400; color : #b4b5b5; line-height : 1em; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_ConstructionViewTitle .bold_title { font-size : 24px; font-weight : 600; color : #b4b5b5; } #Swiper_Gallery_View_ConstructionView .sub_title { display : none; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap { padding : 0;} #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap:hover .Swiper_View_Contents_Wrap { box-shadow : unset; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap .Wrap { flex-direction : column; height : auto; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap { width : 100%; text-align : center; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .sectionTit { display : none;} .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .slideTitWrap { width : 100%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .subTitle { font-size : calc(6px + 1.4vw); color : #0003; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Title { font-size : 18px; margin-top : 3%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .bottomTitle { font-size : calc(8px + 0.8vw); color : #999; margin-top : 5px; display : none; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left { position : absolute; margin : 0; left : 5%; top : 0; margin-top : 3.5%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right { position : absolute; margin : 0; right : 5%; top : 0; margin-top : 3.5%; } .Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_left ,.Swiper_Gallery_View_Wrap .Wrap .TitleWrap .Swiper_right { padding : 0.5% 1.5%; background-color : rgba(0,0,0,0.5); font-size : 20px; color : #fff; border : 1px solid #63a0d0; display : none; } #Swiper_Gallery_View_ConstructionView .Swiper_Gallery_View_Wrap .Wrap { width : 100%; flex-direction : column; margin-left : 0%; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents_Wrap { width : calc(100%); padding : 0px; margin-top : 5%; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents1 .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Title { font-size : 14px; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents1 .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Date { font-size : 12px; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap { height : 50vh; } .Swiper_Gallery_View_Wrap .Wrap .Swiper_View_Contents .swiper-wrapper .swiper-slide a .Swiper_View_Contents1_Wrap .discount { opacity : 0.8; } .Swiper_Gallery_View_Wrap .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 .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 a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { display : none; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap ,.swiper-slide:hover a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap { bottom : 7px } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .Subject { font-size : 18px; } .swiper-slide a .Swiper_View_Contents1_Wrap .hoverWrap .ContentsWrap .verticalalignWrap .underLine { width : 90%; } }