/* A A A : A : A : A : */ .dhncoSubSection { width : 100%; height : auto; padding : clamp(30px,4vw,80px) 0 clamp(30px,3vw,40px); text-align : center; } .dhncoSub { width : 100%; height : auto; text-align : center; padding : 0 20px; } .sectionWrap { width : 100%; height : auto; max-width : 1350px; display : inline-block; } .dhncoSub p, .dhncoSub span { word-break : keep-all !important; } /* tabMenuWrap */ .tabMenuWrap { width : 100%; height : auto; max-width : 1500px; display : inline-block; position : relative; z-index : 10; } .tabMenuWrap .tabMenuWrapTit { font-size : clamp(30px,3vw,50px); font-weight : 600; cursor : default; color : #EEEFEF; line-height : 0.8em; font-style : italic; } .tabMenuWrap .tabMenuWrapTit span { font-size : clamp(30px,3vw,50px); font-weight : 600; transition : 0.3s; color : #EEEFEF; line-height : 0.8em; font-style : italic; animation-delay : 0s; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } .tabMenuWrap .tabMenuWrapTit span.ani_1 { animation-name : ani_1; } .tabMenuWrap .tabMenuWrapTit span.ani_2 { animation-name : ani_2; } .tabMenuWrap .tabMenuWrapTit span.ani_3 { animation-name : ani_3; } .tabMenuWrap .tabMenuWrapTit span.ani_4 { animation-name : ani_4; } .tabMenuWrap .tabMenuWrapTit span.ani_5 { animation-name : ani_5; } .tabMenuWrap .tabMenuWrapTit span.ani_6 { animation-name : ani_6; } .tabMenuWrap .tabMenuWrapTit span.ani_a { animation-name : ani_a; } .tabMenuWrap .tabMenuWrapTit span.ani_b { animation-name : ani_b; } .tabMenuWrap .tabMenuWrapTit span.ani_c { animation-name : ani_c; } .tabMenuWrap .tabMenuWrapTit span.ani_d { animation-name : ani_d; } @keyframes ani_1 { 0% { color : #F7F7F7; } 16% { color : #EEEFEF; } 33% { color : #E5E6E6; } 50% { color : #DCDCDD; } 66% { color : #E5E6E6; } 83% { color : #EEEFEF; } 100% { color : #F7F7F7; } } @keyframes ani_2 { 0% { color : #EEEFEF; } 16% { color : #E5E6E6; } 33% { color : #DCDCDD; } 50% { color : #E5E6E6; } 66% { color : #EEEFEF; } 83% { color : #F7F7F7; } 100% { color : #EEEFEF; } } @keyframes ani_3 { 0% { color : #E5E6E6; } 16% { color : #DCDCDD; } 33% { color : #E5E6E6; } 50% { color : #EEEFEF; } 66% { color : #F7F7F7; } 83% { color : #EEEFEF; } 100% { color : #E5E6E6; } } @keyframes ani_4 { 0% { color : #DCDCDD; } 16% { color : #E5E6E6; } 33% { color : #EEEFEF; } 50% { color : #F7F7F7; } 66% { color : #EEEFEF; } 83% { color : #E5E6E6; } 100% { color : #DCDCDD; } } @keyframes ani_5 { 0% { color : #E5E6E6; } 16% { color : #EEEFEF; } 33% { color : #F7F7F7; } 50% { color : #EEEFEF; } 66% { color : #E5E6E6; } 83% { color : #DCDCDD; } 100% { color : #E5E6E6; } } @keyframes ani_6 { 0% { color : #EEEFEF; } 16% { color : #F7F7F7; } 33% { color : #EEEFEF; } 50% { color : #E5E6E6; } 66% { color : #DCDCDD; } 83% { color : #E5E6E6; } 100% { color : #EEEFEF; } } .tabMenuWrap .menuListWrap { width : 100%; height : auto; background : #EEEFEF; display : flex; flex-wrap : wrap; align-items : flex-start; justify-content : flex-start; padding : clamp(15px,2vw,30px); border-radius : 10px; transition : 0.3s; } .tabMenuWrap:hover .menuListWrap { box-shadow : 0px 0px 20px #ccc; transition : 0.6s; } .tabMenuWrap:hover .tabMenuWrapTit span { text-shadow : 0px 0px 5px #999; transition : 0.6s; } .tabMenuWrap .menuListWrap .tabList { width : calc(96% / 5); background : #ffffffdd; cursor : pointer; transition : .3s; margin-right : 1%; } .tabMenuWrap .menuListWrap .tabList:nth-child(5n) { margin-right : 0; margin-bottom : 0%; } .tabMenuWrap .menuListWrap .tabList p { font-size : clamp(13px,1.5vw,16px); padding : 0.5em 0; color : #5d5d5d; font-weight : 400; transition : 0.3s; } .tabMenuWrap .menuListWrap.styleB .tabList { width : calc(97% / 4); } .tabMenuWrap .menuListWrap.styleB .tabList:nth-child(4n) { margin-right : 0; margin-bottom : 1%; } .tabMenuWrap .menuListWrap.styleB .tabList:nth-child(5n) { margin-right : 1%; margin-bottom : 0; } .tabMenuWrap .menuListWrap.styleB .tabList:last-child { margin-bottom : 0; } .tabMenuWrap .mobileMenuListWrap { width : 100%; height : auto; background : #EEEFEF; padding : 15px; position : relative; display : none; cursor : pointer; } .tabMenuWrap .mobileMenuListWrap .activMenu { width : 100%; height : auto; display : flex; justify-content : space-between; align-items : center; padding : 10px 15px; background : #31A09B; color : #fff; position : relative; z-index : 1; } .tabMenuWrap .mobileMenuListWrap .activMenu.active { box-shadow : 0px 0px 10px 0px #277a77;} .tabMenuWrap .mobileMenuListWrap .activMenu .activeName { font-size : 14px; line-height : 1em; } .tabMenuWrap .mobileMenuListWrap .menuListBox { width : calc(100% - 30px); height : auto; max-height : 0; box-shadow : 0px 0px 8px 0px #277a77; position : absolute; left : 15px; overflow : hidden; transition : .2s; cursor : pointer; } .tabMenuWrap .mobileMenuListWrap .menuListBox .mobileMenuList { font-size : 14px; line-height : 1em; padding : 0.8em 0; border : 1px solid #ddd; background : #fff; border-top : none; display : block; } .tabMenuWrap .menuListWrap .tabList:hover, .tabMenuWrap .menuListWrap .tabList.active { background : #31A09B; transition : .3s; } .tabMenuWrap .menuListWrap .tabList:hover p, .tabMenuWrap .menuListWrap .tabList.active p { color : #fff; transition : .3s; } .dhncoSubSection .contentIncludeBox { padding-top : clamp(20px,3vw,40px); position : absolute; z-index : -1; opacity : 0; left : 0; top : 0; height : 0; overflow : hidden; } .dhncoSubSection .contentIncludeBox.active { opacity : 1; position : relative; z-index : 5; transition : 1s; height : auto; } /* background-color */ .dhncoSub .greenA { background-color : #38a452; } .dhncoSub .greenB { background-color : #95C55B; } .dhncoSub .blueA { background-color : #275FAB; } .dhncoSub .blueB { background-color : #38ADDC; } .dhncoSub .purpleA { background-color : #783A8F; } .dhncoSub .purpleB { background-color : #B277C2; } .dhncoSub .greenA { animation-name : background_ani_greenA; } .dhncoSub .greenB { animation-name : background_ani_greenB; } .dhncoSub .blueA { animation-name : background_ani_blueA; } .dhncoSub .blueB { animation-name : background_ani_blueB; } .dhncoSub .purpleA { animation-name : background_ani_purpleA; } .dhncoSub .purpleB { animation-name : background_ani_purpleB; } .subIconFullWrap .iconBox:after { content : ''; width : 20px; height : 200px; left : -30%; bottom : 0%; transition : 0.3s; position : absolute; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); transform: rotate(45deg); animation-name: qnabackLink_ani; animation-duration: 5s; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite;} @keyframes background_ani_greenA { 0% { background-color : #3a9c50; } 35% { background-color : #3a9c50; } 50% { background-color : #175d31; } 60% { background-color : #3a9c50; } 100% { background-color : #3a9c50; } } @keyframes background_ani_greenB { 0% { background-color : #90BC5A; } 35% { background-color : #90BC5A; } 50% { background-color : #516D2B; } 60% { background-color : #90BC5A; } 100% { background-color : #90BC5A; } } @keyframes background_ani_blueA { 0% { background-color : #255AA0; } 35% { background-color : #255AA0; } 50% { background-color : #153D68; } 60% { background-color : #255AA0; } 100% { background-color : #255AA0; } } @keyframes background_ani_blueB { 0% { background-color : #3AA3CD; } 35% { background-color : #3AA3CD; } 50% { background-color : #1E6277; } 60% { background-color : #3AA3CD; } 100% { background-color : #3AA3CD; } } @keyframes background_ani_purpleA { 0% { background-color : #783A8F; } 35% { background-color : #783A8F; } 50% { background-color : #4A205E; } 60% { background-color : #783A8F; } 100% { background-color : #783A8F; } } @keyframes background_ani_purpleB { 0% { background-color : #B277C2; } 35% { background-color : #B277C2; } 50% { background-color : #763983; } 60% { background-color : #B277C2; } 100% { background-color : #B277C2; } } @keyframes qnabackLink_ani { 0% { left : -30%; bottom : 0%; } 35% { left : -30%; bottom : 0%; } 65% { left : 160%; bottom : -50%; } 100% { left : 160%; bottom : -50%; } } /* padding Wrap */ .dhncoSub .paddingWrap { padding : clamp(30px,4vw,50px) 0 0; } /* sectionTitBox */ .sectionTitBox { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; } .sectionTitBox .titTopWrap { width : 100%; height : auto; display : flex; justify-content : flex-start; align-items : center; } .sectionTitBox .titTopWrap .subLogoBox { width : clamp(45px,3vw,50px); height : auto; } .sectionTitBox .titTopWrap .subLogoBox img { width : 100%; height : auto; } .sectionTitBox .titTopWrap .sectionTit { font-size : clamp(14px,3vw,28px); font-weight : 700; margin-left : clamp(18px,2vw,25px); } .sectionTitBox .titTopWrap .cpName { font-size : clamp(23px,2vw,33px); color : #E1E2E2; font-weight : 500; line-height : 1em; flex-grow : 1; display : flex; justify-content : flex-end; margin-top : 0.4em; } .sectionTitBox .titBotWrap { width : 100%; height : 4px; } .sectionTitBox .titBotWrap img { width : 100%; height : auto; } /* downloadWrap */ .downloadWrap { width : 100%; height : auto; padding : clamp(10px,2vw,18px) 0; border-bottom : 1px solid #D8D8D8; display : flex; align-items : center; } .downloadWrap .blankBox { width : clamp(25px,2.5vw,45px); margin-right : clamp(20px,2vw,30px); } .downloadWrap .downloadBox { margin-right : clamp(20px,3vw,30px); display : flex; align-items : center; } .downloadWrap .downloadBox:last-child { margin-right : 0; } .downloadWrap .downloadBox p { font-size : clamp(13px,2vw,18px); font-weight : 400; line-height : 1em; color : #999; } .downloadWrap .downloadBox:hover p { color : #d30000; } .downloadWrap .downloadBox img { width : clamp(20px,2vw,30px); height : auto; opacity : 0.8; margin-right : clamp(7px,1vw,8px); } /* subContentWrap */ .subContentWrap { width : 100%; height : auto; max-width : 1460px; display : inline-block; } /* subIconFullWrap */ .subIconFullWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; flex-direction : column; } .subIconFullWrap .divisionWrap { width : auto; display : flex; align-items : center; } .subIconFullWrap .divisionWrap:first-child { margin-bottom : clamp(20px,2vw,30px); } .subIconFullWrap .iconBoxWrap { width : clamp(330px,28vw,470px); height : clamp(100px,9vw,140px); display : flex; justify-content : flex-start; align-items : center; background : #fbfbfb; border-radius : 70px 10px 10px 70px; border : 1px solid #dddddd; cursor : default; } .subIconFullWrap .divisionWrap .iconBoxWrap:first-child { margin-right : clamp(20px,2vw,30px); } .subIconFullWrap .iconBox { width : clamp(100px,9vw,140px); height : 100%; display : flex; justify-content : center; align-items : center; flex-direction : column; border-radius : 50%; position : relative; overflow : hidden; transition : 0.6s; animation-delay : 0s; animation-duration: 5s; animation-fill-mode : both; animation-timing-function : linear; animation-iteration-count : infinite; } .subIconFullWrap .iconBox img { width : 40%; height : auto; margin-bottom : clamp(8px,1vw,10px);} .subIconFullWrap .iconBox p { font-size : clamp(13px,1.5vw,16px); color : #fff; } .subIconFullWrap .iconTextBox { flex-grow : 1; display : flex; align-items : flex-start; justify-content : flex-start; padding-left : clamp(15px,1.5vw,20px); flex-direction : column; } .subIconFullWrap .iconText { font-size : clamp(15px,1.5vw,20px); word-break : keep-all; } .subIconFullWrap .textTit { font-size : inherit; font-weight : 500; } .subIconFullWrap .textValue { font-size : clamp(17px,1.5vw,20px); color : #952124; font-weight : 500; } .subIconFullWrap .textTop { font-size : clamp(14px,1.5vw,16px); color : #666; } .subIconFullWrap .textPS { font-size : clamp(13px,1vw,14px); font-weight : 300; } .subIconFullWrap .iconWrap .iconTit { width : auto; height : clamp(45px,3vw,52px); font-size : clamp(20px,2vw,24px); font-weight : 600; margin-bottom : clamp(8px,1vw,11px); line-height : 1.2em; display : flex; flex-direction : column; justify-content : center; } .subIconFullWrap .iconWrap .iconTitPS { width : auto; font-size : clamp(13px,1.3vw,15px); font-weight : 400;} .subIconFullWrap .iconWrap .iconBoxWrap { width : auto; height : auto; display : flex;} .subIconFullWrap .iconWrap .iconBox { display : flex; align-items : center; justify-content : center; flex-direction : column; } .subIconFullWrap .iconWrap .iconBox.marginRight { margin-right : clamp(10px,1vw,15px); } .subIconFullWrap .iconWrap .iconBox .iconImg { width : clamp(90px,10vw,130px); height : clamp(90px,10vw,130px); border-radius : 50%; display : flex; flex-direction : column; align-items : center; justify-content : center; margin-bottom : clamp(8px,1vw,12px);} .subIconFullWrap .iconWrap .iconBox .iconImg img { width : clamp(30px,3vw,49px); height : auto; } .subIconFullWrap .iconWrap .iconBox .iconImg p { font-size : clamp(12px,1.5vw,16px); color : #fff; line-height : 1em; margin-top : 0.7em; font-weight : 300; } .subIconFullWrap .iconWrap .iconBox .iconImgTit { font-size : clamp(16px,2vw,20px); } .subIconFullWrap .iconWrap .iconBox .iconImgTit span { font-size : clamp(18px,2vw,24px); font-weight : 600; color : #952124; } .subIconFullWrap .iconWrap .iconBox .iconImgTit.height { height : clamp(60px,5vw,72px);} .subIconFullWrap .iconLine { width : 2px; height : clamp(50px,4vw,60px); background : #1c9c3a66; margin : 0 clamp(30px,3vw,40px); } /* 표 - whiteBackWrap */ .dhncoSub .whiteBackWrap { width : 100%; height : auto; background : #fff; padding : clamp(10px,2vw,16px) 14px 0 14px;} .dhncoSub .whiteBackWrap .contentBox { width : 100%; height : auto; display : inline-block; } .paddingleft_1pro { padding-left : 1%; } .dhncoSub .whiteBackWrap .contentBox .etc_text ,.dhncoSub .whiteBackWrap .contentBox .etc_text span { font-size : clamp(15px,1.5vw,18px); color : #666; font-weight : 300; text-align : left; } .dhncoSub .whiteBackWrap .contentBox .etc_text span.strong { color : #000; font-weight : 500; } .dhncoSub .whiteBackWrap .contentBox .listWrap { width : 100%; display : flex; align-items : stretch; margin-bottom : 2px; } .dhncoSub .whiteBackWrap .contentBox .listWrap:last-child { margin-bottom : 0; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox { width : 25%; display : flex; justify-content : center; padding: clamp(6px,3vw,12px) clamp(15px,3vw,20px); align-items : center; background : #EDEEEE; flex-direction : column; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p { font-size : clamp(16px,1.5vw,20px); font-weight : 500; line-height : 1.5em; padding : 0 3%; display : flex; align-items : center; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p.flex_column { flex-direction : column; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .smallfont { font-size : clamp(13px,1.5vw,17px); font-weight : 300; line-height : 1.5em; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap { width : 100%; height : auto; display : flex; justify-content : center; padding-bottom : clamp(3px,2vw,13px); padding-top : clamp(3px,2vw,13px); } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap:first-child { padding-top : 0; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap:last-child { padding-bottom : 0; } .TopDottedLine_white { border-top : 4px dotted #ffffff99; } .TopDottedLine_gray { border-top : 4px dotted #EDEEEE; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p { justify-content : center; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox { width : 75%; flex-grow : 1; padding : clamp(10px,3vw,20px) clamp(15px,3vw,20px); text-align : left; display : flex; border-bottom : 2px solid #EDEEEE; flex-direction : column; justify-content : center; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox p { font-size : clamp(15px,1.5vw,18px); color : #666; word-break : keep-all; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox p span { font-size : clamp(15px,1.5vw,18px); color : #666; word-break : keep-all; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox_noBorder { width : 100%; flex-grow : 1; padding : 0; text-align : left; display : flex; border-bottom : 0; flex-direction : column; justify-content : center; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox_noBorder p { font-size : clamp(15px,1.5vw,18px); color : #666; word-break : keep-all; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox_noBorder p span { font-size : clamp(15px,1.5vw,18px); color : #666; word-break : keep-all; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox_noBorder p span.strong { color : #000; font-weight : 500; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox .textBox_innerWrap { width : 100%; height : auto; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox .textBox_innerWrap:nth-child(2n-1) { padding-bottom : clamp(15px,3vw,20px); } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox .textBox_innerWrap:nth-child(2n) { padding-top : clamp(15px,3vw,20px); } .TopDottedLine_white { border-top : 4px dotted #ffffff99; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox span.strong { font-size : clamp(15px,1.5vw,18px); color : #000; word-break : keep-all; } .dhncoSub .whiteBackWrap .contentBox .textBox_subTitle { width : 100%; height : auto; text-align : left; margin-bottom : clamp(10px,2vw,16px); } .dhncoSub .whiteBackWrap .contentBox .textBox_subTitle p { font-size : clamp(16px,1.5vw,20px); } .dhncoSub .whiteBackWrap .contentBox .title { display : inline-block; width : 100%; text-align : left; margin-bottom : 5px; } .dhncoSub .whiteBackWrap .contentBox .title p ,.dhncoSub .whiteBackWrap .contentBox .title span { color : #fff; padding : 5px 15px; background-color : #32a09b; font-size : clamp(18px,1.5vw,22px); border-radius : 10px; display : inline-block; } /* contentWrap Tit */ .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; } .dhncoSub .textWrap .contFont { margin-top : 0; } /* contentWrap font */ .dhncoSub .wrapTitBefore.None { border : none; background : none; } .dhncoSub .wrapTitBefore.None:before { content : ''; width : 0; height : 0; background-color : none; } .dhncoSub .contFont { font-size : clamp(15px,2vw,18px); color : #666; text-align : left; width : calc(100% - 14px); display : flex; align-items : stretch; margin-top : clamp(8px,1vw,10px); flex-direction : row; } .dhncoSub .contFont.flex_column { flex-direction : column; } .dhncoSub .contFont span { font-size : clamp(15px,2vw,18px); color : #666; text-align : left; } .dhncoSub .contFont.column .money_tt { width : clamp(250px,34vw,290px); } .dhncoSub .technicBox .contFont span { font-size : clamp(15px,2vw,18px); color : #666; text-align : left; } .dhncoSub .technicBox .contFont span.strong { font-weight : 500; } .dhncoSub .contFont .money_tt { padding : clamp(3px, 2%, 6px) clamp(8px, 3%, 16px); border : 1px solid #999;font-size : clamp(15px,2vw,18px); display : flex; background-color : #999; color : #fff; align-items : center; flex-direction : row; } .dhncoSub .contFont.width .money_tt { width : clamp(140px,25vw,152px);} .dhncoSub .contFont .money_tt.width100pro { width : 100%; } .dhncoSub .contFont .money_tt i { color : #fff; width : 14px; height : auto; margin-right : 5px; } .dhncoSub .contFont .money_tt .leftWrap { display : flex; align-items : center; padding-right : clamp(8px, 3%, 16px); min-width : 65px; } .dhncoSub .contFont .money_tt .leftWrap p { font-size : clamp(15px,2vw,18px); } .dhncoSub .contFont .money_tt .rightWrap { padding : clamp(8px, 3%, 16px) clamp(8px, 3%, 16px) clamp(8px, 3%, 16px) clamp(8px, 3%, 8px); margin : clamp(8px, 3%, 16px) 0; background-color : #ffffffcc; width : calc(100% - 81px); } .dhncoSub .contFont .money_tt .rightWrap.rightWrap_width_custom { width : calc(100% - 70px); } .dhncoSub .contFont .money_tt .rightWrap p ,.dhncoSub .contFont .money_tt .rightWrap span { color : #666; font-weight : 400; font-size : clamp(15px,2vw,18px); line-height : 1.7em; width : 100%; } .dhncoSub .contFont .money_tt span.mobile_customfont { color : #fff; padding-left : 6px; } .dhncoSub .contFont .money_tt .rightWrap p.rightWrap_bottomWhite { color : #333; font-weight : 400; font-size : clamp(15px,2vw,18px); line-height : 1.7em; background-color : #fff; padding : clamp(5px, 2%, 10px); } .dhncoSub .contFont .money_ct { color : #666; border : 1px solid #999; font-size : clamp(15px,2vw,18px); padding : clamp(3px, 2%, 6px) clamp(8px, 3%, 16px); width : 120px; display : flex; align-items : center; justify-content : center; } .pc_width_80pro { width : 80%; } /* workDetailWrap */ /* A A A : A : A : A : */ .workDetailWrap { width : 100%; height : auto; } .workDetailWrap .workDetailBox { width : 100%; height : auto; margin-top : clamp(8px,1vw,10px); display : flex; } .workDetailWrap .workDetailBox.moneyWrap { flex-wrap : wrap; } .workDetailWrap .workDetailBox.moneyWrap .contFont { display : flex; flex-direction : row; align-content : flex-start; align-items : flex-start; } .workDetailWrap .workDetailBox.moneyWrap .contFont.flex_column { flex-direction : column; } .workDetailWrap .workDetailBox .detailListWrap { width : 100%; height : auto; display : flex; align-items : center; } .workDetailWrap .workDetailBox .detailListWrap .detailTit { width : clamp(100px,15vw,250px); display : flex; align-items : center; background : #F1F1F1; } .workDetailWrap .workDetailBox .detailListWrap .detailTit p { font-size : clamp(16px,2vw,20px); font-weight : 500; } /* technicWrap */ .technicWrap { width : 100%; height : auto; } .technicWrap .technicBox { width : 100%; height : auto; margin-top : clamp(8px,1vw,10px); display : flex; flex-wrap : wrap; } .technicWrap .technicBox .tecnicDetailWrap { padding : clamp(17px,2vw,18px) 0; margin-left : clamp(10px,2vw,14px); background : #f1f1f1; margin-top : clamp(8px,1vw,10px); width : 100%; } .technicWrap .technicBox .tecnicDetailWrap.left { padding-left : clamp(10px,2vw,18px);} .technicWrap .technicBox .tecnicDetailWrap .contFont { display : flex; font-size : clamp(15px,2vw,18px); text-indent : 0; margin-left : 0; color : #666; font-weight : 400; } .technicWrap .technicBox .tecnicDetailWrap .contFont.indentt { text-indent : -0.9em; margin-left : 0.9em;} .technicWrap .technicBox .tecnicDetailWrap .textWrap:nth-child(n+2) .contFont { margin-top : clamp(5px,1vw,8px); } .technicWrap .technicBox .tecnicDetailWrap .contFont.sub5-3 { text-indent : -1.4em; margin-left : 1.4em;} .tableWrap { width : 100%; height : auto; margin-top : clamp(10px,2vw,16px); overflow-x : scroll; } .tableWrap::-webkit-scrollbar { height : 8px; } .tableWrap::-webkit-scrollbar-thumb { background : #d3d3d3; border-radius : 5px; } .tableWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .table_ct { width : 100%; height : auto; display : inline-block; margin-bottom : 10px; min-width : 1100px; border : 1px solid #bbb; border-bottom : none; } .tableTitWrap { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : stretch; text-align : center; } .tableTitWrap.flex_wrap_on { flex-wrap : wrap; } .tableTitWrap .tableTitWrap_left { width : calc(100% - 95px); display : flex; flex-direction : row; flex-wrap : wrap; } .tableTitWrap .tableTitWrap_right { width : 95px; display : flex; align-items : center; background : #359993; justify-content : center; } .tableTitWrap .tableTitWrap_right p { font-size : clamp(14px,2vw,16px); font-weight : 500; color : #fff; text-align : center; } .tableTit { display : flex; align-items : center; justify-content : center; border-right : 1px solid #bbb; padding : 10px 0; background : #359993; } .tableTit:last-child { margin-right : 0; } .tableTit.black { background : #323333; } .tableTit p { font-size : clamp(14px,2vw,16px); font-weight : 500; color : #fff; text-align : center; } .tableTit.tableTit_1 { width : 90px; } .tableTit.tableTit_2 { width : 13%; } .tableTit.tableTit_3 { width : calc(87% - 90px); border-right : none;} .tableTit.tableTit_4 { width : 20%; } .tableTit.tableTit_5 { width : 13%; } .tableTit.tableTit_6 { width : 20%; } .tableTit.tableTit_sec1 ,.tableValue_sec1 { width : 23%; } .tableTit.tableTit_sec2 ,.tableValue_sec2 { width : 12%; } .tableTit.tableTit_sec3 ,.tableValue_sec3 { width : 65%; flex-grow : 1; } .back_light_green { background : #d5efed !important; } .tableValueWrap { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : stretch; text-align : center; } .tableValueWrap.flex_wrap_on { flex-wrap : wrap; } .tableValueWrap .tableValueWrap_left { width : calc(100% - 95px); display : flex; flex-direction : column; flex-wrap : wrap; } .tableValueWrap .tableValueWrap_left .value_innerWrap { display : flex; width : 100%; } .tableValueWrap .tableValueWrap_left .value_innerWrap:first-child { margin-top : 0px; } .tableValueWrap .tableValueWrap_right { width : 95px; display : flex; align-items : center; background : #F7F7F7; justify-content : center; border-bottom : 1px solid #bbb; } .tableValue_tableWrap { width : 100%; height : auto; text-align : left; display : flex; align-items : stretch; background : #fff; } .tableValue_tableWrap .leftWrap { width : 65%; flex-grow : 1;} .tableValue_tableWrap .rightWrap { width : 80px; display : flex; background : #f7f7f7; } .tableValue_tableWrap .rightWrap p { display : flex; height : 100%; align-items : center; justify-content : center; } .tableValue_tableWrap .leftWrap .topWrap { display : flex; background : #f7f7f7; } .tableValue_tableWrap .leftWrap .bottomWrap { display : flex; background : #f7f7f7; } .tableValue_tableWrap .leftWrap p ,.tableValue_tableWrap .leftWrap p span ,.tableValue_tableWrap .rightWrap p ,.tableValue_tableWrap .rightWrap p span ,.tableValueWrap .tableValueWrap_right p { font-size : clamp(15px,1.5vw,18px); font-weight : 400; line-height : 1.5em; color : #666; } .tableValue_tableWrap .leftWrap p.table_main_content { text-align : left; padding : clamp(8px, 3%, 16px); } .tableValue { display : flex; align-items : center; justify-content : center; background : #F7F7F7; border-right : 1px solid #bbb; border-bottom : 1px solid #bbb; } .tableValue:last-child { margin-right : 0; } .tableValue p { width : 100%; padding : clamp(10px,3vw,20px) clamp(7px,2vw,20px); font-size : clamp(15px,1.5vw,18px); font-weight : 400; color : #666; text-align : center; word-break : normal; } .tableValue p.table_long_ct { width : 100%; padding : clamp(10px,3vw,20px) clamp(7px,2vw,20px); text-align : left; font-size : clamp(15px,1.5vw,18px); word-break : normal; } .tableValue p.table_long_ct span ,.tableValue p.table_long_ct span { font-size : clamp(15px,1.5vw,18px); font-weight : 400; } .tableValue.tableValue_1 { width : 90px;} .tableValue.tableValue_2 { width : 13%;} .tableValue.tableValue_3 { width : calc(87% - 90px); border-right : none; } .tableValue.tableValue_4 { width : 20%;} .tableValue.tableValue_5 { width : 13%;} .tableValue.tableValue_6 { width : 20%;} .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; } } .dhncoSub .contFont .money_tt .rightWrap span.strong { color : #000; font-weight : 400; } p span.degree_0 { display : inline-block; margin-left : 0.7em; text-indent : -0.7em; } p span.degree_1 { display : inline-block; margin-left : 1em; text-indent : -1em; } p span.degree_1_1 { display : inline-block; margin-left : 1.3em; text-indent : -1.3em; } p span.degree_2 { display : inline-block; margin-left : 1.5em; text-indent : -1.5em; } p span.degree_3 { display : inline-block; margin-left : 2em; text-indent : -2em; } .link { font-size : clamp(16px,2vw,20px); color : #fff; line-height : 1em; padding : 0.7em 1.8em; background : #38ADDC; display : inline-block; transition : .3s; margin : clamp(30px,3vw,50px) 20px 0; border-radius : 10px;} .link:hover { color : #fff000; box-shadow : 0px 0px 10px 0px #1c48b4; transition : .3s; background : #1c48b4; } /* subIconFullWrap 반응형 */ @media (max-width:739px) { /* A A A : A : A : A : */ .subIconFullWrap .divisionWrap { flex-direction : column; width : 100%;} .subIconFullWrap .divisionWrap:first-child { margin-bottom : 0;} .subIconFullWrap .divisionWrap .iconBoxWrap:first-child { margin-right : 0; } .subIconFullWrap .iconBoxWrap { width : 100%; height : auto; background : none; border : none; flex-direction : column; margin-bottom : 25px;} .subIconFullWrap .iconBox { width : clamp(90px,9vw,140px); height : clamp(90px,9vw,140px); position : relative; } .subIconFullWrap .iconTextBox { width : 100%; background : #fbfbfb; border : 1px solid #ddd; padding : 25px 0 15px; margin-top : -15px; align-items : center; border-radius : 10px; } .dhncoSub .contFont .money_tt .rightWrap p ,.dhncoSub .contFont .money_tt .rightWrap span { width : auto; } } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* tabMenuWrap */ .tabMenuWrap .menuListWrap .tabList { width : calc(97% / 3); background : #fff; cursor : pointer; transition : .3s; margin-right : 1%; } .tabMenuWrap .menuListWrap .tabList:nth-child(5n) { margin-bottom : 0; margin-right : 1%; } .tabMenuWrap .menuListWrap .tabList:nth-child(3n) { margin-right : 0; margin-bottom : 1%; } .tabMenuWrap .menuListWrap .tabList:last-child { margin-bottom : 0; } .tabMenuWrap .menuListWrap.styleB .tabList { width : calc(97% / 3); } .tabMenuWrap .menuListWrap.styleB .tabList:nth-child(4n) ,.tabMenuWrap .menuListWrap.styleB .tabList:nth-child(4n) ,.tabMenuWrap .menuListWrap.styleB .tabList:nth-child(5n) { margin-right : unset; margin-bottom : unset; } .tabMenuWrap .menuListWrap.styleB .tabList { margin : 0.5% 0 0.5% 1%; } .tabMenuWrap .menuListWrap.styleB .tabList:last-child { margin-bottom : 0; margin-right : 0;} .dhncoSub .contFont { flex-direction : column; } .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; padding : 10px 0; align-items : flex-start; flex-direction : row; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p { padding : 0.3em clamp(15px,3vw,20px);} .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap { padding : 0; display : inline-block; width : auto; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap:first-child { padding : 0; padding-left : clamp(15px,3vw,20px); } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap:last-child { padding : 0; border : 0; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap p { padding : 5px 0; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox { width : 100%; } .dhncoSub .contFont .money_ct { justify-content : center; } .dhncoSub .contFont .money_tt .rightWrap.table_width_custom p ,.dhncoSub .contFont .money_tt .rightWrap.table_width_custom span { width : auto; } .dhncoSub .onlyPC { display : none; } .pc_width_80pro { width : 100%; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* tabMenuWrap */ .dhncoSubSection .contentIncludeBox { padding-top : 0px; } .tabMenuWrap .menuListWrap { display : none; } .tabMenuWrap .mobileMenuListWrap { display : block; } .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; padding : 10px 0; align-items : flex-start; flex-direction : row; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox.mobile_flex_center { justify-content : center; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox p { padding : 0.3em clamp(15px,3vw,20px);} .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap { padding : 0; display : inline-block; width : auto; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap:first-child { padding : 0; padding-left : clamp(15px,3vw,20px); } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap:last-child { padding : 0; border : 0; } .dhncoSub .whiteBackWrap .contentBox .listWrap .nameBox .nameBox_innerWrap p { padding : 5px 0; text-align : left; line-height : 1.5em; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox { width : 100%; } .TopDottedLine_white { border-top : 0px; display : none; } .tabMenuWrap .mobileMenuListWrap .menuListBox .mobileMenuList.active { color : #fff; background : #31A09B; } .workDetailWrap .workDetailBox.moneyWrap .contFont.flex_stretch { align-items : stretch; } .dhncoSub .contFont { flex-direction : column; } .workDetailWrap .workDetailBox.moneyWrap .contFont.column { flex-direction : column;} .dhncoSub .contFont.column .money_tt { width : 100%;} .dhncoSub .contFont.column .money_ct { width : 100%; justify-content : flex-start;} .dhncoSub .contFont .money_ct { width : 83px; justify-content : center; } .dhncoSub .contFont .money_tt.mobile_width_100 { width : 100%; } .dhncoSub .contFont .money_tt.mobile_flex_column { flex-direction : column; } .dhncoSub .contFont .money_tt .leftWrap { padding-right : 0; justify-content : flex-start; width : 100%; } .dhncoSub .contFont .money_tt .rightWrap { width : 100%; } .dhncoSub .contFont .money_tt .rightWrap.rightWrap_width_custom { width : 100%; } .dhncoSub .contFont .money_tt span { color : #fff; font-weight : 500; font-size : clamp(15px,2vw,18px); line-height : 1.2em; } .dhncoSub .contFont .money_tt span.mobile_customfont { font-size : 12px; font-weight : 300; padding : 0; } .dhncoSub .onlyPC { display : none; } .dhncoSub .mobileX { display : none;} /* sectionTitBox */ .sectionTitBox .titTopWrap .sectionTit { margin-left : 0; flex-grow : 1; } .sectionTitBox .titTopWrap .cpName { display : none; } /* downloadWrap */ .downloadWrap { justify-content : center; } .dhncoSub p, .dhncoSub span ,.dhncoSub .whiteBackWrap .contentBox .listWrap .textBox p ,.dhncoSub .whiteBackWrap .contentBox .listWrap .textBox p span ,.dhncoSub .whiteBackWrap .contentBox .listWrap .textBox_noBorder p ,.dhncoSub .whiteBackWrap .contentBox .listWrap .textBox_noBorder p span { word-break : normal; } .pc_width_80pro { width : 100%; } .dhncoSub .whiteBackWrap .contentBox .listWrap .textBox span.strong { width : 100%; display : block;} } @media (max-width:320px) { .dhncoSub .whiteBackWrap { padding : 10px 0; } .sectionTitBox .titTopWrap .subLogoBox { padding : 6px 0; background : #31A09B; } .sectionTitBox .titTopWrap .sectionTit { padding : 6px 0; } .sub2_3_16_custom { width : 95% !important; margin-left : 5%; } }