/* A A A : A : A : A : */ #dhnco_sub4-1 { width : 100%; height : auto; text-align : center; margin : clamp(40px,8vw,80px) 0;} #dhnco_sub4-1 .logoBox { width : 100%; height : auto; } #dhnco_sub4-1 .logoBox img { width : clamp(35px,10vw,65px); height : auto; } #dhnco_sub4-1 .sectionTit { width : auto; height : auto; display : inline-flex; flex-direction : column; align-items : center; padding : 0 20px; } .dhncoSub .sectionTit.noMargin { display : flex;} .dhncoSub .sectionTit.noMargin .underLine { width : clamp(40px,5vw,90px); height : clamp(4px,1vw,6px); background : #31a09b; } #dhnco_sub4-1 .sectionTit p { font-size : clamp(23px,2vw,36px); font-weight : 700; color : #31a09b80; line-height : 2.1em; } #dhnco_sub4-1 .sectionTit .titB { font-size : clamp(20px,2vw,29px); font-weight : 700; color : #31a09b; line-height : 1em; margin-bottom : 0.7em; } #dhnco_sub4-1 .sectionTit .underLine { width : 50%; height : clamp(4px,1vw,6px); background : #31a09b; } #dhnco_sub4-1 .sectionMainImgWrap { width : 100%; height : auto; display : flex; align-items : stretch; max-width : 1400px; margin : 0 auto; padding : clamp(40px,8vw,80px) 0px; } #dhnco_sub4-1 .sectionMainImgWrap .imgBox { width : 40%; height : auto; } #dhnco_sub4-1 .sectionMainImgWrap .imgBox img { width : 100%; height : auto; } #dhnco_sub4-1 .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);} #dhnco_sub4-1 .sectionMainImgWrap .textBox .tit { font-size : clamp(20px,2vw,26px); font-weight : 500; word-break : keep-all; line-height : 1em; } #dhnco_sub4-1 .sectionMainImgWrap .textBox .text { font-size : clamp(14px,1.5vw,18px); word-break : keep-all; margin : clamp(15px,2vw,25px) 0; } #dhnco_sub4-1 .sectionMainImgWrap .textBox .ps { width : auto; height : auto; display : inline-block; background : #31A09B; font-size : clamp(14px,1.5vw,18px); color : #fff; line-height : 1em; padding : 0.4em 1.2em; word-break : keep-all; } #dhnco_sub4-1 .grayBackWrap { width : 100%; height : auto; background : #EEEFEF; padding : clamp(40px,8vw,80px) 8px;} #dhnco_sub4-1 .whiteBackWrap { width : 100%; height : auto; background : #fff; padding : clamp(40px,8vw,80px) 8px;} #dhnco_sub4-1 .contentWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; } #dhnco_sub4-1 .contentWrap .tit { font-size : clamp(16px,2vw,24px); font-weight : 500; color : #fff; background : #31A09B; display : inline-block; line-height : 1em; padding : 0.5em 1em; word-break : keep-all; } #dhnco_sub4-1 .contentWrap .listBox { width : auto; height : auto; display : inline-flex; border : 1px solid #31A09B; padding : clamp(15px,3vw,25px) clamp(30px,3vw,50px); margin : 0 auto; flex-wrap : wrap; justify-content : center; } #dhnco_sub4-1 .contentWrap .listBox:last-child { max-width : 945px;} #dhnco_sub4-1 .contentWrap .listBox .pWrap { width : auto; display : inline-block; text-align : left; } #dhnco_sub4-1 .contentWrap .listBox .pWrap:first-child { margin-right : clamp(25px,2vw,38px); } #dhnco_sub4-1 .contentWrap .listBox .pWrap.noMargin { margin-right : 0; } #dhnco_sub4-1 .contentWrap .listBox .pWrap p { font-size : clamp(14px,2vw,18px); word-break : keep-all; } #dhnco_sub4-1 .contentWrap .listBox .pWrap .greenFont { color : #31A09B; } #dhnco_sub4-1 .thirdWrap { width : 100%; height : auto; padding : clamp(40px,8vw,80px) 20px; } #dhnco_sub4-1 .thirdWrap .contentWrap { width : 100%; height : auto; margin-top : clamp(20px,3vw,30px);} #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox { width : 100%; height : auto; max-width : 1200px; display : inline-block; border-top : 2px solid #999; border-bottom : 2px solid #999; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap { width : 100%; height : auto; border-bottom : 1px solid #C9C9CA; padding : clamp(15px,2vw,25px) 0;} #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap:last-child { border-bottom : 0; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth { width : 100%; height : auto; display : flex; justify-content : center; max-width : 740px; margin : 0 auto; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .nameBox { width : clamp(280px,19vw,310px); height : auto; display : flex; justify-content : flex-start; align-items : center; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .nameBox img { width : clamp(35px,5vw,55px); height : auto; margin-right : clamp(10px,2vw,15px); } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .nameBox p { font-size : clamp(15px,2vw,21px); color : #31A09B; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .textWrap { width : auto; display : flex; align-items : center; flex-grow : 1; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .textWrap p { font-size : clamp(14px,2vw,20px); word-break : keep-all; text-align : left; } #dhnco_sub4-1 .tableWrap { width : 100%; height : auto; margin-top : clamp(20px,9vw,45px); overflow-x : scroll; } #dhnco_sub4-1 .tableWrap::-webkit-scrollbar { height : 8px; } #dhnco_sub4-1 .tableWrap::-webkit-scrollbar-thumb { background : #d3d3d3; border-radius : 5px; } #dhnco_sub4-1 .tableWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } #dhnco_sub4-1 .table { width : 1180px; height : auto; display : inline-block; margin-bottom : 10px; border : 1px solid #bbb; border-bottom : none; } #dhnco_sub4-1 .tableTitWrap { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : stretch; text-align : center; } #dhnco_sub4-1 .tableTit { display : flex; align-items : center; justify-content : center; border-right : 1px solid #bbb; padding : 10px 0; background : #359993; } #dhnco_sub4-1 .tableTit:last-child { margin-right : 0; border-right : none; } #dhnco_sub4-1 .tableTit.black { background : #323333; } #dhnco_sub4-1 .tableTit p { font-size : clamp(14px,2vw,16px); font-weight : 500; color : #fff; text-align : center; } #dhnco_sub4-1 .tableTit.tableTit_1 { width : 12%;} #dhnco_sub4-1 .tableTit.tableTit_2 { width : 22%;} #dhnco_sub4-1 .tableTit.tableTit_3 { width : 13%;} #dhnco_sub4-1 .tableTit.tableTit_4 { width : 20%;} #dhnco_sub4-1 .tableTit.tableTit_5 { width : 13%;} #dhnco_sub4-1 .tableTit.tableTit_6 { width : 20%;} #dhnco_sub4-1 .tableValueWrap { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : stretch; text-align : center; } #dhnco_sub4-1 .tableValue { display : flex; align-items : center; justify-content : center; padding : 15px 0; background : #F7F7F7; border-right : 1px solid #bbb; border-bottom : 1px solid #bbb; } #dhnco_sub4-1 .tableValue:last-child { margin-right : 0; border-right : none; } #dhnco_sub4-1 .tableValue p { font-size : clamp(14px,2vw,16px); font-weight : 500; color : #666; text-align : center; } #dhnco_sub4-1 .tableValue.tableValue_1 { width : 12%;} #dhnco_sub4-1 .tableValue.tableValue_2 { width : 22%;} #dhnco_sub4-1 .tableValue.tableValue_3 { width : 13%;} #dhnco_sub4-1 .tableValue.tableValue_4 { width : 20%;} #dhnco_sub4-1 .tableValue.tableValue_5 { width : 13%;} #dhnco_sub4-1 .tableValue.tableValue_6 { width : 20%;} #dhnco_sub4-1 .tableB .tableTit.tableTit_1, #dhnco_sub4-1 .tableB .tableValue.tableValue_1 { width : 50%;} #dhnco_sub4-1 .tableB .tableTit.tableTit_2, #dhnco_sub4-1 .tableB .tableValue.tableValue_2 { width : 10%;} #dhnco_sub4-1 .tableB .tableTit.tableTit_3, #dhnco_sub4-1 .tableB .tableValue.tableValue_3 { width : 10%;} #dhnco_sub4-1 .tableB .tableTit.tableTit_4, #dhnco_sub4-1 .tableB .tableValue.tableValue_4 { width : 30%;} #dhnco_sub4-1 .tableB .tableValue.tableValue_2 p { color : #34699a; } #dhnco_sub4-1 .tableB .tableValue.tableValue_3 p { color : #d68230; } #dhnco_sub4-1 .tableBot { width : 1180px; font-size : clamp(14px,2vw,16px); color : #666666; margin : 10px auto 15px; text-align : left; } #dhnco_sub4-1 .link { font-size : clamp(16px,2vw,20px); color : #fff; line-height : 1em; padding : 0.7em 1.8em; background : #31A09B; display : inline-block; transition : .3s; margin :clamp(30px,3vw,50px) 20px 0; border-radius : 10px;} #dhnco_sub4-1 .link:hover { color : #fff000; box-shadow : 0px 0px 10px 0px #31A09B; transition : .3s; } #dhnco_sub4-1 .fadeWrap { width : 100%; height : auto; } .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 : */ #dhnco_sub4-1 .sectionMainImgWrap { flex-direction : column; align-items : center; } #dhnco_sub4-1 .sectionMainImgWrap .imgBox { width : 80%; height : 240px; overflow : hidden; } #dhnco_sub4-1 .sectionMainImgWrap .imgBox img { width : 100%; height : 150%; object-fit : cover; } #dhnco_sub4-1 .sectionMainImgWrap .textBox { width : 80%; } #dhnco_sub4-1 .contentWrap .tit { padding : 0.7em 1em; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth { width : 90%; } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .nameBox { width : clamp(215px,30vw,290px);} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #dhnco_sub4-1 .sectionTit .titB { line-height : 1.2em; } #dhnco_sub4-1 .sectionMainImgWrap { flex-direction : column; } #dhnco_sub4-1 .sectionMainImgWrap .imgBox { width : 100%;} #dhnco_sub4-1 .sectionMainImgWrap .textBox { width : 100%;} #dhnco_sub4-1 .sectionMainImgWrap .textBox .ps { line-height : 1.3em;} #dhnco_sub4-1 .contentWrap .tit { width : 100%; line-height : 1.4em; } #dhnco_sub4-1 .contentWrap .listBox { width : 100%; padding : clamp(15px,3vw,25px) clamp(20px,3vw,50px); } #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap { padding : clamp(15px,2vw,25px) 20px;} #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth { flex-direction : column;} #dhnco_sub4-1 .thirdWrap .contentWrap .contentBox .listWrap .listMaxWidth .nameBox { width : 100%; margin-bottom : 8px;} #dhnco_sub4-1 .tableWrap { margin-top : 10px; } #dhnco_sub4-1 .table { width : 890px; } #dhnco_sub4-1 .tableB { width : 550px; } #dhnco_sub4-1 .tableBot { width : 550px;} #dhnco_sub4-1 .tableTit, #dhnco_sub4-1 .tableValue { margin-right : 4px;} #dhnco_sub4-1 .tableValueWrap { margin-top : 7px;} }