@charset "UTF-8"; @import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css'); /* 기준(공통) CSS */ *|* {box-sizing: border-box;} *|*:before, *|*:after {box-sizing: border-box;} .body-wrap {clear: both; position: relative; min-width: 1300px; margin: 0px auto; overflow: hidden;} .body-Contents-wp {position: relative; min-height: 1000px; margin: 60px 0 120px 0; text-align: left; z-index: 1;} .container-n {position: relative; width: 1200px; margin: 0 auto; padding: 0; vertical-align: top;} .Noto {font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;} /******************************************************************************************************************************** * Basic SET ********************************************************************************************************************************/ /*----- bootstrap Reset ----------------------------------------*/ /* 반응형 끄기 */ .sub-taxSupport-wp .container { position: relative; width: 1200px !important; min-width: 1200px !important; max-width: none !important; padding: 0; /* border-left: 1px dotted red; border-right: 1px dotted red; */ } header, article, footer {min-width: 1200px !important; max-width: none !important; padding: 0;} /*----- modal css Reset -----*/ /* 모달창 bg 스크롤바 나오게 .modal-backdrop {overflow-y: scroll !important;} */ .modal-dialog {bottom: 0; min-height: 93%; margin: 1.5em auto;} .modal-open .modal {background: rgba(0,0,0, 0.1);} .modal-wp { position: relative; bottom: 0; width: 1220px; min-height: 100%; margin-left: -302px; } .modal-content {position: absolute; top: 0; bottom: 0;} .modal-content .modal-header { height: 40px; padding: 5px 20px 0 0; border: none; } .modal-content .modal-header button.close { display: inline-block; position: absolute; top: -16px; right: -15px; width: 44px; height: 44px; margin: 0 0 0 0; padding: 0 0 2px 2px; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important; font-size: 34px; color: #fff; line-height: 0px; font-weight: 300; border-radius: 100%; background-color: #000 !important; outline: none; opacity: 1; transition: all 0.3s; } .modal-content .modal-header button.close:hover {background-color: #ff643c !important;} .modal-body { position: relative; bottom: 0; width: 100%; min-height: 100%; margin: 0 auto; padding: 0 2px 5px 0; background: #fff; overflow: hidden; } .modal-body iframe {position: absolute; top: 0; bottom: 0; width: 100%; min-height: 100%;} /*----- modal contents Css Set -----*/ .cnt-field .top { position: relative; margin: 0 0 50px 0; padding: 0 0 20px 0; border-bottom: 1px dotted #777; } .cnt-field .top .title { display: block; position: relative; margin: 0 0 35px 0; padding: 0 0 0 0px; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important; font-size: 34px; letter-spacing: -1.5px; line-height: 1.3em; font-weight: 600; } .cnt-field .top .title::before { content: ""; display: none; position: absolute; top: 22px; left: 0; width: 3px; height: 32px; margin: -12px 0 0 0; background: #2f2e2e; } .cnt-field .top .etc { position: relative; font-size: 110%; color: #888; font-weight: normal; } .cnt-field .top .etc .origin {color: #666;} .cnt-field .top .etc h6 { display: block; margin: 0 0 10px 0; font-weight: normal; } .cnt-field .top .etc.press h6 {margin-bottom: 0px;} .cnt-field .top .etc h6 span.ps { vertical-align: top;} .cnt-field .top .etc .count strong {color: #444;} .cnt-field .top .etc .count i {margin: 0 6px 2px 0; color: #db4545; vertical-align: text-bottom;} .cnt-field .top .tag {margin: 20px 0 0 0;} .cnt-field .top .tag .keyword-sch { display: inline-block; position: relative; height: 26px; margin: 0 6px 6px 0; padding: 0 15px; font-size: 12px; color: #fff; letter-spacing: -0.5px; line-height: 26px; text-align: center; text-decoration: none !important; border-radius: 40px; background: #91979e; } .cnt-field .top .etc .print-Btn { display: inline-block; position: absolute; top: 10px; right: 0; height: 28px; padding: 0 10px; font-size: 13px; color: #fff; line-height: 28px; text-decoration: none !important; text-align: center; border-radius: 3px; background: #333; } /******************************************************************************************************************************** * 공통 ********************************************************************************************************************************/ .sub-taxSupport-wp {position: relative;} .sub-taxSupport-wp .comm-frame {clear: both; position: relative; min-width: 1200px; padding: 90px 0 120px 0;} /*----- title -----*/ .sub-taxSupport-wp .comm-frame .title {position: relative; margin: 0 0 45px 0; padding: 0; text-align: center; z-index: 1;} .sub-taxSupport-wp .comm-frame .title .icon { display: block; margin: -35px auto -5px auto; width: 43px; height: 43px; font-size: 1px; color: transparent; line-height: 1px; background: url('../../../images/tax_support_tit_ic2.png') no-repeat 0 0; } .sub-taxSupport-wp .comm-frame .title.white .icon {background-image: url('../../../images/tax_support_tit_ic.png');} .sub-taxSupport-wp .comm-frame .title h1 { display: inline-block; position: relative; font-family: 'Noto Sans KR', 'Noto Sans', '맑은 고딕', 'Malgun Gothic'; font-size: 44px; color: #111; letter-spacing: -3px; line-height: 130%; font-weight: 500; } .sub-taxSupport-wp .comm-frame .title.white h1, .sub-taxSupport-wp .comm-frame .title.white2 h1 {color: #fff;} .sub-taxSupport-wp .comm-frame .title strong {display: inline-block; margin: 0 0 0 2px; font-weight: 700;} .sub-taxSupport-wp .comm-frame .title h1 .eng {display: inline-block; margin: 0 0 2px 0; font-size: 120%; letter-spacing: -3px; vertical-align: text-bottom;} .sub-taxSupport-wp .comm-frame .title.sign h1::before { content: "["; position: absolute; top: 2px; left: -30px; font-size: 130%; color: #e94e1b; font-weight: 700; } .sub-taxSupport-wp .comm-frame .title.sign h1::after { content: "]"; position: absolute; top: 2px; right: -30px; font-size: 130%; color: #e94e1b; font-weight: 700; } .sub-taxSupport-wp .comm-frame .title h2 { display: block; margin: 5px 0 0 0; padding: 0 0 10px 0; font-family: 'Noto Sans KR', 'Noto Sans', '맑은 고딕', 'Malgun Gothic' sans-serif; font-size: 16px; color: #888; letter-spacing: 0px; line-height: 140%; font-weight: 300; } .sub-taxSupport-wp .comm-frame .title.white h2 {color: rgba(255,255,255, 0.7);} /*----- sub title -----*/ .sub-taxSupport-wp .comm-frame .sub-title { clear: both; position: relative; margin: 0 0 14px 0; font-family: 'Noto Sans KR', 'Noto Sans', '맑은 고딕', 'Malgun Gothic'; font-size: 32px; color: #444; letter-spacing: -1.5px; line-height: 120%; font-weight: 700; overflow: hidden; } .sub-taxSupport-wp .comm-frame .sub-title.line {margin-bottom: 20px; padding: 0 0 12px 0; border-bottom: 2px solid #6060b8;} .sub-taxSupport-wp .comm-frame .sub-title .more { clear: both; display: inline-block; position: absolute; top: 18px; right: 2px; height: 20px; font-size: 14px; color: #999; letter-spacing: -0.5px; line-height: 20px; font-weight: 400; text-decoration: none; } .sub-taxSupport-wp .comm-frame .sub-title .more i {margin: 0 5px 2px 0; font-size: 13px; color: #aaa; vertical-align: text-bottom; transition: all 0.3s;} .sub-taxSupport-wp .comm-frame .sub-title .more:hover, .sub-taxSupport-wp .comm-frame .sub-title .more:hover i {color: #5f64ea;} .sub-taxSupport-wp .comm-frame .sub-title span.stxt { display: inline-block; position: relative; margin: 0 0 0 18px; font-size: 13px; color: #999; letter-spacing: -0.2px; line-height: 150%; font-weight: 300; } .sub-taxSupport-wp .comm-frame .sub-title span.stxt:before {content: ""; position: absolute; top: 5px; left: -12px; width: 1px; height: 10px; background: #d7d7d7;} /******************************************************************************************************************************** * Main Visual ********************************************************************************************************************************/ .sub-taxSupport-wp .tax-Banner-wp { position: relative; min-width: 1200px !important; max-width: none !important; height: 980px; margin: 0 0 0px 0; text-align: center; background: #212bff; overflow: hidden; z-index: 1; } .sub-taxSupport-wp .tax-Banner-wp h1 {position: relative; margin: 160px 0 0 0; z-index: 3;} /*----- Navi -----*/ .sub-taxSupport-wp .tax-Banner-wp .navi {position: absolute; bottom: 90px; left: 50%; width: 1140px; margin: 0 auto 0 -570px; z-index: 10;} .sub-taxSupport-wp .tax-Banner-wp .navi ul {float: left; width: 100%;} .sub-taxSupport-wp .tax-Banner-wp .navi li {float: left; padding: 0 10px 20px 10px;} .sub-taxSupport-wp .tax-Banner-wp .navi li a { display: block; position: relative; bottom: 0; height: 70px; padding: 22px 0 0 0px; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-size: 21px; color: #fff; letter-spacing: -1px; line-height: 110%; font-weight: 500; text-decoration: none !important; text-align: center; border: 1px solid rgba(255,255,255, 0.8); border-radius: 12px; /*background: #fff url('../../../../images/navi_ic.png') no-repeat 230px center;*/ box-shadow: 0 0 0 0 rgba(255,255,255, 0.4); transition: 0.2s all, box-shadow 0.3s ease-in-out; z-index: 11; } .sub-taxSupport-wp .tax-Banner-wp .navi li a:hover { bottom: 2px; color: #090a7a; font-weight: 700; background: #fff; background-color: #fff; box-shadow: 0 0 0 20px transparent; } .sub-taxSupport-wp .tax-Banner-wp .navi li a.two {padding-top: 15px;} .sub-taxSupport-wp .tax-Banner-wp .navi li:nth-child(5) a { letter-spacing: -1.6px;} .sub-taxSupport-wp .tax-Banner-wp .navi li a::after { content: ""; position: absolute; bottom: -13px; left: 50%; width: 0; height: 0; margin: 0 0 0 -13px; border: 13px solid; border-color: #fff transparent transparent transparent; transition: 0.1s ease-in-out all; opacity: 0; z-index: 10; } .sub-taxSupport-wp .tax-Banner-wp .navi li a:hover::after {bottom: -25px; transition: 0.2s ease-in-out 0.1s all; opacity: 1;} .sub-taxSupport-wp .tax-Banner-wp .navi li a span.num { display: block; position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; padding: 0 1px 0 0; font-size: 13px; color: #fff; letter-spacing: -0.5px; line-height: 29px; font-weight: 500; text-align: center; border-radius: 100%; background: #e420d4; transition: 0.2s all; } .sub-taxSupport-wp .tax-Banner-wp .navi li a:hover span.num {color: #090a7a; background: #00d7ff;} /* video */ .sub-taxSupport-wp .tax-Banner-wp video { position : absolute; bottom: 0; left: 0; right: 0; width : 100%; height : auto; z-index : 1; } .sub-taxSupport-wp .tax-Banner-wp .dot {display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.05) url('../../../images/tax_support_main_visual_dot3.png') repeat; z-index: 2;} @media screen and (max-width: 1280px) { .sub-taxSupport-wp .tax-Banner-wp video {width : 1280px; height : auto; bottom: 130px;} } /******************************************************************************************************************************** * STEP1. 우리 기업은 어디에? 중소·중견기업 범위 확인하기 ********************************************************************************************************************************/ .sub-taxSupport-wp section.step1-wp {background: #f0f0f0;} .sub-taxSupport-wp section.step1-wp .scope-list {display: table; table-layout: fixed; width: 100%; padding: 0 30px;} .sub-taxSupport-wp section.step1-wp .scope-list .column {display: table-cell; padding: 0 5px; vertical-align: middle;} .sub-taxSupport-wp section.step1-wp .scope-list a { display: block; position: relative; height: 205px; padding: 30px 0px 0px 30px; font-size: 22px; color: #fff; letter-spacing: -1px; line-height: 150%; font-weight: 400; text-decoration: none !important; background: #190fcc; overflow: hidden; } .sub-taxSupport-wp section.step1-wp .scope-list a::before {content: ""; display: block; position: absolute; top: -100px; right: -180px; width: 400px; height: 400px; border-radius: 100%; background: rgba(255,255,255, 0.08);} .sub-taxSupport-wp section.step1-wp .scope-list a .num { display: block; margin: 0 0 15px 0; width: 44px; height: 44px; padding: 0 1px 0 0; font-size: 25px; color: #190fcc; letter-spacing: -2px; line-height: 43px; font-weight: 900; text-align: center; border-radius: 100%; background: #fff; } .sub-taxSupport-wp section.step1-wp .scope-list a strong {display: block; margin: 4px 0 0 0; font-size: 42px; letter-spacing: -2px; font-weight: 700;} .sub-taxSupport-wp section.step1-wp .scope-list a strong u {color: #2df6f4; text-decoration: none;} .sub-taxSupport-wp section.step1-wp .scope-list a .pic {position: absolute; top: 52px; right: 40px;} /******************************************************************************************************************************** * STEP2. 적용받을 수 있는 세제지원제도 확인하기 ********************************************************************************************************************************/ .sub-taxSupport-wp section.step2-wp {padding-bottom: 80px; background: url('../../../images/tax_support_step2_bg.png') no-repeat 0 0, url('../../../images/tax_support_step2_bg2.png') no-repeat right bottom; background-color: #423ef9;} .sub-taxSupport-wp section.step2-wp .container {position: relative; z-index: 2;} .sub-taxSupport-wp section.step2-wp .title {margin-bottom: 60px;} /*----- 감면 배제 등 참고사항 -----*/ .sub-taxSupport-wp section.step2-wp .system-box {position: relative; margin: 0px 0 12px 0; padding: 20px 30px 14px 30px; border-radius: 12px; background: #fff;} .sub-taxSupport-wp section.step2-wp .system-box h1 { position: absolute; top: -24px; left: 50%; width: 360px; height: 48px; margin: 0 0 0 -180px; font-size: 34px; color: #ffff; letter-spacing: -1.5px; line-height: 46px; font-weight: 700; text-align: center; border-radius: 48px; background: linear-gradient(90deg, #d211e5 0%, #0c0ead 70%); } .sub-taxSupport-wp section.step2-wp .system-box li a { display: block; padding: 0 0 0 35px; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important; font-size: 24px; color: #333; letter-spacing: -0.5px; line-height: 150%; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; background: url('../../../images/tax_support_speech_bubble.png') no-repeat 0 8px; transition: 0.2s all; } .sub-taxSupport-wp section.step2-wp .system-box li a:hover {color: #2a25fd; text-decoration: none;} .sub-taxSupport-wp section.step2-wp .system-box li span {display: inline-block; position: relative; z-index: 2;} .sub-taxSupport-wp section.step2-wp .system-box li span::after { content: ""; display: block; position: absolute; bottom: 3px; left: 0; width: 100%; height: 8px; background: rgba(244,136,49,0.3); /* background: #fff100; */ z-index: -1; } .sub-taxSupport-wp section.step2-wp .system-box .system-list [data-title]:hover::before {top: 36px; left: 60px;} .sub-taxSupport-wp section.step2-wp .system-box .system-list [data-title]:hover::after {left: 70px;} .sub-taxSupport-wp section.step2-wp .guide-txt {margin: 0px 0 50px 10px; font-size: 13px; color: rgba(255,255,255, 0.8);} /*----- 콘텐츠 List -----*/ .sub-taxSupport-wp section.step2-wp .system-list {clear: both;} .sub-taxSupport-wp section.step2-wp .system-list .box {margin-bottom: 30px;} .sub-taxSupport-wp section.step2-wp .system-list .box h1 { display: block; margin: 0 0 10px 0; font-size: 30px; color: #fff; letter-spacing: -2px; line-height: 130%; font-weight: 700; } .sub-taxSupport-wp section.step2-wp .system-list .box h1 .num { display: inline-block; height: 28px; margin: 0 5px 5px 0px; padding: 0 9px 0 8px; font-size: 20px; color: #fff; letter-spacing: -1px; line-height: 26px; font-weight: 900; text-align: center; vertical-align: text-bottom; border-radius: 4px; background: #e420d4; } .sub-taxSupport-wp section.step2-wp .system-list .box .list { position: relative; min-height: 100%; padding: 20px 35px 20px 35px; border-radius: 12px; background: #fff; transition: 0.3s all; } .sub-taxSupport-wp section.step2-wp .system-list .box .list li { padding: 0 0 0 24px; background-repeat: no-repeat; background-position: 0 8px; background-size: 15px 15px; transition: 0.2s all; } .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(1) .list li, .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(6) .list li {background-image: url('../../../images/tax_support_fr1_stage_ic1.png');} .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(2) .list li, .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(7) .list li {background-image: url('../../../images/tax_support_fr1_stage_ic2.png');} .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(3) .list li, .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(8) .list li {background-image: url('../../../images/tax_support_fr1_stage_ic5.png');} .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(4) .list li, .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(9) .list li {background-image: url('../../../images/tax_support_fr1_stage_ic4.png');} .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(5) .list li, .sub-taxSupport-wp section.step2-wp .system-list .box:nth-child(10) .list li {background-image: url('../../../images/tax_support_fr1_stage_ic3.png');} .sub-taxSupport-wp section.step2-wp .system-list .box .list li:hover {background-image: url('../../../images/tax_support_fr1_stage_ic_hover.png');} .sub-taxSupport-wp section.step2-wp .system-list .box .list li a { display: block; position: relative; width: 100%; padding: 3px 0 3px 0; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important; font-size: 17px; color: #333; letter-spacing: -0.2px; line-height: 130%; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; transition: 0.2s all; } .sub-taxSupport-wp section.step2-wp .system-list .box .list li a:hover {color: #2a25fd; text-decoration: none;} .sub-taxSupport-wp section.step2-wp .system-list .box .list li a .ic { display: none; position: relative; width: 12px; height: 12px; margin: 0 0 0 9px; vertical-align: middle; background: url('../../../images/tax_support_fr1_modal_ic2.png') no-repeat 0 0; background-size: 12px 12px; } .sub-taxSupport-wp section.step2-wp .system-list .box .list li a:hover .ic {display: inline-block; animation: ic_modal_Ani 0.6s infinite;} @keyframes ic_modal_Ani {50% {transform: translateX(4px);}} .sub-taxSupport-wp section.step2-wp .system-list .box .list.half {float: left; width: 100%;} .sub-taxSupport-wp section.step2-wp .system-list .box .list.half li {float: left; width: 50%;} /* bar */ .sub-taxSupport-wp section.step2-wp .system-list .box .list .bar {display: block; position: absolute; top: -1px; right: -1px; width: 45px; height: 45px; border-radius: 12px; overflow: hidden;} .sub-taxSupport-wp section.step2-wp .system-list .box .list .bar::after {content: ""; position: absolute; top: 0px; right: -50px; width: 100px; height: 30px; background: #0c0ead; transform: rotate(45deg); transition: 0.3s all;} .sub-taxSupport-wp section.step2-wp .system-list .box:hover .list .bar::after {background: #e420d4;} /* tooltip */ section.step2-wp .system-list [data-title] {position: relative !important;} section.step2-wp .system-list [data-title]:hover::before { content: attr(data-title); display: inline-block; position: absolute; top: 30px; left: 30px; max-width: 1000px; padding: 9px 14px 10px 14px; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important; font-size: 13px !important; color: #fff; letter-spacing: -0.2px; line-height: 120%; font-weight: 200; white-space: normal; border-radius: 5px; background: #2929a7; /* #352188 */ box-shadow: 3px 3px 8px 0 rgba(0,0,0, 0.4); animation: data_title_Ani 0.3s linear 0.5s both; z-index: 10; } section.step2-wp .system-list [data-title]:hover::after {content: ''; display: block; position: absolute; bottom: -2px; left: 40px; border: 6px solid transparent; border-bottom: 6px solid #2929a7; animation: data_title_Ani 0.3s linear 0.5s both;} @keyframes data_title_Ani { 0% {opacity: 0;} 100% {opacity: 1;} } /******************************************************************************************************************************** * STEP3. 관련 해설을 통해 전세전략 세우기 ********************************************************************************************************************************/ .sub-taxSupport-wp section.step3-wp {position: relative; background: #fff url('../../../images/tax_support_tax_strategy_bg2.png') no-repeat 50% bottom; background-size: 100% auto;} .sub-taxSupport-wp section.step3-wp .title {margin-bottom: 55px;} .sub-taxSupport-wp section.step3-wp .silder-wrap {overflow: hidden;} .sub-taxSupport-wp section.step3-wp .silder-wrap .swiper-container {margin: 0 -20px 0 0;} /* .sub-taxSupport-wp section.step3-wp .silder-wrap .sub-taxSupport-wp .new-card-List li {background: transparent !important;} .sub-taxSupport-wp section.step3-wp .silder-wrap .sub-taxSupport-wp .new-card-List li a {background: #fff !important;} */ .sub-taxSupport-wp section.step3-wp .swiper-slide .kind-Icon {padding: 10px 0 0 0 !important; font-size: 9px !important; line-height: 100%;} .sub-taxSupport-wp section.step3-wp .swiper-slide .kind-Icon.vod {padding: 15px 0 0 0 !important;} /* 파일북 */ .sub-taxSupport-wp section.step3-wp .sub-title.filebook {margin-top: 0px;} .sub-taxSupport-wp section.step3-wp .filebook-wp { clear: both; margin: 0 0 10px 0; padding: 30px 15px 40px 15px; /* border: 1px solid #ddd; */ background: #fff; } .sub-taxSupport-wp section.step3-wp .filebook-wp ul {float: left; width: 100%;} .sub-taxSupport-wp section.step3-wp .filebook-wp li { float: left; text-align: center; } .sub-taxSupport-wp section.step3-wp .filebook-wp a {display: block; padding: 0 30px; text-decoration: none !important;} .sub-taxSupport-wp section.step3-wp .filebook-wp .thumbs {position: relative;} .sub-taxSupport-wp section.step3-wp .filebook-wp .thumbs::after { content: "무료"; display: block; position: absolute; top: 0px; left: 30px; width: 30px; height: 30px; font-size: 10px; color: #fff; letter-spacing: -1px; line-height: 30px; text-align: center; border-radius: 100%; background: #e05555; transform: scale(1); box-shadow: 3px 6px 6px 0 rgba(0,0,0, 0.2); } .sub-taxSupport-wp section.step3-wp .filebook-wp .subj { display: -webkit-box; margin: 10px 0 0 0; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important; font-size: 16px; letter-spacing: -0.3px; line-height: 140%; font-weight: 400; text-align: left; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.2s; } .sub-taxSupport-wp section.step3-wp .filebook-wp a:hover .subj {color: #5f64ea;} .sub-taxSupport-wp section.step3-wp .filebook-wp .etc { margin: 12px 0 0 0; padding: 0 4px 0 0; font-size: 14px; color: #777; text-align: left; } .sub-taxSupport-wp section.step3-wp .filebook-wp .etc .price {float: right;} .sub-taxSupport-wp section.step3-wp .filebook-wp .etc .price .clr-price {color: #ff2a00;} /*----- Card List -----*/ .sub-taxSupport-wp .new-card-List { position: relative; margin: 10px -20px 0 0; padding: 0 0 5px 0; overflow: hidden; } .sub-taxSupport-wp .new-card-List ul {float: left; width: 100%;} .sub-taxSupport-wp .new-card-List li { float: left; position: relative; margin: 0 0 30px 0; padding: 0 20px 0 0; background: #fff; transition: all 0.3s; } .sub-taxSupport-wp .new-card-List li a { display: block; position: relative; height: 390px; text-decoration: none !important; border: 1px solid #d2d2d2; overflow: hidden; z-index: 1; } .sub-taxSupport-wp .new-card-List.haesul li a {height: 325px;} .sub-taxSupport-wp .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('https://pds.taxnet.co.kr/comm_web_asset/images/comm/no_image.png') no-repeat center center; background-size: auto 100%; overflow: hidden; } .sub-taxSupport-wp .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; } .sub-taxSupport-wp .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; } .sub-taxSupport-wp .new-card-List.haesul li .thmubs img {width: auto; height: 100%;} .sub-taxSupport-wp .new-card-List li .info { margin: 0 0 15px 0; padding: 0 20px; font-size: 14px; text-align: right; } .sub-taxSupport-wp .new-card-List li .info span.date {float: left; font-size: 13px; color: #999;} .sub-taxSupport-wp .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; } .sub-taxSupport-wp .new-card-List.haesul li .subj {min-height: 45px; font-size: 17px; line-height: 140%; -webkit-line-clamp: 3;} .sub-taxSupport-wp .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; } .sub-taxSupport-wp .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('https://pds.taxnet.co.kr/comm_web_asset/images/comm/eye.png') no-repeat 20px 3px; background-size: auto 10px; } .sub-taxSupport-wp .new-card-List li .count strong {color: #444;} .sub-taxSupport-wp .new-card-List li .count span.heart {float: right; font-size: 13px; color: #888;} .sub-taxSupport-wp .new-card-List li .count span.heart i {margin: 0 6px 2px 0; color: #db4545;} /* Hover시 */ .sub-taxSupport-wp .new-card-List li a:hover {border-color: #111; box-shadow: 4px 4px 1px 0 rgba(0,0,0, 0.15);} .sub-taxSupport-wp .new-card-List li a:hover .thmubs::before {background: rgba(0,0,0, 0);} .sub-taxSupport-wp .new-card-List li a:hover .thmubs img {transform: scale(1.05);} .modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10400; overflow: hidden; outline: 0; transition: opacity .15s linear; }