/* A A A : A : A : A : */ /* lending1 */ #lending1 { width : 100%; height : auto; position : relative; padding-top : 45%; background-image : url("../../Image/lending_section1.jpg"); background-size : cover; background-repeat : no-repeat; background-position: center;} #lending1 .centerWrap { width : 100%; height : 100%; max-width : 1600px; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); display : flex; align-items : center; flex-wrap : wrap; align-content : center; } #lending1 .centerWrap .textWrap { width : 100%; height : auto; margin-bottom : clamp(20px,2.5vw,80px); text-align : center; } #lending1 .centerWrap .textWrap .text { font-size : clamp(20px,2.5vw,32px); color : #fff; font-weight : 500; line-height : 1.8em; } #lending1 .centerWrap .textWrap .text span { font-size : inherit; color : #fff000; } #lending1 .centerWrap .textWrap .text span.strong_text { padding : 3px 8px; background : #980000; line-height : 2em; } #lending1 .centerWrap .textWrap .text span.large_text { font-size : clamp(20px,3.3vw,50px); text-shadow : 5px 5px 5px #333; } #lending1 .centerWrap .circleWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; } #lending1 .centerWrap .circleWrap .divisionWrap { width : 40%; height : auto; display : flex; align-items : center; justify-content: space-around; max-width : 500px; } #lending1 .centerWrap .circleWrap .divisionWrap .circle { width : clamp(160px,13vw,200px); height : clamp(160px,13vw,200px);border-radius : 50%; background : #ffffffad; display : flex; align-items : center; justify-content : center; } #lending1 .centerWrap .circleWrap .divisionWrap .circle p { font-size : clamp(17px,1.5vw,22px); font-weight : 500; text-align : center; } #lending1 .centerWrap .circleWrap .divisionWrap .circle p span { font-size : inherit; color : #e61e25; } /* lending2 */ /* A A A : A : A : A : */ #lending2 { width : 100%; height : auto; background : #cbcbcb; text-align : center; padding : clamp(40px,9vw,80px) 10px; } #lending2 .sectionWrap { width : 100%; height : auto; max-width : 1600px; display : inline-block; } #lending2 .sectionWrap .textWrap { width : auto; height : auto; display : inline-block; border : 1px solid #494645; padding : clamp(20px,3vw,40px) clamp(60px,6vw,110px); margin-bottom : clamp(30px,3vw,40px); } #lending2 .sectionWrap .textWrap p { font-size : clamp(17px,2vw,35px); font-weight : 500; text-align : center; color : #494645; } #lending2 .sectionWrap .qnaWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; } #lending2 .sectionWrap .qnaWrap p { font-size : clamp(17px,3vw,34px); font-weight : 700; color : #0068B5; } #lending2 .sectionWrap .qnaWrap p:last-child { margin-right : 0;} #lending2 .sectionWrap .qnaWrap a { padding : 10px 3%; border : 2px solid #0068B5;font-size : clamp(17px,2vw,35px); background : #0068B5; color : #fff; margin-top : 10px; font-weight : 500; transition : 0.6s; } #lending2 .sectionWrap .qnaWrap a:hover { background : #333; color : #fff000; border : 2px solid #333; transition : 0.6s; } /* lending3 */ #lending3 { width : 100%; height : auto; text-align : center; padding : clamp(40px,8vw,80px) 20px; } #lending3 .sectionTitBox { width : 100%; height : auto; margin-bottom : clamp(40px,8vw,80px); } #lending3 .sectionTitBox .tit { font-size : clamp(28px,2vw,35px); font-weight : 500; text-align : center; color : #494645; } #lending3 .sectionMainImgWrap { width : 100%; height : auto; display : flex; align-items : stretch; max-width : 1200px; margin : 0 auto; padding : clamp(40px,8vw,80px) 0px 0; } #lending3 .sectionMainImgWrap.first { padding : 0; } #lending3 .sectionMainImgWrap .imgBox { width : 40%; height : auto; } #lending3 .sectionMainImgWrap .imgBox img { width : 100%; height : 100%; object-fit : cover; } #lending3 .sectionMainImgWrap .textBox { width : 60%; height : auto; background : #F7F7F7; text-align : left; display : flex; align-content : center; flex-direction : column; padding : clamp(20px,3vw,30px) clamp(20px,3vw,50px);} #lending3 .sectionMainImgWrap .textBox .tit { font-size : clamp(20px,2vw,26px); font-weight : 500; word-break : keep-all; line-height : 1em; margin-bottom : 0.8em; } #lending3 .sectionMainImgWrap .textBox .text { font-size : clamp(18px,1.5vw,20px); word-break : keep-all; color : #666; line-height : 2em; margin-left : 1.7em; text-indent : -1em; } #lending3 .sectionMainImgWrap .textBox .text span { font-size : xx-small; margin-right : 0.6em; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #lending1 { padding-top : 60%;} #lending1 .centerWrap .textWrap { margin-bottom : 30px;} #lending1 .centerWrap .circleWrap .divisionWrap .circle {width : clamp(140px,13vw,250px); height : clamp(140px,13vw,250px);} #lending1 .centerWrap .circleWrap .divisionWrap .circle p { font-size: clamp(15px,1.5vw,25px);} #lending3 .sectionMainImgWrap { flex-direction : column; align-items : center;} #lending3 .sectionMainImgWrap .imgBox { width : 75%;} #lending3 .sectionMainImgWrap .textBox { width : 75%;} #lending1 .centerWrap .circleWrap .divisionWrap { width : 45%;} #lending1 .centerWrap .circleWrap .divisionWrap .circle { width : clamp(140px,15vw,250px); height : clamp(140px,15vw,250px)} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #lending1 { padding : 19% 0; display : flex; align-items : center; justify-content : center; } #lending1 .centerWrap { top : unset; left : unset; transform : unset; position : relative; } #lending1 .centerWrap .textWrap { margin-bottom : 30px;} #lending1 .centerWrap .textWrap .text { width : 95%; word-break : keep-all; font-size : 17px; margin : 0 auto;} #lending1 .centerWrap .circleWrap { flex-direction : column;} #lending1 .centerWrap .circleWrap .divisionWrap { width : 100%; justify-content : center; } #lending1 .centerWrap .circleWrap .divisionWrap:last-child { margin-top : 20px;} #lending1 .centerWrap .circleWrap .divisionWrap .circle { width : 130px; height : 130px; } #lending1 .centerWrap .circleWrap .divisionWrap .circle:first-child { margin-right : 10px;} #lending1 .centerWrap .circleWrap .divisionWrap .circle p { font-size : 14px;} #lending2 .sectionWrap .textWrap { padding : 20px 10px; margin-bottom : 10px;} #lending2 .sectionWrap .textWrap p { font-size : 16px; word-break : keep-all;} #lending2 .sectionWrap .qnaWrap { flex-direction : column;} #lending3 .sectionTitBox .tit { font-size : 20px; } #lending3 .sectionMainImgWrap { flex-direction : column; align-items : center;} #lending3 .sectionMainImgWrap .imgBox { width : 100%;} #lending3 .sectionMainImgWrap .textBox { width : 100%;} #lending3 .sectionMainImgWrap .textBox { padding : 20px 10px;} #lending3 .sectionMainImgWrap .textBox .text { font-size : 14px;} }