/* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg PC */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_backImg { width : 100%; height : 100%; text-align : center; display : flex; flex-direction : column; align-items : center; font-size : min(1.6vw,20px); font-family : "Noto Sans Kr"; justify-content : center;} #division4A_backImg .backimage_subtitle { font-size : 1em; font-weight : 900; color : #0003; font-family : inherit;} #division4A_backImg .backimage_title { font-size : 2.1em; font-weight : 700; color : #000; } #division4A_backImg .Wrap { width : calc(100% - 2em); height : auto; max-width : 1200px; margin-top : 2em; display : grid; gap : 1em; grid-template-columns: repeat(4, calc(calc(100% - 3em) / 4)); justify-items: center; justify-content: space-between;} #division4A_backImg .Wrap .backimage_01 { width : 100%; height : auto; position : relative; display : flex;} #division4A_backImg .Wrap .backimage_01 .hover_black { width : 100%; height : auto; background : rgba(0,0,0,0.25); aspect-ratio : 288 / 384; transition : 0.6s; } #division4A_backImg .Wrap .backimage_01 .hover_black .overflowWrap { width : 100%; height : 100%; position : relative; overflow : hidden;} #division4A_backImg .Wrap .backimage_01 .hover_black img { width : 100%; height : 100%; object-fit : cover; transition : 0.6s; filter : brightness(0.7);} #division4A_backImg .Wrap .backimage_01:hover .hover_black img { filter : brightness(0.5); transition : .6s;} #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap { width : auto; display : flex; position : absolute; bottom : 5%; left : 5%; flex-direction : column; align-items : center; 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); } /* BUILDER CSS */ #division4A_backImg[view-mode='tab'] .backimage_subtitle { font-size : 20px; } #division4A_backImg[view-mode='tab'] .backimage_title { font-size : 36px; } #division4A_backImg[view-mode='tab'] .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[view-mode='tab'] .Wrap .backimage_01 .hover_black img { filter : brightness(0.5); transform : scale(1.2); transition : .6s;} #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number { font-size : 35px; } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number { color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .leftWrap .hover_title { color : #fff000;} #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : 0%; } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .leftWrap .hover_title { font-size : 18px; } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .hover_more { right : 50%; bottom : unset; transform: translate(50%, -50%); padding : 3% 0; top : 80%; color : #fff000; } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01:hover .hover_black .hover_more { top : 80%; bottom : unset; transform: translate(50%, -50%);} #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; border : 2px solid rgba(0,173,186,1); } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,1); } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01:hover .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,1); } #division4A_backImg[view-mode='tab'] .Wrap .backimage_01 .hover_black .hover_more:after { margin-top : -10px; opacity : .6; font-size : 35px; color : #fff;} #division4A_backImg[view-mode='tab'] .Wrap .backimage_01:hover .hover_black .hover_more:after { margin-top : -10px; opacity : .6; font-size : 35px; color : #fff;} #division4A_backImg[view-mode='tab'] .Wrap .backimage_01:hover .hover_black .hover_more:after { font-size : 35px; } #division4A_backImg[view-mode='mobile'] .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[view-mode='mobile'] .Wrap .backimage_01 .hover_black img { filter : brightness(0.5); transform : scale(1.2); transition : .6s;} #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number { font-size : 35px; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number { color : rgba(255,255,255,1); -webkit-text-stroke : 0px #000; text-shadow : 0px 0px 5px #fff; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_title { color : #fff000;} #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : 0%; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_title { font-size : calc(6px + 1.2vw); } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .hover_more { right : 50%; bottom : unset; transform: translate(50%, -50%); padding : 3% 0; top : 80%; color : #fff000; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01:hover .hover_black .hover_more { top : 80%; bottom : unset; transform: translate(50%, -50%);} #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; border : 2px solid rgba(0,173,186,1); } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,1); } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01:hover .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,1); } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .hover_more:after { margin-top : -10px; opacity : .6; font-size : 35px; color : #fff;} #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01:hover .hover_black .hover_more:after { margin-top : -10px; opacity : .6; font-size : 35px; color : #fff;} #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01:hover .hover_black .hover_more:after { font-size : 35px; } #division4A_backImg[view-mode='mobile']:before { height : 0; } #division4A_backImg[view-mode='mobile'] .backimage_subtitle { font-size : 15px; } #division4A_backImg[view-mode='mobile'] .backimage_title { font-size : 24px; } #division4A_backImg[view-mode='mobile'] .Wrap { margin-top : 15px; grid-template-columns: repeat(2, calc(calc(100% - 1em) / 2)); max-width : 400px;} #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 { width : 100%; } #division4A_backImg[view-mode='mobile'] .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[view-mode='mobile'] .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[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_number.hover_number_sp { margin-left : 0%; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .leftWrap .hover_title { color : #fff000; font-weight : 500; font-size : 17px; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .hover_more:after { margin-top : -10px; opacity : 0.2; font-size : 25px; } #division4A_backImg[view-mode='mobile'] .Wrap .backimage_01 .hover_black .hover_more:after { content : '+'; font-size : 35px; 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[view-mode='mobile'] .Wrap .backimage_01:hover .hover_black .hover_more:after { margin-top : -10px; opacity : 0.3; font-size : 35px; } @media (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg Tablet */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #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 img { filter : brightness(0.5); transform : scale(1.2); transition : .6s;} #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number { font-size : 35px; } #division4A_backImg .Wrap .backimage_01 .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 { color : #fff000;} #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 : unset; transform: translate(50%, -50%); padding : 3% 0; top : 80%; color : #fff000; } #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more { top : 80%; bottom : unset; transform: translate(50%, -50%);} #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; border : 2px solid rgba(0,173,186,1); } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,1); } #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more { background-color : rgba(0,173,186,1); transition : 0.6s; padding : 11% 0 9% 0; border : 2px solid rgba(0,173,186,1); } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:after { margin-top : -10px; opacity : .6; font-size : 35px; color : #fff;} #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more:after { margin-top : -10px; opacity : .6; font-size : 35px; color : #fff;} #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more:after { font-size : 35px; } } @media (max-width:640px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg Mobile */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4A_backImg:before { height : 0; } #division4A_backImg .backimage_subtitle { font-size : calc(10px + 1.4vw); } #division4A_backImg .backimage_title { font-size : calc(17px + 1.9vw); } #division4A_backImg .Wrap { margin-top : 15px; grid-template-columns: repeat(2, calc(calc(100% - 1em) / 2)); max-width : 400px;} #division4A_backImg .Wrap .backimage_01 { width : 100%; } #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:after { margin-top : -10px; opacity : 0.2; font-size : 25px; } #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:after { content : '+'; font-size : 35px; 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; } } @media (max-width:300px) { /* A A A : A : A : A : */ #division4A_backImg .backimage_subtitle { font-size : calc(10px + 1.4vw);} #division4A_backImg .Wrap { width : 90%; gap : 2em; grid-template-columns: repeat(2, calc(calc(100% - 2em) / 2));} #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_number { font-size : 30px;} #division4A_backImg .Wrap .backimage_01 .hover_black .leftWrap .hover_title { font-size : 14px;} #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more { font-size : 12px; max-width : 65px; padding : 10% 0 7%;} #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more { padding : 10% 0 7%;} #division4A_backImg .Wrap .backimage_01 .hover_black .hover_more:after { font-size : 20px;} #division4A_backImg .Wrap .backimage_01:hover .hover_black .hover_more:after { font-size : 20px; } }