@charset "euc-kr"; /* 2022-11-23 : CUG 수정(업데이트) 시 마다 링크 발생되어 아이콘 생기는 문제로 hidden 처리함. .clsHyper {position: relative;} .clsHyper::before { content: "\f059"; position: absolute; top: -10px; right: 50%; font-family: 'FontAwesome'; font-size: 12px; transition: all 0.3s; opacity: 0.06; } .clsHyper:hover::before {top: -12px; opacity: 0.7;} */ /******************************************************************************************************************************** * 콘텐츠 기본(공통) ********************************************************************************************************************************/ /*------ 대타이틀 -----------------------------------------*/ .pTitle { display: block; margin: 60px 0 45px 0; text-align: center; } .pTitle h3 { display: inline-block; position: relative; padding: 0 0 12px 0; font-size: 50px; color: #222; line-height: 1.2em; font-weight: bold; } .pTitle h3.kor { font-size: 42px; } .pTitle h3::before { content: ""; display: block; position: absolute; bottom: 0; left: 50%; width: 120px; height: 1px; margin: 0 0 0 -60px; background: #555; z-index: 2; } .pTitle h3::after { content: ""; display: block; position: absolute; bottom: -2px; left: 50%; width: 50px; height: 5px; margin: 0 0 0 -25px; border-radius: 5px; background: #ff643c; z-index: 3; } .pTitle h4 { display: block; margin: 16px 0 0 0; font-size: 110%; line-height: 150%; } .pTitle h4 strong { display: block; font-size: 110%; } /*------ 중타이틀 -----------------------------------------*/ .mTitle { clear: both; position: relative; margin: 0 0 15px 0; font-size: 25px; color: #444; letter-spacing: -2px; line-height: 1.2em; font-weight: bold; overflow: hidden; } .mTitle span.stxt { display: block; margin: 10px 0 0 0; font-size: 15px; color: #666; letter-spacing: 0; line-height: 150%; font-weight: normal; } .mTitle span.stxt2 { display: inline-block; position: relative; margin: 0 0 0 20px; font-size: 13px; color: #999; letter-spacing: 0; line-height: 150%; font-weight: 300; } .mTitle span.stxt2:before { content: ""; position: absolute; top: 5px; left: -14px; width: 1px; height: 10px; background: #d7d7d7; } .mTitle .rt-txt { position: absolute; bottom: -5px; right: 0; font-size: 12px; letter-spacing: -0.5px; font-weight: normal; } .mTitle .more { clear: both; display: inline-block; position: absolute; bottom: -1px; right: 4px; height: 20px; font-size: 14px; color: #aaa; letter-spacing: -0.5px; line-height: 20px; font-weight: normal; text-decoration: none; } .mTitle .more i { margin: 0 5px 2px 0; font-size: 14px; vertical-align: bottom; transition: all 0.3s; } .mTitle .more:hover i { color: #ff643c; } .mTitle .icon { margin: 0 10px 3px 0; font-size: 100%; color: #555; vertical-align: middle; } .mTitle .icon.counselor { margin: 0 12px 0 0; color: #555; } /* size */ .mTitle.big { padding-left: 0px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; font-size: 28px; color: #333; font-weight: 700; } .mTitle.big2 { padding-left: 0px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; padding-bottom: 5px; font-size: 32px; color: #333; font-weight: 700; } .mTitle.middle { margin-bottom: 18px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; font-size: 28px; letter-spacing: -1px; font-weight: 700; } .mTitle.small { margin-bottom: 10px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; font-size: 23px; letter-spacing: -1px; font-weight: 700; } .mTitle.small.bottom { margin-bottom: 12px !important; } .mTitle.small2 { margin-bottom: 12px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; font-size: 21px; letter-spacing: -0.6px; font-weight: 700; } .mTitle.nor { font-weight: normal !important; } .mTitle.Noto { letter-spacing: -1px; } /* margin, padding */ .mTitle.mypage { margin-bottom: 50px; } .mTitle.line { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #333; } .mTitle2 { clear: both; position: relative; margin: 0 0 25px 0; font-size: 150%; letter-spacing: -1px; line-height: 1.2em; font-weight: bold; overflow: hidden; } .mTitle2.line { padding: 0 0 15px 0; border-bottom: 1px solid #d5d5d5; } .mTitle2.line2 { padding-bottom: 20px; } .mTitle2.line2::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: url("/pds/images/comm/comm_barBg.png"); } /*------ 소타이틀 -----------------------------------------*/ .sTitle { clear: both; position: relative; margin: 0 0 14px 0; font-size: 140%; letter-spacing: -1px; line-height: 1.2em; font-weight: bold; overflow: hidden; } /*----- Tab Menu -----------------------------------------*/ /* tab width set */ ul.c2 li { width: 50%; } ul.c3 li { width: 33.33333333333333%; } ul.c4 li { width: 25%; } ul.c5 li { width: 20%; } ul.c6 li { width: 16.66666666666667%; } ul.c7 li { width: 14.28571428571429%; } ul.c8 li { width: 12.5%; } ul.c9 li { width: 11.11111111111111%; } ul.c10 li { width: 10%; } ul.c11 li { width: 9.090909090909091%; } ul.c12 li { width: 8.333333333333333%; } ul.c13 li { width: 7.692307692307692%; } ul.c14 li { width: 7.142857142857143%; } ul.c15 li { width: 6.666666666666667%; } ul.c16 li { width: 6.25%; } ul.c17 li { width: 5.882352941176471%; } ul.c18 li { width: 5.555555555555556%; } .comm-pTabmenu { position: relative; margin: 0 0 45px 0; overflow: hidden; } .comm-pTabmenu.btm-50 { margin-bottom: 50px; } .comm-pTabmenu ul { float: left; width: 100%; } .comm-pTabmenu li { float: left; position: relative; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #444; border-right: 1px solid #dfdfdf; transition: all linear 0s; } .comm-pTabmenu li:first-child { border-left: 1px solid #dfdfdf; } .comm-pTabmenu li.active { border-top-color: #444; border-bottom-color: #fff; border-left: 1px solid #444; border-right-color: #444; } .comm-pTabmenu li.active::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: -7px; width: 6px; background: url("/pds/images/comm/tab_shadow.png") no-repeat 0 0; background-size: 100% 100%; z-index: 2; } .comm-pTabmenu li.active:last-child::after { display: none; } .comm-pTabmenu li.active::before { content: ""; display: block; position: absolute; top: 0; right: 0; width: 0; border-width: 0 8px 8px 0; border-style: solid; border-color: #444 #444 #fff #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), -1px 1px 2px rgba(0, 0, 0, 0.2); } .comm-pTabmenu li a { display: block; height: 56px; padding: 0 0 0 0; font-size: 15px; color: #999; letter-spacing: -0.2px; line-height: 56px; text-align: center; vertical-align: middle; text-decoration: none; background: #fafafa; cursor: pointer; } .comm-pTabmenu.spacing-10 li.active a { letter-spacing: -0.8px; } .comm-pTabmenu.middle li a { font-size: 17px; } .comm-pTabmenu li:hover a { color: #222; font-weight: normal; } .comm-pTabmenu li.active a { font-size: 15.5px; color: #222; line-height: 60px; font-weight: bold; background: #fff !important; } .comm-pTabmenu ul.etc-line::before { content: ""; position: absolute; bottom: 0px; left: 0; right: 0; border-bottom: 1px solid #444; } .comm-pTabmenu ul.etc-line li.active:last-child::after { display: block; } .comm-pTabmenu li a span.num { display: inline-block; margin: 0 0 2px 6px; font-size: 14px; color: #999; vertical-align: middle; } .comm-pTabmenu li.active:hover a span.num { font-weight: bold; } .comm-pTabmenu li.active a span.num { color: #fa4b2a; } /*----- 글자가 많을 경우 -----*/ .comm-pTabmenu.small li a { font-size: 103%; } .comm-pTabmenu.small li.active a { font-size: 107%; letter-spacing: -0.8px; } .comm-pTabmenu.big li a { font-size: 16px; letter-spacing: -0.5px; } .comm-pTabmenu.big li.active a { font-size: 18px; letter-spacing: -1px; } .comm-pTabmenu.ig li.active a { font-size: 18px; } /*----- Tab Menu(Middle형) -----------------------------------------*/ .comm-mTabmenu { position: relative; margin: 0 0 40px 0; overflow: hidden; } .comm-mTabmenu ul { float: left; width: 100%; } .comm-mTabmenu li { float: left; position: relative; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #777; border-right: 1px solid #dfdfdf; transition: all linear 0s; } .comm-mTabmenu li:first-child { border-left: 1px solid #dfdfdf; } .comm-mTabmenu li.active { border-top-color: #777; border-bottom-color: #fff; border-left: 1px solid #777; border-right-color: #777; } .comm-mTabmenu li.active::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: -7px; width: 6px; background: url("/pds/images/comm/tab_shadow.png") no-repeat 0 0; background-size: 100% 100%; z-index: 2; } .comm-mTabmenu li.active:last-child::after { display: none; } .comm-mTabmenu li a { display: block; height: 48px; padding: 0 0 0 0; font-size: 105%; color: #999; letter-spacing: -0.5px; line-height: 46px; text-align: center; vertical-align: middle; text-decoration: none; background: #fafafa; transition: all 0.1s; cursor: pointer; } .comm-mTabmenu li:hover a { color: #222; font-weight: normal; } .comm-mTabmenu li.active a { font-size: 110%; color: #222; line-height: 48px; font-weight: bold; background: #fff !important; } /*------ 중간 Tab ------*/ .comm-subTabmenu { clear: both; position: relative; margin: 0 -4px 40px 0; padding: 0 0 5px 0; background: url("/pds/images/sub/silmu/singo_subjBg.png") no-repeat right center; overflow: hidden; } .comm-subTabmenu.bg-None { background: none !important; } .comm-subTabmenu.bg-bottom { background-position: right 109px !important; } .comm-subTabmenu.bg-bottom2 { background-position: right 64px !important; } .comm-subTabmenu ul { float: left; width: 100%; } .comm-subTabmenu li { float: left; position: relative; padding: 0 4px 0 0; } .comm-subTabmenu .twoLine li { margin: 0 0 5px 0; } .comm-subTabmenu li a { display: block; position: relative; height: 40px; font-size: 14px; color: #888; letter-spacing: -0.5px; line-height: 38px; text-decoration: none; text-align: center; border: 1px solid #cfcfcf; border-radius: 4px; background: #f9f9f9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 20px 10px 0 rgba(255, 255, 255, 0.9) inset; transition: all 0.2s; } .comm-subTabmenu li a:hover { color: #222; } .comm-subTabmenu li a:active { bottom: -2px; } .comm-subTabmenu li.active a { color: #fff; font-weight: bold; border-color: #444; background: #444; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); /* 0 20px 10px 0 rgba(255,255,255, 0.05) inset */ } .comm-subTabmenu li.active a::after { content: ""; position: absolute; bottom: -11px; left: 50%; width: 0; height: 0; margin: 0 0 0 -5px; border: 5px solid; border-color: #444 transparent transparent transparent; } .comm-subTabmenu li.word a { padding: 0 30px; } .comm-subTabmenu li.sword a { padding: 0 20px; } .comm-subTabmenu li.sword2 a { padding: 0 15px; } /* big */ .comm-subTabmenu.big li a { height: 48px; font-size: 16px; line-height: 43px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 24px 10px 0 rgba(255, 255, 255, 0.9) inset; } .comm-subTabmenu.big li.active a { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 24px 0 0 rgba(255, 255, 255, 0.02) inset; } /*------ 중간 Tab(NEW) ------*/ .comm-subTab-new { clear: both; position: relative; margin: 0 -5px 20px 0; padding: 0 0 10px 0; overflow: hidden; } .comm-subTab-new .tabs { float: left; width: 100%; margin: 0 -5px 0 0; } .comm-subTab-new .tabs li { float: left; padding: 0 5px 0 0; background: #fff; } .comm-subTab-new.cell .tabs li { padding-right: 3px; } .comm-subTab-new .tabs li a { display: block; position: relative; height: 50px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; font-size: 16.5px; color: #777; line-height: 46px; font-weight: 400; text-decoration: none !important; text-align: center; border: 2px solid transparent; background: #ececec; transition: all 0.2s; } .comm-subTab-new .tabs li a:hover { bottom: -2px; color: #333; font-weight: 500; border-color: #222; border-width: 1px; background: #fff; /* animation: item_Ani 0.2s ease-out; */ } /*----- active일 경우 -----*/ .comm-subTab-new .tabs li.active a { bottom: 0; color: #333; font-weight: 500; border-color: #555; background: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); animation: none; } .comm-subTab-new .tabs li.active a:hover { border-width: 2px; } .comm-subTab-new .tabs li.active a:after { content: ""; position: absolute; bottom: -17px; left: 50%; width: 0; height: 0; margin: 0 0 0 -8px; border: 8px solid; border-color: #222 transparent transparent transparent; /* animation: item_Ani 0.2s ease-out; */ } /* ssub */ .comm-subTab-new .ssub { clear: both; display: none; margin: 30px 2px 0 0; padding: 0 0 10px 0; overflow: hidden; } .comm-subTab-new .ssub ul { float: left; width: 100%; } .comm-subTab-new .ssub li { float: left; padding: 0 2px 0 0; } .comm-subTab-new .ssub li a { display: block; position: relative; height: 40px; font-size: 14px; color: #888; letter-spacing: -0.5px; line-height: 36px; text-decoration: none; text-align: center; border: 1px solid #d7d7d7; border-radius: 6px; background: #f9f9f9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 20px 10px 0 rgba(255, 255, 255, 0.9) inset; transition: all 0.2s; } .comm-subTab-new .ssub li a:hover { color: #333; } .comm-subTab-new .ssub li a:active { bottom: -2px; } .comm-subTab-new .ssub li a.active { color: #fff; font-weight: bold; border-color: #ff643c; background: #ff643c; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 20px 10px 0 rgba(255, 255, 255, 0.1) inset; } /* sssub tab */ .comm-ssubTab-new { clear: both; position: relative; margin: 0 0 35px 0; padding: 0 0 5px 0; overflow: hidden; } .comm-ssubTab-new a { display: block; position: relative; width: 49%; height: 50px; padding: 0 0 0 25px; font-size: 105%; color: #555; line-height: 47px; text-decoration: none; border: 1px solid #e0e0e0; background: #eaeaea; } .comm-ssubTab-new a:active { bottom: -2px; } .comm-ssubTab-new a::after { content: "GO"; display: block; position: absolute; top: 50%; right: 15px; width: 30px; height: 30px; margin: -15px 0 0 0; font-size: 10px; color: #fff; line-height: 29px; font-weight: bold; text-align: center; border-radius: 100%; background: #333; } .comm-ssubTab-new a.active { color: #fff; font-weight: bold; border-color: #333; background: #333; } .comm-ssubTab-new a.active::after { background: #ff643c; } /* Box형 tab */ .comm-boxTab { clear: both; position: relative; margin: 0; padding: 0 0 25px 0; } .comm-boxTab.mTP-minus25 { margin-top: -25px !important; } .comm-boxTab ul { float: left; width: 100%; } .comm-boxTab li { float: left; position: relative; padding: 0 0 0 2px; } .comm-boxTab li:first-child { padding: 0; } .comm-boxTab li a.flag { display: block; position: relative; height: 52px; font-size: 16px; color: #666; line-height: 47px; font-weight: bold; text-decoration: none !important; text-align: center; border: 2px solid #ddd; background: #e0e0e0; transition: all 0.15s; } .comm-boxTab li:hover a.flag { bottom: -2px; } .comm-boxTab li:hover a.flag, .comm-boxTab li.active a.flag { font-size: 17px; color: #111; line-height: 46px; border-color: #222; background: #fff; box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1); } .comm-boxTab li:hover .sub { display: inline-block; } .comm-boxTab li .sub { display: none; position: absolute; top: 55px; left: 2px; min-width: 120px; padding: 13px 0 10px 0; line-height: 150%; background-color: rgba(0, 0, 0, 0.8); z-index: 10; } .comm-boxTab li .sub::before { content: ""; position: absolute; top: -16px; left: 20px; width: 0px; height: 0px; border: 8px solid; border-color: transparent transparent #333 transparent; } .comm-boxTab li .sub a { display: block; height: 30px; padding: 0 25px 0 20px; font-size: 14px; color: #fff; line-height: 27px; text-decoration: none !important; transition: all 0.15s; } .comm-boxTab li .sub a:hover { color: #ff643c; } /*------ BOX형 내 콘텐츠(검색 등) -----------------------------------------*/ .comm-search-wp { clear: both; position: relative; margin: 0 0 60px 0; padding: 25px 30px 23px 30px; border-color: #c7c7c7 !important; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); } /*----- 검색조건 -----*/ .comm-search-wp.small { padding: 15px 30px 15px 30px; } .comm-search-wp.public { margin-bottom: 15px; padding: 15px 30px 15px 30px; } .comm-search-wp.public2 { margin-bottom: 20px; padding: 15px 30px 13px 30px; } .comm-search-wp.format { margin-bottom: 45px !importantx; padding: 15px 30px 13px 30px; } .comm-search-wp.default { margin-bottom: 40px !important; } .comm-search-wp table { width: 100%; table-layout: fixed; } .comm-search-wp th { height: 42px; padding: 2px 0 0 0; font-size: 100%; color: #555; font-weight: bold; text-align: left; vertical-align: middle; } .comm-search-wp th.Valign { padding-top: 20px; vertical-align: top; } .comm-search-wp th i { margin: 0 6px 1px 0; font-size: 18px; color: #555; vertical-align: middle; } .comm-search-wp th .icon { display: inline-block; width: 16px; height: 16px; margin: 0 6px 2px 0; vertical-align: middle; background: url("/pds/images/comm/ic_check2.png") no-repeat 0 0; } .comm-search-wp td { padding: 8px 0; } .comm-search-wp td.bt-None { padding-bottom: 0; } .comm-search-wp td .checkbox-field { display: inline-block; margin: 0 30px 0 0; } .comm-search-wp.consult td .checkbox-field { margin: 0 15px 0 0; } .comm-search-wp button { display: inline-block; height: 42px; padding: 0 20px 3px 20px; font-size: 14px; line-height: 40px; vertical-align: middle; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition: all 0.2s; } .comm-search-wp .btn-field { clear: both; position: relative; margin: 8px 0 0 0; padding: 15px 0 10px 0; text-align: right; border-top: 1px dotted #bbb; } .comm-search-wp .btn-field .sch { padding-left: 30px !important; padding-right: 30px !important; } .comm-search-wp .btn-field .guide-txt { display: inline-block; position: absolute; top: 30px; left: 0; font-size: 100%; color: #555; } .comm-search-wp .btn-field .guide-txt strong { color: #ff5529; } .comm-search-wp .btn-field .guide-txt i { margin: 0 6px 2px 0; font-size: 120%; color: #f47d31; vertical-align: middle; } .comm-search-wp .btn-field.inner { position: absolute; bottom: 23px; right: 35px; margin: 0; padding: 0; border: 0; } .comm-search-wp .radio-field { display: inline-block; } /* toggle */ .comm-search-wp .Toggle_detail { display: none; } .comm-search-wp .toggle-btn { display: inline-block; width: 110px; height: 22px; position: absolute; bottom: 61px; left: 50%; margin: 0 0 0 -50px; padding: 3px 0 0 4px; font-size: 12px; color: #fff; letter-spacing: -1px; line-height: 100%; text-decoration: none !important; text-align: center; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: #bbb; cursor: pointer; z-index: 2; } .comm-search-wp .toggle-btn:hover { background: #f47d31; } /* info */ .comm-search-wp .guide-btn { display: inline-block; position: absolute; top: 20px; right: 30px; height: 36px; padding: 0 15px; font-size: 13px; letter-spacing: -0.5px; line-height: 34px; font-weight: normal; text-decoration: none !important; border-radius: 4px; } .comm-search-wp .guide-btn i { margin: 0 6px 2px 0; font-size: 15px; font-weight: normal; vertical-align: middle; } /*--- calendar ---*/ .comm-search-wp .calendar-Btn { display: inline-block; margin: 0 0 0 6px; cursor: pointer; } .comm-search-wp .dateBtn { display: inline-block; height: 40px; margin: 0 0px 0 0; padding: 0 12px; font-size: 13px; color: #fff; letter-spacing: -0.5px; line-height: 38px; text-align: center; vertical-align: middle; text-decoration: none !important; border: 1px solid #a4acad; background: #b1b9ba; } .comm-search-wp .dateBtn.first { margin-left: 10px !important; } .comm-search-wp .dateBtn:hover { border-color: #676767; background: #777; } .comm-search-wp .dateBtn.active { border-color: #e98730; background: #f48d31; } .comm-search-wp .dateBtn.w1 { width: 70px; padding: 0; } .comm-search-wp .ui-datepicker-trigger { cursor: pointer; } .comm-search-wp .int-guide-txt { display: block; margin: 6px 0 0 0; font-size: 13px; color: #777; } .comm-search-wp .int-guide-txt.inline { display: inline-block !important; margin: 0 0 0 10px; font-size: 14px; color: #999; } .comm-search-wp .select-stit { display: inline-block; height: 42px; margin: 0 -5px 0 0; padding: 0 10px; font-size: 12px; color: #fff; line-height: 42px; text-align: center; vertical-align: middle; background: #999; } /*----- 하단 설명글 -----*/ .comm-search-wp .bottom-guide { clear: both; margin: 10px 0 20px 120px; } .comm-search-wp .bottom-guide li { clear: both; margin: 0 0 4px 0; padding: 0 0 0 10px; font-size: 13px; color: #666; line-height: 150%; background: url("/pds/images/comm/ic_dot1.gif") no-repeat 0 9px; } .comm-search-wp .bottom-guide li:last-child { margin-bottom: 0; } .comm-search-wp .bottom-guide.small li { margin-bottom: 0px; } /*------ Guide(사용법 등) -----------------------------------------*/ .comm-guide-wp { clear: both; position: relative; padding: 35px 30px 35px 225px; border: 3px solid #eee; background: url("/pds/images/comm/guide_bg(gray).png") no-repeat 55px 40px; } .comm-guide-wp .tit { margin: 0 0 20px 0; font-size: 145%; color: #3d495a; letter-spacing: -0.5px; font-weight: bold; } .comm-guide-wp li, .comm-guide-wp dd { margin: 0 0 15px 0; padding: 0 0 0 10px; font-size: 100%; line-height: 1.6em; background: url("/pds/images/comm/ic_dot1.gif") no-repeat 0 10px; } .comm-guide-wp li:last-child, .comm-guide-wp dd:last-child { margin-bottom: 0; } /*------ 하단 실무콘텐츠 List(rolling) -----------------------------------------*/ .comm-bottom-silmu-List { clear: both; position: relative; height: 50px !important; margin: 0 0 0 0; border-top: 1px solid #eee; background: #fff; } .comm-bottom-silmu-List .box { position: relative; height: 50px !important; text-align: left; } .comm-bottom-silmu-List .box .tit { display: inline-block; position: absolute; top: 13px; left: 0; height: 26px; padding: 0 10px; font-size: 12px; color: #fff; line-height: 24px; text-align: center; border-radius: 4px; background: #323e52; } .comm-bottom-silmu-List .box ul { margin: 0 0 0 85px; overflow: hidden; } .comm-bottom-silmu-List .box li { height: 50px; margin: 0 0 6px 0; padding: 15px 0 0 0; } .comm-bottom-silmu-List .box li:last-child { margin-bottom: 0; } .comm-bottom-silmu-List .box li a { display: inline-block; max-width: 430px; font-size: 14px; letter-spacing: -0.5px; line-height: 1.4em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .comm-bottom-silmu-List .box li span.writer { display: inline-block; height: 19px; margin: 0 8px 1px 0; padding: 0 4px 0 4px; font-size: 12px; color: #346db5; letter-spacing: -0.8px; line-height: 14px; font-weight: normal; vertical-align: bottom; border: 1px solid #5e8fcc; border-radius: 2px; background: #fff; } .comm-bottom-silmu-List .box .list-show { position: absolute; bottom: -4px; left: 0; right: 0; height: 0; margin: 0 5px 0 0; overflow: hidden; transition: height linear 0.2s; z-index: 10; } .comm-bottom-silmu-List .box .list-show ul { margin: 0; padding: 20px 0px 20px 25px; border: 1px solid #555; background: #fff; overflow: hidden; } .comm-bottom-silmu-List .box .list-show li { height: 22px; padding: 0; } .comm-bottom-silmu-List .box .list-show li a { max-width: 490px !important; } .comm-bottom-silmu-List .box:hover .list-show { height: 180px; } /*------ 기타 -----------------------------------------*/ .row2 { float: left; width: 50%; } .row3 { float: left; width: 33.333333%; } .row4 { float: left; width: 25%; } .row5 { float: left; width: 20%; } /*------ 콘텐츠 기능 버튼 ------*/ .comm-cnt-Btns { clear: both; position: relative; margin: -20px 0 15px 0; padding: 0 0 5px 0; text-align: right; z-index: 10; } .comm-cnt-Btns dl { float: right; } .comm-cnt-Btns dd { float: left; position: relative; margin: 0 0 0 4px; } .comm-cnt-Btns dd .btn-type { border-radius: 3px; } .comm-cnt-Btns dd a.sns { padding: 0 10px 0 12px; } .comm-cnt-Btns dd a.sns i { font-size: 130% !important; line-height: 28px; } .comm-cnt-Btns dd .sns-wp { display: none; position: absolute; top: 40px; right: 0; width: 330px; padding: 20px 0; text-align: left; border: 1px solid #aaa; background: #fff; box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.06); animation: snsBox_Ani 0.3s ease-out; z-index: 100; } .comm-cnt-Btns dd .sns-wp::before { content: ""; position: absolute; top: -20px; right: 10px; width: 0; height: 0; margin: 0 0 0 -10px; border: 10px solid; border-color: transparent transparent #aaa transparent; z-index: 100; } .comm-cnt-Btns dd .sns-wp .sns-close { display: block; position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; background: url("/pds/images/comm/close.png") no-repeat 0 0; background-size: 15px auto; cursor: pointer; } .comm-cnt-Btns dd .sns-wp .social-icon-wp { position: relative !important; top: 0 !important; left: 40px; } .comm-cnt-Btns dd .sns-wp .social-icon-wp ul { transform: scale(1.2); } @keyframes snsBox_Ani { from { transform: translate(0, -15%); } to { transform: translate(0, 0); } } .comm-cnt-Btns dd i.fa-angle-left { margin: 0 5px 2px -2px; font-size: 120%; vertical-align: middle; } .comm-cnt-Btns dd.back i { display: none; } .comm-cnt-Btns dd.back a { padding-left: 20px; padding-right: 10px; background-image: url("/pds/images/comm/ic_arrow2_1.png"); background-repeat: no-repeat; background-position: 8px 9px; background-size: auto 10px; } /* zoom in, out */ .comm-cnt-Btns dd.zoom { margin-right: 6px !important; } .comm-cnt-Btns dd a.zoom-btn { padding-left: 10px; padding-right: 10px; } .comm-cnt-Btns dd a.zoom-btn i { margin: 0; font-size: 10px !important; } /* TTS */ .comm-cnt-Btns dd a.tts { padding: 0 6px 0 12px; border-color: #c33737 !important; background-color: #d43c3c !important; } .comm-cnt-Btns dd a.tts i { font-size: 18px !important; line-height: 29px; } .comm-cnt-Btns dd.tts-wp:hover .tts-box { display: block; } .comm-cnt-Btns dd .tts-box { display: none; position: absolute; top: 30px; right: 0; width: 191px; padding: 12px 15px 15px 15px; text-align: left; border: 1px solid #aaa; background: #fff; box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.06); animation: snsBox_Ani 0.2s ease-out; z-index: 100; } .comm-cnt-Btns dd .tts-box::before { content: ""; position: absolute; top: -16px; right: 12px; width: 0; height: 0; margin: 0 0 0 -8px; border: 8px solid; border-color: transparent transparent #aaa transparent; z-index: 100; } .comm-cnt-Btns dd .tts-box .btn-type { margin: 0 !important; padding: 0 7px 0 12px !important; font-size: 12px; line-height: 16px; } .comm-cnt-Btns dd .tts-box .rate { padding: 10px 2px 0 0; } .comm-cnt-Btns dd .tts-box .rate .rate-int { background: #393184 !important; } .comm-cnt-Btns dd .tts-box .stit { display: block; margin: 0 0 6px 0; font-size: 12px; color: #999; font-weight: bold; } /* 기능 쓰지 않을 경우 안보이게 처리 */ .tts-No .comm-cnt-Btns dd.tts-wp { display: none !important; } /*----- 버튼 위치 reset -----*/ .board-cntBtn-wp { margin: -40px 0 0 0; } .board-cntBtn-wp.view { margin: 0; } .comm-contents-cntBtn-wp { position: relative; margin: 0 0 -10px 0; } .comm-contents-cntBtn-wp2 .comm-cnt-Btns { margin-top: -40px; } .comm-contents-cntBtn-wp3 .comm-cnt-Btns { margin-top: -35px; margin-bottom: 10px; } .comm-contents-cntBtn-wp4 .comm-cnt-Btns { margin-top: -17px; margin-bottom: 10px; } .comm-contents-cntBtn-wp-None .comm-cnt-Btns { margin: 0px; } .comm-contents-cntBtn-wp.small { height: 30px; } .small .comm-cnt-Btns { position: absolute; top: 0; right: -8px; transform: scale(0.9); } /*------ 카드형 LIST -----------------------------------------*/ .comm-cardList-wp { clear: both; position: relative; margin: 0 -25px 0 0; padding: 0 0 5px 0; overflow: hidden; } .comm-cardList-wp ul { float: left; width: 100%; } .comm-cardList-wp li { float: left; position: relative; width: 33.33333333333%; margin: 0 0 50px 0; padding: 0 25px 0 0; background: #fff; transition: all 0.3s; } .comm-cardList-wp.submain:last-child li { margin-bottom: 0; } .comm-cardList-wp li a.link-block { display: block; position: relative; height: 350px; border: 1px solid #d3d3d3; overflow: hidden; z-index: 1; } .comm-cardList-wp li a.link-block:hover { text-decoration: none !important; } .comm-cardList-wp .cnt-field { z-index: 1; } /* photo */ .comm-cardList-wp .cnt-field .photo { position: relative; height: 200px; margin: 0 auto; text-align: center; align-items: center; -webkit-align-items: center; background: #fff url("/pds/images/comm/no_image.png") no-repeat center center; overflow: hidden; } .comm-cardList-wp .cnt-field .photo::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.03); transition: all 0.3s; z-index: 2; } /* .comm-cardList-wp .cnt-field .photo::before { content: ""; display: block; position: absolute; top: 0; bottom: 36px; left: 0; right: 0; background: rgba(0,0,0, 0.06); transition: all 0.3s; z-index: 2; } */ .comm-cardList-wp .cnt-field .photo img { display: block; width: auto; height: 100%; margin: 0 auto; transition: all 0.5s; } .comm-cardList-wp.news .cnt-field .photo img { display: inline; width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .comm-cardList-wp .cnt-field .photo .tag { display: block; position: absolute; bottom: -36px; left: 0; right: 0; height: 36px; padding: 0 15px; font-size: 13px; color: #fff; letter-spacing: -0.5px; line-height: 33px; text-align: left; white-space: nowrap; text-overflow: ellipsis; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: all 0.3s; overflow: hidden; } /* .comm-cardList-wp .cnt-field .photo .tag { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 36px; padding: 0 15px; font-size: 13px; color: #fff; letter-spacing: -0.5px; line-height: 33px; text-align: left; white-space: nowrap; text-overflow: ellipsis; background: rgba(0,0,0, 0.45); overflow: hidden; } */ /* title */ .comm-cardList-wp .cnt-field .subj { display: block; display: -webkit-box; position: relative; height: 72px; padding: 0 20px 0 20px; font-size: 120%; letter-spacing: -0.5px; line-height: 1.3em; font-weight: normal; text-align: left; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .comm-cardList-wp .cnt-field .etc { display: block; position: relative; padding: 20px 20px 14px 20px; font-size: 14px; color: #999; line-height: 1.2em; text-align: left; z-index: 10; } .comm-cardList-wp .expert-corner { position: absolute; top: 220px; right: 45px; font-size: 100%; z-index: 10; } .comm-cardList-wp.news .origin { position: absolute; top: 220px; right: 45px; font-size: 14px; color: #999; letter-spacing: -0.5px; z-index: 10; } .comm-cardList-wp.news .origin strong { color: #666; font-weight: normal; } /* box hover */ .comm-cardList-wp a.link-block:hover .cnt-field .photo::before { opacity: 0; } .comm-cardList-wp a.link-block:hover .cnt-field .photo::after { transform: scale(1.05); } .comm-cardList-wp a.link-block:hover .cnt-field .photo img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); } .comm-cardList-wp a.link-block:hover { border-color: #111; box-shadow: 4px 4px 1px 0 rgba(0, 0, 0, 0.15); } .comm-cardList-wp a.link-block:hover .cnt-field .photo .tag { bottom: 0; opacity: 1; } .comm-cardList-wp.tag-None a.link-block:hover .cnt-field .photo .tag { opacity: 0; } /*----- New Card List(2020-11-05) -----*/ .new-card-List { position: relative; margin: 10px -20px 0 0; padding: 0 0 5px 0; overflow: hidden; } .new-card-List ul { float: left; width: 100%; } .new-card-List li { float: left; position: relative; margin: 0 0 30px 0; padding: 0 20px 0 0; background: #fff; transition: all 0.3s; } .new-card-List li a { display: block; position: relative; height: 390px; text-decoration: none !important; border: 1px solid #d2d2d2; overflow: hidden; z-index: 1; } .new-card-List.haesul li a { height: 325px; } .new-card-List li .thmubs { position: relative; height: 180px; margin: 0 0 18px 0; text-align: center; align-items: center; -webkit-align-items: center; background: url("/pds/images/comm/no_image.png") no-repeat center center; background-size: auto 100%; overflow: hidden; } .new-card-List li .thmubs::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.04); transition: all 0.3s; z-index: 2; } .new-card-List li .thmubs img { display: inline; width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: all 0.5s; } .new-card-List.haesul li .thmubs img { width: auto; height: 100%; } .new-card-List li .info { margin: 0 0 15px 0; padding: 0 20px; font-size: 14px; text-align: right; } .new-card-List li .info span.date { float: left; font-size: 13px; color: #999; } .new-card-List li .subj { display: -webkit-box; position: relative; min-height: 48px; padding: 0 20px; font-size: 19px; color: #222; letter-spacing: -1px; line-height: 130%; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .new-card-List.haesul li .subj { min-height: 45px; font-size: 17px; line-height: 140%; -webkit-line-clamp: 3; } .new-card-List li .summary { display: -webkit-box; position: relative; min-height: 50px; margin: 14px 0 15px 0; padding: 0 20px; font-size: 12px; color: #888; letter-spacing: -0.2px; line-height: 140%; font-weight: normal; text-align: justify; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .new-card-List li .count { position: relative; padding: 0 20px 0 40px; font-size: 13px; color: #777; letter-spacing: -0.5px; line-height: 120%; background: url("/pds/images/sub/taxnet_post/eye.png") no-repeat 20px 3px; background-size: auto 10px; } .new-card-List li .count strong { color: #444; } .new-card-List li .count span.heart { float: right; font-size: 13px; color: #888; } .new-card-List li .count span.heart i { margin: 0 6px 2px 0; color: #db4545; } /* Hover시 */ .new-card-List li a:hover { border-color: #111; box-shadow: 4px 4px 1px 0 rgba(0, 0, 0, 0.15); } .new-card-List li a:hover .thmubs::before { background: rgba(0, 0, 0, 0); } .new-card-List li a:hover .thmubs img { transform: scale(1.05); } /*----- Icon -----*/ .kind-Icon { clear: both; display: block; position: absolute; top: 10px; right: 10px; width: 39px; height: 39px; padding: 11px 0 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.9); text-align: center; border-radius: 100%; box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.15); z-index: 5; } .kind-Icon::before { content: ""; display: block; position: absolute; top: 2px; left: 2px; width: 35px; height: 35px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100%; } .kind-Icon.square { display: inline-block !important; position: relative; top: 0; right: 0; width: 38px; height: 22px; margin: 0 15px 0 0; padding: 0; font-size: 12px; line-height: 20px; vertical-align: middle; border-radius: 0; box-shadow: none; } .kind-Icon.square::before { display: none; } .kind-Icon.mrg-8 { margin-right: 8px; } .kind-Icon.mrg-None { margin: 0; } .kind-Icon.w-auto { width: auto; padding: 0 5px; } .kind-Icon.radius { border-radius: 3px; } .kind-Icon.w1 { width: 44px !important; } .kind-Icon.w2 { width: 65px !important; } .kind-Icon.h1 { height: 24px; font-size: 11px; line-height: 24px; } .kind-Icon.h2 { height: 24px !important; line-height: 22px !important; } .kind-Icon.h3 { height: 26px; line-height: 26px; } .kind-Icon.tax { background-color: #32818a; } .kind-Icon.acc { background-color: #3a7b4d; } .kind-Icon.labor { background-color: #7e6d38; } .kind-Icon.law { background-color: #6b3b84; } .kind-Icon.etc { background-color: #aaa; } /* .kind-Icon.tax {background-color: #111;} .kind-Icon.acc {background-color: #111;} .kind-Icon.labor {background-color: #111;} .kind-Icon.law {background-color: #111;} */ .kind-Icon.ing { background-color: #6c63b2; } .kind-Icon.end { background-color: #bbb; } .kind-Icon.cancel { background-color: #ddd; } .kind-Icon.consult-lock { letter-spacing: -1px; background-color: #34a02c; } .kind-Icon.default { background-color: #e05555; } /*----- 페이지 내 공지성 안내 box -----*/ .comm-notice-Guide-box { clear: both; position: relative; margin: 0 0 40px 0; padding: 14px 20px 14px 20px; font-size: 14px; color: #666; line-height: 1.3em; border: 1px solid #ccc; border-radius: 2px; background: #fbfcfc; overflow: hidden; } .comm-notice-Guide-box i { margin: 0 8px 1px 0; font-size: 130%; color: #444; vertical-align: middle; } .comm-notice-Guide-box i::before { content: "\f05a"; } .comm-notice-Guide-box .confirm-date { clear: both; display: inline-block; position: relative; height: 20px; margin: 0 0 1px 12px; padding: 0 7px 0 7px; font-size: 11px; color: #fff; line-height: 19px; text-align: center; vertical-align: bottom; border-radius: 2px; background-color: #555; } .comm-notice-Guide-box .confirm-date::after { content: ""; position: absolute; left: -10px; top: 50%; margin: -5px 0 0 0; width: 0px; height: 0px; border: 5px solid; border-color: transparent #555 transparent transparent; } .comm-notice-Guide-box .confirm-date.org { background-color: #f47d31; } .comm-notice-Guide-box .confirm-date.org::after { border-right-color: #f47d31; } .comm-notice-Guide-box .rt-Btn { position: absolute; top: 50%; right: 20px; margin: -15px 0 0 0; } .comm-notice-Guide-box .rt-Btn .btn-type { height: 28px; font-size: 12px; letter-spacing: -0.5px; border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 14px 0px 0 rgba(255, 255, 255, 0.9) inset; } /******************************************************************************************************************************** * ETC ********************************************************************************************************************************/ /*------ Text valign center ------*/ .flex { display: flex !important; display: -webkit-flex !important; align-items: center; -webkit-align-items: center; } .txt-valign { flex: 1; } .fa-align { display: inline-block; margin: 0 5px 2px 0; vertical-align: middle; } .search-wordRed { color: red !important; } .data-None-icon { font-size: 18px; color: #bbb; font-weight: normal !important; } /*------ Font Style ------*/ .f10 { font-size: 10px !important; } .f11 { font-size: 11px !important; } .f12 { font-size: 12px !important; } .f13 { font-size: 13px !important; } .f14 { font-size: 14px !important; } .f15 { font-size: 15px !important; } .f16 { font-size: 16px !important; } .f17 { font-size: 17px !important; } .f18 { font-size: 18px !important; } .f19 { font-size: 19px !important; } .f20 { font-size: 20px !important; } .f80p { font-size: 80% !important; } .f85p { font-size: 85% !important; } .f90p { font-size: 90% !important; } .f95p { font-size: 95% !important; } .f105p { font-size: 105% !important; } .f110p { font-size: 110% !important; } .f115p { font-size: 115% !important; } .f120p { font-size: 120% !important; } .f130p { font-size: 130% !important; } .f140p { font-size: 140% !important; } .f150p { font-size: 150% !important; } .pTP-5 { padding-top: 5px !important; } .pTP-10 { padding-top: 10px !important; } .pTP-15 { padding-top: 15px !important; } .pTP-20 { padding-top: 20px !important; } .pTP-25 { padding-top: 25px !important; } .pTP-30 { padding-top: 30px !important; } .pBT-10 { padding-bottom: 10px !important; } .pBT-12 { padding-bottom: 12px !important; } .pBT-15 { padding-bottom: 15px !important; } .pBT-20 { padding-bottom: 20px !important; } .pBT-25 { padding-bottom: 25px !important; } .pBT-30 { padding-bottom: 30px !important; } .pLT-10 { padding-left: 10px !important; } .pLT-15 { padding-left: 15px !important; } .pLT-20 { padding-left: 20px !important; } .pLT-25 { padding-left: 25px !important; } .pLT-30 { padding-left: 30px !important; } .pRT-10 { padding-right: 10px !important; } .pRT-15 { padding-right: 15px !important; } .pRT-20 { padding-right: 20px !important; } .pRT-25 { padding-right: 25px !important; } .pRT-30 { padding-right: 30px !important; } .mTP-5 { margin-top: 5px !important; } .mTP-10 { margin-top: 10px !important; } .mTP-15 { margin-top: 15px !important; } .mTP-20 { margin-top: 20px !important; } .mTP-25 { margin-top: 25px !important; } .mTP-30 { margin-top: 30px !important; } .mrg0 { margin: 0 !important; } .mBT-0 { margin-bottom: 0 !important; } .mBT-2 { margin-bottom: 2px !important; } .mBT-4 { margin-bottom: 4px !important; } .mBT-5 { margin-bottom: 5px !important; } .mBT-6 { margin-bottom: 6px !important; } .mBT-8 { margin-bottom: 8px !important; } .mBT-10 { margin-bottom: 10px !important; } .mBT-12 { margin-bottom: 12px !important; } .mBT-15 { margin-bottom: 15px !important; } .mBT-20 { margin-bottom: 20px !important; } .mBT-25 { margin-bottom: 25px !important; } .mBT-30 { margin-bottom: 30px !important; } .mLT-10 { margin-left: 10px; } .mLT-15 { margin-left: 15px; } .mLT-20 { margin-left: 20px; } .mLT-25 { margin-left: 25px; } .mLT-30 { margin-left: 30px; } .None-spacing { letter-spacing: 0 !important; } .spacing-5 { letter-spacing: -0.5px !important; } .spacing-10 { letter-spacing: -1px !important; } .spacing-15 { letter-spacing: -1.5px !important; } .bold { font-weight: bold !important; } .clr-normal { font-weight: normal !important; } .clr-white { color: #fff !important; } .clr-gray { color: #aaa !important; } .clr-red { color: red !important; } .clr-red2 { color: #d70000 !important; } .clr-red3 { color: #e05555 !important; } .clr-red4 { color: #bf3434 !important; } .clr-blue { color: #0054ff !important; } .clr-blue2 { color: blue !important; } .clr-blue3 { color: #2a7fc8 !important; } .clr-blue4 { color: #015ebb !important; } .clr-skyblue { color: #00ceff !important; } .clr-skyblue2 { color: #00a0d4 !important; } .clr-skyblue3 { color: #00a8e7 !important; } .clr-green { color: green !important; } .clr-green2 { color: #009a0b !important; } .clr-violet { color: #666699 !important; } .clr-yellow { color: yellow !important; } .clr_gray { color: #aaa !important; } .clr-price { color: #ff2a00 !important; font-weight: bold; } .clr-price2 { color: #ff641f !important; } .clr-state { color: #009fd3 !important; } .clr-state2 { color: #0087dd !important; } .clr-org { color: #f49e1c !important; } .clr-org2 { color: #f48831 !important; } .clr-bold { color: #eb5e05 !important; } .clr-bold2 { color: #ff5529 !important; } .clr-bold3 { color: #1b3761 !important; } .clr-bold4 { color: #123985 !important; } .clr-search-word { color: #e30000 !important; } .clr-bub { color: #4d6583 !important; } .clr-222 { color: #222 !important; } .clr-333 { color: #333 !important; } .clr-444 { color: #444 !important; } .clr-555 { color: #555 !important; } .clr-666 { color: #666 !important; } .clr-777 { color: #777 !important; } .clr-888 { color: #888 !important; } .clr-999 { color: #999 !important; } .clr-aaa { color: #aaa !important; } .clr-bbb { color: #bbb !important; } .clr-ccc { color: #ccc !important; } .txt-None { font-size: 150%; color: #bbb; } .txtN-blue { color: #1d5fc8; } .line-through { text-decoration: line-through; } /*---- NEW 아이콘 ----*/ .new-icon { display: inline-block; margin: 0 0 2px 6px; vertical-align: middle; } .new-icon.ty2 { margin-bottom: 2px; } .new-icon.ty3 { margin: 0 0 2px 10px; } .new-icon.ty4 { margin: 0 0 2px 8px !important; vertical-align: middle; } .new-icon.ty5 { margin: 0 0 2px 8px !important; } .new-icon.ty6 { margin: 0 0 0 6px !important; } .new-icon.ty7 { margin: 0 0 0px 0px !important; } .underline { position: relative; z-index: 1; } .underline::before { content: ""; display: block; position: absolute; bottom: 2px; left: 0; right: 0; height: 11px; background: #ffb400; z-index: -1; } .underline2 { position: relative; z-index: 1; } .underline2::before { content: ""; display: block; position: absolute; bottom: 2px; left: 0; right: 0; height: 11px; background: #ffda00; z-index: -1; } /*------ to-top ------*/ #toTop { display: none; position: fixed; bottom: 15px; right: 36px; width: 46px; height: 46px; text-indent: 100%; text-decoration: none; border: none; background: url("/pds/images/comm/topBtn.png") no-repeat 0 0; transition: none !important; overflow: hidden; z-index: 99999; } body.popup #toTop { right: 15px; } #toTopHover { float: right; display: block; width: 46px; height: 46px; overflow: hidden; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } /*------ CK 에디터 셋팅 ------*/ .cke_button.cke_button__about.cke_button_off { display: none !important; } /* tooltip(적용시기) */ /* .ui-tooltip {padding: 0;} .ui-tooltip > div { padding: 10px 12px 12px 12px; font-size: 12px; color: #fff; line-height: 1.4em; background: #333; box-shadow: none !important; } */ .ui-tooltip { display: block; max-width: 300px !important; padding: 0; border-width: 0 !important; box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2) !important; z-index: 1000; } .ui-tooltip > div { display: block; padding: 8px 12px 9px 12px; font-size: 12px; color: #333; letter-spacing: 0; line-height: 1.4em; text-align: left; border: 1px solid #777; background: #fff !important; box-shadow: none !important; /* pointer-events: none; */ } /* (구)택스넷 적용시기 적용(2020-08-21) */ .ly_pop_date { position: absolute; left: 50% !important; margin: -80px 0 0 -150px !important; border: 1px solid #777; background: #fff; box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.3); z-index: 1000; } .ly_pop_date .ly_contents2 { padding: 9px 12px 10px 12px; font-size: 12px; color: #333; letter-spacing: 0; line-height: 1.4em; text-indent: 0; text-align: left; overflow-y: auto; } .img-buchick { display: inline-block; margin: 0 0 0px 5px; vertical-align: text-bottom; } .bt_date { display: inline-block; margin-bottom: 0px; vertical-align: text-bottom; } /*---- tootip ----*/ *[data-tooltip] { position: relative; } *[data-tooltip]::after { content: attr(data-tooltip); display: block; position: absolute; width: 150px; margin: 0 0 0 -30px; padding: 6px 12px 8px 12px; font-size: 12px; color: #333; letter-spacing: 0; line-height: 1.4em; text-align: left; border: 1px solid #777; background: #fff; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -ms-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; z-index: 100; } *[data-tooltip]:hover::after { opacity: 1; } /*---- jquery video -----------------------------------------*/ #videoContainer { clear: both; position: relative; width: 1200px; height: 735px; margin: -20px auto 30px auto; border-radius: 5px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15); background: none; -webkit-touch-callout: none; -webkit-touch-select: none; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } #videoContainer.fullScreen { width: 100vw !important; height: 100vh !important; } #videoContainer.small .intensityBar { width: 50px !important; } #videoContainer.small .playButton { margin: 0 !important; margin-right: 5px !important; } #videoContainer.small .playPause, #videoContainer.small .volume .icon, #videoContainer.small .scale .icon { width: 15px !important; height: 15px !important; } #videoContainer.small .progressBar { height: 6px !important; } #videoContainer.small .overlay .button { width: 50px !important; height: 50px !important; } #videoContainer.small .time { display: none !important; } #videoContainer .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: none; z-index: 999; } #videoContainer .overlay .button { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; background: url("/pds/images/sub/silmu/video/play-button.png"); background-size: 100% 100%; /* transform: translate(-50%, calc(-50% - 30px)); */ /* 크롬에서만 적용됨 */ cursor: pointer; transition: width 0.1s, height 0.1s, margin 0.1s; } #videoContainer .overlay .button:hover { width: 90px; height: 90px; margin: -45px 0 0 -45px; } #videoContainer #video { position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; } #videoContainer #video video { position: absolute; top: 0; left: 0; width: 100%; border-radius: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; -webkit-font-smoothing: subpixel-antialiased; pointer-events: none; /* 마우스 오른쪽 버튼 비활성화 */ } #videoContainer #video video::-internal-media-controls-download-button { display: none !important; } #videoContainer #video video::-webkit-media-controls-enclosure { overflow: hidden !important; } #videoContainer #video video::-webkit-media-controls-panel { width: calc(100% + 30px); /* Adjust as needed */ } #videoContainer #controls { position: absolute; right: 0; bottom: 0; width: 100%; height: 60px; background: #00e0fd; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; z-index: 9999; } #videoContainer #controls .playButton { width: 70px; height: 100%; background: #04b8ce; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; align-items: center; justify-content: center; margin-right: 20px; cursor: pointer; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; border-bottom-left-radius: 5px; } #videoContainer #controls .playButton:hover { background: #06a7bb; } #videoContainer #controls .playButton .playPause { width: 25px; height: 25px; background: url("/pds/images/sub/silmu/video/play.png"); -webkit-background-size: 100%; -moz-background-size: 100%; background-size: 100%; } #videoContainer #controls .ProgressContainer { color: #fff; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); height: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; align-items: center; justify-content: flex-start; position: relative; } #videoContainer #controls .ProgressContainer .progressBar { width: 100%; height: 8px; border-radius: 20px; background: #0a8796; cursor: pointer; overflow: hidden; } #videoContainer #controls .ProgressContainer .progressBar:hover + .time { -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #videoContainer #controls .ProgressContainer .progressBar .progress { width: 0%; height: 100%; border-radius: 20px; background: #fff; } #videoContainer #controls .ProgressContainer .timer { margin: 0 10px; font-family: Arial, sans-serif; font-size: 12px; color: #0a8796; letter-spacing: 1px; font-weight: 300; } #videoContainer #controls .ProgressContainer .time { position: absolute; top: -20px; left: 0; width: 80px; height: 25px; font-family: Arial, sans-serif; font-size: 12px; color: #fff; line-height: 25px; letter-spacing: 1px; text-align: center; border-radius: 5px; background: #0a8796; opacity: 0; transform: translateY(10px); transition: transform 0.3s, opacity 0.3s; } #videoContainer #controls .ProgressContainer .time::after { content: ""; display: block; position: absolute; top: 25px; left: 33px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #0a8796; } #videoContainer #controls .volume { position: relative; width: 150px; height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; } #videoContainer #controls .volume .icon { width: 25px; height: 25px; background: url("/pds/images/sub/silmu/video/volume.png"); background-size: 100% 100%; cursor: pointer; margin-right: 10px; } #videoContainer #controls .volume .intensityBar { width: 100px; max-width: 100px; height: 4px; border-radius: 20px; background: #0a8796; overflow: hidden; transform-origin: right center; transition: all 0.5s; cursor: pointer; } #videoContainer #controls .volume .intensityBar .intensity { width: 50%; height: 100%; background: #fff; } #videoContainer #controls .scale { display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 70px; height: 100%; margin-left: 5px; background: #00afc6; border-bottom-right-radius: 5px; transition: all 0.4s; cursor: pointer; } #videoContainer #controls .scale:hover { background: #06a7bb; } #videoContainer #controls .scale .icon { width: 25px; height: 25px; background: url("/pds/images/sub/silmu/video/expand.png"); background-size: 100%; } /*---- 톡플러스 챗팅 추가(2021-02-03) -----------------------------------------*/ #tocplusWindow { position: fixed !important; top: auto !important; bottom: 150px !important; left: auto !important; right: 29px !important; z-index: 100000 !important; } #eTkZp { color: transparent !important; pointer-events: none !important; cursor: default !important; } #eTkZp::after { content: "택스넷 이용 문의"; position: absolute; left: 2px; width: 100px; font-size: 11px; color: #fff !important; letter-spacing: -1px; font-weight: normal !important; } #chatInput, #chatInput:focus { outline: none !important; } /* #TpTbw {cursor: auto !important;} */ #tocplusAutoCompleteContentLayter { padding: 15px 15px !important; } #tocplusAutoCompleteContentLayter p, #tocplusAutoCompleteContentLayter span { font-size: 13px !important; line-height: 160% !important; } /* 채널톡 커스텀 */ .dLpNyC { display: none !important; opacity: 0 !important; } /*----- 레이어 팝업(2019-09-25) 추가 -----*/ .Newpopup-Wrap { clear: both; position: relative; z-index: 100; box-sizing: border-box; overflow: hidden; } .Newpopup-Wrap ul { float: left; box-sizing: border-box; } .Newpopup-Wrap li { float: left; position: relative; padding: 0 3px 3px 3px; line-height: 0; background: #212028; box-sizing: border-box; } .Newpopup-Wrap li.End { padding-left: 0; } .popup-wrapper { position: absolute; top: 50%; left: 50%; background: transparent; z-index: 99; animation: popupMv 0.5s ease-out 0.3s both; } @keyframes popupMv { from { opacity: 0; transform: translate(0, 30px); } to { opacity: 1; transform: translate(0, 0); } } /* IE10이하 안내 팝업 출력 */ .IE8-popup { position: absolute; top: 210px; left: 50%; margin: 0 0 0 190px; width: 314px; height: 338px; border: 2px solid #555; background: url("/images/popup/170727_notice.png") no-repeat 0 0; z-index: 10; } .IE8-popup > div { position: relative; } .IE8-popup a { position: absolute; top: 0; right: 0; width: 37px; height: 36px; text-indent: -9999999px; background: transparent; } /* 서브 sky배너 (2020-04-20) */ .sub-skyBannerL, .sub-skyBannerR { position: fixed; bottom: 0; left: 50%; width: 1200px; height: 1px; margin: 0 0 0 -600px; transition: all 0.3s; z-index: 10; } .sub-skyBannerL .banner { position: absolute; top: -235px; left: -125px; } .sub-skyBannerL.float-up { top: 305px; bottom: none; } .sub-skyBannerL .banner .countdown { display: block; position: absolute; bottom: 0px; left: 0%; width: 100px; height: 22px; font-size: 9px; color: #a1c9ff; letter-spacing: -0.8px; line-height: 20px; text-align: center; } .sub-skyBannerR { top: 280px; bottom: auto; } .sub-skyBannerR .banner { position: absolute; top: 0; right: -180px; } .sub-skyBannerR.up { top: 30px; } /*** sub modal 팝업용 **********/ .sub-popup { position: absolute; left: 0; right: 40px; top: 195px; height: 0px; margin: 0 auto 0 0px; z-index: 10; visibility: hidden; } .sub-popup.Left { left: 380px; right: auto; } .sub-popup .popup-wrap { position: absolute; top: 0; right: 0; width: 380px; margin: 0 auto; box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1); animation: popup 600ms linear 1s both; } @keyframes popup { from { opacity: 0; transform: translate(0, 30px); } to { opacity: 1; transform: translate(0, 0); } } /******************************************************************************************************************************** * 이슈특집 ********************************************************************************************************************************/ /*----- Banner -----*/ .issue-special-wp .subMain-banner { position: relative; margin: 0 0 50px 0; } .issue-special-wp .subMain-banner .main-gallery-top { position: relative; width: 100%; height: 200px; } .issue-special-wp .subMain-banner .main-gallery-top .swiper-slide img { display: block; width: 1200px; height: 200px; margin: 0 auto; } /*----- 이미지가 background 전체 차지할 경우(.img-back 추가) -----*/ .issue-special-wp .subMain-banner .main-gallery-top .swiper-slide.img-back { background-position: -50% 50%; background-repeat: no-repeat; background-size: 100% auto; } .issue-special-wp .subMain-banner .swiper-pagination { z-index: 10; } .issue-special-wp .subMain-banner .swiper-pagination-bullet-active { background: #ff5529 !important; } /*----- 게시판 -----*/ #fillter-btn { position: absolute; top: 13px; right: 0; } #fillter-btn .btn { display: inline-block; position: relative; margin: 0 0 0 18px; font-size: 14px; color: #999; line-height: 120%; text-decoration: none !important; vertical-align: middle; } #fillter-btn .btn::before { content: ""; display: block; position: absolute; top: 50%; left: -10px; width: 1px; height: 10px; margin: -5px 0 0 0; background: #ccc; } #fillter-btn .btn:first-child::before { display: none; } #fillter-btn .btn.active { color: #333; font-weight: bold; } .issue-special-wp .card-List { position: relative; margin: 30px -20px 0 0; padding: 0 0 0 0; overflow: hidden; } .issue-special-wp .card-List ul { float: left; width: 100%; } .issue-special-wp .card-List li { float: left; display: none; position: relative; margin: 0 0 30px 0; padding: 0 20px 0 0; background: #fff; transition: all 0.3s; } .issue-special-wp .card-List li.show { display: block; } .issue-special-wp .card-List li a { display: block; position: relative; height: 320px; text-decoration: none !important; border: 1px solid #d2d2d2; overflow: hidden; z-index: 1; } .issue-special-wp .card-List li .thmubs { position: relative; height: 150px; margin: 0 0 20px 0; text-align: center; align-items: center; -webkit-align-items: center; background: url("/pds/images/comm/no_image.png") no-repeat center center; background-size: auto 100%; overflow: hidden; } .issue-special-wp .card-List li .thmubs::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.03); transition: all 0.3s; z-index: 2; } .issue-special-wp .card-List li .thmubs img { display: inline; width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: all 0.5s; } .issue-special-wp .card-List li .thmubs .class-icon { display: block; position: absolute; top: 8px; right: 8px; width: 35px; height: 35px; font-size: 8px; color: #fff; letter-spacing: -0.8px; line-height: 34px; font-weight: 300; text-align: center; border-radius: 100%; background: #000; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); z-index: 100; } .issue-special-wp .card-List li .thmubs .class-icon.S { background: #00b04e; } .issue-special-wp .card-List li .thmubs .class-icon.I { background: #006fd6; } .issue-special-wp .card-List li .thmubs .class-icon.P { background: #f34c87; } .issue-special-wp .card-List li .thmubs .class-icon.E { background: #443f7a; } .issue-special-wp .card-List li .subj { display: -webkit-box; position: relative; padding: 0 20px; font-size: 20px; letter-spacing: -1px; line-height: 120%; font-weight: bold; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .issue-special-wp .card-List li .summary { display: -webkit-box; position: relative; min-height: 50px; margin: 12px 0 30px 0; padding: 0 20px; font-size: 12px; color: #888; letter-spacing: -0.2px; line-height: 140%; font-weight: normal; text-align: justify; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .issue-special-wp .card-List li .kinds { position: absolute; bottom: 18px; left: 0px; padding: 0 20px; font-size: 13px; color: #777; letter-spacing: -0.5px; line-height: 120%; } .issue-special-wp .card-List li .kinds img { position: absolute; top: -1px; right: 0px; } .issue-special-wp .card-List li a .icon { display: block; position: absolute; top: 0px; left: 0px; width: 45px; height: 42px; font-size: 12px; color: #fff; line-height: 42px; font-weight: bold; text-align: center; background: #e83e1d; box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.1); z-index: 2; } /* Hover시 */ .issue-special-wp .card-List li a:hover { border-color: #111; box-shadow: 4px 4px 1px 0 rgba(0, 0, 0, 0.15); } .issue-special-wp .card-List li a:hover .thmubs::before { background: rgba(0, 0, 0, 0); } .issue-special-wp .card-List li a:hover .thmubs img { transform: scale(1.05); } .issue-special-wp .card-List li span.ai-tag { display: inline-block; height: 16px; margin: 6px 0 0 8px; padding: 0 5px; font-size: 11px; color: #fff; letter-spacing: 0px; line-height: 16px; font-weight: normal; vertical-align: text-top; border-radius: 3px; background-color: #e05555; } /******************************************************************************************************************************** * 구인구직 ********************************************************************************************************************************/ .recruit-visual { margin: -25px 0 35px 0; } .recruit-guide-wp { margin: -5px 0 50px 0; padding: 20px 30px 20px 30px; font-size: 14px; line-height: 150%; } .recruit-guide-wp .notice { display: block; margin: 12px 0 0 0; } .recruit-guide-wp .notice i { margin: 0 5px 2px 0; font-size: 16px; vertical-align: middle; } .recruit-tbl { margin: 0; } .recruit-tbl .List { border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important; } .recruit-tbl .List th { padding-left: 0 !important; height: 40px !important; } .recruit-tbl .List td { padding: 10px 10px !important; text-align: center !important; } /******************************************************************************************************************************** * 인기 E-Book/파일북 ********************************************************************************************************************************/ .sub-bottom-fileBook { clear: both; width: 100%; height: 300px; margin: 0px 0 -40px 0; } .sub-bottom-fileBook.View { margin-top: 90px; } .comm-bottom-fileBook-wp { position: relative; } .comm-bottom-fileBook-wp .list-box { clear: both; position: relative; margin: 0px 0 0 0; padding: 20px 20px 20px 20px; border: 1px solid #ddd; } .comm-bottom-fileBook-wp .list-box ul { float: left; width: 100%; } .comm-bottom-fileBook-wp .list-box li { float: left; padding: 0 10px; } .comm-bottom-fileBook-wp .list-box li a { display: block; color: #333; text-decoration: none !important; } .comm-bottom-fileBook-wp .list-box li img { display: block; width: auto; height: 124px; margin: 0 auto; } .comm-bottom-fileBook-wp .list-box li .subj { display: block; display: -webkit-box; margin: 8px 0 6px 0; padding: 0 5px; font-size: 13px; letter-spacing: -0.5px; line-height: 140%; font-weight: normal; text-align: left; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .comm-bottom-fileBook-wp .list-box li .etc { display: block; position: relative; margin: 0 6px; font-size: 12px; color: #777; overflow: hidden; } .comm-bottom-fileBook-wp .list-box li .etc .price { float: right; } /******************************************************************************************************************************** * 온라인 견적서(2023-02-02) ********************************************************************************************************************************/ .estimate-wp { width: 800px; min-height: 800px; margin: 0 auto; padding: 20px 0 10px 0; background: url("https://pds.taxnet.co.kr/images/estimate_bg.png") no-repeat 50% 60%; } /* table */ .estimate-wp .tbl { margin: 0px 0 0px 0; border: 1px solid #555; } .estimate-wp .tbl table { width: 100%; table-layout: fixed; } .estimate-wp .tbl tr:last-child th, .estimate-wp .tbl tr:last-child td { border-bottom: none; } .estimate-wp .tbl th { padding: 5px 0 5px 0; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 13px; color: #666; line-height: 120%; text-align: center; vertical-align: middle; font-weight: 300; border-bottom: 1px solid #888; border-right: 1px solid #888; background: #eee; } .estimate-wp .tbl th:last-child { border-right: none; } .estimate-wp .tbl td { padding: 6px 5px 6px 5px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 13px; color: #111; line-height: 130%; font-weight: 300; text-align: center; vertical-align: middle; border-bottom: 1px solid #888; border-right: 1px solid #888; } .estimate-wp .tbl td:last-child { border-right: none; } .estimate-wp .tbl td.Left { padding-left: 12px; padding-right: 12px; text-align: left; } .estimate-wp .tbl td.Left2 { padding: 18px 12px 18px 12px; text-align: left; } .estimate-wp .tbl td.Right { padding-left: 20px; padding-right: 20px; text-align: right; } .estimate-wp .tbl td.Right2 { padding-right: 30px; text-align: right; } .estimate-wp .tbl td.big { font-size: 14px; } .estimate-wp .tbl td.bg { background: #fce7da; } .estimate-wp .tbl td.sum { font-size: 13px; color: #777; font-weight: bold; background: #efefef; } .estimate-wp .tbl th.bottom-line, .estimate-wp .tbl td.bottom-line { border-bottom: 2px solid #98a7be; } .estimate-wp .tbl th.top-lineNone, .estimate-wp .tbl td.top-lineNone { border-top: none; } .estimate-wp .tbl th.right-lineNone, .estimate-wp .tbl td.right-lineNone { border-right: none; } .estimate-wp .tbl th.right-lineNone, .estimate-wp .tbl td.bottom-lineNone { border-bottom: none; } /* Top */ .estimate-wp .bd-top { } .estimate-wp .bd-top .title { display: block; margin: 0 0 30px 0; font-size: 40px; line-height: 120%; font-weight: 700; text-align: center; } .estimate-wp .bd-top .defalut-info { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-column-gap: 60px; margin: 0 0 35px 0; } .estimate-wp .bd-top .defalut-info .user { position: relative; } .estimate-wp .bd-top .defalut-info .user .name { position: relative; margin: 0 0 10px 0; padding: 0 0 10px 0; font-size: 17.5px; color: #111; line-height: 100%; font-weight: 500; text-align: center; border-bottom: 3px double #555; } .estimate-wp .bd-top .defalut-info .user .name::after { content: "귀 중"; position: absolute; bottom: 8px; right: 10px; font-size: 13px; font-weight: 300; } .estimate-wp .bd-top .defalut-info .user ul.info li { position: relative; padding: 8px 20px 8px 0px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 13px; color: #111; line-height: 130%; font-weight: 300; text-align: right; border-bottom: 1px solid #888; } .estimate-wp .bd-top .defalut-info .user ul.info li:nth-child(1) { font-weight: 500; } .estimate-wp .bd-top .defalut-info .user ul.info li::before { position: absolute; bottom: 8px; left: 15px; font-size: 13px; font-weight: 300; } .estimate-wp .bd-top .defalut-info .user ul.info li:nth-child(1)::before { content: "견 적 일 자"; } .estimate-wp .bd-top .defalut-info .user ul.info li:nth-child(2)::before { content: "유 효 기 간"; } .estimate-wp .bd-top .defalut-info .user ul.info li:nth-child(3)::before { content: "담 당 자"; } .estimate-wp .bd-top .defalut-info .jose { position: relative; } .estimate-wp .bd-top .defalut-info .jose .sign { position: absolute; top: 40px; right: 25px; width: auto; height: 60px; z-index: 100; } .estimate-wp .bd-top .price-wp { position: relative; margin: 0 0 20px 0; padding: 0 10px 10px 15px; font-size: 13px; color: #111; line-height: 130%; font-weight: 300; border-bottom: 3px double #555; } .estimate-wp .bd-top .price-wp .price { position: absolute; bottom: 8px; right: 15px; } .estimate-wp .bd-top .price-wp .price strong { font-size: 25px; line-height: 100%; } /* Middle */ .estimate-wp .bd-middle { } .estimate-wp .bd-middle .tbl { border-left: none; border-right: none; border-bottom: 2px solid #555; } .estimate-wp .bd-middle .tbl th { padding: 8px 0 8px 0; color: #fff; border-right-color: #aaa; background: #888; } .estimate-wp .bd-middle .tbl td { padding-top: 22px; padding-bottom: 22px; } .estimate-wp .bd-middle .tbl td.Left { padding-left: 20px; } .estimate-wp .bd-middle .tbl tr.price td { padding-top: 10px; padding-bottom: 10px; } .estimate-wp .bd-middle .tbl tr.tit td { padding-top: 6px; padding-bottom: 6px; border-top: 2px solid #555; border-bottom: 2px solid #555; } .estimate-wp .bd-middle .account { padding: 8px 0 0 0; font-size: 12px; color: #111; letter-spacing: 0.5px; line-height: 130%; font-weight: 300; text-align: right; } /* Bottom */ .estimate-wp .bd-bottom { margin: 10px 0 25px 0; } .estimate-wp .bd-bottom .etc { position: relative; padding: 8px 0 8px 105px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 12px; color: #111; line-height: 140%; font-weight: 300; } .estimate-wp .bd-bottom .etc .stit { position: absolute; top: 8px; left: 25px; color: red; } .estimate-wp .coptright { padding: 18px 0 20px 180px; border-top: 2px solid #555; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 12px; color: #000; line-height: 130%; font-weight: 200; background: url("https://pds.taxnet.co.kr/images/estimate_logo.png") no-repeat 30px 21px; background-size: auto 25px; }