/* A A A : A : A : A : */ #dhnco_sub2-4 { width : 100%; height : auto; text-align : center; margin : clamp(40px,8vw,80px) 0;} #dhnco_sub2-4 .onlyPC { display : inline-block; } #dhnco_sub2-4 .logoBox { width : 100%; height : auto; } #dhnco_sub2-4 .logoBox img { width : clamp(35px,10vw,65px); height : auto; } #dhnco_sub2-4 .sectionTit { width : auto; height : auto; display : inline-flex; flex-direction : column; align-items : center; margin-top : clamp(3px,1vw,8px); padding : 0 8px; } .dhncoSub .sectionTit.noMargin { display : flex;} .dhncoSub .sectionTit.noMargin .underLine { width : clamp(40px,5vw,90px); height : clamp(4px,1vw,6px); background : #31a09b; } #dhnco_sub2-4 .sectionTit p { font-size : clamp(23px,2vw,36px); font-weight : 700; color : #31a09b80; line-height : 2.1em; word-break : keep-all; } #dhnco_sub2-4 .sectionTit .titB { font-size : clamp(20px,2vw,29px); font-weight : 700; color : #31a09b; line-height : 1em; margin : 0.7em 0 0.4em; } #dhnco_sub2-4 .sectionTit .subTit { font-size : clamp(16px,1.5vw,18px); font-weight : 400; color : #777; line-height : 1em; margin : 0 0 1em; } #dhnco_sub2-4 .sectionTit .underLine { width : 50%; height : clamp(4px,1vw,6px); background : #31a09b; } #dhnco_sub2-4 .grayBackWrap { width : 100%; height : auto; background : #EEEFEF; padding : clamp(40px,8vw,80px) 8px;} #dhnco_sub2-4 .whiteBackWrap { width : 100%; height : auto; background : #fff; padding : clamp(40px,8vw,80px) 8px;} #dhnco_sub2-4 .firstWrap { margin-top : clamp(40px,8vw,80px); } #dhnco_sub2-4 .listWrap { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : center; max-width : 1400px; margin : 0 auto; } #dhnco_sub2-4 .listWrap.marginTop { margin-top : clamp(20px,3vw,30px);} #dhnco_sub2-4 .listWrap.reverse { flex-direction : row-reverse;} #dhnco_sub2-4 .listWrap .listBox { width : clamp(280px,21vw,400px); height : auto; display : flex; align-items : stretch; flex-grow : 1; max-width : 400px; } #dhnco_sub2-4 .listWrap .listBox.center { justify-content : center;} #dhnco_sub2-4 .listWrap .listBox .stepBox { width : clamp(50px,9vw,100px); height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; padding : clamp(20px,2vw,25px) 0; } #dhnco_sub2-4 .listWrap .listBox .stepBox.a { background : #43D1A1; } #dhnco_sub2-4 .listWrap .listBox .stepBox.b { background : #9ED443; } #dhnco_sub2-4 .listWrap .listBox .stepBox.c { background : #40D4E2; } #dhnco_sub2-4 .listWrap .listBox .stepBox.d { background : #41A7E1; } #dhnco_sub2-4 .listWrap .listBox .stepBox.e { background : #4383DD; } #dhnco_sub2-4 .listWrap .listBox .stepBox.f { background : #7C51AF; } #dhnco_sub2-4 .listWrap .listBox .stepBox.g { background : #B2427A; } #dhnco_sub2-4 .listWrap .listBox .stepBox.h { background : #7a0060; } #dhnco_sub2-4 .listWrap .listBox .stepBox .step { font-size : clamp(14px,2vw,16px); color : #fff; font-weight : 700; line-height : 1em; } #dhnco_sub2-4 .listWrap .listBox .stepBox .num { font-size : clamp(18px,5vw,40px); color : #fff; font-weight : 700; line-height : 1em; } #dhnco_sub2-4 .listWrap .listBox .textWrap { width : 70%; flex-grow : 1; background : #fff; padding : clamp(15px,1vw,20px); display : flex; flex-direction : column; justify-content : center; } #dhnco_sub2-4 .listWrap .listBox .textWrap.white { background : #f7f7f7;} #dhnco_sub2-4 .listWrap .listBox .textWrap .tit { font-size : clamp(16px,2vw,20px); font-weight : 700; text-align : left; word-break : keep-all; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.a { color : #43D1A1; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.b { color : #9ED443; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.c { color : #40D4E2; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.d { color : #41A7E1; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.e { color : #4383DD; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.f { color : #7C51AF; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.g { color : #B2427A; } #dhnco_sub2-4 .listWrap .listBox .textWrap .tit.h { color : #7a0060; } #dhnco_sub2-4 .listWrap .listBox .textWrap .textBox p { font-size : clamp(14px,2vw,17px); word-break : keep-all; text-align : left; text-indent : -0.6em; margin-left : 0.6em; } #dhnco_sub2-4 .listWrap .arrowBox { width : clamp(25px,2vw,35px); display : flex; align-items : center; margin : clamp(8px,1vw,12px); } #dhnco_sub2-4 .listWrap .arrowBox.PCa { transform : rotate(-90deg);} #dhnco_sub2-4 .listWrap .arrowBox.PCb { transform : rotate(90deg);} #dhnco_sub2-4 .listWrap .arrowBox.PCc { transform : rotate(180deg);} #dhnco_sub2-4 .listWrap .arrowBox img { width : 100%; height : auto;} @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #dhnco_sub2-4 .onlyPC { display : none; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #dhnco_sub2-4 .onlyPC { display : none; } #dhnco_sub2-4 .sectionTit p { line-height : 1.3em; margin : 0.3em 0 0.5em;} #dhnco_sub2-4 .listWrap { flex-direction : column; align-items : center; } #dhnco_sub2-4 .listWrap.reverse { flex-direction : column;} #dhnco_sub2-4 .listWrap .listBox { width : 100%; flex-direction : column;} #dhnco_sub2-4 .listWrap .listBox .stepBox { width : 100%; padding : 10px 0;} #dhnco_sub2-4 .listWrap .listBox .textWrap { width : 100%; } #dhnco_sub2-4 .listWrap .listBox.center { width : auto;} #dhnco_sub2-4 .listWrap .arrowBox { margin : 15px;} #dhnco_sub2-4 .listWrap .arrowBox.a { transform : rotate(90deg);} #dhnco_sub2-4 .listWrap .arrowBox.b { transform : rotate(-90deg);} }