.body-wrap { clear: both; position: relative; min-width: 1300px; margin: 0 auto; overflow: hidden; min-height: 50vh; } .main-banner-wp { background-image: url(../images/BG-mainbanner.png); background-size: cover; } .main-banner-con { display: grid; grid-template-columns: 660px 448px; grid-column-gap: 88px; position: relative; width: 1200px; margin: 0 auto; } .main-banner { position: relative; height: 318px; margin-top: 60px; margin-bottom: 20px; } .main-banner .swiper-side { width: 660px; height: 280px; position: relative; } .main-banner .text-box { position: absolute; top: 40px; left: 40px; font-family: "Noto Sans KR", sans-serif; } .main-banner .text-box h2 { font-family: "GmarketSansMedium", sans-serif; letter-spacing: -2px; font-size: 42px; font-weight: 600; width: 580px; line-height: 56px; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; } .main-banner .text-box p { width: 540px; max-height: 40px; overflow: hidden; text-overflow: ellipsis; line-height: 20px; } .main-banner .swiper { margin: 0; } .main-banner .swiper > .swiper-pagination { display: flex; gap: 10px; left: 40px; bottom: 40px; width: auto; } .main-banner .swiper-pagination-bullet { width: 8px; height: 8px; background-color: #1a2290; opacity: 0.5; } .main-banner .swiper-pagination-bullet-active { opacity: 1; } .main-banner .con-btn-box { position: absolute; left: 200px; bottom: 34px; z-index: 1; } .main-banner button { border: 0; } .main-banner .slide-auto { width: 8px; height: 12px; } .main-banner .slide-auto.stop { background: url("../images/icon_pause.png") no-repeat center center; } .main-banner .slide-auto.start { background: url(../images/icon_start.png) no-repeat center center; } .left-banner { position: absolute; left: -190px; top: 60px; display: flex; flex-direction: column; gap: 10px; z-index: 100; } .left-banner .left-b-item { width: 160px; height: 120px; overflow: hidden; } .right-banner { position: absolute; right: -190px; top: 60px; display: flex; flex-direction: column; gap: 12px; z-index: 100; } .right-banner .right-b-item { width: 160px; height: 260px; overflow: hidden; } .topic-box { margin: auto 0; } .thumb-box { display: flex; gap: 24px; font-family: "Noto Sans KR", sans-serif; } .thumb-box img { flex-shrink: 0; flex-basis: 112px; width: 112px; height: 68px; } .thumb-box dl { padding: 2px 0; } .thumb-box dt { display: -webkit-box; font-size: 17px; line-height: 20px; font-weight: 600; color: #fff; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .thumb-box dd, .thumb-box dd p { display: -webkit-box; margin-top: 6px; font-size: 14px; font-weight: 300; line-height: 18px; color: #fff; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tab-box { margin-top: 43px; /* 기존 2.75rem */ } .tab-box > ul { display: flex; } .tab-item { flex: 1; height: 48px; border-top: 1px solid #dae1e6; border-left: 1px solid #dae1e6; border-bottom: 1px solid #dae1e6; padding: 0px 22px; box-sizing: border-box; background: #fff; color: #222; line-height: 46px; cursor: pointer; position: relative; font-family: "Noto Sans KR", sans-serif; } .tab-item a { display: flex; position: absolute; top: 3px; right: 6px; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 40px; color: #222222; font-size: 19px; } .tab-item:last-child { border-right: 1px solid #dae1e6; } .tab-item.on { background: #363d9d; color: #fff; transition: all 0.4s ease; border: 1px solid #dae1e6; } .tab-item.on a { color: #fff; } .tab-content { display: none; max-height: 122px; overflow: hidden; } .tab-content.on { display: block; } .notice-list { padding-top: 24px; box-sizing: border-box; } .notice-item { display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; } .notice-item span { line-height: 20px; } .notice-item + .notice-item { margin-top: 5px; } .notice-item span:nth-child(1) { width: 78px; text-align: center; flex-shrink: 0; height: 28px; margin-right: 10px; background-color: #363d9d; font-size: 12px; color: #fff; line-height: 28px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 7px; } .notice-item span:nth-child(2) { width: 284px; margin-right: 10px; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Noto Sans KR", sans-serif; } .notice-item span:nth-child(3) { width: 66px; font-size: 13px; text-align: center; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main-tab-wp { position: relative; min-height: 318px; background-color: #f3f6fc; } .tab-con { position: relative; width: 1200px; margin: 0 auto; padding: 54px 0; } .tab-con .tab-menu > ul { display: flex; } .tab-con .tab-menu-item { flex: 1; height: 48px; border-top: 1px solid #dae1e6; border-bottom: 1px solid #dae1e6; border-left: 1px solid #dae1e6; padding: 0px 18px; box-sizing: border-box; background: #fff; color: #222; line-height: 50px; cursor: pointer; position: relative; font-family: "GmarketSansMedium", sans-serif; } .tab-con .tab-menu-item a { display: flex; position: absolute; top: 6px; right: 6px; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 40px; color: #222222; font-size: 19px; } .tab-con .tab-menu-item:last-child { border-right: 1px solid #dae1e6; } .tab-con .tab-menu-item.on { background: #1a2290; color: #fff; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2); border-top: 1px solid #1a2290; border-bottom: 1px solid #1a2290; transition: all 0.5s ease; } .tab-con .tab-menu-item.on a { color: #fff; } .tab-con .tab-menu-content.on { display: grid; transition: all 0.5s ease; } .tab-con .tab-menu-content { display: none; overflow: hidden; grid-template-columns: 1fr 1fr; gap: 60px; } .tab-con .tab-menu-content .con-left .con-right { display: flex; flex-direction: column; } .tab-con .tab-menu-content .con-list { padding-top: 20px; box-sizing: border-box; font-family: "Noto Sans KR", sans-serif; } .tab-con .tab-menu-content .con-items { display: flex; flex-wrap: nowrap; align-items: center; } .tab-con .tab-menu-content .con-items a { display: flex; align-items: center; margin-bottom: 4px; gap: 28px; } .tab-con .tab-menu-content .con-items span:nth-child(1) { width: 450px; text-align: left; height: 28px; margin-right: 16px; font-size: 14px; color: #222222; line-height: 1.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab-con .tab-menu-content .con-items span:nth-child(2) { width: 72px; height: 28px; line-height: 1.75rem; text-align: right; font-size: 13px; color: #707070; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab-menu-content-table { display: none; } .tab-menu-content-table ul.list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 70px; grid-column-gap: 0px; margin-top: 28px; margin-bottom: 12px; } .tab-menu-content-table ul, .tab-menu-content-table.ol, .tab-menu-content-table.li { list-style: none; } .tab-menu-content-table ul.list li { position: relative; line-height: 100%; background-color: #f8fafd; box-shadow: 1px 0 0 0 #d5d5d5, 0 1px 0 0 #d5d5d5, 1px 1px 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5 inset, 0 1px 0 0 #d5d5d5 inset; transition: all 0.2s; cursor: pointer !important; } .tab-menu-content-table ul.list li.data a.item { cursor: pointer; } .tab-menu-content-table ul.list li a.item { display: block; position: relative; height: 70px; padding: 11px 20px 0px 20px; text-decoration: none !important; } .tab-menu-content-table ul.list li a.item .num-ho { display: block; margin: 0 0 0px 0; font-size: 11px; color: #646568; } .tab-menu-content-table ul.list li.data a.item .subj { display: inline-block; font-size: 15px; max-width: 205px; color: #363a38; letter-spacing: -0.4px; line-height: 100%; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tab-menu-content-table ul.list li a.item .date { position: absolute; right: 60px !important; top: 14px; font-size: 11px; color: #bbb; letter-spacing: -0.2px; } .tab-menu-content-table ul.list li.data .form-file { display: inline-block; position: absolute; top: 25px; right: 18px; z-index: 3; transition: transform 0.1s; } .tab-menu-content-table ul.list li.data .form-file:hover { transform: scale(1.2); } .tab-menu-content-table ul.list li.data .form-file .ficon { display: inline-block; background-size: 24px !important; width: 24px; height: 24px; margin: 0; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); } .tab-menu-content-table ul.list li.data .form-file .ficon.pdf { background: url(../../images/file_pdf.png) no-repeat center center; } .tab-menu-content-table ul.list.list li:hover { box-shadow: 1px 0 0 0 #111, 0 1px 0 0 #111, 1px 1px 0 0 #111, 1px 0 0 0 #111 inset, 0 1px 0 0 #111 inset, 6px 6px 12px 0 rgba(0, 0, 0, 0.05); background-color: #fff; z-index: 2; } .main-contents-wp { position: relative; display: flex; flex-direction: column; padding: 54px 0; } .post-con { display: flex; gap: 44px; width: 1200px; margin: auto; box-sizing: border-box; } .view-box { flex: 1; height: 231px; } .view-header, .text-header { display: flex; align-items: center; font-family: "Noto Sans KR", sans-serif; } .view-title, .text-title { font-size: 24px; font-weight: 600; } .view-btn { margin-left: 18px; } .view-btn button { width: 28px; height: 28px; border: 1px solid #eaeaea; } .view-btn .view-btn-next { background: url(../images/icon_arrow_left.png) no-repeat center #fff; } .view-btn .view-btn-prev { background: url(../images/icon_arrow_right.png) no-repeat center #fff; } .view-detail-btn { flex-shrink: 0; margin-left: auto; } .view-detail-btn button { height: 24px; padding-left: 20px; box-sizing: border-box; background: url(../images/icon_plus_black.png) no-repeat left center #fff; font-size: 12px; opacity: 0.6; transition: all 0.2s ease; } .view-detail-btn button:hover { opacity: 1; } .view-body { position: relative; width: 576px; height: 170px; margin-top: 12px !important; overflow: hidden; } .view-list { display: flex; gap: 0px; position: absolute; left: 0; min-height: 170px; transition: 0.5s; cursor: pointer; } .view-list dt { width: 176px; height: 112px; } .view-list dd { width: 176px; margin-top: 16px; } .view-list dd > p { margin-bottom: 8px; font-size: 15px; color: #101010; font-weight: 600; font-family: "Noto Sans KR", sans-serif; } .view-list p.swp_title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 176px; } .view-list dd > p:last-of-type { display: flex; justify-content: space-between; font-weight: 200; } .view-list dd span:nth-of-type(1) { font-size: 12px; color: #bababa; } .view-list dd span:nth-of-type(2) { font-size: 11px; color: #00c398; } .text-con { display: flex; gap: 60px; width: 1200px; margin: auto; box-sizing: border-box; margin-top: 48px; } .text-con .text-left-box { flex: 690px; } .text-con .text-right-box { flex: 447px; width: 447px; flex-direction: column; } .text-con .tc-body { position: relative; width: 100%; margin-top: 19px; display: flex; flex-direction: column; } .text-con .tc-body .tc-items { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; width: 690px; } .text-con .tc-body .tc-items span { display: block; width: 184px; background-color: #f7f9fa; color: #6a6a6a; font-size: 12px; padding: 6px 8px; border-radius: 4px; text-align: center; letter-spacing: 0.042em; margin-bottom: 4px; white-space: nowrap; } .text-con .tc-body .tc-items p { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; color: #222222; line-height: 20px; padding: 0 8px; } .text-con .reco-body { position: relative; width: 100%; margin-top: 22px; } .text-con .reco-body .reco-item { width: 447px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .text-con .reco-body .reco-item span { color: #bababa; font-size: 12px; padding-left: 4px; } .text-con .reco-body .reco-item .icon-box { display: flex; flex-direction: row; } .text-con .reco-body .reco-item .icon-box .icon { font-size: 11px; height: 24px; line-height: 24px; display: flex; padding: 0 12px; border-radius: 20px; margin-right: 4px; } .text-con .reco-body .reco-item .icon-box .icon-w { background-color: #fff; border: 1px solid #aaaaaa; } .text-con .reco-body .reco-item .icon-box .icon-b { background-color: #3747de; color: #fff; } .text-con .reco-body .reco-item p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 20px; } .text-con .line { display: flex; height: 1px; background-color: #e4e8eb; margin: 24px 0; } .exp-con .text-header .text-title { margin-top: 10px; } .exp-con .exp-body { margin-top: 18px; } .exp-con .exp-body p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 20px; } .exp-con .exp-body span { font-size: 12px; line-height: 20px; color: #3747de; } .exp-con .exp-body span:first-child { float: left; } .exp-con .exp-body span:last-child { float: right; color: #bababa; } .dividing { width: 1200px; margin: 26px auto 40px; height: 1px; background-color: #e4e8eb; } .data-con { display: flex; gap: 48px; width: 1200px; margin: auto; box-sizing: border-box; } .data-con .counsel-tab-box { flex: 560px; } .counsel-tab-box > ul { display: flex; } .counsel-tab-item { flex: 1; height: 48px; line-height: 50px; border-top: 1px solid #dae1e6; border-left: 1px solid #dae1e6; border-bottom: 1px solid #dae1e6; padding: 0px 15px; box-sizing: border-box; background: #fff; color: #222; cursor: pointer; font-size: 15px; position: relative; font-family: "GmarketSansMedium", sans-serif; letter-spacing: -1px; } .counsel-tab-item a { display: flex; position: absolute; top: 6px; right: 2px; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 40px; color: #222222; font-size: 19px; } .counsel-tab-item:last-child { border-right: 1px solid #dae1e6; } .counsel-tab-item.on { background: #1a2290; color: #fff; transition: all 0.4s ease; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2); border-bottom: 1px solid #1a2290; } .counsel-tab-item.on a { color: #fff; } .counsel-tab-content { display: none; } .counsel-tab-content.on { display: block; } .counsel-list { padding-top: 24px; box-sizing: border-box; } .counsel-item { display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; font-size: 14px; height: 24px; margin-bottom: 8px; } .icon-red { width: 38px; height: 24px; line-height: 24px; font-size: 12px; background: rgba(250, 17, 87, 0.06); border-radius: 2px; color: #fa1157; text-align: center; margin-right: 10px; } .icon-com { width: 36px; height: 24px; line-height: 24px; font-size: 12px; background: #fff; border-radius: 4px; color: #41468f; text-align: center; border: 1px solid #d1d3e9; } .counsel-item span:nth-child(2) { width: 294px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; margin-top: 4px; margin-right: 42px; font-family: "맑은고딕","Noto Sans KR", sans-serif; } .counsel-item span:nth-child(3), .counsel-item span:nth-child(4) { font-size: 12px; color: #333333; margin-right: 19px; margin-top: 4px; } .counsel-item a { display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; font-size: 14px; height: 24px; margin-bottom: 10px; } .counsel-item a span:nth-child(2) { width: 294px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; margin-top: 4px; margin-right: 42px; font-family: "맑은고딕","Noto Sans KR", sans-serif; } .counsel-item a span:nth-child(3), .counsel-item a span:nth-child(4) { font-size: 12px; color: #333333; margin-right: 19px; margin-top: 4px; } .exchange-box { border: 1px solid #eaeaea; padding: 20px 20px; } .exchange-box .title { font-family: "GmarketSansMedium", sans-serif; display: flex; justify-content: space-between; box-sizing: border-box; color: #222; line-height: 20px; font-size: 18px; cursor: pointer; } .exchange-box .date { font-size: 9px; color: #bababa; } .exchange-box .country { width: 100%; margin-top: 18px; } .exchange-box .country .ctry-item { display: grid; grid-template-columns: 16px 48px 54px 58px 40px 16px; font-size: 11px; margin-bottom: 14px; } .exchange-box .country .ctry-item span:nth-child(3) { color: #aaaaaa; } .exchange-box .country .ctry-item span:nth-child(4) { text-align: right; } .exchange-box .country .ctry-item span:nth-child(5) { text-align: right; } .exchange-box .country .ctry-item span:nth-child(6) { padding-left: 9px; } .exchange-box .country .ctry-item:last-child { margin-bottom: 0; } .exchange-box .country .plus { color: #fa1157; } .exchange-box .country .minus { color: #3747de; } .schedule-box { width: 274px; padding: 20px 20px; background-color: #f3f6fc; } .schedule-box .title { font-family: "GmarketSansMedium", sans-serif; display: flex; justify-content: space-between; color: #222; line-height: 20px; font-size: 18px; cursor: pointer; } .schedule-box .yd { font-size: 13px; line-height: 20px; } .schedule-box .month { display: flex; width: 100%; height: 26px; justify-content: center; align-items: center; gap: 20px; margin-top: 4px; margin-bottom: 4px; } .schedule-box .month-btn { width: 20px; height: 20px; background-color: #fff; box-shadow: 0px 2px 6px rgba(26, 34, 144, 0.12); border-radius: 100px; } .schedule-box .month-btn span { color: #3747de; font-size: 18px; line-height: 20px; font-weight: 600; } .schedule-box .calr-area { background-color: #fff; } .schedule-box .calr-area table { width: 232px; table-layout: fixed; } .schedule-box .calr-area table tr:last-child { padding-bottom: 4px; } .schedule-box .calr-area table tr:nth-child(2) { margin-top: 4px; } .schedule-box .calr-area table tr { display: flex; flex-direction: row; justify-content: space-between; } .schedule-box .calr-area table tr th { width: 33.1428571429px; height: 20px; padding: 5px 0 5px 0; font: 8px "verdana"; color: #fff; text-align: center; vertical-align: middle; background: #1a2290; } .schedule-box .calr-area table tr td { position: relative; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; font: 10px "verdana"; line-height: 20px; text-align: center; vertical-align: middel; } .schedule-box .calr-area table tr td:last-child { color: #3747de; padding-right: 5px; } .schedule-box .calr-area table tr td:first-child { color: #fa1157; padding-left: 5px; } .schedule-box .calr-area table .today { display: flex; background: #00c398; width: 20px; height: 20px; border-radius: 16px; align-items: center; justify-content: center; color: #fff; } .schedule-box .calr-area table .disabled { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: #d4d8df; } .schedule-box .calr-area table .event { cursor: default; display: flex; width: 100%; background: #ecf5fc; border-radius: 100%; text-align: center; justify-content: center; } .schedule-box .calr-area table td .eventbox { width: -moz-max-content; width: max-content; max-width: 200px; display: none; position: absolute; top: 26px; left: 4px; padding: 10px 12px; border-radius: 8px; border-top-left-radius: 0px; border: 1px solid #eee; background-color: #fff; box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.06); z-index: 10; font-size: 12px; color: #333; line-height: 16px; text-align: left; flex-direction: column; gap: 4px; } .schedule-box .calr-area table td .eventbox.show { display: flex; } .main-recommend-wp { position: relative; min-height: 318px; background-color: #f7f9fa; } .recommend-con { display: flex; width: 1200px; margin: auto; box-sizing: border-box; gap: 42px; padding: 60px 0; } .recommend-con .reco-box { flex: 1; } .recommend-con .reco-header { display: flex; align-items: center; padding-right: 4px; } .recommend-con .reco-header .reco-title { font-family: "Noto Sans KR", sans-serif; font-size: 22px; font-weight: 600; margin-top: -5px; } .recommend-con .reco-header .reco-btn { margin-left: 10px; } .recommend-con .reco-header .reco-btn button { width: 28px; height: 28px; border: 1px solid #eaeaea; } .recommend-con .reco-header .reco-btn-left { background: url(../images/icon_arrow_left_3.png) no-repeat center transparent; } .recommend-con .reco-header .reco-btn-right { background: url(../images/icon_arrow_right_3.png) no-repeat center transparent; } .recommend-con .reco-detail-btn { flex-shrink: 0; margin-left: auto; } .recommend-con .reco-detail-btn button { height: 24px; padding-left: 24px; box-sizing: border-box; background: url(../images/icon_plus_black.png) no-repeat left center; font-size: 12px; color: #707070; } .recommend-con .reco-body { position: relative; width: 370px; height: 177px; margin-top: 10px; overflow: hidden; } .recommend-con .reco-body .reco-list { display: flex; gap: 20px; position: absolute; left: 0; min-height: 170px; transition: 0.5s; cursor: pointer; gap: 0px; } .recommend-con .reco-body .reco-list dt { width: 176px; height: 112px; overflow: hidden; } .recommend-con .reco-body .reco-list dt img { -o-object-fit: cover; object-fit: cover; width: 100%; } .recommend-con .reco-body .reco-list dd { margin-top: 16px; } .recommend-con .reco-body .reco-list dd p:first-child { font-size: 15px; line-height: 26px; font-weight: 600; width: 174px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Noto Sans KR", sans-serif; } .recommend-con .reco-body .reco-list dd p:last-child { font-size: 12px; line-height: 16px; font-weight: 200; color: #bababa; } .recommend-con .reco-body .book p:last-child { width: 117px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recommend-con .reco-body .ebook p:last-child { display: flex; justify-content: space-between; width: 172px; } .recommend-con .reco-body .ebook span { color: #bababa; } /*----- Swiper 이미지 위치-사이즈 보정 -----------------------------------------*/ .swiper-wrapper .swiper-images { width: 660px !important; height: 280px !important; overflow: hidden !important; position: relative !important; } .swiper-wrapper .swiper-images img { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; image-rendering: -webkit-optimize-contrast; /* 웹킷 엔진(크롬, 사파리) 최적화 */ image-rendering: crisp-edges; /* 화질 선명하게 */ /*image-rendering: pixelated; 픽셀화를 선명하게 */ }