/* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division5A_backImg PC */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division5A_backImg { width : 100%; height : auto; text-align : center; display : inline-block; position : relative; padding : 3% 0; overflow : hidden; } #division5A_backImg:before { content : ""; width : 16%; height : 100%; display : inline-block; position : absolute; left : 0; margin-left : 3.3%; transition : 0.5s; top : -12%; z-index : 80; background-image : url("../../../Image/division5_backimage_before.png"); background-repeat : no-repeat; background-size : 100% auto; background-position: center; } #division5A_backImg::after { content : ""; width : 17%; height : 85%; display : inline-block; position : absolute; right : 0; margin-right : 5.3%; top : -10%; background-image : url("../../../Image/division5_backimage_after.png"); z-index : 81; background-repeat : no-repeat; transition : 0.5s; background-size : 100% auto; background-position: center; } @media (min-width: 1651px) and (max-width:1740px) { #division5A_backImg:before { margin-left : 1.5%; } } @media (min-width: 1491px) and (max-width:1650px) { #division5A_backImg:before { margin-left : -3%; } #division5A_backImg::after { margin-right : 0; } } @media (min-width: 0px) and (max-width:1490px) { #division5A_backImg:before { display : none; } #division5A_backImg::after { display : none; } } #division5A_backImg .backimage_subtitle { font-size : 19px; font-weight : 900; color : #0003; display : none; } #division5A_backImg .backimage_title { font-size : 43px; font-weight : 700; color : #000; display : none; } #division5A_backImg .Wrap { width : 100%; height : auto; max-width : 1330px; margin-top : 40px; display : inline-block; z-index : 82; position : relative; } #division5A_backImg .Wrap .TableWrap { width : 100%; height : auto; display : table; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap { width : 22%; height : auto; display : table-cell; background-color : #0080CC; vertical-align : middle; position : relative; text-align : center; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_backImg_Line_1 { width : 10%; height : 4px; display : inline-block; position : absolute; right : 0; top : 5%; background-color : #fff; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_backImg_Line_2 { width : 17%; height : 4px; display : inline-block; position : absolute; right : 0; top : 8%; background-color : #fff; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_backImg_Line_3 { width : 24%; height : 6px; display : inline-block; position : absolute; right : 0; top : 11%; background-color : #fff; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_ImgWrap { width : 100%; height : auto; text-align : center; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_ImgWrap img { width : 50%; height : auto; max-width : 75px; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_TitleWrap { width : 100%; height : auto; text-align : center; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_TitleWrap p.division5A_Top { font-size : 36px; font-weight : 500; color : #fff; margin : 13px 0; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_TitleWrap .bottom_TextAlign { width : auto; display : inline-block; text-align : left; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap .division5A_TitleWrap .bottom_TextAlign p.division5A_Bottom { font-size : 18px; font-weight : 300; color : #fff; line-height : 1.7em; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap { width : 78%; height : auto; display : table-cell; vertical-align : middle; position : relative; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_engtitleWrap { width : 100%; height : auto; text-align : left; padding-left : 20px; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_engtitleWrap p.RightWrap_engtitle { font-size : 40px; font-weight : 600; color : rgba(0,128,204,0.2); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents { width : 100%; height : auto; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 { width : 19.5%; height : auto; position : relative; display : inline-block; float : left; margin : 0 0.25%; overflow : hidden; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:first-child { margin-left : 0.5%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:last-child { margin-right : 0%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 img { width : 100%; height : auto; transition : 0.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .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; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap { width : 100%; height : 100%; position : absolute; padding : 8%; left : 0; top : 5%; text-align : left; text-align : center; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap .leftWrap { width : auto; text-align : center; display : inline-block; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.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.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_number { color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_title { font-size : 19px; color : #fff; display : inline-block; text-shadow : 1px 1px 2px #333; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_title { color : #fff000; font-weight : 500; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more { position : absolute; left : 50%; bottom : 5%; transform : translate(-50%, -50%); padding : 10% 0; width : 100%; max-width : 80px; overflow : hidden; font-size : 15px; color : #fff; text-align : center ; display : block; transition : 0.6s; border : 2px solid #BDBDBD; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:hover { color : #fff000; transition : 0.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_more { background-color : rgba(67,116,217,0.5); transition : 0.6s; padding : 12% 0 8% 0; border : 2px solid rgba(67,116,217,0.5); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:hover { background-color : rgba(67,116,217,0.9); transition : 0.6s; padding : 12% 0 8% 0; border : 2px solid rgba(67,116,217,0.9); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:after { content : '+'; font-size : 10px; position : absolute; padding-left : 5px; left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : -30px; opacity : 0; transition : 0.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:hover:after { color : #fff; opacity : 0.6 !important; transition : 0.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_more:after { margin-top : -10px; opacity : 0.3; font-size : 55px; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover img { transform : scale(1.2); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black { background : rgba(0,0,0,0.58); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .hover_black_table .hover_black_left .hover_number { color : rgba(255,255,255,1); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .hover_black_right .hover_more { background : #293490; border : none; } @media (min-width: 641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division5A_backImg Tablet */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division5A_backImg { margin-top : 2%; } #division5A_backImg .backimage_subtitle { font-size : calc(6px + 1.4vw); color : #0003; display : block; } #division5A_backImg .backimage_title { font-size : calc(17px + 1.9vw); color : #0080CC; display : block; } #division5A_backImg .Wrap { margin-top : 25px; } #division5A_backImg .Wrap .TableWrap { display : block; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap { display : none; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap { width : 100%; height : auto; display : block; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_engtitleWrap { display : none; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents { width : 100%; height : auto; display : block; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap { top : 0%; padding : 0; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap .leftWrap { width : 100%; margin-top : 0%; top : 30%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_number { font-size : calc(4.4vw + 5px); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_title { font-size : calc(1.5vw + 5px); margin-top : 4px; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more { bottom : 5%; transform : translate(-50%, -50%); padding : 13px 0; width : 100%; max-width : 80px; height : 57px; } #division5A_backImg .Wrap .backimage_01 .hover_black .HerfWrap .leftWrap { width : auto; text-align : center; position : absolute; left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : -20%; } #division5A_backImg .Wrap .backimage_01 .hover_black .HerfWrap p.hover_title { font-size : calc(6px + 1.2vw); } #division5A_backImg .Wrap .backimage_01 .hover_black .HerfWrap p.hover_more { left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : 30%; padding : 3% 0; } } @media (min-width: 0px) and (max-width:640px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division5A_backImg Mobile */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division5A_backImg { margin-top : 2%; } #division5A_backImg:before { height : 0; } #division5A_backImg .backimage_subtitle { font-size : calc(6px + 1.4vw); color : #0003; display : block; } #division5A_backImg .backimage_title { font-size : calc(17px + 1.9vw); color : #0080CC; display : block; } #division5A_backImg .Wrap { margin-top : 15px; } #division5A_backImg .Wrap .TableWrap { display : block; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_LeftWrap { display : none; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap { width : 100%; height : auto; display : block; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_engtitleWrap { display : none; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 { width : 90%; height : auto; position : relative; display : inline-block; float : left; margin : 2% 5%; overflow : hidden; padding-top : 70%; overflow : hidden; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:first-child { margin-left : 5%; margin-top : 0; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:last-child { margin-right : 5%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 img { position : absolute; left : 0; top : -50%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap { top : 13%; padding : 0; height : 90%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap .leftWrap { width : 100%; margin-top : 0%; top : 18%; left : 50%; top : 10%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_title { margin-top : 4px; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more { bottom : 45%; transform : translate(-50%, -50%); padding : 13px 0; width : 30%; max-width : 120px; height : 57px; } #division5A_backImg .Wrap .backimage_01 .hover_black .HerfWrap p.hover_title { font-size : calc(6px + 1.2vw); } #division5A_backImg .Wrap .backimage_01 .hover_black .HerfWrap p.hover_more { left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : 0%; padding : 3% 0; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_number { font-size : calc(11.4vw + 2px); display : inline-block; color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; text-align : left; line-height : 1.2; transition : 0s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_number { color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .hover_black_table .hover_black_left .hover_number { color : rgba(255,255,255,1); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black { background : rgba(0,0,0,0.4); padding-top : 0; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black { background : rgba(0,0,0,0.4); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_title { font-size : calc(4.5vw + 3px); color : #fff; font-weight : 500; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more { padding : 10% 0; background-color : rgba(67,116,217,0.5); font-size : 15px; color : #fff; text-align : center ; display : block; transition : 0.6s; border : 2px solid rgba(67,116,217,0.5); padding : 12% 0 8% 0; margin-top : 11%; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:hover { color : #fff; transition : 0.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_more { background-color : rgba(67,116,217,0.5); transition : 0.6s; padding : 12% 0 8% 0; border : 2px solid rgba(67,116,217,0.5); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:hover { background-color : rgba(67,116,217,0.5); transition : 0.6s; padding : 12% 0 8% 0; border : 2px solid rgba(67,116,217,0.5); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:after { content : '+'; font-size : calc(10vw + 15px); position : absolute; color : #fff; padding-left : 5px; left : 50%; top : 50%; transform : translate(-50%, -50%); margin-top : -10px; opacity : 0.6; transition : 0.6s; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01 .hover_black .HerfWrap p.hover_more:hover:after { color : #fff; opacity : 0.6 !important; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .HerfWrap p.hover_more:after { margin-top : -10px; opacity : 0.6; font-size : 55px; } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover img { transform : scale(1.2); } #division5A_backImg .Wrap .TableWrap .division5A_backImg_RightWrap .RightWrap_contents .backimage_01:hover .hover_black .hover_black_right .hover_more { background : #293490; border : none; } }