|
|
@charset "UTF-8"; /*************************************************************************************** * 폰트 ****************************************************************************************/ /********************************************************************************************************************** * RESET ***********************************************************************************************************************/ *, *::before, *::after { box-sizing: border-box; }
html { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
@-ms-viewport { width: device-width; } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
body { margin: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5em; color: #212529; text-align: left; background-color: #FFFFFF; }
[tabindex="-1"]:focus { outline: 0 !important; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; line-height: 1.5em; }
p { margin: 0; }
abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; }
address { margin: 0; font-style: normal; line-height: inherit; }
ol, ul, dl { margin: 0; list-style: none; padding: 0; }
ol ol, ul ul, ol ul, ul ol { margin: 0; }
dt { font-weight: 500; }
dd { margin: 0; }
blockquote { margin: 0; }
dfn { font-style: italic; }
b, strong { font-weight: 700; }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
a { color: #212529; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { color: #282828; text-decoration: none; } a:not([href]):not([tabindedx]) { color: inherit; text-decoration: none; } a:not([href]):not([tabindedx]):hover, a:not([href]):not([tabindedx]):focus { color: inherit; text-decoration: none; } a:not([href]):not([tabindedx]):focus { outline: 0; }
pre, code, kbd, samp { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 1em; }
pre { margin: 0; overflow: auto; -ms-overflow-style: scrollbar; }
figure { margin: 0; }
img { vertical-align: middle; border-style: none; }
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; }
caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #212529; text-align: left; caption-side: bottom; }
th { text-align: inherit; }
label { display: inline-block; margin: 0; }
button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; }
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { padding: 0; border-style: none; }
input[type=radio], input[type=checkbox] { box-sizing: border-box; padding: 0; }
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: listbox; }
textarea { overflow: auto; resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; max-width: 100%; padding: 0; margin: 0; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }
progress { vertical-align: baseline; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { outline-offset: -2px; -webkit-appearance: none; }
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
output { display: inline-block; }
summary { display: list-item; cursor: pointer; }
template { display: none; }
[hidden] { display: none !important; }
/*************************************************************************************** * 애니메이션 ****************************************************************************************/ /*************************************************************************************** * 레이아웃 ****************************************************************************************/ html { letter-spacing: -0.04em; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; overflow-x: hidden; font-size: 24px; } @media screen and (max-width: 1920px) { html { font-size: 1.25vw; } } @media screen and (max-width: 768px) { html { font-size: 6.6666666667vw; } html body { background-color: #f1f1f1; } }
#header { width: 100%; background-color: #fff; } #header .logo-box { width: 100%; height: 1.875rem; -webkit-display: flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; } #header .logo-box #logo { width: 7.1875rem; height: 1.125rem; } #header .logo-box .link { width: 3.8125rem; height: 1.125rem; border: 0.0625rem solid #dadada; font-size: 0.4375rem; border-radius: 1.125rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: center; line-height: 1; } @media screen and (max-width: 768px) { #header { display: none; } }
.mobile-header { display: none; } @media screen and (max-width: 768px) { .mobile-header { display: flex; width: 100%; height: 4.4166666667rem; align-items: center; padding: 0 1rem; } } .mobile-header .mobile-logo { width: 6.9166666667rem; height: 1.8541666667rem; background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../images/common/on-air.png); margin-left: auto; margin-right: auto; text-indent: -9999px; } .mobile-header .m-button { display: block; background-size: auto 100%; background-repeat: no-repeat; width: 1.1666666667rem; height: 0.9166666667rem; background-position: center; border: 0 none; background-color: transparent; text-indent: -9999px; } .mobile-header .m-button.toggle-menu { background-image: url(../images/common/btn-menu.png); } .mobile-header .m-button.toggle-search { background-image: url(../images/common/btn-search.png); } .mobile-header .m-button.close-menu { background-image: url(../images/common/btn-menu-close.png); }
#mobile-left-menu { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; -webkit-transform: translateZ(0); background: #f8f8f8; } @media screen and (max-width: 768px) { #mobile-left-menu.opened { display: block; z-index: 99; } }
@media screen and (max-width: 768px) { body:has(#mobile-left-menu.opened) { overflow-y: hidden; max-height: 100%; } }
.container { width: 100%; max-width: 60rem; margin: 0 auto; padding: 0 5rem; }
@media screen and (max-width: 768px) { .container { width: 100%; padding: 0; } } .mobile-nav { padding: 0; margin: 0; } .mobile-nav > ul { list-style: none; padding: 0; margin: 0; background-color: #fff; } .mobile-nav > ul > li > a { background-color: #02205b; padding: 0 1.25rem; display: flex; align-items: center; height: 2.1666666667rem; font-size: 0.75rem; color: #fff; font-weight: 500; border-bottom: 0.0208333333rem solid #1d3667; } .mobile-nav > ul > li > a:after { content: ""; display: block; width: 0.5208333333rem; height: 0.2916666667rem; margin-left: auto; background-size: 100%; background-image: url(../images/common/chevron-down.png); background-repeat: no-repeat; transform: rotate(180deg); } .mobile-nav > ul > li > a.active:after { background-image: url(../images/common/chevron-down.png); transform: rotate(0deg); } .mobile-nav > ul > li > ul { display: none; flex-wrap: wrap; } .mobile-nav > ul > li > ul.open { -webkit-display: flex; display: -ms-flex; display: flex; } .mobile-nav > ul > li > ul > li { width: 50%; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } .mobile-nav > ul > li > ul > li > a { display: flex; height: 1.6875rem; justify-content: center; align-items: center; font-size: 0.6666666667rem; font-weight: 500; color: #111111; } .mobile-nav > ul > li > ul > li:nth-child(2n) { border-right: 0; } .mobile-nav .btn-more { color: #868686; font-size: 0.5716666667rem; border: 0.0625rem solid #868686; width: 4.5833333333rem; height: 1.1041666667rem; border-radius: 1.1041666667rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: center; margin: 0.9375rem auto; }
#nav { width: 10.5625rem; } #nav .family-list { margin-top: 0.75rem; position: relative; background-color: #fff; border: 0.0625rem solid #c8c8c8; width: 10.5625rem; height: 9.875rem; border-radius: 0.9375rem; padding: 1.875rem 1.4375rem 0 1.4375rem; } #nav .family-list:before { content: "국민연금공단 SNS 바로가기"; font-size: 0.84375rem; font-weight: 700; position: absolute; width: 100%; text-align: center; left: 0; top: 0.6875rem; line-height: 1; } #nav .family-list .item a { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; position: relative; padding-left: 3rem; font-size: 0.8125rem; height: 2.375rem; line-height: 1; } #nav .family-list .item a:before { content: ""; display: block; width: 2.1875rem; height: 2.1875rem; border-radius: 0.625rem; background-color: #02256c; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } #nav .family-list .item a:after { content: ""; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); background-size: cover; } #nav .family-list .item.tv > a:after { width: 1.3125rem; height: 1.3125rem; left: 0.4375rem; background-color: transparent; background-image: url("../images/common/tv.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #nav .family-list .item.instagram > a:after { width: 1.3125rem; height: 1.3125rem; left: 0.4375rem; background-color: transparent; background-image: url("../images/common/instagram.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #nav .family-list .item.blog > a:after { width: 1.3125rem; height: 1.3125rem; left: 0.4375rem; background-color: transparent; background-image: url("../images/common/blog.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } @media screen and (max-width: 768px) { #nav { width: 100%; } #nav .menu-list, #nav .family-list { display: none; } #nav .search-box { display: none; width: 100%; border: 0; padding: 0; height: auto; background-color: transparent; top: 3.6458333333rem; } #nav .search-box.open { display: block; z-index: 98; } #nav .search-box .link { display: none; width: 0; height: 0; } #nav .search-box .search-form { margin-top: 0; } #nav .search-box .search-form .input { border-radius: 0; border: 0; border-top: 0.0625rem solid #02256c; border-bottom: 0.0625rem solid #02256c; } #nav .search-box:before { background-image: none; width: 0; height: 0; } }
#contents { background-color: #f1f1f1; padding: 1.6875rem 0 1.25rem 0; } @media screen and (max-width: 768px) { #contents { padding: 0 0.6875rem; } }
#footer { background-color: #959595; padding: 1.5625rem 0 2.1875rem 0; } #footer .logo-box { display: block; width: 7.8125rem; height: 1.25rem; margin: 0 auto; } #footer .logo-box #logo { width: 7.8125rem; height: 1.25rem; } #footer .footer-info { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: center; margin-top: 0.3125rem; line-height: 1.5; } #footer .footer-info dl { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } #footer .footer-info dl + dl { margin-left: 0.3125rem; } #footer .footer-info dl dt { font-weight: 500; font-size: 0.625rem; color: #fff; } #footer .footer-info dl dd { font-weight: 500; font-size: 0.625rem; color: #fff; } #footer .footer-info dl dd > br { display: none; } #footer .copyright { text-align: center; font-weight: 500; font-size: 0.5rem; margin-top: 0.9375rem; color: #fff; width: 100%; line-height: 1; } @media screen and (max-width: 768px) { #footer { padding: 0.9166666667rem 0.6875rem 1.25rem 0.6875rem; -webkit-display: flex; display: -ms-flex; display: flex; flex-direction: column; } #footer .footer-info { order: 1; flex-wrap: wrap; } #footer .footer-info dl { order: 3; } #footer .footer-info dl:first-child { order: 1; } #footer .footer-info dl:last-child { order: 2; } #footer .footer-info dl + dl { margin-left: 0.1875rem; } #footer .footer-info dl dt { font-size: 0.5416666667rem; display: inline-flex; } #footer .footer-info dl dd { font-size: 0.5416666667rem; display: inline-flex; text-align: center; line-height: 1.35; } #footer .footer-info dl dd > br { display: block; } #footer .logo-box { order: 2; width: 6.4375rem; height: 1.0208333333rem; margin: 0.7291666667rem auto; background-color: transparent; background-image: url("../images/common/footer-logo.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: cover; } #footer .logo-box #logo { display: none; } #footer .copyright { order: 3; font-size: 0.5416666667rem; } }
/** * 좌측 로고&검색박스 */ .search-box { width: 10.5625rem; height: 8.4375rem; background-color: #fff; padding: 1.875rem 0.75rem 1.25rem 0.75rem; border-radius: 0.9375rem; position: relative; box-sizing: border-box; border: 0.0625rem solid #c8c8c8; } .search-box .link { background-color: transparent; background-image: url("../images/common/on-air.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: 8.875rem 2.375rem; width: 8.875rem; height: 2.375rem; display: block; text-indent: -9999px; overflow: hidden; } .search-box .search-form { width: 100%; position: relative; margin-top: 1.25rem; overflow: hidden; line-height: 1; } .search-box .search-form .input { width: 100%; height: 1.6875rem; border-radius: 2.4375rem; border: 0.0625rem solid #26356b; padding: 0.3125rem 1.5rem 0.3125rem 0.75rem; box-sizing: border-box; font-size: 0.845rem; line-height: 1; } .search-box .search-form .search-btn { width: 1rem; height: 1.6875rem; position: absolute; right: 0.3125rem; top: 0; border: none; background-color: transparent; padding: 0; cursor: pointer; line-height: 1.6875rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: center; } .search-box .search-form .search-btn:focus { outline: none; } .search-box .search-form .search-btn .icon { font-size: 1rem; color: #26356b; } @media screen and (max-width: 768px) { .search-box { position: absolute; left: 0; top: 0; } }
/** * 좌측 메뉴 */ .menu-list { border-radius: 0.9375rem; width: 10.5625rem; margin-top: 0.75rem; border: 0.0625rem solid #c8c8c8; } .menu-list .item { position: relative; } .menu-list .item .link { display: block; padding: 0.78125rem 0; font-size: 0.845rem; text-align: center; line-height: 1; transition: background-color 0.3s ease, color 0.3s ease; background-color: #fff; } .menu-list .item:first-child .link { border-radius: 0.9375rem 0.9375rem 0 0; } .menu-list .item:last-child .link { border-radius: 0 0 0.9375rem 0.9375rem; } .menu-list .item + .item { border-top: 0.0625rem solid #cccccc; } .menu-list .item:hover .link, .menu-list .item.active .link { background-color: #02256c; color: #fff; } .menu-list .item:hover .submenu { display: block; } .menu-list .item .submenu { position: absolute; left: 100%; top: 0; z-index: 10; display: none; } .menu-list .item .submenu li + li { margin-top: -1px; } .menu-list .item .submenu li a { display: flex; border: 1px solid #cccccc; width: 9.5625rem; height: 2.4375rem; justify-content: center; align-items: center; background-color: #fff; transition: background-color 0.3s ease; font-weight: 500; font-size: 0.84625rem; } .menu-list .item .submenu li:hover a, .menu-list .item .submenu li.active a { background-color: #ccc; } .menu-list .item .submenu li:first-child a { border-radius: 0.9375rem 0.9375rem 0 0; } .menu-list .item .submenu li:last-child a { border-radius: 0 0 0.9375rem 0.9375rem; }
/** * 서브페이지 */ .sub-main { width: 100%; display: flex; } .sub-main .left-nav { width: 10.625rem; flex-shrink: 0; margin-right: 1rem; } @media screen and (max-width: 768px) { .sub-main .left-nav { margin-right: 0; width: 0; flex-shrink: initial; } .sub-main .left-nav .search-box { display: none; width: 100%; border: 0; padding: 0; height: auto; background-color: transparent; top: 3.6458333333rem; } .sub-main .left-nav .search-box.open { display: block; z-index: 98; } .sub-main .left-nav .search-box .link { display: none; width: 0; height: 0; } .sub-main .left-nav .search-box .search-form { margin-top: 0; } .sub-main .left-nav .search-box .search-form .input { border-radius: 0; border: 0; border-top: 0.0625rem solid #02256c; border-bottom: 0.0625rem solid #02256c; } .sub-main .left-nav .menu-list { display: none; } } .sub-main .page-contents { flex: 1; min-width: 0; position: relative; }
.sns-sub { display: none; position: relative; top: inherit; left: inherit; right: inherit; text-align: center; padding: 0.625rem 0.9375rem; max-width: 10.4166666667rem; width: 100%; margin: 0.625rem auto 0 auto; } @media screen and (max-width: 768px) { .sns-sub { display: block; } } .sns-sub:before { content: ""; position: absolute; width: 200%; height: 100%; background-color: #fff; top: 0; left: 50%; transform: translate(-50%, 0); } .sns-sub li { display: inline-block; margin: 0.1041666667rem; } .sns-sub li a { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #bcc0c9; display: block; position: relative; transition: 0.2s; } .sns-sub li a svg { position: absolute; top: 50%; left: 50%; width: 0.8333333333rem; height: 0.8333333333rem; transform: translate(-50%, -50%); fill: #fff; }
.page-contents.detail .sns-sub:before { background-color: transparent; }
.move-top { position: absolute; bottom: 0.625rem; right: -6.25rem; z-index: 1; width: 2.75rem; height: 2.75rem; font-size: 0; background: rgb(255, 255, 255); transition: 0.2s; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15); border-radius: 50%; } @media screen and (max-width: 768px) { .move-top { display: none; } } .move-top svg { position: absolute; top: 50%; left: 50%; width: 1.25rem; height: 1.25rem; transform: translate(-50%, -50%); fill: #666A70; transition: 0.2s; } .move-top :hover svg { transform: translate(-50%, -70%); }
/*************************************************************************************** * 유틸리티 ****************************************************************************************/ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only.sr-only-focusable:active, .sr-only.sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.clearfix, .clearfix:before, .clearfix:after { display: block; clear: both; content: ""; }
.W5 { width: 5px !important; }
.H5 { height: 5px !important; }
.W10 { width: 10px !important; }
.H10 { height: 10px !important; }
.W15 { width: 15px !important; }
.H15 { height: 15px !important; }
.W20 { width: 20px !important; }
.H20 { height: 20px !important; }
.W25 { width: 25px !important; }
.H25 { height: 25px !important; }
.W30 { width: 30px !important; }
.H30 { height: 30px !important; }
.W35 { width: 35px !important; }
.H35 { height: 35px !important; }
.W40 { width: 40px !important; }
.H40 { height: 40px !important; }
.W45 { width: 45px !important; }
.H45 { height: 45px !important; }
.W50 { width: 50px !important; }
.H50 { height: 50px !important; }
.W55 { width: 55px !important; }
.H55 { height: 55px !important; }
.W60 { width: 60px !important; }
.H60 { height: 60px !important; }
.W65 { width: 65px !important; }
.H65 { height: 65px !important; }
.W70 { width: 70px !important; }
.H70 { height: 70px !important; }
.W75 { width: 75px !important; }
.H75 { height: 75px !important; }
.W80 { width: 80px !important; }
.H80 { height: 80px !important; }
.W85 { width: 85px !important; }
.H85 { height: 85px !important; }
.W90 { width: 90px !important; }
.H90 { height: 90px !important; }
.W95 { width: 95px !important; }
.H95 { height: 95px !important; }
.W100 { width: 100px !important; }
.H100 { height: 100px !important; }
.W105 { width: 105px !important; }
.H105 { height: 105px !important; }
.W110 { width: 110px !important; }
.H110 { height: 110px !important; }
.W115 { width: 115px !important; }
.H115 { height: 115px !important; }
.W120 { width: 120px !important; }
.H120 { height: 120px !important; }
.W125 { width: 125px !important; }
.H125 { height: 125px !important; }
.W130 { width: 130px !important; }
.H130 { height: 130px !important; }
.W135 { width: 135px !important; }
.H135 { height: 135px !important; }
.W140 { width: 140px !important; }
.H140 { height: 140px !important; }
.W145 { width: 145px !important; }
.H145 { height: 145px !important; }
.W150 { width: 150px !important; }
.H150 { height: 150px !important; }
.W155 { width: 155px !important; }
.H155 { height: 155px !important; }
.W160 { width: 160px !important; }
.H160 { height: 160px !important; }
.W165 { width: 165px !important; }
.H165 { height: 165px !important; }
.W170 { width: 170px !important; }
.H170 { height: 170px !important; }
.W175 { width: 175px !important; }
.H175 { height: 175px !important; }
.W180 { width: 180px !important; }
.H180 { height: 180px !important; }
.W185 { width: 185px !important; }
.H185 { height: 185px !important; }
.W190 { width: 190px !important; }
.H190 { height: 190px !important; }
.W195 { width: 195px !important; }
.H195 { height: 195px !important; }
.W200 { width: 200px !important; }
.H200 { height: 200px !important; }
.W205 { width: 205px !important; }
.H205 { height: 205px !important; }
.W210 { width: 210px !important; }
.H210 { height: 210px !important; }
.W215 { width: 215px !important; }
.H215 { height: 215px !important; }
.W220 { width: 220px !important; }
.H220 { height: 220px !important; }
.W225 { width: 225px !important; }
.H225 { height: 225px !important; }
.W230 { width: 230px !important; }
.H230 { height: 230px !important; }
.W235 { width: 235px !important; }
.H235 { height: 235px !important; }
.W240 { width: 240px !important; }
.H240 { height: 240px !important; }
.W245 { width: 245px !important; }
.H245 { height: 245px !important; }
.W250 { width: 250px !important; }
.H250 { height: 250px !important; }
.W255 { width: 255px !important; }
.H255 { height: 255px !important; }
.W260 { width: 260px !important; }
.H260 { height: 260px !important; }
.W265 { width: 265px !important; }
.H265 { height: 265px !important; }
.W270 { width: 270px !important; }
.H270 { height: 270px !important; }
.W275 { width: 275px !important; }
.H275 { height: 275px !important; }
.W280 { width: 280px !important; }
.H280 { height: 280px !important; }
.W285 { width: 285px !important; }
.H285 { height: 285px !important; }
.W290 { width: 290px !important; }
.H290 { height: 290px !important; }
.W295 { width: 295px !important; }
.H295 { height: 295px !important; }
.W300 { width: 300px !important; }
.H300 { height: 300px !important; }
.W305 { width: 305px !important; }
.H305 { height: 305px !important; }
.W310 { width: 310px !important; }
.H310 { height: 310px !important; }
.W315 { width: 315px !important; }
.H315 { height: 315px !important; }
.W320 { width: 320px !important; }
.H320 { height: 320px !important; }
.W325 { width: 325px !important; }
.H325 { height: 325px !important; }
.W330 { width: 330px !important; }
.H330 { height: 330px !important; }
.W335 { width: 335px !important; }
.H335 { height: 335px !important; }
.W340 { width: 340px !important; }
.H340 { height: 340px !important; }
.W345 { width: 345px !important; }
.H345 { height: 345px !important; }
.W350 { width: 350px !important; }
.H350 { height: 350px !important; }
.W355 { width: 355px !important; }
.H355 { height: 355px !important; }
.W360 { width: 360px !important; }
.H360 { height: 360px !important; }
.W365 { width: 365px !important; }
.H365 { height: 365px !important; }
.W370 { width: 370px !important; }
.H370 { height: 370px !important; }
.W375 { width: 375px !important; }
.H375 { height: 375px !important; }
.W380 { width: 380px !important; }
.H380 { height: 380px !important; }
.W385 { width: 385px !important; }
.H385 { height: 385px !important; }
.W390 { width: 390px !important; }
.H390 { height: 390px !important; }
.W395 { width: 395px !important; }
.H395 { height: 395px !important; }
.W400 { width: 400px !important; }
.H400 { height: 400px !important; }
.W405 { width: 405px !important; }
.H405 { height: 405px !important; }
.W410 { width: 410px !important; }
.H410 { height: 410px !important; }
.W415 { width: 415px !important; }
.H415 { height: 415px !important; }
.W420 { width: 420px !important; }
.H420 { height: 420px !important; }
.W425 { width: 425px !important; }
.H425 { height: 425px !important; }
.W430 { width: 430px !important; }
.H430 { height: 430px !important; }
.W435 { width: 435px !important; }
.H435 { height: 435px !important; }
.W440 { width: 440px !important; }
.H440 { height: 440px !important; }
.W445 { width: 445px !important; }
.H445 { height: 445px !important; }
.W450 { width: 450px !important; }
.H450 { height: 450px !important; }
.W455 { width: 455px !important; }
.H455 { height: 455px !important; }
.W460 { width: 460px !important; }
.H460 { height: 460px !important; }
.W465 { width: 465px !important; }
.H465 { height: 465px !important; }
.W470 { width: 470px !important; }
.H470 { height: 470px !important; }
.W475 { width: 475px !important; }
.H475 { height: 475px !important; }
.W480 { width: 480px !important; }
.H480 { height: 480px !important; }
.W485 { width: 485px !important; }
.H485 { height: 485px !important; }
.W490 { width: 490px !important; }
.H490 { height: 490px !important; }
.W495 { width: 495px !important; }
.H495 { height: 495px !important; }
.M0 { margin: 0px !important; }
.MT0 { margin-top: 0px !important; }
.MR0 { margin-right: 0px !important; }
.MB0 { margin-bottom: 0px !important; }
.ML0 { margin-left: 0px !important; }
.PT0 { padding-top: 0px !important; }
.PR0 { padding-right: 0px !important; }
.PB0 { padding-bottom: 0px !important; }
.PL0 { padding-left: 0px !important; }
.P0 { padding: 0px !important; }
.M5 { margin: 5px !important; }
.MT5 { margin-top: 5px !important; }
.MR5 { margin-right: 5px !important; }
.MB5 { margin-bottom: 5px !important; }
.ML5 { margin-left: 5px !important; }
.PT5 { padding-top: 5px !important; }
.PR5 { padding-right: 5px !important; }
.PB5 { padding-bottom: 5px !important; }
.PL5 { padding-left: 5px !important; }
.P5 { padding: 5px !important; }
.M10 { margin: 10px !important; }
.MT10 { margin-top: 10px !important; }
.MR10 { margin-right: 10px !important; }
.MB10 { margin-bottom: 10px !important; }
.ML10 { margin-left: 10px !important; }
.PT10 { padding-top: 10px !important; }
.PR10 { padding-right: 10px !important; }
.PB10 { padding-bottom: 10px !important; }
.PL10 { padding-left: 10px !important; }
.P10 { padding: 10px !important; }
.M15 { margin: 15px !important; }
.MT15 { margin-top: 15px !important; }
.MR15 { margin-right: 15px !important; }
.MB15 { margin-bottom: 15px !important; }
.ML15 { margin-left: 15px !important; }
.PT15 { padding-top: 15px !important; }
.PR15 { padding-right: 15px !important; }
.PB15 { padding-bottom: 15px !important; }
.PL15 { padding-left: 15px !important; }
.P15 { padding: 15px !important; }
.M20 { margin: 20px !important; }
.MT20 { margin-top: 20px !important; }
.MR20 { margin-right: 20px !important; }
.MB20 { margin-bottom: 20px !important; }
.ML20 { margin-left: 20px !important; }
.PT20 { padding-top: 20px !important; }
.PR20 { padding-right: 20px !important; }
.PB20 { padding-bottom: 20px !important; }
.PL20 { padding-left: 20px !important; }
.P20 { padding: 20px !important; }
.M25 { margin: 25px !important; }
.MT25 { margin-top: 25px !important; }
.MR25 { margin-right: 25px !important; }
.MB25 { margin-bottom: 25px !important; }
.ML25 { margin-left: 25px !important; }
.PT25 { padding-top: 25px !important; }
.PR25 { padding-right: 25px !important; }
.PB25 { padding-bottom: 25px !important; }
.PL25 { padding-left: 25px !important; }
.P25 { padding: 25px !important; }
.M30 { margin: 30px !important; }
.MT30 { margin-top: 30px !important; }
.MR30 { margin-right: 30px !important; }
.MB30 { margin-bottom: 30px !important; }
.ML30 { margin-left: 30px !important; }
.PT30 { padding-top: 30px !important; }
.PR30 { padding-right: 30px !important; }
.PB30 { padding-bottom: 30px !important; }
.PL30 { padding-left: 30px !important; }
.P30 { padding: 30px !important; }
.M35 { margin: 35px !important; }
.MT35 { margin-top: 35px !important; }
.MR35 { margin-right: 35px !important; }
.MB35 { margin-bottom: 35px !important; }
.ML35 { margin-left: 35px !important; }
.PT35 { padding-top: 35px !important; }
.PR35 { padding-right: 35px !important; }
.PB35 { padding-bottom: 35px !important; }
.PL35 { padding-left: 35px !important; }
.P35 { padding: 35px !important; }
.M40 { margin: 40px !important; }
.MT40 { margin-top: 40px !important; }
.MR40 { margin-right: 40px !important; }
.MB40 { margin-bottom: 40px !important; }
.ML40 { margin-left: 40px !important; }
.PT40 { padding-top: 40px !important; }
.PR40 { padding-right: 40px !important; }
.PB40 { padding-bottom: 40px !important; }
.PL40 { padding-left: 40px !important; }
.P40 { padding: 40px !important; }
.M45 { margin: 45px !important; }
.MT45 { margin-top: 45px !important; }
.MR45 { margin-right: 45px !important; }
.MB45 { margin-bottom: 45px !important; }
.ML45 { margin-left: 45px !important; }
.PT45 { padding-top: 45px !important; }
.PR45 { padding-right: 45px !important; }
.PB45 { padding-bottom: 45px !important; }
.PL45 { padding-left: 45px !important; }
.P45 { padding: 45px !important; }
.M50 { margin: 50px !important; }
.MT50 { margin-top: 50px !important; }
.MR50 { margin-right: 50px !important; }
.MB50 { margin-bottom: 50px !important; }
.ML50 { margin-left: 50px !important; }
.PT50 { padding-top: 50px !important; }
.PR50 { padding-right: 50px !important; }
.PB50 { padding-bottom: 50px !important; }
.PL50 { padding-left: 50px !important; }
.P50 { padding: 50px !important; }
.M55 { margin: 55px !important; }
.MT55 { margin-top: 55px !important; }
.MR55 { margin-right: 55px !important; }
.MB55 { margin-bottom: 55px !important; }
.ML55 { margin-left: 55px !important; }
.PT55 { padding-top: 55px !important; }
.PR55 { padding-right: 55px !important; }
.PB55 { padding-bottom: 55px !important; }
.PL55 { padding-left: 55px !important; }
.P55 { padding: 55px !important; }
.M60 { margin: 60px !important; }
.MT60 { margin-top: 60px !important; }
.MR60 { margin-right: 60px !important; }
.MB60 { margin-bottom: 60px !important; }
.ML60 { margin-left: 60px !important; }
.PT60 { padding-top: 60px !important; }
.PR60 { padding-right: 60px !important; }
.PB60 { padding-bottom: 60px !important; }
.PL60 { padding-left: 60px !important; }
.P60 { padding: 60px !important; }
.M65 { margin: 65px !important; }
.MT65 { margin-top: 65px !important; }
.MR65 { margin-right: 65px !important; }
.MB65 { margin-bottom: 65px !important; }
.ML65 { margin-left: 65px !important; }
.PT65 { padding-top: 65px !important; }
.PR65 { padding-right: 65px !important; }
.PB65 { padding-bottom: 65px !important; }
.PL65 { padding-left: 65px !important; }
.P65 { padding: 65px !important; }
.M70 { margin: 70px !important; }
.MT70 { margin-top: 70px !important; }
.MR70 { margin-right: 70px !important; }
.MB70 { margin-bottom: 70px !important; }
.ML70 { margin-left: 70px !important; }
.PT70 { padding-top: 70px !important; }
.PR70 { padding-right: 70px !important; }
.PB70 { padding-bottom: 70px !important; }
.PL70 { padding-left: 70px !important; }
.P70 { padding: 70px !important; }
.M75 { margin: 75px !important; }
.MT75 { margin-top: 75px !important; }
.MR75 { margin-right: 75px !important; }
.MB75 { margin-bottom: 75px !important; }
.ML75 { margin-left: 75px !important; }
.PT75 { padding-top: 75px !important; }
.PR75 { padding-right: 75px !important; }
.PB75 { padding-bottom: 75px !important; }
.PL75 { padding-left: 75px !important; }
.P75 { padding: 75px !important; }
.M80 { margin: 80px !important; }
.MT80 { margin-top: 80px !important; }
.MR80 { margin-right: 80px !important; }
.MB80 { margin-bottom: 80px !important; }
.ML80 { margin-left: 80px !important; }
.PT80 { padding-top: 80px !important; }
.PR80 { padding-right: 80px !important; }
.PB80 { padding-bottom: 80px !important; }
.PL80 { padding-left: 80px !important; }
.P80 { padding: 80px !important; }
.M85 { margin: 85px !important; }
.MT85 { margin-top: 85px !important; }
.MR85 { margin-right: 85px !important; }
.MB85 { margin-bottom: 85px !important; }
.ML85 { margin-left: 85px !important; }
.PT85 { padding-top: 85px !important; }
.PR85 { padding-right: 85px !important; }
.PB85 { padding-bottom: 85px !important; }
.PL85 { padding-left: 85px !important; }
.P85 { padding: 85px !important; }
.M90 { margin: 90px !important; }
.MT90 { margin-top: 90px !important; }
.MR90 { margin-right: 90px !important; }
.MB90 { margin-bottom: 90px !important; }
.ML90 { margin-left: 90px !important; }
.PT90 { padding-top: 90px !important; }
.PR90 { padding-right: 90px !important; }
.PB90 { padding-bottom: 90px !important; }
.PL90 { padding-left: 90px !important; }
.P90 { padding: 90px !important; }
.M95 { margin: 95px !important; }
.MT95 { margin-top: 95px !important; }
.MR95 { margin-right: 95px !important; }
.MB95 { margin-bottom: 95px !important; }
.ML95 { margin-left: 95px !important; }
.PT95 { padding-top: 95px !important; }
.PR95 { padding-right: 95px !important; }
.PB95 { padding-bottom: 95px !important; }
.PL95 { padding-left: 95px !important; }
.P95 { padding: 95px !important; }
.M100 { margin: 100px !important; }
.MT100 { margin-top: 100px !important; }
.MR100 { margin-right: 100px !important; }
.MB100 { margin-bottom: 100px !important; }
.ML100 { margin-left: 100px !important; }
.PT100 { padding-top: 100px !important; }
.PR100 { padding-right: 100px !important; }
.PB100 { padding-bottom: 100px !important; }
.PL100 { padding-left: 100px !important; }
.P100 { padding: 100px !important; }
.W5P { width: 5% !important; }
.W10P { width: 10% !important; }
.W15P { width: 15% !important; }
.W20P { width: 20% !important; }
.W25P { width: 25% !important; }
.W30P { width: 30% !important; }
.W35P { width: 35% !important; }
.W40P { width: 40% !important; }
.W45P { width: 45% !important; }
.W50P { width: 50% !important; }
.W55P { width: 55% !important; }
.W60P { width: 60% !important; }
.W65P { width: 65% !important; }
.W70P { width: 70% !important; }
.W75P { width: 75% !important; }
.W80P { width: 80% !important; }
.W85P { width: 85% !important; }
.W90P { width: 90% !important; }
.W95P { width: 95% !important; }
.W100P { width: 100% !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.display-flex { -webkit-display: flex; display: -ms-flex; display: flex; } .display-flex.align-center { align-items: center; } .display-flex.justify-center { justify-content: center; } .display-flex.dir-column { flex-direction: column; }
/*************************************************************************************** * 아이콘 ****************************************************************************************/ /*************************************************************************************** * 버튼 ****************************************************************************************/ .breadcrumb { width: 100%; margin: 0 0 0.3125rem 0; padding: 0 0 0 11.625rem; } .breadcrumb ol { list-style: none; display: flex; padding: 0; margin: 0; } .breadcrumb ol li a, .breadcrumb ol li span { color: #252525; font-size: 0.875rem; font-weight: 600; } .breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before { content: ">"; color: #252525; font-size: 0.875rem; font-weight: 600; margin: 0 0.1875rem; } @media screen and (max-width: 768px) { .breadcrumb { padding: 0; } .breadcrumb ol li a, .breadcrumb ol li span { font-size: 0.625rem; } .breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before { font-size: 0.625rem; margin: 0 0.25rem; } }
.contents-box { background: #fff; border-radius: 0.9375rem; padding: 1rem 2rem; margin: 0 0 1.25rem 0; } .contents-box .contents-header { display: flex; align-items: center; justify-content: flex-start; border-bottom: 2px solid #02256c; padding: 0.625rem 0; } .contents-box .contents-header .contents-title { font-size: 1.5625rem; color: #02256c; font-weight: 600; line-height: 1em; } @media screen and (max-width: 768px) { .contents-box { border-radius: 0.625rem; padding: 0.6666666667rem 0.9375rem; margin: 0 0 1.25rem 0; } .contents-box .contents-header { border-bottom: 2px solid #02256c; padding: 0.625rem 0; } .contents-box .contents-header .contents-title { font-size: 0.8125rem; } }
.pagination { display: block; width: 100%; } .pagination ol { width: 100%; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 768px) { .pagination ol { flex-direction: row; flex-wrap: wrap; margin-bottom: 0.9375rem; } } .pagination ol li a, .pagination ol li span { display: flex; width: 1.75rem; height: 1.75rem; justify-content: center; align-items: center; border-radius: 100%; color: #707070; background-color: transparent; transition: color 0.3s ease, background-color 0.3s ease; cursor: pointer; } @media screen and (max-width: 768px) { .pagination ol li a, .pagination ol li span { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; } } .pagination ol li.active a, .pagination ol li.active span, .pagination ol li:not(.disabled):not(.active):hover a, .pagination ol li:not(.disabled):not(.active):hover span { background-color: #02256c; color: #fff; } .pagination ol li.active a, .pagination ol li.active span { cursor: default; } .pagination ol li.disabled a, .pagination ol li.disabled span { opacity: 0.4; cursor: default; }
/*************************************************************************************** * 플러그인 커스텀 ****************************************************************************************/ /********************************************************************************************************************** * 메인페이지 ***********************************************************************************************************************/ #main { width: 100%; } #main .box { position: relative; overflow: hidden; } #main .box .box-link { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #main .main-top { -webkit-display: flex; display: -ms-flex; display: flex; align-items: stretch; justify-content: space-between; } @media screen and (max-width: 768px) { #main .main-top { flex-direction: column; } } #main .main-top .line-01 { width: 10.5625rem; } @media screen and (max-width: 768px) { #main .main-top .line-01 #nav .menu-list, #main .main-top .line-01 #nav .family-list { display: none; } } #main .main-top .line-02 { width: 26rem; -webkit-display: flex; display: -ms-flex; display: flex; flex-direction: column; } #main .main-top .line-02 .top { border: 0.0625rem solid #26356b; border-radius: 0.9375rem; width: 26.0625rem; height: 14.625rem; overflow: hidden; background-size: cover; position: relative; } #main .main-top .line-02 .bottom { margin-top: 0.75rem; -webkit-display: flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: stretch; } #main .main-top .line-02 .bottom .left { position: relative; border-radius: 0.9375rem; width: 14.3125rem; height: 14.3125rem; background-color: #33cc99; overflow: hidden; border: 0.0625rem solid #c8c8c8; } #main .main-top .line-02 .bottom .left .link { width: 100%; height: 100%; padding: 0.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: flex-start; flex-direction: column; } #main .main-top .line-02 .bottom .left .link .title { font-size: 2.301875rem; font-weight: 800; line-height: 1.15; color: #fff; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; padding-bottom: 1.75rem; position: relative; } #main .main-top .line-02 .bottom .left .link .title:before { content: ""; width: 4.125rem; height: 0.3125rem; background-color: #fff; position: absolute; left: 0; bottom: 0.75rem; } #main .main-top .line-02 .bottom .left .link .date { display: block; margin-bottom: 0.75rem; } #main .main-top .line-02 .bottom .left .link .date > dd { font-size: 1.140625rem; color: #fff; } #main .main-top .line-02 .bottom .left .link .info { padding: 0; } #main .main-top .line-02 .bottom .left .link .info li { font-size: 0.951875rem; color: #fff; margin-bottom: 0.3125rem; line-height: 1; } #main .main-top .line-02 .bottom .right .box { border: 0.0625rem solid #c8c8c8; border-radius: 0.9375rem; position: relative; background-size: cover; overflow: hidden; } #main .main-top .line-02 .bottom .right .box.top { width: 11.1875rem; height: 6.6875rem; overflow: hidden; } #main .main-top .line-02 .bottom .right .box.bottom { width: 11.1875rem; height: 6.9375rem; overflow: hidden; } @media screen and (max-width: 768px) { #main .main-top .line-02 { width: 100%; position: relative; } #main .main-top .line-02 .top { width: 100%; height: 7.6666666667rem; border-radius: 0.4166666667rem; } #main .main-top .line-02 .bottom { flex-direction: row-reverse; margin-top: 0.4166666667rem; } #main .main-top .line-02 .bottom .left { border-radius: 0.4166666667rem; width: 6.4583333333rem; height: 7.6458333333rem; border: 0.0625rem solid #c8c8c8; } #main .main-top .line-02 .bottom .left .link { padding: 0.4166666667rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: flex-start; flex-direction: column; } #main .main-top .line-02 .bottom .left .link .title { font-size: 1.1041666667rem; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; padding-bottom: 1.0416666667rem; position: relative; } #main .main-top .line-02 .bottom .left .link .title:before { width: 2.0416666667rem; height: 0.2083333333rem; background-color: #fff; bottom: 0.5rem; } #main .main-top .line-02 .bottom .left .link .date { margin-bottom: 0.3125rem; } #main .main-top .line-02 .bottom .left .link .date > dd { font-size: 0.5625rem; } #main .main-top .line-02 .bottom .left .link .info li { font-size: 0.4583333333rem; margin-bottom: 0.2083333333rem; } #main .main-top .line-02 .bottom .right .box { border-radius: 0.4166666667rem; } #main .main-top .line-02 .bottom .right .box.top { width: 6.9791666667rem; height: 4.8958333333rem; overflow: hidden; position: absolute; right: 0; top: 16.1458333333rem; } #main .main-top .line-02 .bottom .right .box.bottom { width: 6.625rem; height: 7.6458333333rem; overflow: hidden; margin-top: 0; } } #main .main-top .line-03 { width: 11.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; flex-direction: column; } #main .main-top .line-03 .top { border: 0.0625rem solid #c8c8c8; border-radius: 0.9375rem; width: 11.9375rem; height: 21.9375rem; overflow: hidden; background-size: cover; background-position: center center; } #main .main-top .line-03 .bottom { border-radius: 0.9375rem; border: 0.0625rem solid #c8c8c8; width: 12rem; height: 7rem; background-color: #ffb400; margin-top: 0.75rem; } #main .main-top .line-03 .bottom .link { -webkit-display: flex; display: -ms-flex; display: flex; flex-direction: column; padding: 0.625rem 0.625rem; } #main .main-top .line-03 .bottom .title { font-size: 1.125rem; font-weight: 800; line-height: 1.15; color: #fff; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; padding-bottom: 1.75rem; position: relative; letter-spacing: -0.0625rem; } #main .main-top .line-03 .bottom .title:before { content: ""; width: 4.125rem; height: 0.3125rem; background-color: #fff; position: absolute; left: 0; bottom: 0.75rem; } #main .main-top .line-03 .bottom .sub-text { font-size: 1.1475rem; line-height: 1.3125rem; width: 100%; height: 2.625rem; min-height: 2.625rem; color: #fff; word-wrap: break-word; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; } @media screen and (max-width: 768px) { #main .main-top .line-03 { width: 100%; margin-top: 0.4166666667rem; flex-direction: row; justify-content: space-between; } #main .main-top .line-03 .top { border-radius: 0.4166666667rem; width: 6.25rem; height: 11.0416666667rem; } #main .main-top .line-03 .bottom { border-radius: 0.4166666667rem; width: 6.9791666667rem; height: 5.75rem; margin-top: 0.4166666667rem; align-self: flex-end; box-sizing: border-box; } #main .main-top .line-03 .bottom .link { padding: 0.4166666667rem; } #main .main-top .line-03 .bottom .title { font-size: 1.0625rem; padding-bottom: 1.1666666667rem; word-wrap: break-word; word-break: keep-all; } #main .main-top .line-03 .bottom .title:before { content: ""; width: 2.2291666667rem; height: 0.1458333333rem; background-color: #fff; position: absolute; left: 0; bottom: 0.5rem; } #main .main-top .line-03 .bottom .sub-text { font-size: 0.4583333333rem; line-height: 0.625rem; height: 1.25rem; min-height: 1.25rem; color: #fff; } } #main .main-center { margin: 0.9375rem 0 3.125rem 0; } #main .main-center .line-banner { border: 0.0625rem solid #c8c8c8; width: 100%; height: 4.4375rem; border-radius: 0.75rem; background-position: center center; overflow: hidden; background-size: cover; } @media screen and (max-width: 768px) { #main .main-center { margin: 0.4166666667rem 0; } #main .main-center .line-banner { width: 100%; height: 1.3541666667rem; border-radius: 0.4166666667rem; } } #main .family-list.mobile { display: none; } @media screen and (max-width: 768px) { #main .family-list.mobile { -webkit-display: flex; display: -ms-flex; display: flex; justify-content: center; width: 100%; height: 2.5rem; border-radius: 0.4166666667rem; padding-top: 1.25rem; position: relative; background-color: #fff; border: 0.0625rem solid #cccccc; margin-bottom: 1.6666666667rem; } #main .family-list.mobile:before { content: "국민연금공단 SNS 바로가기"; font-size: 0.5416666667rem; font-weight: 700; position: absolute; width: 100%; text-align: center; left: 0; top: 0.3125rem; line-height: 1; } #main .family-list.mobile .item a { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; position: relative; padding-left: 0.9375rem; font-size: 0.3854166667rem; height: 0.8333333333rem; line-height: 1; } #main .family-list.mobile .item a:before { content: ""; display: block; width: 0.8333333333rem; height: 0.8333333333rem; border-radius: 0.2083333333rem; background-color: #02256c; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } #main .family-list.mobile .item a:after { content: ""; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); background-size: cover; } #main .family-list.mobile .item.tv > a:after { width: 0.4583333333rem; height: 0.4583333333rem; margin-left: 0.1770833333rem; background-color: transparent; background-image: url("../images/common/tv.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #main .family-list.mobile .item.instagram { margin-left: 1.0416666667rem; } #main .family-list.mobile .item.instagram > a:after { width: 0.4583333333rem; height: 0.4583333333rem; margin-left: 0.1875rem; background-color: transparent; background-image: url("../images/common/instagram.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #main .family-list.mobile .item.blog { margin-left: 1.0416666667rem; } #main .family-list.mobile .item.blog > a:after { width: 0.4583333333rem; height: 0.4583333333rem; margin-left: 0.1770833333rem; background-color: transparent; background-image: url("../images/common/blog.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } } #main .main-bottom { -webkit-display: flex; display: -ms-flex; display: flex; justify-content: space-between; position: relative; z-index: 1; } @media screen and (max-width: 768px) { #main .main-bottom { flex-direction: column; } } #main .main-bottom .title-box { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.0625rem solid #02205b; padding-bottom: 0.625rem; margin-bottom: 0.625rem; } @media screen and (max-width: 768px) { #main .main-bottom .title-box { justify-content: flex-end; padding-bottom: 0.4166666667rem; margin-bottom: 0.4166666667rem; } } #main .main-bottom .slide-title { font-size: 1.473125rem; line-height: 1; color: #02205b; } @media screen and (max-width: 768px) { #main .main-bottom .slide-title { display: none; } } #main .main-bottom .control-box { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; } #main .main-bottom .control-box .btn { background-color: #fff; width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; border: none; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; justify-content: center; margin-left: 0.9375rem; line-height: 1; padding: 0; } #main .main-bottom .control-box .btn.btn-right { margin-left: 0.3125rem; } #main .main-bottom .control-box .btn .icon { font-size: 1.5rem; } #main .main-bottom .control-box .btn:active, #main .main-bottom .control-box .btn:hover, #main .main-bottom .control-box .btn:focus, #main .main-bottom .control-box .btn:focus-visible, #main .main-bottom .control-box .btn:focus-within { width: 100%; outline: none; background-color: #d5d8e1; cursor: pointer; overflow: hidden; } #main .main-bottom .control-box .swiper-pagination { position: relative; left: 0; transform: translate(0); height: 1.5rem; bottom: 0; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; overflow: initial; } #main .main-bottom .control-box .swiper-pagination-bullet { background-color: #8b93ae; width: 0.4375rem; height: 0.4375rem; } #main .main-bottom .control-box .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.125rem; border-radius: 0.5625rem; background-color: #02205b; } @media screen and (max-width: 768px) { #main .main-bottom .control-box .btn { width: 0.875rem; height: 0.875rem; border-radius: 0.875rem; margin-left: 0.5416666667rem; } #main .main-bottom .control-box .btn.btn-right { margin-left: 0.3125rem; } #main .main-bottom .control-box .btn .icon { font-size: 0.7916666667rem; } #main .main-bottom .control-box .swiper-pagination { height: 0.875rem; } #main .main-bottom .control-box .swiper-pagination-bullet { width: 0.25rem; height: 0.25rem; } #main .main-bottom .control-box .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 0.5833333333rem; border-radius: 0.2916666667rem; } } #main .main-bottom .left-slide { width: 26rem; } #main .main-bottom .left-slide .swiper-container { width: 26rem; height: 23.4375rem; overflow: hidden; } #main .main-bottom .left-slide .recent-list .swiper-slide { padding: 0.75rem 0; height: 4.875rem !important; border-bottom: 0.0625rem solid #26356b; box-sizing: border-box; } #main .main-bottom .left-slide .recent-list .swiper-slide .link { -webkit-display: flex; display: -ms-flex; display: flex; width: 100%; position: relative; min-width: 0; } #main .main-bottom .left-slide .recent-list .swiper-slide .link:after { content: "\e5e1"; font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-size: 1.875rem; position: absolute; right: 0; font-weight: 200; top: 50%; transform: translate(0, -50%); } #main .main-bottom .left-slide .recent-list .swiper-slide .date { font-size: 0.796875rem; font-weight: 600; line-height: 1; color: #02205b; flex-shrink: 0; } #main .main-bottom .left-slide .recent-list .swiper-slide .date .big { display: block; font-size: 2.14875rem; font-weight: 700; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text { margin-left: 0.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; justify-content: space-evenly; flex-direction: column; color: #02205b; flex: 1; min-width: 0; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text .label { display: block; font-size: 0.796875rem; line-height: 1; color: #02205b; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text .label a { color: inherit; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text .title { width: 100%; padding-right: 3.125rem; font-size: 0.984375rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 0; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text .title a { color: inherit; } @media screen and (max-width: 768px) { #main .main-bottom .left-slide { width: 100%; } #main .main-bottom .left-slide .swiper-container { width: 100%; height: 13rem; overflow: hidden; } #main .main-bottom .left-slide .recent-list .swiper-slide { padding: 0.5208333333rem 0; height: 2.625rem !important; } #main .main-bottom .left-slide .recent-list .swiper-slide .link { -webkit-display: flex; display: -ms-flex; display: flex; width: 100%; position: relative; } #main .main-bottom .left-slide .recent-list .swiper-slide .link:after { font-size: 1.25rem; } #main .main-bottom .left-slide .recent-list .swiper-slide .date { font-size: 0.4527083333rem; } #main .main-bottom .left-slide .recent-list .swiper-slide .date .big { font-size: 1.1316666667rem; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text { margin-left: 0.7291666667rem; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text .label { font-size: 0.5172916667rem; } #main .main-bottom .left-slide .recent-list .swiper-slide .notice-text .title { font-size: 0.5172916667rem; padding-right: 1.0416666667rem; } } #main .main-bottom .right-slide { width: 22.5rem; overflow: hidden; } #main .main-bottom .right-slide .swiper-slide { width: 10.9375rem !important; height: 19.6875rem; border-radius: 0.9375rem; border: none; background-size: cover; overflow: hidden; } #main .main-bottom .right-slide .swiper-slide.swiper-slide { margin-right: 0.5rem; } #main .main-bottom .right-slide .swiper-slide:last-child { margin-right: 0; } #main .main-bottom .right-slide .swiper-slide.full { width: 100% !important; height: 12.1875rem; border-radius: 1.25rem; } #main .main-bottom .right-slide .btn-more { display: none; } @media screen and (max-width: 768px) { #main .main-bottom .right-slide { width: 100%; } #main .main-bottom .right-slide .title-box { display: none; } #main .main-bottom .right-slide .swiper-slide { width: 6.6041666667rem !important; height: 12.1666666667rem; border-radius: 0.4166666667rem; } #main .main-bottom .right-slide .swiper-slide.swiper-slide { margin-right: 0.2708333333rem; } #main .main-bottom .right-slide .swiper-slide:last-child { margin-right: 0; } #main .main-bottom .right-slide .swiper-slide.full { width: 100% !important; height: 8.125rem; border-radius: 0.9375rem; } #main .main-bottom .right-slide .btn-more { display: block; font-size: 0.6604166667rem; border: 0.0625rem solid #7d7d7d; color: #7d7d7d; width: 100%; height: 1.6458333333rem; margin: 0.7708333333rem 0 1.1875rem 0; } }
.common-list { list-style: none; padding: 0; margin: 0; } .common-list .thumbnail { position: relative; padding: 0; margin: 0; overflow: hidden; } .common-list .thumbnail .thumbnail-link { display: flex; width: 100%; height: 100%; } .common-list .thumbnail .thumbnail-link .thumbnail-img { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .common-list .thumbnail .thumbnail-link { width: 100%; height: -moz-fit-content; height: fit-content; } .common-list .thumbnail .thumbnail-link .thumbnail-img { -o-object-fit: initial; object-fit: initial; } } .common-list .item-content .item-title { color: #02256c; font-size: 0.875rem; display: block; width: 100%; /* white-space: nowrap; text-overflow: ellipsis; overflow: hidden; letter-spacing: -0.025em; */ font-weight: 700; } .common-list .item-content .item-title a { color: inherit; } .common-list .item-content .item-title a:hover { text-decoration: underline; } @media screen and (max-width: 768px) { .common-list .item-content .item-title { font-size: 0.75rem; margin-bottom: 0.25rem; white-space: initial; word-wrap: break-word; word-break: keep-all; } } .common-list .item-content .item-summary { font-size: 0.75rem; color: #252525; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; letter-spacing: -0.025em; overflow: hidden; text-overflow: ellipsis; margin: 0.3125rem 0 0.3125rem 0; font-weight: 500; height: 2.56em; -webkit-line-clamp: 2; line-height: 1.28em; } .common-list .item-content .item-summary a { color: inherit; } .common-list .item-content .item-summary a:hover { text-decoration: underline; } .common-list .item-content .item-info { margin: 0; padding: 0; } .common-list .item-content .item-info dl { margin: 0; display: flex; align-items: center; } .common-list .item-content .item-info dl dt { margin: 0 0.625rem 0 0; } .common-list .item-content .item-info dl dd { font-size: 0.75rem; color: #959595; font-weight: 500; } @media screen and (max-width: 768px) { .common-list .item-content .item-info dl dd { font-size: 0.5833333333rem; line-height: 1; } } .common-list.news .item { display: flex; padding: 1.25rem 0; border-bottom: 1px solid #02256c; } .common-list.news .item .thumbnail { width: 11.375rem; height: 8.3125rem; flex-shrink: 0; margin-right: 0.8125rem; } .common-list.news .item .item-content { flex: 1; min-width: 0; padding: 0 0 0.5rem 0; } .common-list.news .item .item-content .item-summary { height: 5.12em; -webkit-line-clamp: 4; line-height: 1.28em; } @media screen and (max-width: 768px) { .common-list.news .item { flex-direction: column; padding: 0.4166666667rem 0; } .common-list.news .item .thumbnail { width: 100%; margin-right: 0; } .common-list.news .item .item-content .item-summary { font-size: 0.5833333333rem; height: 5.12em; -webkit-line-clamp: 4; line-height: 1.28em; } } .common-list.news.inner { -webkit-display: flex; display: -ms-flex; display: flex; flex-wrap: wrap; margin: 0 0 0.625rem 0; padding-bottom: 1.875rem; } .common-list.news.inner .item { width: 50%; padding: 0.625rem 0.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; border-bottom: 1px solid #c2c2c2; } .common-list.news.inner .item .thumbnail { width: 6.25rem; height: 6.25rem; margin: 0 auto 0.625rem; flex-shrink: 0; } .common-list.news.inner .item .item-content { padding-left: 0.9375rem; } .common-list.news.inner .item .item-content .item-title { font-size: 0.875rem; white-space: initial; } @media screen and (max-width: 768px) { .common-list.news.inner .item { width: 100%; padding: 0.25rem 0.3125rem; -webkit-display: flex; display: -ms-flex; display: flex; flex-direction: row; } .common-list.news.inner .item .thumbnail { width: 2.5rem; height: 1.6666666667rem; margin: 0; flex-shrink: 0; } .common-list.news.inner .item .item-content { padding-left: 0.625rem; } .common-list.news.inner .item .item-content .item-title { font-size: 0.4375rem; white-space: initial; margin-bottom: 0; } } .common-list.toons { display: flex; flex-wrap: wrap; } .common-list.toons .item { width: 50%; padding: 0.625rem 0.9375rem; } .common-list.toons .item .thumbnail { width: 13.5rem; height: 13.5rem; margin: 0 auto 0.625rem; } @media screen and (max-width: 768px) { .common-list.toons .item { width: 100%; padding: 0.3125rem 0.4166666667rem; border-bottom: 1px solid #c2c2c2; margin-bottom: 0.625rem; } .common-list.toons .item .thumbnail { width: 100%; height: auto; } } .common-list.toons.inner .item { width: 50%; padding: 0.625rem 0.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } .common-list.toons.inner .item .thumbnail { width: 6.25rem; height: 6.25rem; margin: 0 auto 0.625rem; flex-shrink: 0; } .common-list.toons.inner .item .item-content { padding-left: 0.9375rem; } .common-list.toons.inner .item .item-content .item-title { font-size: 0.875rem; white-space: initial; } @media screen and (max-width: 768px) { .common-list.toons.inner .item { width: 100%; padding: 0.25rem 0.3125rem; } .common-list.toons.inner .item .thumbnail { width: 3.125rem; height: 3.125rem; margin: 0; flex-shrink: 0; } .common-list.toons.inner .item .item-content { padding-left: 0.625rem; } .common-list.toons.inner .item .item-content .item-title { font-size: 0.4375rem; white-space: initial; } } .common-list.shorts { margin: 0 -0.25rem; display: flex; flex-wrap: wrap; } .common-list.shorts .item { width: 25%; padding: 1.25rem 0.25rem; } .common-list.shorts .item .thumbnail { width: 8.375rem; height: 13.75rem; margin: 0 0 0.5rem; } .common-list.shorts .item .item-content { /* .item-title { display: -webkit-box; -webkit-box-orient: vertical; word-wrap:break-word; overflow: hidden; text-overflow: ellipsis; height: 1.28em * 2; -webkit-line-clamp: 2; line-height:1.28em; white-space: normal; word-break: break-all; } */ } @media screen and (max-width: 768px) { .common-list.shorts { margin: 0; } .common-list.shorts .item { width: 100%; padding: 0.4166666667rem 0; border-bottom: 1px solid #c2c2c2; margin-bottom: 0.625rem; } .common-list.shorts .item .thumbnail { width: 100%; height: auto; } .common-list.shorts .item .item-content .item-title { font-size: 0.6875rem; margin-bottom: 0.25rem; white-space: initial; word-break: keep-all; } } .common-list.shorts.inner { margin-top: 0; } .common-list.shorts.inner .item { width: 50%; padding: 0.625rem 0.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } .common-list.shorts.inner .item .thumbnail { width: 5.25rem; height: 7.875rem; margin: 0; flex-shrink: 0; } .common-list.shorts.inner .item .item-content { padding-left: 0.9375rem; } .common-list.shorts.inner .item .item-content .item-title { font-size: 0.9375rem; white-space: initial; margin-bottom: 0; } .common-list.shorts.inner .item .item-content .item-title br { display: none; } @media screen and (max-width: 768px) { .common-list.shorts.inner .item { width: 100%; padding: 0.25rem 0.3125rem; } .common-list.shorts.inner .item .thumbnail { width: 1.75rem; height: 2.625rem; margin: 0; flex-shrink: 0; } .common-list.shorts.inner .item .item-content { padding-left: 0.625rem; } .common-list.shorts.inner .item .item-content .item-title { font-size: 0.4375rem; white-space: initial; } .common-list.shorts.inner .item .item-content .item-summary { font-size: 0.375rem; } } .common-list.clips { display: flex; flex-wrap: wrap; width: 100%; margin: -1.25rem -0.25rem; padding-bottom: 1.875rem; } .common-list.clips .item { padding: 1.25rem 0.25rem; width: 25%; border-bottom: 1px solid #c2c2c2; } .common-list.clips .item .thumbnail { width: 100%; height: 5.9375rem; } .common-list.clips .item .item-title { font-size: 0.8125rem; } .common-list.clips .item .item-summary { font-size: 0.8125rem; height: 2.56em; -webkit-line-clamp: 2; line-height: 1.28em; } @media screen and (max-width: 768px) { .common-list.clips { margin: 0 0 0.625rem 0; } .common-list.clips .item { width: 100%; padding: 0.3125rem 0.4166666667rem; border-bottom: 1px solid #c2c2c2; } .common-list.clips .item .item-title { margin-bottom: 0.25rem; } .common-list.clips .item .item-title a > br { display: none; } .common-list.clips .item .thumbnail { width: 100%; height: auto; } .common-list.clips .item .item-summary { font-size: 0.625rem; } .common-list.clips .item .item-summary a > br { display: none; } } .common-list.clips.inner { margin-top: 0; } .common-list.clips.inner .item { width: 50%; padding: 0.625rem 0.9375rem; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } .common-list.clips.inner .item .thumbnail { width: 7.5rem; height: 5rem; margin: 0; flex-shrink: 0; } .common-list.clips.inner .item .item-content { padding-left: 0.9375rem; } .common-list.clips.inner .item .item-content .item-title { font-size: 0.9375rem; white-space: initial; } .common-list.clips.inner .item .item-content .item-title br { display: none; } .common-list.clips.inner .item .item-content .item-summary { font-size: 0.75rem; } .common-list.clips.inner .item .item-content .item-summary br { display: none; } @media screen and (max-width: 768px) { .common-list.clips.inner .item { width: 100%; padding: 0.25rem 0.3125rem; } .common-list.clips.inner .item .thumbnail { width: 3.75rem; height: 2.5rem; margin: 0; flex-shrink: 0; } .common-list.clips.inner .item .item-content { padding-left: 0.625rem; } .common-list.clips.inner .item .item-content .item-title { font-size: 0.4375rem; white-space: initial; } .common-list.clips.inner .item .item-content .item-summary { font-size: 0.375rem; } }
.tag-container { width: 100%; display: flex; border: 1px solid #b7b7b7; padding: 0.625rem; align-items: stretch; margin: 0.75rem 0 1.5625rem; border-radius: 0.9375rem; } .tag-container .tag-title { flex-shrink: 0; color: #000000; margin-right: 1.5625rem; display: flex; align-items: center; font-size: 1.450625rem; padding: 0 1.25rem; } .tag-container .tag-list { list-style: none; padding: 0; margin: -0.1875rem; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; } .tag-container .tag-list li { padding: 0.1875rem; } .tag-container .tag-list li a { display: flex; justify-content: center; align-items: center; height: 1.75rem; border-radius: 0.875rem; background-color: #ffffff; color: #464646; font-size: 1.02625rem; padding: 0 0.875rem; box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41); } .tag-container .tag-list li.active a { background-color: #02256c; color: #fff; } @media screen and (max-width: 768px) { .tag-container { padding: 0.4166666667rem; margin: 0.25rem 0 0.5208333333rem; border-radius: 0.3125rem; flex-direction: column; } .tag-container .tag-title { padding-left: 0; font-size: 0.8125rem; } .tag-container .tag-list { margin: -0.0625rem; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; } .tag-container .tag-list li { padding: 0.125rem; } .tag-container .tag-list li a { height: 0.9375rem; border-radius: 0.4166666667rem; background-color: #ffffff; color: #464646; font-size: 0.5625rem; padding: 0 0.5625rem; } }
#board .page-contents { padding: 1.875rem; background-color: #fff; margin-bottom: 1.875rem; border-radius: 1.25rem; } #board .page-contents .contents-header { width: 100%; padding-bottom: 0.9375rem; border-bottom: 0.0625rem solid #02256c; } #board .page-contents .contents-header .contents-title { font-size: 1.5rem; margin-bottom: 0.625rem; } #board .page-contents .contents-header .page-header-info { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } #board .page-contents .contents-header .page-header-info .date { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } #board .page-contents .contents-header .page-header-info .date > dd { color: #898989; font-size: 0.9375rem; } #board .page-contents .list-detail-sns { margin-left: auto; -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; } #board .page-contents .list-detail-sns > a { width: 1.875rem; height: 1.875rem; margin: 0 0.1875rem; background-size: cover; text-indent: -99999px; overflow: hidden; display: block; } #board .page-contents .list-detail-sns > a.sns-facebook { background-color: transparent; background-image: url("../images/common/detail-sns01.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #board .page-contents .list-detail-sns > a.sns-twitter { background-color: transparent; background-image: url("../images/common/detail-sns02.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #board .page-contents .list-detail-sns > a.sns-kakaotalk { background-color: transparent; background-image: url("../images/common/detail-sns03.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #board .page-contents .list-detail-sns > a.url-copy { background-color: transparent; background-image: url("../images/common/detail-sns04.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: center; } #board .page-contents .detail-contents { width: 100%; padding: 0.625rem; } #board .page-contents .detail-contents p { width: 100%; box-sizing: border-box; } #board .page-contents .detail-contents img { max-width: 100%; height: auto !important; } #board .page-contents .hash-tag { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; flex-wrap: wrap; margin-top: 1.875rem; } #board .page-contents .hash-tag > li { padding: 0 0.625rem 0 1.25rem; height: 2.125rem; line-height: 2rem; border: 0.0625rem solid #e1e1e1; margin: 0 0.3125rem 0.3125rem 0; font-weight: 300; font-size: 0.9375rem; position: relative; color: #666; } #board .page-contents .hash-tag > li:before { content: "#"; position: absolute; left: 0.5rem; top: 0; } #board .page-contents .page-list { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 0.0625rem solid #999; } #board .page-contents .page-list .title { font-size: 1.5rem; margin-bottom: 0.625rem; } #board .page-contents .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 0.625rem; } #board .page-contents .video-container.shorts { width: 56.25%; padding-bottom: 100%; margin: 0.625rem auto 0 auto; } #board .page-contents .video-container iframe, #board .page-contents .video-container object, #board .page-contents .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #board .page-contents .btn-list-prev { width: 11.25rem; height: 2.5rem; line-height: 2.5rem; background-color: #02256c; border: none; color: #fff; display: block; font-size: 1rem; margin: 1.875rem auto 0 auto; text-align: center; } @media screen and (max-width: 768px) { #board .page-contents { padding: 0.625rem; border-radius: 0.625rem; margin-bottom: 0.625rem; } #board .page-contents .contents-header { padding-bottom: 0.625rem; } #board .page-contents .contents-header .contents-title { font-size: 0.75rem; margin-bottom: 0.3125rem; } #board .page-contents .contents-header .page-header-info .date > dd { font-size: 0.4166666667rem; } #board .page-contents .list-detail-sns > a { width: 0.9375rem; height: 0.9375rem; margin: 0 0.1875rem; } #board .page-contents .detail-contents { padding: 0.625rem; } #board .page-contents .detail-contents *:not(.video-container.shorts) { font-size: 0.5rem !important; margin-left: 0 !important; text-indent: 0 !important; word-break: initial !important; } #board .page-contents .hash-tag { -webkit-display: flex; display: -ms-flex; display: flex; align-items: center; flex-wrap: wrap; margin-top: 0.625rem; } #board .page-contents .hash-tag > li { padding: 0 0.2083333333rem 0 0.625rem; height: 1.25rem; line-height: 1.2083333333rem; border: 0.0625rem solid #e1e1e1; margin: 0 0.1041666667rem 0.1041666667rem 0; font-size: 0.5rem; } #board .page-contents .hash-tag > li:before { left: 0.1875rem; } #board .page-contents .page-list { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 0.0625rem solid #999; } #board .page-contents .page-list .title { font-size: 0.625rem; margin-bottom: 0.625rem; } #board .page-contents .video-container { margin-top: 0.625rem; } #board .page-contents .video-container.shorts { width: 9.1666666667rem; height: 17.9166666667rem; padding-bottom: 0; margin: 0.625rem auto 0 auto; } #board .page-contents .btn-list-prev { width: 6.25rem; height: 1.25rem; line-height: 1.25rem; font-size: 0.5625rem; margin: 1.25rem auto 0 auto; text-align: center; } } #board .form-content-wrap { width: 100%; border: 0.0625rem solid #b3b3ca; margin-top: 1.5625rem; padding: 1.25rem 0.625rem; } #board .form-content-wrap .form-title { width: 100%; padding: 0 0 0.9375rem 0; font-size: 1.125rem; line-height: 1.3; border-bottom: 0.0625rem solid #d7d7d7; word-break: break-all; text-align: center; } #board .form-content-wrap .form-box { margin-top: 0.9375rem; } #board .form-content-wrap .form-box .question-title { font-size: 0.875rem; padding: 0.625rem 0; } #board .form-content-wrap .form-box .form-radio-box { -webkit-display: flex; display: -ms-flex; display: flex; justify-content: space-between; padding: 0 1.875rem; } #board .form-content-wrap .form-box .form-radio-box.other { padding: 0; } #board .form-content-wrap .form-box .form-radio-box .radio-item { display: inline-block; white-space: nowrap; position: relative; font-size: 0.8125rem; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) { position: absolute; left: -9999px; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label { position: relative; padding-left: 1.75rem; cursor: pointer; line-height: 1.25rem; display: inline-block; color: #666; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:before, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:before { content: ""; position: absolute; left: 0; top: 0; width: 1.125rem; height: 1.125rem; border: 0.0625rem solid #ddd; border-radius: 100%; background: #fff; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after { content: ""; width: 0.75rem; height: 0.75rem; background: #02256c; position: absolute; top: 0.15625rem; left: 0.15625rem; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #board .form-content-wrap .form-box .form-radio-box textarea { width: 100%; min-height: 1.875rem; border: 0.0625rem solid #ebebeb; font-size: 0.8125rem; padding: 0.3125rem; } #board .form-content-wrap .form-box .textarea-num { width: 100%; text-align: right; color: #444; font-size: 0.75rem; } #board .form-content-wrap .form-box .textarea-num span#byteInfo { color: #ff6706; } #board .form-content-wrap .form-btn { width: 6.25rem; height: 1.875rem; background-color: #02256c; border: none; color: #fff; display: block; font-size: 0.75rem; margin: 0.9375rem auto 0 auto; line-height: 1; } @media screen and (max-width: 768px) { #board .form-content-wrap { margin-top: 0.5208333333rem; padding: 0.625rem 0.25rem; } #board .form-content-wrap .form-title { padding: 0 0 0.3125rem 0; font-size: 0.625rem; } #board .form-content-wrap .form-box { margin-top: 0.625rem; } #board .form-content-wrap .form-box .question-title { font-size: 0.5625rem; padding: 0.2083333333rem 0; } #board .form-content-wrap .form-box .form-radio-box { padding: 0; } #board .form-content-wrap .form-box .form-radio-box.other { padding: 0; } #board .form-content-wrap .form-box .form-radio-box .radio-item { font-size: 0.4375rem; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label { padding-left: 0.7916666667rem; line-height: 0.625rem; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:before, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:before { width: 0.6666666667rem; height: 0.6666666667rem; border: 0.0625rem solid #ddd; } #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after, #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after { width: 0.5rem; height: 0.5rem; top: 0.0833333333rem; left: 0.0833333333rem; } #board .form-content-wrap .form-box .form-radio-box textarea { width: 100%; min-height: 2.5rem; border: 0.0625rem solid #ebebeb; font-size: 0.5625rem; padding: 0.1875rem; } #board .form-content-wrap .form-box .textarea-num { width: 100%; font-size: 0.4375rem; } #board .form-content-wrap .form-box .textarea-num span#byteInfo { color: #ff6706; } #board .form-content-wrap .form-btn { width: 3.75rem; height: 0.9375rem; display: block; font-size: 0.4375rem; margin: 0.3125rem auto 0 auto; line-height: 1; } }
|