/* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg PC */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_backImg { width : 100%; height : auto; text-align : center; display : inline-block; position : relative; padding : 20px 0px; margin-top : 3.5%; overflow : hidden; font-family : "Noto Sans Kr";} #division4A_backImg:before { content : ""; width : 11.5%; height : 100%; display : inline-block; position : absolute; left : calc(10px + 4%); top : 12%; z-index : 80; /* background-image : url("../../../Image/division4_backimage_before.png"); background-repeat : no-repeat; background-size : 100% auto; background-position: center; */} #division4A_backImg::after { content : ""; width : 17%; height : 90%; display : inline-block; position : absolute; right : calc(10px + 2%); top : 0; /* background-image : url("../../../Image/division4_backimage_after.png"); z-index : 81; background-repeat : no-repeat; background-size : 100% auto; background-position: center; */} #division4A_backImg .backimage_subtitle { font-size : 19px; font-weight : 900; color : #0003; } #division4A_backImg .backimage_title { font-size : 43px; font-weight : 700; color : #000; } #division4A_backImg .Wrap { width : 100%; height : auto; max-width : 1200px; margin-top : 40px; display : inline-block; z-index : 82; position : relative; overflow : hidden; } #division4A_backImg .Wrap::after { content : ""; display : block; clear : both; } #division4A_backImg .Wrap .backimage_01 { width : 100%; height : auto; position : relative; display : inline-block; float : left; margin : 0 0.5%; overflow : hidden; } #division4A_backImg .Wrap .backimage_01 img { width : 100%; height : auto; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01 .hover_black { width : 100%; height : 100%; background : rgba(0,0,0,0.25); position : absolute; top : 0; left : 0; padding-top : 250px; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap { width : auto; display : inline-block; position : absolute; bottom : 5%; left : 5%; transition : .8s; } #division4A_backImg .Wrap .backimage_01 .hover_black:hover .leftWrap { bottom : 50%; left : 50%; transform : translate(-50%, 50%); margin-bottom : 20%; text-align : center; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number { position : relative; display : inline-block; font-size : 58px; color : rgba(255,255,255,0); text-align : left; font-weight : 700; line-height : 1.2; -webkit-text-stroke: 1px #BDBDBD; transition : 0.8s; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : -39%; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : 0%; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .leftWrap .hover_number { color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_title { font-size : 15px; color : #fff; display : inline-block; text-shadow : 1px 1px 2px #333; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .leftWrap .hover_title { color : #fff000; } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more { position : absolute; bottom : 5%; right : 5%; padding : 10% 0; width : 100%; max-width : 80px; overflow : hidden; font-size : 15px; color : #fff; text-align : center ; display : block; transition : 0.8s; border : 2px solid #BDBDBD; } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:hover { color : #fff000; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more { background-color : rgba(0,173,186,0.5); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,0.5); bottom : 50%; right : 50%; transform : translate(50%, 50%); margin-bottom : -20%; } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:hover { background-color : rgba(0,173,186,0.9); transition : 0.6s; border : 2px solid rgba(0,173,186,0.9); } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:after { content : '+'; font-size : 10px; position : absolute; left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : -30px; opacity : 0; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:hover:after { color : #fff; opacity : 0.6 !important; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more:after { margin-top : -10px; opacity : 0.3; font-size : 55px; } #division4A_backImg .Wrap .backimage_01:hover img { transform : scale(1.2); } #division4A_backImg .Wrap .backimage_01:hover .hover_black { background : rgba(0,0,0,0.58); } @media (min-width: 641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg Tablet */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_backImg { margin-top : 2%; } #division4A_backImg .backimage_subtitle { font-size : calc(6px + 1.4vw); } #division4A_backImg .backimage_title { font-size : calc(17px + 1.9vw); } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap { width : 100%; text-align : center; position : absolute; left : 50%; bottom : 50%; transform : translate(-50%, 50%); margin-bottom : 20%; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number { font-size : 35px; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : 0%; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_title { font-size : calc(6px + 1.2vw); } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more { right : 50%; bottom : 50%; transform : translate(50%, 50%); margin-bottom : -20%; padding : 3% 0; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more:after { font-size : 35px; } } @media (min-width: 0px) and (max-width:640px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg Mobile */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_backImg { margin-top : 2%; } #division4A_backImg:before { height : 0; } #division4A_backImg .backimage_subtitle { font-size : calc(6px + 1.4vw); } #division4A_backImg .backimage_title { font-size : calc(17px + 1.9vw); } #division4A_backImg .Wrap { margin-top : 15px; } #division4A_backImg .Wrap .backimage_01 { height : auto; position : relative; display : inline-block; margin : 0.5%; overflow : hidden; } #division4A_backImg .Wrap .backimage_01 .hover_black { padding-top : 50%; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap { width : 100%; text-align : center; position : absolute; left : 50%; bottom : 50%; transform : translate(-50%, 50%); margin-bottom : 20%; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number { font-size : 35px; color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : 0%; } #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_title { color : #fff000; font-weight : 500; font-size : calc(13px + 1.2vw); } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more { right : 50%; bottom : 50%; transform : translate(50%, 50%); margin-bottom : -20%; padding : 12% 0 8% 0; color : rgba(255,255,255,1); font-size : 13px; border : 2px solid rgba(67,116,217,0.8); background-color : rgba(67,116,217,0.5); } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:after { margin-top : -10px; opacity : 0.2; font-size : 25px; } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:after { content : '+'; font-size : 25px; position : absolute; padding-left : 5px; left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : -10px; opacity : 0; transition : 0.6s; color : #fff; opacity : 0.6 !important; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more:after { margin-top : -10px; opacity : 0.3; font-size : 35px; } }