@charset "UTF-8"; /* 기준(공통) CSS.. */ *|* { box-sizing: border-box; } *|*:before, *|*:after { box-sizing: border-box; } /* * {font-family: '맑은 고딕', 'Malgun Gothic', 'MalgunGothicRegular', sans-serif; font-size: 15px; color: #333; line-height: 100%;} */ .body-wrap { clear: both; position: relative; min-width: 1300px; margin: 0px auto; overflow: hidden; } .container-n { position: relative; width: 1200px; margin: 0 auto; padding: 0; vertical-align: top; } .Noto { font-family: "Noto Sans KR", "Noto Sans", sans-serif; } /******************************************************************************************************************************** * 유튜브 인기동영상 ********************************************************************************************************************************/ .sub-hityoutube-wp .top-visual { clear: both; position: relative; height: 200px; margin: -30px 0 15px 0; padding: 40px 440px 0 0; font-size: 15.5px; color: #444; line-height: 160%; background: url("../images/media_visual_02.png") no-repeat right bottom; overflow: hidden; } .sub-hityoutube-wp .top-visual .stit { display: block; margin: 0 0 15px 0; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 39px; color: #333; letter-spacing: -2px; line-height: 120%; font-weight: 600; } .sub-hityoutube-wp .list { display: grid; grid-template-columns: repeat(4, 1fr); -moz-column-gap: 20px; column-gap: 20px; row-gap: 50px; padding: 10px 0 50px 0; border-bottom: 1px solid #ccc; } .sub-hityoutube-wp .list a { display: block; text-decoration: none !important; } .sub-hityoutube-wp .list .thumbs { display: flex; position: relative; text-align: center; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 8px; transition: all 0.2s; image-rendering: crisp-edges; overflow: hidden; } .sub-hityoutube-wp .list a:hover .thumbs { border-color: #999; box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, 0.2); } .sub-hityoutube-wp .list .thumbs::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url("../images/media_playBtn.png") no-repeat 0 0px; background-size: 50px auto; opacity: 0.8; z-index: 2; } .sub-hityoutube-wp .list .thumbs img { display: inline-block; width: 100%; height: auto; } .sub-hityoutube-wp .list .subj { display: block; display: -webkit-box; position: relative; min-height: 34px; margin: 10px 0 0px 0; padding: 0 0 0 40px; font-size: 14px; letter-spacing: -0.5px; line-height: 130%; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sub-hityoutube-wp .list .subj::before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 34px; height: 34px; margin: -17px 0 0 0; border: 1px solid #ddd; border-radius: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: 33px 33px; overflow: hidden; } .sub-hityoutube-wp .list.channel1 .subj::before { background-image: url("../images/media_ic1.png"); } /*국세청*/ .sub-hityoutube-wp .list.channel2 .subj::before { background-image: url("../images/media_ic2.png"); } /*기획재정부*/ .sub-hityoutube-wp .list.channel3 .subj::before { background-image: url("../images/media_ic3.png"); } /*한국세무사회*/ .sub-hityoutube-wp .list.channel4 .subj::before { background-image: url("../images/media_ic4.png"); } /*한국공인회계사회*/ .sub-hityoutube-wp .list.channel5 .subj::before { background-image: url("../images/media_ic5.png"); } /*한국회계기준원*/ .sub-hityoutube-wp .list.channel6 .subj::before { background-image: url("../images/media_ic6.png"); } /*법제처*/ .sub-hityoutube-wp .list.channel7 .subj::before { background-image: url("../images/media_ic7.png"); } /*고용노동부*/ .sub-hityoutube-wp .list a.active .thumbs { border-color: #ff5529; } .sub-hityoutube-wp .list .youtube-modal { display: none; position: fixed; top: 50%; left: 50%; width: 840px; height: 490px; margin: -230px 0 0 -420px; padding: 20px 0 0 0; text-align: center; border: 1px solid #333; background: #fff; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3); transition: all 0.2s; z-index: 1000; } .sub-hityoutube-wp .list .youtube-modal.show { display: block; } .sub-hityoutube-wp .list .youtube-modal iframe { width: 800px; height: 450px; } .sub-hityoutube-wp .list .youtube-modal > div { position: relative; } .sub-hityoutube-wp .list .youtube-modal > div::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: url("../images/loding.gif") no-repeat 50% 50%; animation: youtube_ani 2s linear forwards; opacity: 1; } @keyframes youtube_ani { 70% { opacity: 1; } 100% { display: none !important; opacity: 0; z-index: -1; } } .sub-hityoutube-wp .list .youtube-modal > div .close { display: flex; position: absolute; top: -40px; right: -25px; width: 50px; height: 50px; padding: 0 0 10px 1px; font-size: 50px; color: #fff; line-height: 0; justify-content: center; align-items: center; border-radius: 100%; background: #333; transition: all 0.2s; cursor: pointer; } .sub-hityoutube-wp .list .youtube-modal > div .close:hover { background: #ff5529; } /******************************************************************************************************************************** * ********************************************************************************************************************************/ .lec-banner-wp { width: 100%; background-color: #618CEB; } .lec-banner-wp .lec-banner01 { margin: 0 auto; height: 550px; text-align: center; background: url("../images/lec-top-banner01.jpg") no-repeat 50% 0; overflow: hidden; } .lec-top-category { position: relative; border-top: 1px solid #1c2027; border-bottom: 1px solid #272c36; background: #2c323d; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2; } .lec-listbox { width: 100%; display: flex; flex-direction: row; height: 80px; position: relative; } .lec-listbox .fa-bookmark { position: absolute; top: -4px; left: 6px; color: #f6884d; font-size: 20px; } .lec-listbox .lec-list-item { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .lec-listbox .lec-list-item.active a { color: #fff; } .lec-listbox .lec-list-item.tag-silmu::before { content: "프리미엄 온라인교육"; position: absolute; top: -13px; left: 50%; min-width: 110px; height: 22px; margin: 0 0 0 -54px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; font-size: 11px; color: #1f2450; letter-spacing: -0.5px; line-height: 20px; font-weight: 500; text-align: center; border: 2px solid #1f2450; border-radius: 24px; background: #fff; box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.2); z-index: 3; } .lec-listbox .lec-list-item::after { content: ""; display: block; position: absolute; top: 50%; right: -3px; width: 1px; height: 34px; margin: -17px 0 0 0; border-right: 1px solid rgba(255, 255, 255, 0.2); } .lec-listbox .lec-list-item:last-child::after { border: 0; } .lec-listbox .lec-list-item a { font-size: 20px; color: rgba(255, 255, 255, 0.8); line-height: 2em; min-width: 70px; padding: 10px 20px; transition: all 0.2s ease; } .lec-listbox .lec-list-item a:hover { padding-top: 12px; color: #fff; } .lec-search-wp { position: relative; height: 150px; margin-bottom: 70px; padding: 56px 0; text-align: center; background: #3c4a64; } .lec-search-wp::after { content: ""; position: absolute; bottom: -50px; left: 50%; width: 0px; height: 0px; margin: 0 0 0 -25px; border: 25px solid; border-color: #3c4a64 transparent transparent transparent; } .lec-search-wp .lec-search-content { display: flex; flex-direction: row; max-width: 1200px; min-width: 1200px; margin: 0 auto; padding: 0 60px; } .lec-search-wp .lec-search-content .con-tit { display: flex; flex-direction: column; align-items: flex-start; font-family: "Noto Sans KR", sans-serif; margin-right: 40px; } .lec-search-wp .lec-search-content .con-tit p { color: rgba(255, 255, 255, 0.5); font-size: 14px; } .lec-search-wp .lec-search-content .con-tit h2 { font-size: 30px; color: #afd1ff; margin-top: 10px; font-weight: bold; } .lec-search-wp .lec-search-content .search-box { display: flex; flex-direction: row; align-items: center; } .lec-search-wp .search-box .lec-select { width: 120px; height: 54px; font-size: 16px; border-radius: 0; border: 1px solid #fff; border-radius: 8px; margin-right: 6px; } .lec-search-wp .search-box .lec-select:focus { border-color: #000; } .lec-search-wp .search-box .lec-search { width: 500px; height: 54px; font-size: 16px; line-height: auto; text-transform: none; vertical-align: middle; border: 1px solid #fff; background: #fff; border-radius: 8px; margin-right: 6px; } .lec-search-wp .search-box .lec-search:focus { border-color: #000; } .lec-search-wp .search-box .lec-search-btn { display: flex; align-items: center; justify-content: center; width: 120px; height: 54px; font-size: 17px; border: 1px solid #00bd93; background-color: #00bd93; transition: all 0.3s; color: #fff; border-radius: 8px; padding-top: 1px; } .lec-search-wp .search-box .lec-search-btn:hover { background-color: #078d70; border-color: #078d70; } .lec-half-banner { width: 49.5%; height: 97px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 24px; letter-spacing: -2px; } .lec-half-banner img { transition: all 0.3s ease; width: 100%; } .lec-half-banner:hover img { scale: 1.01; } .sec-title { font-family: "GmarketSansMedium", sans-serif; font-size: 32px; font-weight: bold; } .sec-title-sm { font-family: "GmarketSansMedium", sans-serif; font-size: 28px; font-weight: bold; } .lec-update-wp { position: relative; margin-top: 8px; } .lec-update-wp .updateSwiper, .lec-update-wp .specialSwiper { height: 350px; } .lec-update-wp .updateSwiper .swiper-slide, .lec-update-wp .specialSwiper .swiper-slide { height: auto; } .lec-update-wp .btn-box { position: absolute; top: -38px; right: -10px; width: 88px; } .lec-update-wp .btn-box .swiper-button-prev { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #d5d5d5; transition: all 0.2s ease; } .lec-update-wp .btn-box .swiper-button-prev::after { font-size: 12px; color: #b1b0b5; font-weight: bold; } .lec-update-wp .btn-box .swiper-button-prev:hover { background-color: #d5d5d5; } .lec-update-wp .btn-box .swiper-button-prev:hover::after { color: #fff; } .lec-update-wp .btn-box .swiper-button-next { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #d5d5d5; transition: all 0.2s ease; } .lec-update-wp .btn-box .swiper-button-next::after { font-size: 12px; color: #b1b0b5; font-weight: bold; } .lec-update-wp .btn-box .swiper-button-next:hover { background-color: #d5d5d5; } .lec-update-wp .btn-box .swiper-button-next:hover::after { color: #fff; } .lec-con-card, .premium-item { padding-bottom: 20px; } .lec-con-card .thumb, .premium-item .thumb { width: 100%; aspect-ratio: 1/0.57; border-radius: 8px; position: relative; text-align: center; align-items: center; -webkit-align-items: center; background: url("../images/no_image.png") no-repeat center center; background-size: 100% auto; transition: all 0.2s ease; overflow: hidden; border: 1px solid #efeff0; } .lec-con-card .thumb .tag-area, .premium-item .thumb .tag-area { position: absolute; top: 4px; right: 4px; z-index: 10; display: flex; flex-direction: row; gap: 2px; } .lec-con-card .thumb .cir-tag, .premium-item .thumb .cir-tag { background-color: #24b0de; font-size: 10px; letter-spacing: -0.5px; color: #fff; width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; } .lec-con-card .thumb::after, .premium-item .thumb::after { content: ""; display: block; position: absolute; top: 52%; left: 52%; width: 52px; height: 52px; margin: -30px 0 0 -30px; background: url("../images/media_playBtn.png") no-repeat 0 0; background-size: 50px auto; transition: all 0.2s ease; z-index: 3; } .lec-con-card .thumb .thumb-img, .premium-item .thumb .thumb-img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: all 0.2s ease; filter: blur(0px); } .lec-con-card .tag-box, .premium-item .tag-box { margin-top: 10px; margin-bottom: 10px; } .lec-con-card .tag-box .tag, .premium-item .tag-box .tag { display: inline-block; height: 24px; margin: 0 0px 0 0; padding: 0 8px; font-size: 11px; color: #666; letter-spacing: -0.5px; line-height: 23px; font-weight: 400; vertical-align: text-bottom; border-radius: 4px; background-color: #eee; transition: all 0.1s; cursor: pointer; } .lec-con-card .tag-box .tag:hover, .premium-item .tag-box .tag:hover { background-color: #00bd93; color: #fff; } .lec-con-card .txt-box, .premium-item .txt-box { display: flex; flex-direction: column; padding-top: 4px; } .lec-con-card .txt-box .tit, .premium-item .txt-box .tit { font-family: "Noto Sans KR", sans-serif; font-size: 19px; line-height: 1.3em; font-weight: bold; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 50px; transition: all 0.2s ease; } .lec-con-card .txt-box .etc, .premium-item .txt-box .etc { display: flex; flex-direction: row; justify-content: space-between; margin-top: 12px; } .lec-con-card .txt-box .etc .time, .premium-item .txt-box .etc .time { color: #666699; font-size: 14px; } .lec-con-card .txt-box .etc .name, .premium-item .txt-box .etc .name { color: #555; font-size: 14px; } .lec-con-card .txt-box .summary, .premium-item .txt-box .summary { color: #999; font-size: 12px; line-height: 1.4em; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 12px; transition: all 0.2s ease; } .lec-con-card:hover .thumb::after, .premium-item:hover .thumb::after { scale: 1.1; } .lec-con-card:hover .thumb-img, .premium-item:hover .thumb-img { scale: 1.03; } .lec-con-card:hover .txt-box .tit, .premium-item:hover .txt-box .tit { color: #ff5529; } .lec-con-card:hover .txt-box .summary, .premium-item:hover .txt-box .summary { color: #000; } .lec-content-wp { width: 1200px; margin: 0 auto; } .lec-cardbox04 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 50px; } .lec-card-wp02 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .lec-cardbox02 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 20px; } .lec-md-banner { width: 48.5%; height: 160px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 24px; letter-spacing: -2px; background-color: pink; } .lec-md-banner:hover img { scale: 1.01; } .lec-md-banner img { transition: all 0.3s ease; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .lec-academy-banner { height: 120px; background: #618bef; background: linear-gradient(to right, #618bef 51%, #ff643c 52%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#618bef", endColorstr="#ff643c",GradientType=1 ); overflow: hidden; margin-bottom: 0; } .lec-academy-banner a { display: block; width: 1200px; margin: 0 auto; } .lec-silmu-wp { margin: 0px 0 0 0; padding: 60px 0 70px 0; background: #ebeff4; overflow: hidden; } .lec-silmu-tit-box { margin: 20px 0; text-align: center; } .lec-silmu-tit-box .txt { color: #777; font-size: 17px; margin-bottom: 12px; } .lec-silmu-tit-box .tit { font-size: 50px; color: #1f2450; letter-spacing: -3px; font-weight: 700; } .lec-premium-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 50px 0; } .lec-premium-box .premium-item { width: 100%; padding: 24px 20px; border-radius: 12px; border: 1px solid #ddd; background-color: #fff; position: relative; } .lec-premium-box .premium-item .thumb { border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .lec-premium-box .premium-item .txt-box .tit { font-size: 24px; height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lec-premium-box .premium-item .txt-box .etc .name { font-size: 15px; font-weight: 500; } .lec-premium-box .premium-item:hover { box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1); border-color: #c7c7ca; } .lec-premium-box .premium-item::after { content: ""; display: block; position: absolute; top: -30px; left: -20px; width: 105px; height: 104px; background: url("../images/icon_silmu.png") no-repeat 0 0; z-index: 10; } .topbanner.fivemin-lec { background: #d5e2ec url("../images/lec(5)_top_bg.png") no-repeat 50% 0; } .fivemin-info { margin: 40px 0 30px 0; display: flex; flex-direction: column; } .fivemin-info .tit { font-family: "Noto Sans KR", sans-serif; font-size: 30px; letter-spacing: -0.5px; line-height: 120%; font-weight: 500; text-align: center; } .fivemin-info .tag-box { margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; } .fivemin-info .tag-box .tag-item { height: 40px; padding: 0 30px; font-size: 15px; color: #3e32c3; letter-spacing: -1px; line-height: 38px; text-decoration: none; text-align: center; border: 1px solid #3e32c3; border-radius: 40px; transition: all 0.2s ease; } .fivemin-info .tag-box .tag-item.active { background-color: #3e32c3; color: #fff; } .fivemin-info .tag-box .tag-item:hover { background-color: #3e32c3; color: #fff; } .con-list-area li .premium { position: relative; } .con-list-area li .premium::after { content: ""; display: block; position: absolute; top: -20px; left: -30px; width: 72px; height: 70px; background: url(../images/icon_silmu.png) no-repeat 0 0; background-size: cover; z-index: 10; } .video-title-box { display: flex; flex-direction: row; font-family: "Noto Sans KR", sans-serif; row-gap: 12px; margin-bottom: 20px; } .video-title-box .text-box { display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 12px; } .video-title-box .categorize-tag { min-width: 90px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 15px; color: #fff; letter-spacing: 0; background: #e05555; border-radius: 4px; padding-bottom: 1px; margin-top: 5px; margin-right: 12px; } .video-title-box .tit { font-size: 27px; font-weight: bold; margin-right: 10px; line-height: 1.4em; } .video-title-box .subtxt { font-size: 20px; padding-top: 4px; line-height: 1.5em; } .video-conlist-wp .media-item { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 6px 0 6px 20px; position: relative; padding: 16px 0 16px 25px; font-size: 100%; color: #333; line-height: 1.4em; text-align: left; transition: all 0.3s; overflow: hidden; } .video-conlist-wp .vid-thumb { width: 88px; height: 50px; border-radius: 2px; overflow: hidden; position: relative; } .video-conlist-wp .vid-thumb:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -15px 0 0 -15px; border-radius: 100%; background: rgba(0, 0, 0, 0.1) url("../images/media_playBtn.png") no-repeat 0 0; background-size: 30px auto; z-index: 2; } .video-conlist-wp .info-txt { width: 900px; display: flex; flex-direction: column; margin-left: 30px; } .video-conlist-wp .info-txt .top { display: flex; flex-direction: row; position: relative; } .video-conlist-wp .info-txt .tit { margin-right: 10px; font-size: 18px; font-weight: 600; position: relative; } .video-conlist-wp .info-txt .bottom { display: flex; flex-direction: row; margin-top: 4px; } .video-conlist-wp .info-txt .bottom .time { display: block; color: #777; font-size: 14px; } .video-conlist-wp .btn-videoview { position: absolute; top: 50%; right: 20px; margin: -15px 0 0 0; letter-spacing: -0.5px; border-color: #a4acb4 !important; background-color: #acb4bc !important; border-radius: 4px; height: 30px; padding: 1px 15px 0 15px; font-size: 13px; line-height: 28px; font-weight: normal; transition: all 0.3s; color: #fff; } .video-conlist-wp .btn-videoview::before { content: "동영상 보기"; } .video-conlist-wp .btn-videoview:hover { border-color: #82898f !important; background-color: #82898f !important; } .video-conlist-wp .media-item.playing { background: #fff6f4; } .video-conlist-wp .media-item.playing .info-txt .tit { color: #ff5529; position: relative; } .video-conlist-wp .media-item.playing .info-txt .tit::after { position: absolute; display: block; content: ""; width: 24px; height: 16px; background: url("../images/play-icon.svg"); right: -31px; top: 5px; } .video-conlist-wp .media-item.playing .btn-videoview { background-color: #ff5529 !important; } .video-conlist-wp .media-item.playing .btn-videoview::before { content: "선택한 강의"; } .video-conlist-wp table.List tr:hover { background-color: transparent; } .book-guide-wp { margin-top: 12px; padding: 30px 20px 30px 20px; border: 1px solid #d7d7d7; display: flex; flex-direction: row; } .book-guide-wp .btn-type { font-size: 15px; border-radius: 6px; padding: 0 16px; } .book-guide-wp .book-sale { display: flex; flex-direction: column; align-items: center; width: 260px; margin-right: 30px; } .book-guide-wp .book-sale .book-thumb { width: 160px; height: 230px; border-radius: 8px; overflow: hidden; margin-bottom: 20px; } .book-guide-wp .book-sale .book-thumb img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .book-guide-wp .book-info { display: flex; flex-direction: column; width: 100%; max-width: 860px; } .book-guide-wp .book-info .info-tit { font-family: "Noto Sans KR", sans-serif; font-size: 27px; font-weight: 500; line-height: 1.4em; margin-bottom: 8px; } .book-guide-wp .book-info .info-author { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: #666; padding-bottom: 22px; } .book-guide-wp .book-info .info-author .sort { width: 1px; height: 10px; background-color: #999; margin: 0 4px; } .book-guide-wp .book-info .book-description { color: #36517b; font-weight: bold; margin-bottom: 10px; } .book-guide-wp .book-info .info-detail { padding: 20px 20px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; background: #f8f8f8; } .book-guide-wp .book-info .info-detail li { display: flex; flex-direction: row; margin-bottom: 12px; } .book-guide-wp .book-info .info-detail li .through { text-decoration: line-through; } .book-guide-wp .book-info .info-detail li:last-child { margin-bottom: 0; } .book-guide-wp .book-info .book-expl { margin-top: 20px; } .book-guide-wp .book-info .book-expl .desc { position: relative; font-size: 14px; color: #555; padding-left: 20px; margin-bottom: 6px; line-height: 1.3em; } .book-guide-wp .book-info .book-expl .desc::after { position: absolute; content: ""; width: 2px; height: 2px; border-radius: 2px; background-color: #444; left: 12px; top: 50%; } .topbanner.filebook { background: #8f89ce url("../images/fb_Visual.png") no-repeat 50% 0; height: 350px; } .btn-filebook { display: inline-block; position: absolute; top: 50%; right: 20px; height: 28px; margin: -14px 0 0 0; padding: 0 12px; font-size: 11.5px; color: #fff; line-height: 28px; text-decoration: none !important; text-align: center; border-radius: 4px; background: #544ba7; transition: all 0.2s ease; } .btn-filebook i { font-size: 9px; margin-top: -4px; margin-left: 2px; } .btn-filebook:hover { background: #393278; box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.2); } .deco-title-con { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #cacaca; padding: 20px 0; margin-bottom: 20px; } .deco-title-con .lt { display: flex; flex-direction: row; align-items: flex-end; } .deco-title-con .lt .deco-tit { font-family: "Noto Sans KR", sans-serif; position: relative; padding-left: 20px; font-size: 27px; font-weight: bold; } .deco-title-con .lt .deco-tit::before { content: ""; display: block; position: absolute; top: 2px; left: 1px; width: 6px; height: 28px; border-radius: 6px; background: #476ccd; overflow: hidden; } .deco-title-con .lt .deco-stxt { position: relative; font-size: 12.5px; color: #777; margin-left: 28px; } .deco-title-con .lt .deco-stxt::before { content: ""; position: absolute; top: 1px; left: -12px; width: 1px; height: 11px; background: #d7d7d7; } .deco-title-con .rt .gray-txt { font-size: 14px; color: #888; } .filebook-list { width: 100%; padding: 20px 0 60px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 37px; row-gap: 40px; border-bottom: 1px solid #dfdfdf; margin-bottom: 40px; } .filebook-list .filebook-item { width: 210px; min-height: 300px; } .filebook-list .filebook-item a { width: 100%; display: flex; flex-direction: column; } .filebook-list .filebook-item a .thumb { display: flex; height: 280px; margin: 0 auto 12px auto; text-align: center; justify-content: center; align-items: center; border: 1px solid #eaeaea; border-radius: 12px; transition: all 0.2s; overflow: hidden; } .filebook-list .filebook-item a .thumb img { display: inline-block; width: 100%; height: auto; transition: all 0.3s; } .filebook-list .filebook-item a .book-tit { font-family: "Noto Sans KR", sans-serif; font-weight: 500; height: 60px; font-size: 15px; line-height: 20px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: all 0.2s ease; margin-bottom: 16px; } .filebook-list .filebook-item a .book-etc { display: flex; flex-direction: row; justify-content: space-between; } .filebook-list .filebook-item a .book-etc .author { display: flex; flex-direction: row; } .filebook-list .filebook-item a .book-etc .sm-tag { display: inline-block; height: 16px; margin: 0 6px 1px 0; padding: 0 5px 0 4px; font-size: 10px; color: #fff; line-height: 16px; font-weight: 400; text-align: center; vertical-align: text-bottom; border-radius: 3px; background: #bbb; transition: all 0.2s; } .filebook-list .filebook-item a .book-etc .name { font-size: 13px; color: #999; transition: all 0.2s; } .filebook-list .filebook-item a .book-etc .price { color: #777; } .filebook-list .filebook-item a .book-etc .price strong { text-decoration: line-through; } .filebook-list .filebook-item a:hover .thumb { border-color: #444; box-shadow: 1px 4px 10px 0 rgba(0, 0, 0, 0.2); } .filebook-list .filebook-item a:hover .book-tit { color: #ff5529; } .filebook-list .filebook-item a:hover .book-etc .sm-tag { background-color: #000; } .filebook-list .filebook-item a:hover .book-etc .name { color: #000; } .filebook-info { display: grid; grid-template-columns: 380px 820px; position: relative; min-height: 580px; border: 1px solid #ccc; } .filebook-info .book-thumb { text-align: center; background: #fafafa; } .filebook-info .book-thumb .book-img { display: flex; height: 513px; text-align: center; justify-content: center; align-items: center; background: #fff; overflow: hidden; margin-bottom: 20px; } .filebook-info .book-thumb .book-img img { display: inline-block; width: 100%; height: auto; } .filebook-info .book-thumb .zoom-btn { color: #888; background-color: #f9f9f9; height: 26px; padding: 4px 15px; font-size: 12px; line-height: 22px; font-weight: 400; border: 1px solid #d5d5d5; border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); transition: all 0.2s ease; cursor: pointer; } .filebook-info .book-thumb .zoom-btn:hover { border-color: #333; color: #333; } .filebook-info .book-info { font-family: "Noto Sans KR", sans-serif; position: relative; padding: 35px 50px 35px 50px; border-left: 1px solid #dedede; } .filebook-info .book-info .info-tit { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .filebook-info .book-info .info-tit .category { display: block; padding: 0 0 0px 0; font-size: 12px; color: #666699; letter-spacing: -0.2px; font-weight: 400; margin-bottom: 5px; } .filebook-info .book-info .info-tit .tit { font-size: 27px; color: #222; letter-spacing: -1px; line-height: 120%; font-weight: 600; } .filebook-info .book-produce { display: flex; flex-direction: row; align-items: center; margin-top: 16px; } .filebook-info .book-produce .circle-icon { background: #544ba7; display: inline-flex; width: 20px; height: 20px; font-size: 10px; color: #fff; font-weight: 400; justify-content: center; align-items: center; vertical-align: middle; border-radius: 100%; margin-right: 6px; } .smtxt { display: block; padding: 14px 0 0 0; font-size: 13px; color: #888; letter-spacing: -0.2px; line-height: 120%; font-weight: 400; } .detail-info { padding-bottom: 20px; border-bottom: 1px solid #ddd; } .detail-info .detail-info-item { display: flex; flex-direction: row; align-items: center; padding-left: 12px; height: 30px; } .detail-info .detail-info-item .de-tit { position: relative; width: 80px; margin-right: 8px; } .detail-info .detail-info-item .de-tit::after { position: absolute; content: ":"; right: 12px; color: #999; } .detail-info .detail-info-item .de-value { display: flex; flex-direction: row; align-items: center; gap: 6px; } .detail-info .detail-info-item .de-value .file { width: 22px; height: 22px; } .detail-info .detail-info-item .de-value .tr-price { font-weight: bold; color: #ff5529; text-decoration: line-through; } .book-tag { margin-top: 20px; padding: 0 0 0 54px; font-size: 13px; color: #888; line-height: 150%; font-weight: 400; background: url("../images/tag.png") no-repeat -1px 2px; } .filebook-download { margin-top: 30px; } .filebook-download .smRed { font-size: 14px; font-weight: 400; color: #d43c3c; line-height: 22px; } .filebook-btn-area { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 20px; margin-bottom: 20px; } .filebook-btn-area .list-btn { border: 1px solid #d5d5d5; color: #888; background-color: #f9f9f9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 22px 0px 0 rgba(255, 255, 255, 0.9) inset; margin: 0; padding: 14px 60px; font-size: 16px; font-weight: 500; border-radius: 4px; transition: all 0.2s ease; } .filebook-btn-area .list-btn:hover { color: #222 !important; border-color: #777 !important; background-color: #f3f3f3 !important; } .book-introduction .intr-head { width: 100%; border-bottom: 1px solid #ccc; } .book-introduction .intr-head .tit { width: 50%; color: #fff; background: #5f56af; text-align: center; vertical-align: middle; padding: 15px 0; border-top-left-radius: 6px; border-top-right-radius: 6px; } .book-introduction .intr-body { width: 100%; padding: 30px 8px; display: flex; flex-direction: column; } .book-introduction .intr-body .tit { font-size: 20px; color: #6c63bb; letter-spacing: -0.8px; font-weight: 600; margin-bottom: 12px; } .book-introduction .intr-body p { line-height: 26px; } .lec-top-tit { position: relative; width: 100%; display: flex; flex-direction: row; align-items: center; gap: 4px; padding-bottom: 16px; border-bottom: 2px solid #333; margin-bottom: 30px; } .lec-top-tit .tit { font-size: 32px; font-weight: bold; margin-left: 10px; color: #333; } .lec-top-tit .tit .stit { font-size: 27px; font-weight: bold; } .lec-top-tit .list-btn { min-width: 20px; font-size: 14px; height: 40px; line-height: 38px; padding: 0 14px; position: absolute; right: 0; } .lec-video-content { display: flex; flex-direction: row; justify-content: space-between; } .lec-video-content .con-thumbnail { display: flex; flex-direction: column; width: 450px; } .lec-video-content .con-thumbnail .thumb { width: 100%; height: 250px; border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .lec-video-content .con-thumbnail .thumb .thumb-img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .lec-video-content .con-thumbnail .summery { padding: 0 8px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 13px; color: #999; line-height: 135%; display: flex; flex-direction: column; gap: 4px; } .lec-video-content .con-thumbnail .summery strong { color: #555; } .lec-video-content .con-detail-info { display: flex; flex-direction: column; width: 690px; font-family: "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic"; } .lec-video-content .con-detail-info li { display: flex; flex-direction: row; align-items: center; margin-bottom: 8px; } .lec-video-content .con-detail-info li .tit { position: relative; padding-left: 14px; color: #888; font-size: 16px; line-height: 160%; width: 92px; } .lec-video-content .con-detail-info li .tit::after { position: absolute; content: ""; width: 3px; height: 3px; border-radius: 2px; background-color: #555; left: 0; top: calc(50% - 2px); } .lec-video-content .con-detail-info li .value { font-size: 16px; line-height: 160%; color: #333; } .lec-video-content .con-detail-info li .costprice { color: rgb(228, 157, 25); font-weight: bold; text-decoration: line-through; } .lec-video-content .con-detail-info .dividing-line { display: block; height: 2px; margin: 16px 0 12px 0; border-top: 1px dashed #d5d5d5; } .lec-video-content .req-btn { width: 280px; height: 60px; line-height: 58px; font-size: 20px; margin: 20px auto 0 92px; font-weight: 400; } .con-detail-body { display: flex; flex-direction: column; margin-top: 70px; } .con-detail-body .body-tit { position: relative; margin-bottom: 30px; padding: 0 0 15px 0; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 27px; letter-spacing: -1px; line-height: 120%; font-weight: 700; border-bottom: 1px solid #ddd; overflow: hidden; } .con-detail-body .int-lecDetail { text-align: center; } .con-detail-body .int-lecDetail video { margin: -2px auto 0; width: 1000px; height: 1279px; border: none; } .con-detail-body .int-lecDetail img { display: block; margin: -2px auto 0; } .con-detail-body .int-lecDetail .btn-fd { display: block; position: relative; } .con-detail-body .int-lecDetail .btn-fd a { display: block; position: absolute; bottom: 120px; left: 50%; width: 440px; height: 100px; margin: 0 0 0 -220px; z-index: 100; } .con-detail-body .int-lecDetail .btn-fd a:hover { color: #ff5529; text-decoration: underline; } .yp-lawbook-list { margin: 16px 0 40px 0; } .yp-lawbook-list ul { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .yp-lawbook-list li.lawbook-items { width: 20%; padding: 10px 24px 30px; } .yp-lawbook-list .lawbook-item { display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box; transition: 0.3s ease; } .yp-lawbook-list .lawbook-item:hover .item-thumb { border-color: #999; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); } .yp-lawbook-list .item-thumb { width: 100%; height: 266px; -o-object-fit: cover; object-fit: cover; -o-object-position: left; object-position: left; transition: 0.2s ease; background: #fff url(../images/no_image.png) no-repeat center center; border-radius: 3px; overflow: hidden; position: relative; margin-bottom: 12px; border: 1px solid #ddd; box-shadow: 4px 4px 0px rgba(210, 210, 211, 0.2862745098); } .yp-lawbook-list .item-thumb::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0px; width: 40px; background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%); z-index: 2; } .yp-lawbook-list .item-thumb .thumb-img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .yp-lawbook-list .lawbook-info { display: flex; flex-direction: column; } .yp-lawbook-list .lawbook-info .book-tit { display: block; position: relative; max-width: 100%; margin: 0 0 7px 0; font-family: "Noto Sans KR", "Noto Sans"; font-size: 15px; color: #333; letter-spacing: 0px; line-height: 130%; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .yp-lawbook-list .lawbook-info .etc { display: block; position: relative; font-size: 12px; color: #777; letter-spacing: -0.8px; } .yp-lawbook-list .lawbook-info .etc .source { position: relative; } .yp-lawbook-list .lawbook-info .etc .source::before { content: "출처"; display: inline-block; height: 16px; line-height: 16px; margin-right: 4px; padding: 0 3px; font-size: 10px; color: #fff; letter-spacing: -1px; vertical-align: text-bottom; border-radius: 3px; background: #cfcfcf; } .yp-lawbook-list .lawbook-info .etc .date { float: right; display: inline-block; padding: 1px 0 0 0; color: #aaa; } .yp-lawbook-list .lawbook-info .haesul-list-btn { display: block; margin: 12px auto 0 auto; width: 160px; height: 22px; font-size: 12px; color: #888; letter-spacing: -0.5px; line-height: 22px; text-align: center; border-radius: 22px; background: #eee; cursor: pointer; transition: all 0.2s; } .yp-lawbook-list .lawbook-info .haesul-list-btn:hover { color: #fff; background-color: #555; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); } /******************************************************************************************************************************** * lecture-05-01 추가 ********************************************************************************************************************************/ .Tab-menu2 { position: relative; margin: 0px -8px 40px 0; padding: 0 0 5px 0; overflow: hidden; } .Tab-menu2 ul { float: left; width: 100%; } .Tab-menu2 ul.c7 li { width: 14.2857142857%; } .Tab-menu2 li { float: left; position: relative; padding: 0 8px 0 0; } .Tab-menu2 li a { display: block; position: relative; bottom: 0; height: 50px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 16px; color: #777; letter-spacing: -0.5px; line-height: 47px; font-weight: 400; text-decoration: none; text-align: center; border: 1px solid #d5d5d5; transition: bottom 0.1s; cursor: pointer; } .Tab-menu2 li a:hover { bottom: -2px; color: #1d2483; border-color: #1d2483; } .Tab-menu2 li.active a { color: #fff; font-weight: 500; border-color: #1d2483; background: #1d2483; } .list.channel1 a:hover { cursor: pointer; color: #ff5529; } .list.channel2 a:hover { cursor: pointer; color: #ff5529; } .list.channel3 a:hover { cursor: pointer; color: #ff5529; } .list.channel4 a:hover { cursor: pointer; color: #ff5529; } .list.channel5 a:hover { cursor: pointer; color: #ff5529; } .list.channel6 a:hover { cursor: pointer; color: #ff5529; } .list.channel7 a:hover { cursor: pointer; color: #ff5529; } /******* 유튜브 인기동영상 메뉴버튼 *******/ .category-area { position: relative; width: 1200px; margin: 10px auto 20px; padding: 0 0px; display: flex; flex-direction: row; gap: 12px; } .category-area .subtop-btn { display: flex; align-items: center; justify-content: center; font-family: "GmarketSansMedium", sans-serif; flex: 1; height: 52px; padding-top: 2px; color: #6c6c6c; border-radius: 10px; border: 1px solid #dae1e6; background-color: #fff; transition: all 0.2s ease; } .category-area .subtop-btn:hover { background-color: #19218f; color: #fff; } .category-area .subtop-btn.active { background-color: #19218f; color: #fff; font-weight: bold; } .bg02-background { padding: 80px 0 40px !important; } .swiper-slide img { transform-origin: left center; outline: 10px solid transparent; } /******* 동영상&북 카테고리 *******/ .leftbar-container { background-color: #dff9f2; width: 258px; height: 100%; display: flex; -webkit-box-pack: center; justify-content: center; position: fixed; left: 0px; z-index: 3; scrollbar-width: none; } .vdbk_total_wrap { display: flex; justify-content: center; width: 100%; position: relative; } .vdbk_total_wrap .left_bar { background-color: #e4e8f4; width: 260px; left: 0; height: 100%; min-height: 100px; position: absolute; border-right: 1px solid #e4e8f4; z-index: 50; padding: 22px 0; } .vdbk_total_wrap .left_bar .nv-row { display: block; } .vdbk_total_wrap .left_bar .nv-row .left_bar_title { display: block; color: #262947; font-size: 22px; height: 63px; cursor: pointer; z-index: 60; position: relative; } .vdbk_total_wrap .left_bar .nv-row .left_bar_title::after { content: ""; /* 내용 없음 */ display: inline-block; /* inline-block으로 설정하여 크기 적용 가능 */ background-image: url(../images/right_bold_arrow_icon.svg); /* 배경 이미지 */ background-repeat: no-repeat; /* 배경 이미지가 반복되지 않도록 설정 */ background-size: 16px 16px; /* 배경 이미지 크기 설정 */ position: absolute; /* 절대 위치 설정 */ right: 31px; /* 오른쪽 끝에 고정 */ top: 50%; /* 수직 중앙 정렬을 위한 기준 위치 */ transform: translateY(-50%); /* 세로 가운데 정렬 */ width: 16px; /* 이미지 크기 */ height: 16px; /* 이미지 크기 */ } .vdbk_total_wrap .left_bar .nv-row.active .left_bar_title::after { background-image: url(../images/right_bold_arrow_icon_active2.svg); /* 배경 이미지 */ } .vdbk_total_wrap .left_bar .nv-row .none::after { background-image: initial !important; } .vdbk_total_wrap .left_bar .nv-row.active .none::after { background-image: initial !important; } .vdbk_total_wrap .left_bar .nv-row .left_bar_title i { display: inline-block; color: #3c4a64; font-size: 16px; margin: -3px 6px 0 16px; vertical-align: middle; } .vdbk_total_wrap .i-vd-all_01 { margin: -3px 4px 0 20px !important; } .vdbk_total_wrap .i-vd-all_02 { margin-left: -3px !important; margin-right: 2px !important; } .vdbk_total_wrap .left_bar .nv-row.active .left_bar_title i { color: #3f459b; margin: -3px 6px 0 16px; } .vdbk_total_wrap .left_bar .nv-row .left_bar_title span { font-family: "GmarketSansMedium", "맑은 고딕", "Malgun Gothic", "Noto Sans KR", "Noto Sans", sans-serif; font-size: 20px; line-height: 54px; font-weight: 500; vertical-align: middle; display: inline-block; margin-top: 2px; } .vdbk_total_wrap .left_bar .nv-row .left_bar_title div { display: inline-block; width: calc(100% - 35px); border-radius: 6px; margin: 4px 18px 0 18px; } .vdbk_total_wrap .left_bar .nv-row.active .left_bar_title div { color: #19218f; background-color: #fff; border: 2px solid #19218f; transition: background-color 0.5s, color 0.5s; } .vdbk_total_wrap .left_subar { background-color: rgba(18, 24, 105, 0.8941176471); width: 240px; top: 0px; left: 0px; height: 100%; min-height: 100px; position: absolute; border-right: 1px solid #1c2027; z-index: 2; padding: 23px 6px 0 22px; opacity: 0; display: none; box-shadow: rgba(184, 184, 184, 0.2) 0px 0px 6px 0px; } .vdbk_total_wrap .left_subar.visible { visibility: visible; } .vdbk_total_wrap .left_subar .title { font-family: "GmarketSansMedium", "맑은 고딕", "Malgun Gothic", "Noto Sans KR", "Noto Sans", sans-serif; display: block; font-size: 24px; height: 50px; font-weight: 500; color: #01d0e8; } .vdbk_total_wrap .left_subar a:hover { color: initial !important; } .vdbk_total_wrap .left_subar span { color: #fff; } .vdbk_total_wrap .left_subar span:hover { color: #00c0ff; font-weight: 800; } .vdbk_total_wrap .left_subar .title:hover { color: #01d0e8; font-weight: 500; text-decoration: none; } .vdbk_total_wrap .left_subar ul li { font-family: "GmarketSansMedium", "맑은 고딕", "Malgun Gothic", "Noto Sans KR", "Noto Sans", sans-serif; font-size: 16px !important; height: 44px; color: #fff; } .vdbk_total_wrap .flex-grow { min-height: 1000px; flex-grow: 1; /* 남은 공간을 차지 */ margin-left: 1rem; /* 여백을 추가 */ text-align: left; z-index: 1; background-color: #00bd93; } /******* 화면이 1600px 이하일 때 *******/ @media (max-width: 1760px) { /* 삭제 .body-contents-wp { position: initial; width: 1200px; margin: 60px 0 120px 280px; } */ } .catTitle { color: #8f8f8f; font-size: 16px; font-weight: initial !important; } .catTitle span:first-child { display: inline-block; width: 36px; } .catTitle span:nth-child(2){ font-size: 24px; font-weight: 500; line-height: 24px; color: #000; padding-left: 10px; } .counsel-re-txtField p a.link, .counsel-re-txtField p a {color: #0016e9 !important; cursor: pointer !important; } .counsel-re-txtField p a.link:hover, .counsel-re-txtField p a:hover {text-decoration: underline !important;} /******************************************************************************************************************************** * 파일북 ********************************************************************************************************************************/ /*----- 상세내용 -----*/ .intr-body .Pre p {font-weight: 400;} .intr-body .Pre {white-space: pre-line !important;} /* DB상 데이터 줄바꿈(개행문자)처리 경우 */ /* 파일북 이용안내 */ .guide-tit {clear: both; position: relative; margin: 0 0 14px 0; font-size: 22px; color: #333; letter-spacing: -1px; line-height: 120%; font-weight: 600;} .guide-box { position: relative; padding: 15px 20px 20px 20px; font-size: 14px; line-height: 150%; border: 1px solid #e3e3e3; background-color: #f9f9f9; } .guide-box ul {margin: 5px 0 0 0;} .guide-box li {margin: 0 0 5px 0; padding: 0 0 0 20px; font-size: 13px; color: #555; line-height: 150%; background: url('../images/ic_dot1.gif') no-repeat 8px 8px;} .guide-box li:last-child {margin-bottom: 0;}