/* A A A : A : A : A : */ .dhncoSub { width : 100%; height : auto; text-align : center; margin : clamp(40px,5vw,80px) 0;} .dhncoSub .PCx { display : none; } .dhncoSub .logoBox { width : 100%; height : auto; } .dhncoSub .logoBox img { width : clamp(35px,10vw,65px); height : auto; } .dhncoSub .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; } .dhncoSub .sectionTit p { font-size : clamp(23px,2vw,36px); font-weight : 700; color : #31a09b80; line-height : 2.1em; word-break : keep-all !important; } .dhncoSub .sectionTit .titB { font-size : clamp(20px,2vw,29px); font-weight : 700; color : #31a09b; line-height : 1em; margin : 0.6em 0; word-break : keep-all !important; } .dhncoSub .sectionTit .underLine { width : 50%; height : clamp(4px,1vw,6px); background : #31a09b; } .dhncoSub .wrapTitBox { width : 100%; height : auto; display : flex; align-items : center; } .dhncoSub .wrapTitBefore { width : 5px; height : clamp(16px,2vw,18px); position : relative; background : #000; margin-right : 9px; } .dhncoSub .wrapTitBefore:before { content : ''; width : clamp(2px,1vw,3px); height : clamp(16px,2vw,18px); background-color : #666; right : -5px; top : 0; position : absolute; } .dhncoSub .wrapTit { font-size : clamp(18px,2vw,22px); font-weight : 500; line-height : 1em; } .dhncoSub .textWrap { width : 100%; display : flex; flex-direction : column; } .dhncoSub .textWrap .contFont { margin-top : 0; } .dhncoSub .firstWrap { margin-top : clamp(40px,3vw,50px); } .dhncoSub .sectionMainImgWrap { width : 100%; height : auto; display : flex; align-items : stretch; max-width : 1400px; margin : 0 auto; padding : clamp(40px,3vw,50px) 0px; } .dhncoSub .sectionMainImgWrap .imgBox { width : 40%; height : auto; } .dhncoSub .sectionMainImgWrap .imgBox img { width : 100%; height : auto; } .dhncoSub .sectionMainImgWrap .textBox { width : 60%; height : auto; background : #F7F7F7; text-align : left; display : flex; align-content : center; flex-wrap : wrap; padding : clamp(20px,3vw,30px) clamp(20px,3vw,50px);} .dhncoSub .sectionMainImgWrap .textBox .tit { font-size : clamp(20px,2vw,26px); font-weight : 500; word-break : keep-all; line-height : 1em; } .dhncoSub .sectionMainImgWrap .textBox .text { font-size : clamp(14px,1.5vw,18px); word-break : keep-all; margin : clamp(15px,2vw,25px) 0; color : #666; width : 100%; } .dhncoSub .sectionMainImgWrap .textBox .ps { font-size : clamp(14px,1.5vw,18px); word-break : keep-all; margin : clamp(8px,1vw,10px) 0 0; color : #319F9A; font-weight : 500; } .dhncoSub .sectionMainImgWrap .textBox .wrap { width : 100%; height : auto; display : flex; align-items : flex-start; flex-direction : column; } .dhncoSub .sectionMainImgWrap .textBox .wrap .wrapTit { font-size : clamp(14px,1.5vw,18px); line-height : 1em; padding : 0.5em 1.5em; display : inline-block; background : #319F9A; color : #fff; } .dhncoSub .sectionMainImgWrap .textBox .wrap .contWrap { width : auto; height : auto; display : inline-block; border : 1px solid #319F9A; padding : clamp(10px,3vw,15px) clamp(10px,3vw,30px); flex-wrap : wrap; justify-content : center; } .dhncoSub .sectionMainImgWrap .textBox .wrap .contWrap .pWrap { width : auto; display : inline-block; text-align : left; } .dhncoSub .sectionMainImgWrap .textBox .wrap .contWrap .pWrap:first-child { margin-right : clamp(10px,2vw,20px); } .dhncoSub .sectionMainImgWrap .textBox .wrap .contWrap .pWrap p { font-size : clamp(14px,1.5vw,18px); color : #666; } .dhncoSub .whiteBackWrap { width : 100%; height : auto; background : #fff; padding : clamp(40px,8vw,80px) 8px;} .dhncoSub .whiteBackWrap .contentBox { width : 100%; height : auto; max-width : 1200px; display : inline-block; } .dhncoSub .whiteBackWrap .contentBox .listWrap { width : 100%; display : flex; align-items : stretch; margin-bottom : clamp(18px,2vw,25px); } .dhncoSub .whiteBackWrap .contentBox .listWrap:last-child { margin-bottom : 0; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox { width : auto; display : flex; justify-content : center; align-items : stretch; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p { font-size : clamp(16px,1.5vw,20px); font-weight : 500; line-height : 1em; padding : 0 2em; background : #EDEEEE; display : flex; align-items : center; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox { width : 70%; flex-grow : 1; padding : clamp(8px,3vw,20px); text-align : left; border-bottom : 2px solid #EDEEEE; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox p { font-size : clamp(15px,1.5vw,18px); color : #666; word-break : keep-all; } /* sub5-2 */ .dhncoSub .iconListWrap { width : 100%; height : auto; max-width : 1300px; display : flex; margin : 0 auto; justify-content : center; flex-wrap : wrap; } .dhncoSub .iconListWrap .iconDivisionpWrap { width : auto; height : auto; display : flex; align-items : flex-start; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap { width : auto; height : auto; display : flex; justify-content : center; align-items : center; flex-direction : column; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconBox { width : clamp(30px,5vw,60px); height : clamp(60px,5vw,80px); margin-bottom : clamp(8px,1vw,10px); transition : .8s; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconBox.arrow { width : auto; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconBox img { width : 100%; height : 100%; object-fit : contain; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap:hover .iconBox { transform : rotateX(360deg); transition : .8s; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox { width : clamp(115px,10vw,150px); height : clamp(110px,10vw,130px); display : flex; align-items : center; justify-content : center; flex-direction : column; border-radius : 10px; transition : .5s; cursor : default; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox.blueA { background : #eeefef; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap:hover .iconTextBox.blueA { background : #f7f7f7; box-shadow : 0px 0px 10px 0px #a5a5a5; transition : .5s; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox.blueB { background : #e5e5e5; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap:hover .iconTextBox.blueB { background : #efefef; box-shadow : 0px 0px 10px 0px #7e7e7e; transition : .5s; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox.arrow { width : auto; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox p { font-size : clamp(15px,1.5vw,18px); color : #333; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap:hover .iconTextBox.blueB p { color : #000;} .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox.arrow img { width : clamp(25px,3vw,30px); margin : 0 clamp(8px,2vw,10px); } .dhncoSub .iconListWrap .iconDivisionpWrap .blankBox { width : clamp(25px,3vw,30px); margin : 0 clamp(8px,2vw,10px); display : none; } .dhncoSub .grayBackWrap { width : 100%; height : auto; background : #EEEFEF; padding : clamp(40px,8vw,80px) 8px; position : relative; } .dhncoSub .division2Wrap { width : 100%; height : auto; max-width : 1200px; display : flex; align-items : stretch; justify-content : center; margin : 0 auto; border : 1px solid #349894; } .dhncoSub .division2Wrap .divisionWrap { width : 50%; height : 100%; display : flex; flex-direction : column; padding : clamp(20px,3vw,40px) clamp(15px,3vw,60px); align-items : center; } .dhncoSub .division2Wrap .divisionWrap:first-child { border-right : 1px solid #349894; } .dhncoSub .division2Wrap .divisionWrap .wrapTit { width : auto; height : auto; display : inline-block; font-size : clamp(14px,1.5vw,18px); line-height : 1em; padding : 1em 1.8em; background : #319F9A; color : #fff; font-weight : 300; } .dhncoSub .division2Wrap .divisionWrap .testWrap { width : auto; display : inline-flex; flex-direction : column; justify-content : flex-start; align-items : flex-start; margin-top : clamp(10px,3vw,20px); } .dhncoSub .division2Wrap .divisionWrap .testWrap p { font-size : clamp(14px,1.5vw,18px); color : #666; text-align : left; word-break : keep-all; text-indent : -0.63em; margin-left : 0.63em; } .dhncoSub .gridTableWrap { width : 100%; height : auto; max-width : 1400px; display : inline-block; overflow-x : scroll; margin-top : clamp(30px,3vw,50px); } .dhncoSub .gridTableWrap::-webkit-scrollbar { height : 8px; } .dhncoSub .gridTableWrap::-webkit-scrollbar-thumb { background : #d3d3d3; border-radius : 5px; } .dhncoSub .gridTableWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .dhncoSub .gridTableWrap .gridTableBox { width : 1400px; height : auto; display : grid; grid-template-rows : repeat(29, minmax(40px, auto)); grid-template-columns : repeat(auto-fill, minmax(5%, auto)); border-left : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox { display : flex; align-items : stretch; justify-content : center; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridNameBoxWrap { width : 100%; display : flex; flex-wrap : wrap; justify-content : space-between; align-items : stretch; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName { width : 100%; font-size : clamp(14px,2vw,16px); font-weight : 500; color : #fff; background : #359993; display : flex; align-items : center; justify-content : center; border-right : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName1 { background : #332333; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName4, .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName5 { border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName4_1, .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName5_1 { width : 40%; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName4_2, .dhncoSub .gridTableWrap .gridTableBox .gridNameBox .gridName.gridName5_2 { width : 60%; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox.nameBox1, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox1 { grid-column : 1 / 6; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox.nameBox2, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox2 { grid-column : 6 / 9; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox.nameBox3, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox3 { grid-column : 9 / 11; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox.nameBox4 { grid-column : 11 / 16; } .dhncoSub .gridTableWrap .gridTableBox .gridNameBox.nameBox5 { width : 100%; grid-column : 16 / 21; margin-right : 0; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox4 { grid-column : 11 / 13; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox5 { grid-column : 13 / 16; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox6 { grid-column : 16 / 18; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox7 { grid-column : 18 / 21; } /*row 설정*/ .dhncoSub .gridTableWrap .gridTableBox .gridNameBox { grid-row : 1 / 3; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox1, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox2, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox3, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox4, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox5, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox6, .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox7 { grid-row : 3 / 6; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox { display : flex; align-items : stretch; justify-content : center; border-right : 1px solid #bdbdbd; border-bottom : 1px solid #bdbdbd; width : 100%; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox .gridValueBoxWrap { display : flex; flex-direction : column; justify-content : center; width : 100%; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox .gridValueBoxWrap p { flex-grow : 1; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox .gridValueBoxWrap p:last-child { border-bottom : none; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox .gridValue { font-size : clamp(14px,2vw,16px); font-weight : 400; color : #666; text-align : center; background : #F7F7F7; display : flex; align-items : center; justify-content : center; width : 100%; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox .gridValue.gridValue1 { width : calc((100% / 5) * 1 - 1.85px); border-right : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox .gridValueBoxWrap.gridValueBoxWrap1 { width : calc((100% / 5) * 4); } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox8 { grid-column : 1 / 2; grid-row : 6 / 19; width : calc(100% - 1px); margin-right : 0; border-right : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox9 { grid-column : 2 / 6; grid-row : 6 / 16; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; margin-bottom : 0; margin-left : -1px; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox9 p { padding-top : 0.5em; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox9 p:last-child { padding-bottom : 0.5em; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox10 { grid-column : 2 / 6; grid-row : 16 / 18; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; margin-left : -1px; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox10 p:first-child { padding : 0.5em 0 0; line-height : 1em; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox10 p:last-child { padding : 0 0 0.5em; line-height : 1em; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox11 { grid-column : 2 / 6; grid-row : 18 / 19; flex-wrap : wrap; margin-left : -1px; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox12 { grid-column : 6 / 9; grid-row : 6 / 19; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox13 { grid-column : 9 / 11; grid-row : 6 / 16; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox14 { grid-column : 9 / 11; grid-row : 16 / 17; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox15 { grid-column : 9 / 11; grid-row : 17 / 18; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox16 { grid-column : 9 / 11; grid-row : 18 / 19; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox17 { grid-column : 11 / 13; grid-row : 6 / 16; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox18 { grid-column : 11 / 13; grid-row : 16 / 17; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox19 { grid-column : 11 / 13; grid-row : 17 / 18; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox20 { grid-column : 11 / 13; grid-row : 18 / 19; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox21 { grid-column : 13 / 16; grid-row : 6 / 16; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox22 { grid-column : 13 / 16; grid-row : 16 / 17; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox23 { grid-column : 13 / 16; grid-row : 17 / 18; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox24 { grid-column : 13 / 16; grid-row : 18 / 19; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox25 { grid-column : 16 / 18; grid-row : 6 / 16; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox26 { grid-column : 16 / 18; grid-row : 16 / 17; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox27 { grid-column : 16 / 18; grid-row : 17 / 18; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox28 { grid-column : 16 / 18; grid-row : 18 / 19; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox29 { grid-column : 18 / 21; grid-row : 6 / 16; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox30 { grid-column : 18 / 21; grid-row : 16 / 17; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox31 { grid-column : 18 / 21; grid-row : 17 / 18; flex-wrap : wrap; border-bottom : 1px solid #bdbdbd;} .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox32 { grid-column : 18 / 21; grid-row : 18 / 19; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox33 { grid-column : 1 / 2; grid-row : 19 / 23; width : calc(100% - 1px); margin-right : 0; border-right : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox34 { grid-column : 2 / 6; grid-row : 19 / 23; flex-wrap : wrap; margin-bottom : 0; margin-left : -1px; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox34 p { padding-top : 0.5em; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox34 p:last-child { padding-bottom : 0.5em; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox35 { grid-column : 6 / 9; grid-row : 19 / 23; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox36 { grid-column : 9 / 11; grid-row : 19 / 23; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox37 { grid-column : 11 / 13; grid-row : 19 / 23; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox38 { grid-column : 13 / 16; grid-row : 19 / 23; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox39 { grid-column : 16 / 18; grid-row : 19 / 21; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox40 { grid-column : 16 / 18; grid-row : 21 / 23; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox41 { grid-column : 18 / 21; grid-row : 19 / 21; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox42 { grid-column : 18 / 21; grid-row : 21 / 23; flex-wrap : wrap; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox43 { grid-column : 1 / 2; grid-row : 23 / 30; width : calc(100% - 1px); margin-right : 0; border-right : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox44 { grid-column : 2 / 6; grid-row : 23 / 25; flex-wrap : wrap; margin-bottom : 0; margin-left : -1px; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox45 { grid-column : 2 / 6; grid-row : 25 / 27; flex-wrap : wrap; margin-bottom : 0; margin-left : -1px; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox46 { grid-column : 2 / 6; grid-row : 27 / 29; flex-wrap : wrap; margin-bottom : 0; margin-left : -1px; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox47 { grid-column : 2 / 6; grid-row : 29 / 30; flex-wrap : wrap; margin-bottom : 0; margin-left : -1px; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox48 { grid-column : 6 / 9; grid-row : 23 / 25; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox49 { grid-column : 6 / 9; grid-row : 25 / 27; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox50 { grid-column : 6 / 9; grid-row : 27 / 30; flex-wrap : wrap; margin-bottom : 0; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox51 { grid-column : 9 / 11; grid-row : 23 / 25; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox52 { grid-column : 9 / 11; grid-row : 25 / 26; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox53 { grid-column : 9 / 11; grid-row : 26 / 27; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox54 { grid-column : 9 / 11; grid-row : 27 / 29; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox55 { grid-column : 9 / 11; grid-row : 29 / 30; flex-wrap : wrap; margin-bottom : 0; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox56 { grid-column : 11 / 13; grid-row : 23 / 25; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox57 { grid-column : 11 / 13; grid-row : 25 / 26; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox58 { grid-column : 11 / 13; grid-row : 26 / 27; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox59 { grid-column : 11 / 13; grid-row : 27 / 30; flex-wrap : wrap; margin-bottom : 0; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox60 { grid-column : 13 / 16; grid-row : 23 / 25; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox61 { grid-column : 13 / 16; grid-row : 25 / 26; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox62 { grid-column : 13 / 16; grid-row : 26 / 27; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox63 { grid-column : 13 / 16; grid-row : 27 / 29; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox64 { grid-column : 13 / 16; grid-row : 29 / 30; flex-wrap : wrap; margin-bottom : 0; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox65 { grid-column : 16 / 21; grid-row : 23 / 25; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox66 { grid-column : 16 / 18; grid-row : 25 / 26; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox67 { grid-column : 16 / 18; grid-row : 26 / 27; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox68 { grid-column : 16 / 18; grid-row : 27 / 30; flex-wrap : wrap; margin-bottom : 0; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox69 { grid-column : 18 / 21; grid-row : 25 / 27; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox70 { grid-column : 18 / 21; grid-row : 27 / 29; flex-wrap : wrap; margin-bottom : 0; border-bottom : 1px solid #bdbdbd; } .dhncoSub .gridTableWrap .gridTableBox .gridValueBox.valueBox71 { grid-column : 18 / 21; grid-row : 29 / 30; flex-wrap : wrap; margin-bottom : 0; } .dhncoSub .slideWrap { width : 100%; display : flex; justify-content : center; align-items : center; margin-top : clamp(30px,3vw,50px); } .dhncoSub .sub5Icon { width : 95%; max-width : 1400px; margin : 0; background : #fff; padding : clamp(20px,2vw,25px); border-radius : 10px; } .dhncoSub .sub5Icon .swiper-slide a { width : 100%; height : clamp(50px,5vw,60px); display : inline-block;} .dhncoSub .sub5Icon .swiper-slide img { width : 100%; height : 100%; object-fit : contain; } .dhncoSub .prevWrap { width : auto; position : relative; display : flex; align-items : center; justify-content : flex-start; margin-right : clamp(10px,2vw,30px); } .dhncoSub .nextWrap { width : auto; position : relative; display : flex; align-items : center; justify-content : flex-end; margin-left : clamp(10px,2vw,30px); } .dhncoSub .prevWrap .swiper-button-prev.sub5IconPrev { left : 0; opacity : 0; color : #3EAA97; border : 2px solid #3EAA97; border-radius : 50px; width : clamp(30px,3vw,40px); height : clamp(30px,3vw,40px); font-size : clamp(15px,2vw,20px); margin-top : 0; top : 0; position : relative; } .dhncoSub .prevWrap .swiper-button-prev.sub5IconPrev:hover { background : #3EAA97; color : #fff; transition : .3s; } .dhncoSub .prevWrap .swiper-button-prev.sub5IconPrev::after { display: none; } .dhncoSub .slideWrap:hover .prevWrap .swiper-button-prev.sub5IconPrev { opacity : 1; transition : .3s; } .dhncoSub .nextWrap .swiper-button-next.sub5IconNext { right : 0; opacity : 0; color : #3EAA97; border : 2px solid #3EAA97; border-radius : 50px; width : clamp(30px,3vw,40px); height : clamp(30px,3vw,40px); font-size : clamp(15px,2vw,20px); margin-top : 0; top : 0; position : relative; } .dhncoSub .nextWrap .swiper-button-next.sub5IconNext:hover { background : #3EAA97; color : #fff; transition : .3s; } .dhncoSub .nextWrap .swiper-button-next.sub5IconNext::after { display: none; } .dhncoSub .slideWrap:hover .nextWrap .swiper-button-next.sub5IconNext { opacity : 1; transition : .3s; } /* sub5-3 */ .dhncoSub.sub5-3 { padding : 0; margin : clamp(40px,5vw,80px) 0;} .dhncoSub .grayBackWrap.topWrap { margin-top : clamp(30px,3vw,50px);} .dhncoSub .whiteBackWrap.sub5-3Top { width : 100%; height : auto; background : #fff; padding : clamp(20px,4.5vw,80px) 8px;} .dhncoSub .whiteBackWrap.sub5-3 { width : 100%; height : auto; background : #fff; padding : clamp(40px,8vw,80px) 8px;} .dhncoSub .sub5-3ImgBox { width : 100%; height : auto; max-width : 785px; display : inline-block; } .dhncoSub .sub5-3ImgBox img { width : 100%; height : auto } .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3.first { margin-top : clamp(10px,2vw,14px);} .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .nameBox { width : clamp(180px,15vw,200px); background : #EDEEEE; } .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .nameBox p { line-height : 1.3em; } .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .textBox p { text-indent : -1.4em; margin-left : 1.4em; } .dhncoSub .contentWrap .titBox { width : 100%; height : auto; display : flex; justify-content : center; margin : clamp(25px,2vw,40px) 0; } .dhncoSub .contentWrap .titBox .tit { font-size : clamp(30px,2vw,35px); color : #31A09B; font-weight : 500; margin : 0 0.3em; line-height : 1.5em; word-break : keep-all; } .dhncoSub .contentWrap .titBox .doubleStart { display : flex; align-items : flex-start; } .dhncoSub .contentWrap .titBox .doubleEnd { display : flex; align-items : flex-end; } .dhncoSub .contentWrap .titBox .doubleStart img, .dhncoSub .contentWrap .titBox .doubleEnd img { width : clamp(23px,2vw,24px); } .dhncoSub .subTit.sub5-3 { font-size : clamp(15px,2vw,18px); word-break : keep-all; margin : clamp(25px,2vw,40px) 0;} .dhncoSub .sub5-3TableWrap { width : 100%; height : auto; max-width : 1200px; display : inline-block; margin-top : clamp(30px,3vw,50px); overflow-x : scroll; } .dhncoSub .sub5-3TableWrap::-webkit-scrollbar { height : 8px; } .dhncoSub .sub5-3TableWrap::-webkit-scrollbar-thumb { background : #d3d3d3; border-radius : 5px; } .dhncoSub .sub5-3TableWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .dhncoSub .sub5-3TableWrap .sub5-3Table { width : 1200px; height : auto; border : 1px solid #bbb; border-bottom : none; } .dhncoSub .sub5-3TableWrap .sub5-3Table .nameWrap { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : flex-end; } .dhncoSub .sub5-3TableWrap .sub5-3Table .nameWrap .nameBox { display : flex; align-items : center; justify-content : center; background : #349893; border-right : 1px solid #bbb; } .dhncoSub .sub5-3TableWrap .sub5-3Table .nameWrap .nameBox.nameBox1 { width : 15%; background : #323333; } .dhncoSub .sub5-3TableWrap .sub5-3Table .nameWrap .nameBox.nameBox2 { width : 50%;} .dhncoSub .sub5-3TableWrap .sub5-3Table .nameWrap .nameBox.nameBox3 { width : 35%; margin-right : 0; border-right : none; } .dhncoSub .sub5-3TableWrap .sub5-3Table .nameWrap .nameBox p { font-size : clamp(14px,2vw,16px); font-weight : 500; color : #fff; display : flex; align-items : center; padding : 0.8em 0; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : flex-end; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox { display : inline-flex; align-items : center; justify-content : center; background : #F6F6F6; flex-wrap : wrap; padding : clamp(10px,2vw,15px) ; align-content : center; border-right : 1px solid #bbb; border-bottom : 1px solid #bbb; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox p { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; font-size : clamp(14px,2vw,16px); color : #666; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox.valueBox1 { width : 15%; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox.valueBox1 p { color : #000; font-weight : 500; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox.valueBox2 { width : 50%; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox.valueBox2 p { justify-content : flex-start; } .dhncoSub .sub5-3TableWrap .sub5-3Table .valueWrap .valueBox.valueBox3 { width : 35%; margin-right : 0; border-right : none; } .dhncoSub .contentWrap.sub5-3 .tit { font-size : clamp(16px,2vw,24px); font-weight : 500; color : #fff; background : #31A09B; display : inline-block; line-height : 1.2em; padding : 0.5em 3em; word-break : keep-all; } .dhncoSub .contentWrap.sub5-3 .contentBoxWrap { display : flex; flex-direction : column; justify-content : center; align-items : center; } .dhncoSub .contentWrap.sub5-3 .listBox { width : 100%; height : auto; display : inline-flex; border : 1px solid #31A09B; padding : clamp(15px,3vw,25px) clamp(20px,3vw,50px); margin : 0 auto; flex-wrap : wrap; justify-content : center; } .dhncoSub .contentWrap.sub5-3 .listBox.auto { width : auto;} .dhncoSub .contentWrap.sub5-3 .listBox .pWrap { width : auto; display : inline-block; text-align : left; margin : 0 clamp(15px,3vw,51px);} .dhncoSub .contentWrap.sub5-3 .listBox .pWrap p { font-size : clamp(14px,2vw,18px); word-break : keep-all; text-indent : -1em; margin-left : 1em; } .dhncoSub .sub5-3LastWrap { width : 100%; height : auto; max-width : 800px; display : flex; justify-content : center; align-items : center; margin : 0 auto; margin-top : clamp(30px,3vw,50px);} .dhncoSub .sub5-3LastWrap .sub5-3LastBox { width : clamp(200px,15vw,230px); height : clamp(175px,15vw,205px); display : flex; flex-direction : column; border-radius : 35px; overflow : hidden; margin-right : clamp(20px,3vw,35px); } .dhncoSub .sub5-3LastWrap .sub5-3LastBox:last-child { margin-right : 0;} .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxTop { width : 100%; height : 50%; display : flex; align-items : center; justify-content : center; padding : 0 clamp(10px,1vw,20px); } .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxTop.A { background : #92CE57; } .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxTop.B { background : #3AC6CB; } .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxTop.C { background : #24AACC; } .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxTop p { font-size : clamp(15px,1.7vw,20px); color : #fff; word-break : keep-all;} .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxBot { width : 100%; height : 50%; padding : 0 clamp(10px,1vw,20px); display : flex; align-items : center; justify-content : center; background : #fff; } .dhncoSub .sub5-3LastWrap .sub5-3LastBox .boxBot p { font-size : clamp(15px,1.7vw,20px); word-break : keep-all; } /* sub5-4 */ .dhncoSub .sectionMainImgWrap .textBox.sub5-4 .text { margin : clamp(15px,2vw,25px) 0 0;} .dhncoSub .sub5-4SecondFullWrap { width : auto; height : auto; display : inline-flex; align-items : flex-start; flex-direction : column;} .dhncoSub .sub5-4SecondWrap { width : auto; height : auto; display : inline-block; margin-top : clamp(30px,3vw,50px); } .dhncoSub .sub5-4SecondWrap .listTitBox p { font-size : clamp(17px,2vw,20px); font-weight : 600; text-align : left; margin-bottom : clamp(10px,1vw,15px); } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList { width : 100%; height : auto; display : flex; align-items : stretch; margin-bottom : clamp(15px,2vw,20px); } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList:last-child { margin-bottom : 0; } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList .nameBox { width : clamp(100px,10vw,150px); background : #fff; } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList .nameBox p { font-size : clamp(15px,2vw,18px); line-height : 1em; padding : 1em 0; font-weight : 500; display : flex; align-itmes : center; justify-content : center; height : 100%; } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList .textBox { width : auto; flex-grow : 1; display : inline-flex; justify-content : flex-start; padding : clamp(15px,2vw,20px); border-bottom : 2px solid #fff; } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList .textBox p { font-size : clamp(14px,2vw,16px); line-height : 1em; } .dhncoSub .whiteBackWrap .contentBox.sub5-4 { margin-top : clamp(30px,3vw,50px);} .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .textBox .sub5-4 { text-indent : -2.6em; margin-left : 2.6em; } .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .textBox .sub5-4B { text-indent : -2em; margin-left : 2em; } .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .textBox .sub5-4C { text-indent : -2.8em; margin-left : 2.8em; } /* sub 5-5 */ .dhncoSub .sub5-5SecondWrap { width : 100%; height : auto; max-width : 1100px; display : inline-block; margin-top : clamp(15px,3vw,20px); } .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox { width : 100%; height : auto; background : #319F9A; padding : clamp(15px,2vw,20px) clamp(25px,2vw,30px); display : flex; align-items : center; justify-content : center;} .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox .first { width : 165px; font-size : clamp(14px,1.5vw,17px); color : #fff; } .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox .second { width : calc(100% - 165px); font-size : clamp(14px,1.5vw,17px); color : #fff; text-align : left; word-break : keep-all; } .dhncoSub .sub5-5SecondWrap .sub5-5 { font-size : clamp(14px,1.5vw,17px); color : #666; text-align : left; text-indent : -1.35em; margin-left : 1.35em; margin-top : 8px; word-break : keep-all; } .dhncoSub .sub5-5SecondWrap .sub5-5 .letter_spacing_order_sub5_5 { font-size : clamp(14px,1.5vw,17px); color : #666; text-align : left; word-break : keep-all; letter-spacing : -0.01em;} .dhncoSub .sub5-5SecondWrap .sub5-5.B { text-indent : -1.4em; margin-left : 2.8em; margin-top : 5px; } .dhncoSub .sub5-5SecondWrap .sub5-5.C { text-indent : -1em; margin-left : 3.5em; margin-top : 5px; } .dhncoSub .sub5-5SecondWrap .sub5-5.D { text-indent : 0em; margin-left : 3.5em; } .dhncoSub .sub5-5SecondWrap .sub5-5.E { text-indent : 0em; margin-left : 0em; } .dhncoSub .sub5-5SecondWrap .sub5-5.F { text-indent : -1.9em; margin-left : 4.5em; } .dhncoSub .sub5-5SecondWrap .sub5-5.G { text-indent : -1.5em; margin-left : 1.5em; } .dhncoSub .sub5-5SecondWrap .sub5-5.H { text-indent : -2em; margin-left : 2em; } .dhncoSub .sub5-5SecondWrap .sub5-5.margin { margin-top : clamp(10px,1vw,18px); } .dhncoSub .sub5-5SecondWrap .boxWrap { width : 100%; height : auto; text-align : left; } .dhncoSub .sub5-5SecondWrap .sub5-5Box { width : auto; display : inline-flex; align-items : flex-start; background : #EDEEEE; padding : clamp(15px,1vw,20px); margin : 0.5em 0 0.5em 4em;} .dhncoSub .sub5-5SecondWrap .sub5-5Box .boxFirst { font-size : clamp(14px,1.5vw,17px); min-width : 70px; } .dhncoSub .sub5-5SecondWrap .sub5-5Box .boxSecond { font-size : clamp(14px,1.5vw,17px); word-break : keep-all; text-indent : -0.8em; margin-left : 0.8em; } .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox.B { width : auto; display : inline-flex; align-items : center; } .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox.B .first { width : auto;} .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox.B .second { width : auto;} /* sub 5-6 */ .dhncoSub .contentWrap.sub5-3.sub5-6 .contentBoxWrap { max-width : 1000px; margin : 0 auto clamp(30px,3vw,50px); } .dhncoSub .contentWrap.sub5-3.sub5-6 .contentBoxWrap .listBox .pWrap p { text-indent : -0.7em; margin-left : 0.7em; color : #666; } .dhncoSub .contentWrap.sub5-3.sub5-6 .contentBoxWrap .listBox .pWrap p:first-child { margin-bottom : 5px; } .dhncoSub .contentWrap.sub5-3.sub5-6 .contentBoxWrap .listBox .pWrap.noMargin p { margin : 0; } .dhncoSub .sub5-6FirstWrap { width : 100%; height : auto; max-width : 1000px; display : inline-block; margin-top : clamp(15px,3vw,20px); } .dhncoSub .sub5-6FirstWrap .contentWrap { width : 100%; height : auto; } .dhncoSub .sub5-6FirstWrap .contentWrap .contTit { width : 100%; height : auto; background : #319F9A; } .dhncoSub .sub5-6FirstWrap .contentWrap .contTit p { font-size : clamp(16px,2vw,24px); color : #fff; line-height : 1.2em; padding : 0.5em 0; } .dhncoSub .sub5-6FirstWrap .contentWrap .textWrap { width : 100%; height : auto; border : 1px solid #319F9A; padding : clamp(15px,3vw,25px) clamp(20px,3vw,50px); text-align : left; } .dhncoSub .sub5-6FirstWrap .contentWrap .textWrap p { font-size : clamp(14px,2vw,18px); text-indent : -5.2em; margin-left : 5.2em; word-break : keep-all; color : #666; } .dhncoSub .sub5-6FirstWrap .contentWrap .textWrap p:first-child { margin-bottom : 5px; } .dhncoSub .sub5-6FirstWrap .contentWrap .textWrap p span { font-size : inherit; font-weight : inherit; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap { width : 100%; height : auto; display : flex; align-items : flex-start; margin-top : clamp(20px,2vw,25px); } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .arrowImg { margin-right : clamp(8px,1vw,10px); } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .arrowImg img { width : clamp(20px,3vw,31px); height : auto; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap { width : 80%; flex-grow : 1; display : flex; flex-direction : column; align-items : flex-start; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .tit { padding : 0.5em 1em; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox { width : 100%; border : 1px solid #319F9A; text-align : left; padding : clamp(15px,3vw,25px) clamp(15px,3vw,30px); } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox p { font-size : clamp(14px,2vw,18px); text-indent : -5.2em; margin-left : 5.2em; word-break : keep-all; color : #666; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox p:first-child { margin-bottom : 5px; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox p span { font-size : inherit; font-weight : inherit; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox .subTit.marginTop { margin-top : 13px; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox .subTit { margin-bottom : 5px; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox .subText { margin-left : 2em; text-indent : -1em; margin-bottom : 5px; } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap { width : 100%; height : auto; max-width : 1000px; display : inline-block; margin-top : clamp(15px,3vw,20px); } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox { width : 100%; display : inline-block; padding : clamp(15px,1vw,20px); text-align : left; background : #319F9A; } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox p { font-size : clamp(14px,2vw,18px); color : #fff; word-break : keep-all; } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox.wrapTextBox { background : none; } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox.wrapTextBox p { color : #666;} .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox.wrapTextBox p span { font-size : inherit;} .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox.wrapTextBox p:first-child { margin-bottom : 5px;} .dhncoSub .grayBackWrap.sub5-6 .thirdWrap .textWrap { width : 80%; display : inline-flex; flex-direction : column; align-items : flex-start; padding : clamp(15px,3vw,25px) clamp(15px,3vw,50px); border : 1px solid #319F9A; text-align : left; margin-top : clamp(15px,3vw,20px); max-width : 1000px; } .dhncoSub .grayBackWrap.sub5-6 .thirdWrap .textWrap p { font-size : clamp(14px,2vw,18px); color : #666; text-indent : -1.32em; margin-left : 1.32em; word-break : keep-all; line-height : 1.8em; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap { width : 100%; height : auto; max-width : 1000px; display : inline-block; margin-top : 20px; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .wrapTitBox { width : 100%; height : auto; background : #319F9A; padding : 0 15px; border : 1px solid #bbb; border-bottom : none; justify-content : center;} .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .wrapTitBox p { font-size : clamp(16px,2vw,24px); color : #fff; line-height : 1.2em; padding : 0.5em 0; word-break : keep-all; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap { width : 100%; height : auto; overflow-x : auto; margin-bottom : clamp(25px,3vw,40px);} .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap.noMargin { margin-bottom : 0;} .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap::-webkit-scrollbar { height : 8px; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap::-webkit-scrollbar-thumb { background : #d3d3d3; border-radius : 5px; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap { width : 1000px; height : auto; display : flex; align-items : stretch; border : 1px solid #bbb; border-top : none;} .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listTit { width : 200px; height : auto; display : flex; align-items : center; justify-content : center; background : #F6F6F6; border-right : 1px solid #bbb; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listTit p { font-size : clamp(16px,2vw,20px); font-weight : 500; line-height : 1.3em; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listText { width : calc(100% - 200px); padding : clamp(15px,1vw,20px); text-align : left; background : #f6f6f6; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listText p { font-size : clamp(14px,2vw,18px); color : #666; line-height : 1em; display : flex; align-items : center; margin : 15px 0; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listText p span.circle { display : none; width : 24px; height : 24px; margin-right : 10px; position : relative; background : #319F9A; transform : rotate(-45deg); } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listText p span.circle i { position : absolute; left : 50%; top : 50%; transform : translate(-50%, -50%) rotate(45deg); font-size : 15px; color : #fff; font-style : normal; line-height : 1.2em; width : 100%; text-align : center; width : 20px; height : 20px; } .mouse_notice { width : 100%; height : auto; text-align : center; overflow : hidden; } .mouse_notice p { font-size : 14px; color : #999; font-weight : 400; } .mouse_notice .pointerWrap { width : 60%; height : 35px; display : inline-block; transform : scale(1.3); position : relative; margin-top : 10px; } .mouse_notice .pointerWrap img { height : 30px; position : absolute; transition : 0.6s; opacity : 0; animation-duration: 8s; animation-iteration-count: infinite; } .mouse_notice .pointerWrap img.pointer_left { animation-name : pointer_left; } .mouse_notice .pointerWrap img.pointer_right { animation-name : pointer_right; } .mouse_notice .pointerWrap img.pointer_center { animation-name : pointer_center; } @keyframes pointer_left { 0% { left : 0; opacity : 0; } 45% { left : calc(100% - 45px);opacity : 0; } 50% { left : calc(100% - 45px);opacity : 1; } 95% { left : 0; opacity : 1; } 100% { left : 0; opacity : 0; } } @keyframes pointer_right { 0% { left : 45px; opacity : 1; } 45% { left : 100%; opacity : 1; } 50% { left : 100%; opacity : 0; } 95% { left : 45px; opacity : 0; } 100% { left : 45px; opacity : 1; } } @keyframes pointer_center { 0% { left : 18px; opacity : 1; } 45% { left : calc(100% - 25px);opacity : 1; } 50% { left : calc(100% - 25px);opacity : 1; } 95% { left : 18px; opacity : 1; } 100% { left : 18px; opacity : 1; } } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .dhncoSub .PCx { display : block; } .dhncoSub .sectionMainImgWrap { flex-direction : column; align-items : center; } .dhncoSub .sectionMainImgWrap .imgBox { width : 80%; height : clamp(320px,36vw,350px); overflow : hidden; } .dhncoSub .sectionMainImgWrap .imgBox img { width : 100%; height : 185%; object-fit : cover; } .dhncoSub .sectionMainImgWrap .textBox { width : 80%; } .dhncoSub .whiteBackWrap .contentBox .listWrap { width : 80%; margin : 0 auto clamp(18px,2vw,25px); flex-direction : column; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox { width : 100%; justify-content : flex-start; border-bottom : 1px solid #EDEEEE; } .dhncoSub .whiteBackWrap .contentBox .listWrap.sub .nameBox p { padding : 1em clamp(15px,3vw,20px);} .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox { width : 100%;} /* sub5-2 */ .dhncoSub .iconListWrap .iconDivisionpWrap { width : 100%; justify-content : center; } .dhncoSub .iconListWrap .iconDivisionpWrap:first-child { margin-bottom : clamp(15px,2vw,20px); } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap { width : 20%; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap.arrow { width : auto; } .dhncoSub .iconListWrap .iconDivisionpWrap .blankBox { display : block; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconBox { width : 100%; height : 70px; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox { width : 100%; height : clamp(110px,15vw,140px); } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox p { font-size : clamp(16px,1.8vw,17px); } .dhncoSub .nextWrap .swiper-button-next.sub5IconNext, .dhncoSub .prevWrap .swiper-button-prev.sub5IconPrev { opacity : 1; } /* sub5-3 */ .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .nameBox { width : 100%; } .dhncoSub .contentWrap .titBox { flex-direction : column; align-items : center; } .dhncoSub .contentWrap .titBox .tit { margin : 0.3em 0; } /* sub5-4 */ .dhncoSub .sectionMainImgWrap .imgBox.sub5-4 { height : 160px; } .dhncoSub .sectionMainImgWrap .imgBox.sub5-4 img { width : 100%; height : 100%;} .dhncoSub .sectionMainImgWrap .textBox.sub5-4 { flex-direction : column; align-items : flex-start;} .dhncoSub .sectionMainImgWrap .textBox.sub5-4 p { width : 100%; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .dhncoSub .sectionTit .mobileLineHeight { line-height : 1.3em; margin : 0.3em 0 0.5em;} .dhncoSub .PCx { display : block; } .dhncoSub .sectionTit .titB { line-height : 1.2em; } .dhncoSub .sectionMainImgWrap { flex-direction : column; } .dhncoSub .sectionMainImgWrap .imgBox { width : 100%;} .dhncoSub .sectionMainImgWrap .textBox { width : 100%;} .dhncoSub .sectionMainImgWrap .textBox .ps { line-height : 1.3em;} .dhncoSub .whiteBackWrap .contentBox .listWrap { width : 100%; margin : 0 auto clamp(18px,2vw,25px); flex-direction : column; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox { width : 100%; justify-content : flex-start; border-bottom : 1px solid #EDEEEE; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p { padding : 1em clamp(15px,3vw,20px);} .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox { width : 100%;} /* sub5-2 */ .dhncoSub .iconListWrap .iconDivisionpWrap { width : 100%; justify-content : center; flex-direction : column; align-items : center; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap { width : 100%; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap.arrow { margin : 15px 0;} .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox.arrow { height : auto; } .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconBox { width : 100%;} .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconBox.arrow { display : none;} .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox { width : 50%;} .dhncoSub .iconListWrap .iconDivisionpWrap .iconWrap .iconTextBox.arrow img { transform : rotate(90deg);} .dhncoSub .division2Wrap { flex-direction : column; justify-content : center; align-items : center; } .dhncoSub .division2Wrap .divisionWrap { width : 100%; padding : clamp(25px,3vw,40px) clamp(15px,3vw,60px); } .dhncoSub .division2Wrap .divisionWrap:first-child { border-right : none; border-bottom : 1px solid #349894;} .dhncoSub .division2Wrap .divisionWrap .wrapTit { word-break : keep-all; line-height : 1.3em; padding : 0.8em 1.6em; } .dhncoSub .gridTableWrap { margin-top : 20px;} .dhncoSub .gridTableWrap .gridTableBox { width : 960px; } .dhncoSub .nextWrap .swiper-button-next.sub5IconNext, .dhncoSub .prevWrap .swiper-button-prev.sub5IconPrev { opacity : 1; } /* sub5-3 */ .dhncoSub .whiteBackWrap .contentBox .listWrap.sub5-3 .nameBox { width : 100%; } .dhncoSub .contentWrap .titBox { flex-direction : column; align-items : center; margin : 20px 0; } .dhncoSub .contentWrap .titBox.noTop { margin-top : 0;} .dhncoSub .contentWrap .titBox .tit { font-size : 20px; line-height : 1.4em; margin : 8px 0; } .dhncoSub .subTit.sub5-3.noBot { margin-bottom : 0;} .dhncoSub .contentWrap .titBox .doubleStart img, .dhncoSub .contentWrap .titBox .doubleEnd img { width : 17px; } .dhncoSub .sub5-3TableWrap { margin-top : 20px; } .dhncoSub .sub5-3TableWrap .sub5-3Table { width : 580px; } .dhncoSub .contentWrap.sub5-3 .listBox .pWrap { margin : 0; } .dhncoSub .sub5-3LastWrap { flex-direction : column; } .dhncoSub .sub5-3LastWrap .sub5-3LastBox { margin-right : 0; margin-bottom : 25px; } .dhncoSub .sub5-3LastWrap .sub5-3LastBox:last-child { margin-bottom : 0; } /* sub5-4 */ .dhncoSub .sub5-4SecondWrap .sub5-4SecondList { flex-direction : column; } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList .textBox { padding : clamp(10px,2vw,20px) clamp(15px,2vw,20px); } .dhncoSub .sub5-4SecondWrap .sub5-4SecondList .textBox p { line-height : 1.3em; text-align : left; word-break : keep-all; } /* sub5-5 */ .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox { flex-direction : column; } .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox .first { margin-bottom : 5px; } .dhncoSub .sub5-5SecondWrap .sub5-5SecondTitBox .second { width : 100%; } .dhncoSub .sub5-5SecondWrap .sub5-5Box { flex-direction : column;} /* sub5-6 */ .dhncoSub .sub5-6FirstWrap .contentWrap .textWrap p { display : inline-flex; flex-direction : column; margin-left : 0.7em; text-indent : 0; } .dhncoSub .sub5-6FirstWrap .contentWrap .textWrap p span { display : block; font-weight : 500; margin-left : -0.7em;} .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox p { display : inline-flex; flex-direction : column; margin-left : 0.7em; text-indent : 0; } .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox p span { display : block; font-weight : 500; margin-left : -0.7em;} .dhncoSub .sub5-6FirstWrap .firstSecondWrap .textWrap .textBox .subTit { font-weight : 500; } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox.wrapTextBox p { display : inline-flex; flex-direction : column; margin-left : 1.2em; } .dhncoSub .whiteBackWrap.sub5-6 .secondWrap .wrapTitBox.wrapTextBox p span { margin-left : -1.2em; font-weight : 500; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap { width : 639px; } .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listTit { width : 135px;} .dhncoSub .whiteBackWrap.sub5-6 .lastWrap .overFlowWrap .listWrap .listText { width : calc(100% - 135px);} }