@font-face { font-family: Vinila; src: url("https://jsbin-user-assets.s3.amazonaws.com/simevidas/vinila.woff2") format("woff2"); font-style: oblique 0deg 20deg; /* 20deg is required for Safari */ font-weight: 1 1000; } /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* 3단 hover시 업&다운 */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .division3B_BottomToTop { width : 100%; height : auto; text-align : center; position : relative; display : inline-block; margin : 0px 0px 50px 0px; } .division3B_BottomToTop h1 { font-size : 0; line-height : 0; } .division3B_BottomToTop .description_Wrap { width : 100%; height : auto; display : inline-block; text-align : center; padding : 45px 0 220px 0; background-color : #e5e5e5;/* background: rgb(220,220,221); background: -moz-linear-gradient(left, rgba(220,220,221,1) 0%, rgba(255,255,255,1) 50%, rgba(220,220,221,1) 100%); background: -webkit-linear-gradient(left, rgba(220,220,221,1) 0%,rgba(255,255,255,1) 50%,rgba(220,220,221,1) 100%); background: linear-gradient(to right, rgba(220,220,221,1) 0%,rgba(255,255,255,1) 50%,rgba(220,220,221,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdd', endColorstr='#dcdcdd',GradientType=1 ); */ } .division3B_BottomToTop .description_Wrap .division3B_BottomToTop_descript { font-size : 27px; color : #999; font-weight : 600; font-style : italic; } .division3B_BottomToTop .description_Wrap .division3B_BottomToTop_title { font-size : 50px; color : rgba(255,255,255,1); font-weight : 600; font-style : italic; } .division3B_BottomToTop .division3B_BottomToTop_Wrap { width : 100%; height : auto; display : inline-block; max-width : 1400px; text-align : center; padding : 0 0.5%; margin-top : -210px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .main_Time { width : 100%; height : auto; max-width : 560px; margin-top : -20px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents { width : 25%; height : auto; display : inline-block; margin : 0% 1.5%; text-align : center; margin-top : 30px; position : relative; overflow : hidden; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents img { width : 100%; height : auto; } .division3B_BottomToTop_Contents .Wrap { width : 100%; height : 20%; position : absolute; overflow : hidden; left : 0; top : 80%; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents { width : 100%; height : 100%; display : inline-block; background-color : rgba(0,0,0,0.6); transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap { width : 100%; height : 100%; display : table; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap { width : 100%; height : 100%; display : table-cell; vertical-align : middle; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top { width : 100%; height : 0px; overflow : hidden; opacity : 0; transition : all ease-in-out .2s; -o-transition : all ease-in-out .2s; -ms-transition : all ease-in-out .2s; -moz-transition : all ease-in-out .2s; -webkit-transition : all ease-in-out .2s; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top .BannerTitle { font-size : 28px; font-weight : 500; color : #fff; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle { width : 100%; height : auto; font-size : 19px; color : #b4b5b5; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle .BannerDescript { font-size : 21px; font-weight : 500; color : #b4b5b5; padding : 5px 0px; 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; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom { width : 100%; height : 0px; overflow : hidden; opacity : 0; transition : all ease-in-out .2s; -o-transition : all ease-in-out .2s; -ms-transition : all ease-in-out .2s; -moz-transition : all ease-in-out .2s; -webkit-transition : all ease-in-out .2s; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .division3B_BTP_BannerLine { width : 30%; height : 3px; background-color : #fff; display : inline-block; max-width : 70px; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .Go_on { width : 100%; height : auto; text-align : center; padding-top : 15px; position : relative; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .Go_on .contents { width : 100%; height : auto; position : absolute; left : 0; top : 0; text-align : center; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .Go_on .contents a { font-size : 17px; font-weight : 500; color : #333; background-color : #fff; display : inline-block; padding : 5px 15px; margin-top : 17px; width : 50%; max-width : 130px; min-width : 100px; transition : all ease-in-out .2s; -o-transition : all ease-in-out .2s; -ms-transition : all ease-in-out .2s; -moz-transition : all ease-in-out .2s; -webkit-transition : all ease-in-out .2s; } /* hover */ .division3B_BottomToTop_Contents:hover .Wrap { padding-top : 0; width : 100%; height : 100%; top : 0; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents { height : 100%; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top { height : 40px; opacity : 1; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle .BannerDescript { font-size : 17px; font-weight : 300; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom { height : 70px; opacity : 1; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .Go_on .contents a:hover { background-color : #000; color : #fff000; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } /* hover end */ .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable { width : 100%; height : auto; display : table; text-align : center; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell { width : 100%; height : 300px; display : table-cell; text-align : center; position : relative; vertical-align : bottom; background-color : rgba(21,86,122,0.0); } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents.BottomToTop_ContentsBack1 .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { background-color : rgba(0,0,0,0.5); } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents.BottomToTop_ContentsBack2 .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { background-color : rgba(0,0,0,0.5); } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents.BottomToTop_ContentsBack3 .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { background-color : rgba(0,0,0,0.5); } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { width : 100%; height : 45px; padding : 10px 0px; font-size : 18px; color : #fff; font-weight : 500; display : table-cell; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .BottomToTop_ContentsBack1 { background-image : url(../../../Image/BottomToTop3B_ContentsBack1.jpg); background-repeat : no-repeat; background-position : center center; background-size : cover; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .BottomToTop_ContentsBack2 { background-image : url(../../../Image/BottomToTop3B_ContentsBack2.jpg); background-repeat : no-repeat; background-position : center center; background-size : cover; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .BottomToTop_ContentsBack3 { background-image : url(../../../Image/BottomToTop3B_ContentsBack3.jpg); background-repeat : no-repeat; background-position : center center; background-size : cover; } /* hover Event */ .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell:hover { display : table; transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell:hover .division3B_BottomToTop_ContentsImg { width : 100%; height : 100%; padding : 10px; font-size : 15px; color : #fff; font-weight : 400; display : table-cell; vertical-align : middle; transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell ,.division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } @media (min-width:641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .division3B_BottomToTop .division3B_BottomToTop_Wrap .description_Wrap .division3B_BottomToTop_descript { font-size : 18px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .description_Wrap .division3B_BottomToTop_title { font-size : 28px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents { width : 32%; height : auto; display : inline-block; margin : 0% 0.5%; text-align : center; margin-top : 30px; float : none; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell { width : 100%; height : 250px; } .division3B_BottomToTop .description_Wrap .division3B_BottomToTop_title { font-size : 40px; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top { height : 26px; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top .BannerTitle { font-size : 20px; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle .BannerDescript { font-size : 13px; font-weight : 500; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle .BannerDescript { font-size : 13px; font-weight : 500; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom { line-height : 1.3; height : 66px; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .Go_on .contents a { margin-top : 14px; } } @media (max-width:640px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .division3B_BottomToTop { margin-top : 30px; padding-bottom : 30px; background: rgb(220,220,221); /* Old browsers */ background: -moz-linear-gradient(left, rgba(220,220,221,1) 0%, rgba(255,255,255,1) 50%, rgba(220,220,221,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(220,220,221,1) 0%,rgba(255,255,255,1) 50%,rgba(220,220,221,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(220,220,221,1) 0%,rgba(255,255,255,1) 50%,rgba(220,220,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdd', endColorstr='#dcdcdd',GradientType=1 ); /* IE6-9 */ } .division3B_BottomToTop .description_Wrap { width : 100%; height : auto; display : inline-block; text-align : center; padding : 35px 0 220px 0; background : none; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .description_Wrap .division3B_BottomToTop_descript { font-size : 14px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .description_Wrap .division3B_BottomToTop_title { font-size : 17px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents { width : 80%; height : auto; display : inline-block; margin : 0% 2.5%; text-align : center; margin-top : 15px; float : none; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell { width : 100%; height : 200px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell { background-color : rgba(21,86,122,0); transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { width : 70%; height : auto; padding : 10px; font-size : 15px; color : #fff; font-weight : 400; display : inline-block; max-width : 200px; background-color : rgba(0,0,0,0.8); transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents.BottomToTop_ContentsBack1 .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { background-color : rgba(228,105,119,0.8); } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents.BottomToTop_ContentsBack2 .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { background-color : rgba(97,182,224,0.8); } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents.BottomToTop_ContentsBack3 .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell .division3B_BottomToTop_ContentsImg { background-color : rgba(87,190,186,0.8); } /* hover Event */ .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell:hover { background-color : rgba(0,0,0,0.4); transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents .division3B_BottomToTop_ContentsTable .division3B_BottomToTop_ContentsTablecell:hover .division3B_BottomToTop_ContentsImg { width : 90%; height : auto; padding : 10px; font-size : 15px; color : #fff; font-weight : 400; display : inline-block; background-color : rgba(0,0,0,0.8); transition : all ease-in-out .5s; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .division3B_BottomToTop .description_Wrap .division3B_BottomToTop_title { font-size : 24px; } .division3B_BottomToTop .description_Wrap .division3B_BottomToTop_descript { font-size : 15px; } .division3B_BottomToTop .division3B_BottomToTop_Wrap .division3B_BottomToTop_Contents { } .division3B_BottomToTop_Contents .Wrap { height : 100%; top : 0;} .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents ,.division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents { background-color : rgba(0,0,0,0.5);} .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top ,.division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top { opacity : 1; height : 32px; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Top .BannerTitle { font-size : 19px; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle .BannerDescript { font-size : 13px; font-weight : 500; } .division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Middle .BannerDescript { font-size : 13px; font-weight : 500; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom ,.division3B_BottomToTop_Contents:hover .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom { line-height : 1.3; height : 66px; opacity : 1; } .division3B_BottomToTop_Contents .Wrap .division3B_BTP_Contents .TableWrap .VerticalAlignWrap .division3B_BTP_Bottom .Go_on .contents a { margin-top : 14px; font-size : 13px; max-width : 100px; min-width : 50px; } }