/* A A A : A : A : A : */ .storage_sub2 { width : 100%; height : auto; padding : clamp(45px,5vw,80px) 0; } /* imgWrap */ .storage_sub2 .imgWrap { width : 80%; height : auto; padding-top : 30%; position : relative; max-width : 1200px; margin : 0 auto clamp(35px,5vw,70px); } .storage_sub2 .imgWrap .backImg { width : 98%; height : 85%; position : absolute; top : 0; left : 0; } .storage_sub2 .imgWrap .imgWrapBack { width : 100%; height : 100%; object-fit : cover; position : absolute; top : 0; left : 0; } .storage_sub2 .imgWrap .infoBox { width : 50%; height : auto; display : inline-flex; position : absolute; bottom : 0; right : 0; background : #0d78bc; flex-direction : column; padding : clamp(25px,2vw,35px) clamp(20px,2vw,30px); } .storage_sub2 .imgWrap .infoBox.sub2-3 { width : 55%; } .storage_sub2 .imgWrap .infoBox .infoTitBox { width : 100%; height : auto; } .storage_sub2 .imgWrap .infoBox .infoTitBox .tit { font-size : clamp(25px,2vw,30px); color : #fff; font-weight : 500; } .storage_sub2 .imgWrap .infoBox .infoTextBox { width : auto; height : auto; display : inline-flex; } .storage_sub2 .imgWrap .infoBox .infoTextBox .text { font-size : clamp(15px,1.1vw,18px); color : #fff; word-break : keep-all; } .storage_sub2 .imgWrap .infoBox img { width : 20%; height : auto; position : absolute; bottom : 7%; right : 2%; mix-blend-mode : overlay; filter : opacity(0.6); } .storage_sub2 .imgWrap .ps { font-size : clamp(13px,1.1vw,16px); color : #fff; margin-left : 2em; text-indent : -1.3em; margin-top : 0.3em; word-break : keep-all; } /* numBox */ .storage_sub2 .numBox { width : 100%; height : auto; margin-bottom : clamp(25px,4vw,60px); } .storage_sub2 .numBox .num { width : auto; font-size : clamp(17px,1.1vw,20px); color : #0d78bc; font-weight : 700; line-height : 1em; display : inline-flex; flex-direction : column; } .storage_sub2 .numBox .num span { width : 100%; height : 2px; background : #0d78bc; margin-top : 0.3em; } .storage_sub2 .numBox .numTit { font-size : clamp(20px,1.5vw,25px); font-weight : 700; line-height : 1em; margin : 0.8em 0 0.5em; } .storage_sub2 .numBox .numText { font-size : clamp(17px,1.1vw,20px); color : #605f5f; word-break : keep-all; line-height : 1.5em; } .storage_sub2 .numBox .numLink { font-size : clamp(17px,1.1vw,20px); color : #fff; background : #0d78bc; transition : .3s; display : inline-block; padding : 0.5em 1em; margin-top : 0.6em; line-height : 1em; } .storage_sub2 .numBox .numLink:hover { background : #14a4ff; transition : .3s; } .storage_sub2 .numBox .numTextIndent { font-size : clamp(17px,1.1vw,20px); color : #605f5f; word-break : keep-all; margin-left : 0.7em; } .storage_sub2 .numBox .numTextIndent.margin { margin-top : 0.3em; } .storage_sub2 .numBox .bold { font-size : inherit; color : #333; font-weight : 500; } .storage_sub2 .numBox .underLine { font-size : inherit; color : #605f5f; text-decoration : underline; } .storage_sub2 .numBox .numText.indentA { text-indent : -1em; margin-left : 1em; } /* importantWrap */ .storage_sub2 .importantWrap { width : 100%; height : auto; } .storage_sub2 .importantWrap .importantTitBox { width : 100%; height : auto; border-bottom : 1px solid #000; } .storage_sub2 .importantWrap .importantTitBox .importantTit { font-size : clamp(17px,1.1vw,20px); font-weight : 700; } .storage_sub2 .importantWrap .importantTitBox .importantTit .mark { font-size : clamp(25px,2vw,30px); font-weight : 700; color : #e94a44; } .storage_sub2 .importantWrap .importantTextBox { width : 100%; height : auto; padding : clamp(10px,2vw,15px) 0 0; } .storage_sub2 .importantWrap .importantTextBox .importantText { font-size : clamp(17px,1.1vw,20px); color : #605f5f; margin-left : 2.4em; text-indent : -1.4em; word-break : keep-all; } /*gridWrap*/ .storage_sub2 .gridWrap { width : 100%; height : auto; } .storage_sub2 .gridWrap .gridTit { font-size : clamp(19px,1.5vw,23px); font-weight : 500; display : inline-block; background : #0d78bc; padding : 0.3em 1em; color : #fff; } .storage_sub2 .gridWrap .girdBox { width : 100%; height : auto; display : flex; background : #fff; flex-direction : column; padding : clamp(20px,1.5vw,25px); } .storage_sub2 .gridWrap .girdBox .gridItem { width : 100%; height : 100%; background : #fff; display : flex; align-items : center; margin-bottom : 1.8em; } .storage_sub2 .gridWrap .girdBox .gridItem:last-child { margin-bottom : 0; } .storage_sub2 .gridWrap .girdBox .gridItem .itemTit { font-size : clamp(17px,1.1vw,20px); font-weight : 600; line-height : 1em; color : #666; margin-right : 0.8em; } .storage_sub2 .gridWrap .girdBox .gridItem .line { width : clamp(12px,1.5vw,20px); height : 2px; background : #666; margin : clamp(8px,1vw,13px) 0 clamp(14px,1vw,19px); display : none;} .storage_sub2 .gridWrap .girdBox .gridItem .itemText { font-size : clamp(16px,1.1vw,18px); color : #605f5f; word-break : keep-all; flex-grow : 1; } .storage_sub2 .colorBackWrap { width : 100%; height : auto; background : #70beeb26; padding : clamp(35px,5vw,70px) 0;} .storage_sub2 .colorBackWrap .colorBackInnerWrap { width : 80%; height : auto; max-width : 1200px; margin : 0 auto; padding-left : clamp(20px,2.7vw,50px); } .storage_sub2 .leftLineWrap { width : 100%; height : auto; } .storage_sub2 .leftLineWrap .leftLineInnerWrap { width : 80%; height : auto; max-width : 1200px; margin : 0 auto; padding : clamp(35px,5vw,70px) 0 0 clamp(20px,2.7vw,50px); border-left : 10px solid #70beeb26; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* imgWrap */ .storage_sub2 .imgWrap { width : 65%; padding-top : 45%; } .storage_sub2 .imgWrap.sub2-2 { width : 70%; padding-top : 50%; } .storage_sub2 .imgWrap .infoBox { width : 83%; padding : clamp(20px,2.5vw,25px) clamp(15px,2.3vw,20px); } .storage_sub2 .imgWrap .infoBox.sub2-3 { width : 83%; } .storage_sub2 .imgWrap .infoBox .infoTitBox .tit { font-size : clamp(20px,2.5vw,25px); } .storage_sub2 .imgWrap .infoBox .infoTextBox .text { font-size : clamp(14px,1.5vw,15px);} .storage_sub2 .imgWrap .infoBox img { min-width : 70px; max-width : 85px; } /* numBox */ .storage_sub2 .numBox .num { font-size : clamp(16px,1.5vw,17px);} .storage_sub2 .numBox .numTit { font-size : clamp(18px,2.5vw,20px); } .storage_sub2 .numBox .numText { font-size : clamp(16px,1.5vw,17px);} .storage_sub2 .numBox .numLink { font-size : clamp(16px,1.5vw,17px); margin-top : 0.7em; } .storage_sub2 .numBox .numTextIndent { font-size : clamp(16px,1.5vw,17px);} /* importantWrap */ .storage_sub2 .importantWrap .importantTitBox .importantTit { font-size : clamp(16px,1.5vw,17px);} .storage_sub2 .importantWrap .importantTitBox .importantTit .mark { font-size : clamp(20px,2.5vw,25px);} .storage_sub2 .importantWrap .importantTextBox .importantText { font-size : clamp(16px,1.5vw,17px);} /* gridWrap */ .storage_sub2 .gridWrap .gridTit { font-size : clamp(17px,2.5vw,19px);} .storage_sub2 .gridWrap .girdBox { padding : 25px;} .storage_sub2 .gridWrap .girdBox .gridItem .itemTit { font-size : clamp(16px,1.8vw,17px);} .storage_sub2 .gridWrap .girdBox .gridItem .itemText { font-size : clamp(14px,1.8vw,16px);} .storage_sub2 .colorBackWrap .colorBackInnerWrap { width : 90%; padding-left : 0;} .storage_sub2 .leftLineWrap .leftLineInnerWrap { width : calc(90% + 27px); padding : clamp(50px,5vw,80px) 0 0 20px; border-left : 7px solid #70beeb26; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* imgWrap */ .storage_sub2 .imgWrap { width : 90%; display : flex; flex-direction : column; padding-top : 0; } .storage_sub2 .imgWrap .backImg { width : 95%; height : 70vw; position : relative; max-height : 280px; margin : 0 auto; } .storage_sub2 .imgWrap .infoBox { width : 100%; position : relative; padding : clamp(15px,5vw,20px); } .storage_sub2 .imgWrap .infoBox.sub2-3 { width : 100%; } .storage_sub2 .imgWrap .infoBox .infoTitBox .tit { font-size : clamp(18px,5vw,20px); margin-bottom : clamp(5px,1.7vw,10px); } .storage_sub2 .imgWrap .infoBox .infoTextBox .text { font-size : clamp(14px,5vw,15px);} .storage_sub2 .imgWrap .infoBox img { filter : opacity(0.4); } /* numBox */ .storage_sub2 .numBox .num { font-size : clamp(12px,3.5vw,14px);} .storage_sub2 .numBox .numTit { font-size : clamp(17px,5vw,18px); margin : 0.8em 0 0.4em; } .storage_sub2 .numBox .numText { font-size : clamp(15px,5vw,16px);} .storage_sub2 .numBox .numLink { font-size : clamp(15px,5vw,16px); margin-top : 0.5em; } .storage_sub2 .numBox .numTextIndent { font-size : clamp(15px,5vw,16px);} .storage_sub2 .numBox .flexM { display : flex; flex-direction : column;} .storage_sub2 .numBox .numTextIndent.flexM .bold { margin-left : -0.7em;} .storage_sub2 .numBox .numTextIndent.flexM.marginM { margin-top : 0.3em;} .storage_sub2 .numBox .numText.flexM { margin-left : 1em; } .storage_sub2 .numBox .numText.flexM .bold { margin-left : -0.7em; } .storage_sub2 .numBox .numText.flexM.noIndent { margin-left : 1em;} .storage_sub2 .numBox .numText.flexM.noIndent .bold { margin-left : -1em;} /* importantWrap */ .storage_sub2 .importantWrap .importantTitBox .importantTit { font-size : clamp(15px,5vw,16px);} .storage_sub2 .importantWrap .importantTitBox .importantTit .mark { font-size : clamp(18px,5vw,20px);} .storage_sub2 .importantWrap .importantTextBox .importantText { font-size : clamp(15px,5vw,16px);} /* gridWrap */ .storage_sub2 .gridWrap .gridTit { font-size : clamp(16px,5vw,17px);} .storage_sub2 .gridWrap .girdBox .gridItem { flex-direction : column; align-items : flex-start;} .storage_sub2 .gridWrap .girdBox .gridItem .itemTit { font-size : clamp(14px,5vw,16px);} .storage_sub2 .gridWrap .girdBox .gridItem .line { margin : 8px 0 8px;} .storage_sub2 .gridWrap .girdBox .gridItem .itemText { font-size : clamp(13px,4vw,14px); margin-top : 0.3em;} .storage_sub2 .colorBackWrap .colorBackInnerWrap { width : 90%; padding-left : 0;} .storage_sub2 .leftLineWrap .leftLineInnerWrap { width : 90%; padding : clamp(35px,5vw,80px) 0 0 0; border-left : none;}