/* 멀티latest 탭 ==================================================================================== */ .basic_mtab_wrap {position:relative; display: flex; justify-content: space-between;padding-bottom:50px; } .basic_mtab_wrap .txt {color:#000; font-size:1.15em;font-weight:bold;padding:15px 0 0 50px; } .basic_mtab_wrap .txt p {font-size:2.5em; font-family: 'Paperlogy';font-weight:800; padding-bottom:25px; } .basic_mtab_wrap .txt p span {color:var(--color1); font-family: 'Paperlogy';font-weight:600; } .basic_mtab {position:relative; display: flex; justify-content: right; gap:12px; padding-right:10px; } .basic_mtab .btab {position:relative; display:inline-block; } .basic_mtab .btab a {display:block;width:110px; aspect-ratio:1/1; font-size:1.15em; color:var(--color1); font-weight:700; display: flex; flex-direction: column; justify-content:center; align-items:center; border:1px solid var(--color1); border-radius:50%;} .basic_mtab .btab:hover a, .basic_mtab .on a {background:var(--color1); color:#fff; } .basic_mtab .more {display:none; position:absolute; right:0; top:-5px; width:34px; height:34px; } .basic_mtab .more a {display:block; width:34px; height:34px; cursor:pointer; text-indent:-9999px; } .basic_mtab .more a::after {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:22px; height:2px; background:var(--color1);} .basic_mtab .more a::before {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:2px; height:22px; background:var(--color1);} /* 멀티latest 게시글 ==================================================================================== */ .basic_wrap { } .basic_mlist {overflow:hidden;} .basic_mlist li {position:relative; float:left; width:calc(100% / 3); text-align:left;} .basic_mlist li:not(:first-of-type):after {position:absolute; content:''; top:0; left:0; width:1px; height:100%; background:#e5e5e5; } .basic_mlist li a {display:block; padding:15px 50px; } .basic_mlist li:hover dl dt {text-decoration:underline;} .basic_mlist .tit {color:#111;font-size:1.3em; font-weight:800; margin-bottom:20px; line-height:1.4; text-align:left;overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap: break-word;} .basic_mlist .txt {color:#797979; height:75px;line-height:1.5; overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap: break-word; } .basic_mlist .date {display:block; padding:30px 0 0 0; color:#999; font-style:normal; letter-spacing:0; } .basic_mlist .nolist {float:none; width:100%; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; padding:87px 10px 86px 10px; color:#797979;} .basic_wrap .btn_wrap { padding-top:40px; width:100%; max-width:600px; margin:auto; z-index:111 ; display:flex;justify-content: center; align-items:center; gap:10px; } /* dots css */ .basic_wrap .pagination { text-align:center; display:flex;justify-content: center; gap:0; } /* Swiper 수정으로 임시추가 */ .basic_wrap .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: initial !important; } .basic_wrap .swiper-pagination { padding-top:20px; } .basic_wrap .swiper-pagination span { background:#ddd ; } .basic_wrap .swiper-pagination-bullet {display:inline-block;} .basic_wrap .swiper-pagination-bullet {position:relative; width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 24px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 30px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 0); background: var(--swiper-pagination-bullet-inactive-color, transparent); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.9) ; } .basic_wrap .swiper-pagination-bullet::after {position:absolute; content:''; left:50%;top:50%; width:10px;height:10px; background:#ccc;border-radius:50px; transform:translate(-50%, -50%); } .basic_wrap .swiper-pagination-bullet-active, .basic_wrap .swiper-pagination-bullet:focus, .basic_wrap .swiper-pagination-bullet:hover { opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) ;} .basic_wrap .swiper-pagination-bullet-active::after { background:#8f969b;} .basic_wrap .swiper-pagination-bullet:focus::after, .basic_wrap .swiper-pagination-bullet:hover::after { background:#8f969b;} .basic_wrap .swiper-pagination-bullet:focus { outline:2px dotted var(--outline-color); outline-offset:var(--outline-offset);} /* 재생정지 css */ .basic_wrap .btn-toggle span {position:relative;top:2px; display:inline-block; width:30px; height:30px;cursor:pointer; } .basic_wrap .btn-toggle.play span::before { position:absolute; content:''; top:11px;left:10px; width:3px;height:12px; background:#aaa; } .basic_wrap .btn-toggle.play span::after { position:absolute; content:''; top:11px;left:16px; width:3px;height:12px; background:#aaa; } .basic_wrap .btn-toggle.stop span::before { position:absolute; content:''; top:11px;left:12px; width:0px;height:0px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid #aaa;} @media screen and (max-width:1400px) { .basic_mtab_wrap .txt { padding:15px 0 0 30px; } .basic_mtab .btab a { font-size:1.1em; } .basic_mlist li a { padding:15px 30px; } .basic_mlist .tit { font-size:1.25em;} } @media screen and (max-width:1024px) { .basic_mtab_wrap .txt { font-size:1.1em; padding:10px 0 0 20px; } .basic_mtab_wrap .txt p {font-size:2.3em; } .basic_mtab .btab a { width:90px; font-size:1em; } .basic_mlist li a { padding:15px 20px; } .basic_mlist .tit { font-size:1.2em;} } @media screen and (max-width:768px) { .basic_mlist .tit { font-size:1.2em;} .basic_mlist .date { padding:20px 0 0 0;} .basic_mlist li a { padding:10px 20px; } .basic_mtab_wrap {flex-flow:wrap; flex-direction: column; padding:0 0 30px 20px;} .basic_mtab_wrap .txt { font-size:1.05em;padding:0 ; } .basic_mtab_wrap .txt p {font-size:2.1em; padding-bottom:15px; } .basic_mtab { justify-content: left; gap:6px; padding:25px 0 0 0; } .basic_mtab .btab a { width:initial; aspect-ratio:initial; font-size:1.05em; border-radius:50px; padding:8px 25px; } } @media screen and (max-width:480px) { .basic_mtab_wrap .txt { font-size:1em; } .basic_mtab_wrap .txt p {font-size:2em; } }