@import url(reset.css); /*@import url('swiper-bundle.min.css');*/ @import url('../fonts/font.css'); * {word-wrap: break-word; word-break: keep-all;} *::before, *::after {box-sizing: border-box;} li::marker {display: none !important;} a:focus, button:focus, .swiper-pagination:focus { /*outline-offset: -0.4rem; outline: 0.2rem solid var(--primary-50);*/ /*border-radius: var(--rd-1);*/ transition: var(--transition-1) !important; } .active a:focus, .active:focus, .active button:focus, .active .swiper-pagination:focus { outline-color: var(--white); } @keyframes underline { 0% {transform: scaleX(0); transform-origin: bottom left; opacity: 0;} 100% {transform: scaleX(1); opacity: 1;} } @keyframes slide-up { 0% {transform: scaleY(0); transform-origin: bottom;} 100% {transform: scaleY(1); transform-origin: bottom;} } @keyframes slide-down { 0% {transform: scaleY(1); transform-origin: top;} 100% {transform: scaleY(0); transform-origin: top;} } /* common */ textarea:focus {outline: 0.1rem solid var(--gray-60) !important; transition: 0.6s ease;} .focus textarea, textarea.active {border-color: var(--black);} .swiper-button-more:focus {outline-color: var(--white);} :root { --twoDepth: 10rem; --twoDepthWidth: 16rem; --twoDepthHeight: 8rem; --twoDepthMenu-H: 2.4rem; --twoDepthTop: 5.7rem; --boxH-full: calc(100% - 4.6rem); /*--lnbWidth: 12.5vw;*/ --lnbWidth: 22rem; --topMenu: 3.3rem; } *::-webkit-scrollbar {width: 0.8rem !important; height: 0;} *::-webkit-scrollbar-thumb {background-clip: padding-box; border: 0.2rem solid var(--white); background: linear-gradient(var(--gray-10) 60%, var(--gray-10)); border-radius: var(--rd-20); transition: 0.5s ease;} *::-webkit-scrollbar-thumb:hover {background: linear-gradient(var(--secondary) 60%, var(--secondary-2)); border-radius: var(--rd-20);} *::-webkit-scrollbar-track {background: transparent;} html {font-family: 'Pretendard'; position: relative; width: 100%; height: 100%; font-size: 62.5%; color: var(--gray-90); font-weight: 400; word-break: keep-all; word-wrap: break-word; -webkit-tap-highlight-color: transparent;} body {font-size: var(--fz-body-md);} a {color: var(--gray-90);} button, input[type=submit], input[type=button] {overflow: visible; margin: 0; background-color: transparent; border: none; cursor: pointer; font: inherit;} button:hover, ul li a:hover, ol li a:hover {/*background-color: var(--secondary-5);*/ transition: var(--transition-1);} button:active, ul li a:active, ol li a:active {/*background-color: var(--secondary-10);*/ transition: var(--transition-1);} button:focus {/*outline: 0.2rem solid var(--primary-50); outline-offset: -0.4rem;*/} input[type=text].sm, input[type=password].sm {max-width: 24rem;} input[type=password].md {max-width: 30rem;} /* btn */ .btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--spacer1); min-width: 8rem; width: auto; height: 3.6rem; padding: 0 var(--btn-px-lg); background-color: var(--gray-10); border: 0.1rem solid var(--primary-50); border-radius: var(--rd-4); font-size: var(--fz-body-sm); color: var(--white); font-weight: 300; line-height: 1; cursor: pointer; white-space: nowrap; transition: 0.1s ease-in-out;} .btn.border {gap: var(--spacer2); padding: 0 var(--spacer3); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-6); font-size: var(--fz-body-sm);} .btn-txt {border-radius: var(--btn-rd-lg); font-size: var(--fz-body-lg);} .btn-txt, .btn {border: 0; padding: 0 var(--spacer2); color: inherit; transition: var(--transition-1);} .btn-txt:focus, .two-depth-wrap a:focus, .btn:focus {outline-offset: 0.3rem; outline: 0.2rem solid rgba(36, 107, 235, 0.8);} .btn-txt:hover, .two-depth-wrap a:hover, .btn:hover {background-color: var(--secondary-5);} .btn-txt:active, .two-depth-wrap a:active, .btn:active {background-color: var(--secondary-10);} .btn-txt[class*=ico-]::after, .two-depth-wrap a::after, .btn:after {background-repeat: no-repeat; background-position: center; background-size: contain;} .ico-go {position: relative;} .ico-go::before, .ico-go::after {background-image: url(../img/ico_go.svg); background-repeat: no-repeat; background-size: contain;} .ico-reset::before, .ico-reset::after {background-image: url(../img/ico_refresh_16.svg);} .ico-arr::after {background-image: url(../img/ico_arrow_right.svg);} .ico-arr-down::after {background-image: url(../img/ico_arrow_down.svg);} .ico-logout::before, .ico-logout::after {background-image: url(../img/ico_logout_16.svg);} .ico-upload::before, .ico-upload::after {background: url(../img/ico_file_upload.svg);} .ico-down {} .ico-down::after {width: 1.5rem !important; height: 1.4rem !important; margin-left: var(--spacer1); background: url(../img/ico_down.svg) no-repeat center; background-size: contain;} .btn.sm {height: 3.5rem !important; padding: 0 var(--btn-px-sm); border-radius: var(--btn-rd-sm) !important; font-size: var(--btn-fz-sm);} .btn.xsm {min-width: 5.2rem !important; height: 3rem !important; padding: 0 var(--btn-px-xsm); border-radius: var(--rd-4) !important; font-size: var(--btn-fz-xsm);} .btn.xsm:focus {outline-offset: -0.4rem; outline-color: var(--white);} .btn.white.xsm:focus {outline-color: var(--primary-50);} a[class*=ico-]::after, button[class*=ico-]::after {content: ''; display: inline-flex; min-width: 1.6rem; min-height: 1.6rem;} .sm[class*=ico-]::before, .btn-txt.sm[class*=ico-]::after {width: 2rem; height: 2rem;} .xsm[class*=ico-]::before, .btn-txt.xsm[class*=ico-]::after {width: 1.6rem; height: 1.6rem;} .btn.white {background-color: var(--white) !important; border: 0.1rem solid var(--gray-30); color: var(--gray-90) !important;} .btn.blue {background-color: var(--primary-10) !important; border: 0.1rem solid var(--primary-20); color: var(--primary-70) !important;} .btn.primary {background-color: var(--primary-50) !important; border: 0.1rem solid var(--primary-50); color: var(--white) !important;} .btn.submit {background-color: var(--primary-80); color: var(--white);} .btn.xsm.submit {background-color: var(--primary-40); color: var(--white);} .popup .btn.right {position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); width: auto; font-size: 1.3rem; min-width: 4rem; min-height: auto; height: 2.5rem; border: none; background: transparent url(../img/head_ico_navi_sch.svg) no-repeat center; text-indent: -9999px;} .popup .btn.right:focus {outline: none;} .btn.gray {background-color: var(--gray-20) !important; color: var(--gray-90) !important;} .c-gray {color: var(--gray-60) !important;} /* Form Controls */ select {min-width: fit-content; max-width: 17rem; background: var(--white) url(../img/ico_arr_bottom.svg) no-repeat right calc(var(--spacer1)*3) center; padding-right: var(--spacer9); background-size: 1.2rem; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} select.active {background: var(--white) url(../img/ico_arrow_up_b.svg) no-repeat right calc(var(--spacer1)*2) center;} select.sm {max-width: 10rem;} select::-ms-expand {display: none;} select:last-child, select:last-of-type {margin-right: 0;} input[type=text]:disabled, input[type=password]:disabled, select:disabled {background-color: var(--gray-20); color: var(--gray-60); opacity: 1;} input::-webkit-input-placeholder, input[type=date]:invalid, textarea::-webkit-input-placeholder, select:invalid {color: var(--gray-30); font-weight: 200; font-size: var(--fz-body-xsm) !important;} label {display: flex; align-items: center; transition: var(--transition);} label, input, select {font-size: var(--fz-body-sm);} input, select {display: grid; align-items: center; width: 100%; min-height: 3.6rem; max-height: 3.6rem; padding: 0 calc(var(--spacer1)*2); border: 0.1rem solid var(--gray-30); border-radius: var(--rd-4); color: var(--black); -webkit-appearance: none; font-size: var(--fz-body-xsm);} th ~ td select {min-width: 17rem;} .page-cnt-wrap {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--spacer4);} .page-cnt-wrap .sch-input-box {display: flex; align-items: flex-start;} .page-cnt-wrap .sch-input-box .flex {display: flex; gap: var(--spacer1); width: 100%;} .page-cnt-wrap .sch-input-box .sch-input {width: 100%;} .page-cnt-wrap .sch-input-box .sch-input input[type=text] {max-width: 40.7rem; width: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0;} .page-cnt-wrap .sch-input-box .sch-input .btn {position: relative; min-width: 3.6rem; min-height: 3.6rem; height: inherit; border-radius: 0 var(--rd-4) var(--rd-4) 0; background-color: var(--secondary); color: var(--white); font-size: var(--fz-body-xsm); text-indent: -9999px;} .page-cnt-wrap .sch-input-box .sch-input .btn:focus {outline-offset: -0.4rem; outline-color: var(--white);} .page-cnt-wrap .sch-input-box .sch-input .btn::before {content: ''; position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; background: url(../img/ico_sch.svg) no-repeat; transform: translate(-50%, -50%);} .state-cnt .cnt-box {display: flex; gap: var(--spacer1); min-width: max-content; font-size: var(--fz-body-sm);} .state-cnt .cnt-box strong {color: var(--secondary); font-weight: 800;} input[type=radio], input[type=checkbox] {display: none;position: absolute; left: 0; width: inherit; height: inherit; min-width: 2rem; min-height: 2rem;} input[type=radio]:hover, input[type=checkbox]:hover, input[type=radio] + label:hover, input[type=checkbox] + label:hover {cursor: pointer;} input:not([type=radio], [type=checkbox]) {width: 100%; min-height: 3.6rem; border: 0.1rem solid var(--gray-30); border-radius: var(--rd-4);} input[type=text]:disabled, input[type=password]:disabled, select:disabled {background-color: var(--gray-20); color: var(--gray-60); opacity: 1;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: var(--gray-50) !important; font-weight: 200; font-size: var(--fz-body-xsm) !important;} input:last-child, input:last-of-type {margin-right: 0;} .input-s {max-width: 35rem; min-width: 35rem; width: inherit; background-position: right 0.5rem center;} input[type=date] {font-family: 'pretendard'; position: relative; width: min-content; min-width: 17rem; max-width: 35rem; appearance: none; -webkit-appearance: none; background: none; background-color: var(--white); background-position: calc(100% - 1rem) 0.7rem; background-size: 2rem;} input[type=date]::-webkit-calendar-picker-indicator {background: var(--white) url(../img/ico_calendar.svg) no-repeat; background-size: 1.6rem;} input[type=date]::-webkit-calendar-picker-indicator:hover {cursor: pointer;} input[type=tel] {max-width: 12rem; text-align: center;} input[type=file].file {display: none; width: 0; height: 0;} input[type=file].file + label {max-height: 4.2rem; cursor: pointer;} /* step */ @keyframes noti { 0% {transform: scale(0); opacity: 1;} 100% {transform: scale(1); opacity: 0;} } .step-wrap {display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; margin-bottom: var(--spacer16);} .step-wrap > li {flex: 1; position: relative; font-size: var(--fz-body-sm);} /*.step-wrap > li:last-of-type > dl {padding-right: 0;} .step-wrap > li:last-of-type > dl::before {left: inherit; right: 0;}*/ /*.step-wrap > li:last-of-type::after {display: none;}*/ .step-wrap > li::after {content: ''; position: absolute; top: 1rem; left: 0; width: 100%; height: 0.1rem; background-color: var(--gray-40);} .step-wrap > li > dl {display: flex; flex-direction: column; position: relative; padding-top: var(--spacer8); padding-right: var(--spacer8);} .step-wrap > li > dl::before {position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: var(--gray-20); border: 0.1rem solid var(--gray-20); z-index: 1;} .step-wrap > li > dl::before, .step-wrap > li > dl::after {content: ''; border-radius: var(--rd-full);} .step-wrap > li .step {color: var(--gray-70);} .step-wrap > li .step-tit {font-weight: 700; white-space: nowrap;} .step-wrap > li.done > dl::before {width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; border: 0; background-color: var(--secondary);} .step-wrap > li.done > dl::after {position: absolute; top: 0.4rem; left: 0.2rem; z-index: 2; width: 1.2rem; height: 1.2rem; background: url(../img/ico_check_8.svg) no-repeat; background-position: center; background-size: contain; z-index: 1;} .step-wrap > li.active::before {content: ''; position: absolute; top: -0.8rem; left: -0.8rem; width: 3.6rem; height: 3.6rem; border-radius: 5rem; border: 0.8rem solid var(--primary-50); animation: noti 1.5s ease-out 0.4s infinite running; z-index: 1;} .step-wrap > li.active > dl::before {background-color: var(--white); border-color: var(--primary);} .step-wrap > li.active > dl::after {position: absolute; top: 0.4rem; left: 0.4rem; width: 1.2rem; height: 1.2rem; background: var(--primary) url(../img/ico_step_active.svg) no-repeat center; background-size: contain; z-index: 1;} .custom-file {display: flex; align-items: center; gap: var(--spacer2); font-weight: 600;} .custom-file input[type=file] {overflow: hidden;} .custom-file .custom-file-btn, .custom-file .custom-file-name {display: flex; align-items: center; min-width: fit-content; padding: var(--spacer1) var(--spacer3); border-radius: var(--rd-2); font-size: var(--fz-body-xsm); font-weight: 400;} .custom-file .custom-file-btn {background-color: #cccdcf; color: var(--gray-80);} .custom-file .custom-file-btn:focus {outline-color: var(--white);} .custom-file .custom-file-name {width: 100%; min-width: 30rem; min-height: 2.75rem; border: 0.1rem solid var(--gray-30); color: var(--gray-50);} .custom-file .custom-file-name > ul {display: flex; align-items: center; gap: var(--spacer2);} .custom-file .custom-file-name > ul > li {display: flex; align-items: center; gap: var(--spacer1); padding: 0 var(--spacer2); background-color: #f1f2f7;} .custom-file .custom-file-name > ul > li span:nth-of-type(1) {color: var(--primary-60);} .drag-and-drop {display: grid; gap: var(--spacer2); width: 100%;} .drag-and-drop input[type=file] {overflow: hidden;} .drag-and-drop .custom-file-btn {display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 25rem; padding: var(--spacer5); border: 0.1rem dashed var(--gray-30); text-align: center; overflow-y: scroll; background-color: transparent;} .drag-and-drop button.custom-file-btn {width: fit-content; height: inherit; padding: var(--spacer1) var(--spacer2); padding-right: var(--spacer1); background-color: #cccdcf; font-size: var(--fz-body-xsm); font-weight: 400; color: var(--gray-80);} .drag-and-drop .custom-file-btn .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .drag-and-drop .upload-file-list {display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%;} .drag-and-drop .upload-file-list li {display: flex; align-items: center; position: relative; gap: var(--spacer1); min-height: 3rem; padding-left: var(--spacer2);} .drag-and-drop .upload-file-list li::before {content: ''; position: absolute; top: 1.3rem; left: 0; min-width: 0.3rem; min-height: 0.3rem; background-color: var(--gray-80); border-radius: var(--rd-full);} .custom-reply {display: grid; gap: var(--spacer4); background-color: var(--white); border: 0.1rem solid var(--gray-20); padding: var(--spacer5);} .custom-reply .reply-wrap {display: grid; gap: var(--spacer2);} .custom-reply .reply-wrap .order-wrap {display: flex; align-items: center; gap: var(--spacer2); justify-content: space-between; font-size: var(--fz-title-xsm);} .custom-reply .reply-wrap .order-wrap .desc {display: flex; justify-content: center; align-items: center; min-height: 3.4rem; margin-bottom: 0; font-size: var(--fz-title-xsm); color: var(--primary-50); font-weight: 400;} .custom-reply .reply-wrap .order {display: flex; align-items: center; gap: var(--spacer2); font-size: var(--fz-title-xsm);} .custom-reply .reply-wrap .order .tit {min-width: 6.4rem; font-size: var(--fz-title-sm); font-weight: 600;} .custom-reply .reply-wrap .order li a {display: flex; align-items: center; color: var(--gray-50);} .custom-reply .reply-wrap .order li a:hover {background-color: transparent;} .custom-reply .reply-wrap .order li a:focus {outline-offset: 0.4rem;} .custom-reply .reply-wrap .order li.active a {color: var(--gray-90); font-weight: 600;} .custom-reply .reply-wrap .order .ico-reset {text-indent: -9999px;} .custom-reply .user-info-wrap {display: grid; gap: var(--spacer2);} .custom-reply .user-info {display: flex; justify-content: space-between; padding: var(--spacer4); padding-right: var(--spacer6); background-color: var(--gray-5);} .custom-reply .user-info .left {display: grid; grid-template-columns: 0.1fr 2fr; gap: var(--spacer5);} .custom-reply .user-info .left .profile {width: 3.6rem; height: 3.6rem; border-radius: var(--rd-full); overflow: hidden;} .custom-reply .user-info .left .profile img {height: 100%; object-fit: cover;} .custom-reply .user-info .left .user {display: grid; align-items: center; gap: var(--spacer4); width: max-content; font-size: var(--fz-body-sm);} .custom-reply .user-info .left .user .name {display: flex; min-width: fit-content; font-weight: 600;} .custom-reply .user-info .left .user .new {display: inline-flex; justify-content: center; align-items: center; min-width: 4rem; height: 1.8rem; border: 0.1rem solid var(--primary-50); border-radius: var(--rd-20); color: var(--primary-50); font-size: var(--fz-body-xsm); font-weight: 300; line-height: 1.2;} .custom-reply .user-info .left .user .form-align {display: flex; flex-wrap: wrap;} .custom-reply .user-info .left .user .file {min-width: fit-content; height: 3rem; background-color: var(--gray-20);} .custom-reply .user-info .left .user .file:focus {outline-offset: -0.4rem; outline-color: var(--gray-50);} .custom-reply .user-info .left .user .date {color: var(--gray-50); font-size: var(--fz-body-xsm);} .custom-reply .user-info .right {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: fit-content;} .custom-reply .user-info .right .edit-box {display: none; position: absolute; top: 3.8rem; right: -1.8rem; min-width: 6rem; background-color: var(--white); border-radius: var(--rd-6);} .custom-reply .user-info .right .edit-box li {position: relative;} .custom-reply .user-info .right .edit-box li:first-of-type::before {content: ''; position: absolute; top: -0.6rem; left: 50%; width: 0; height: 0; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-bottom: 0.6rem solid var(--white); transform: translateX(-50%);} .custom-reply .user-info .right .edit-box li a {display: flex; justify-content: center; align-items: center; min-height: 2.4rem; font-size: var(--fz-body-xsm);} .custom-reply .user-info .right .more {display: flex; align-content: center; min-width: 2.4rem !important; height: 2.4rem !important; padding: 0; background-color: var(--gray-30); border-radius: var(--rd-full);} .custom-reply .custom-file {display: flex; padding: var(--spacer5) var(--spacer3); background-color: var(--white); border: 0.1rem solid var(--gray-20);} .custom-reply .custom-file {margin-top: var(--spacer5);} .custom-reply .custom-file .upload-name {min-width: fit-content; padding-right: var(--spacer10);} .custom-reply .custom-file .btn.submit {background-color: var(--primary-40); border-radius: var(--rd-2); font-size: var(--fz-body-xsm);} /* radio */ .form-check-box {display: flex; align-items: center; gap: var(--spacer5);} .form-check-box .form-group {flex-direction: row;} .form-check {display: flex; align-items: center;} .form-check input[type=radio] ~ label, .form-check input[type=checkbox] ~ label {cursor: pointer;} .form-check input[type=radio] ~ label {position: relative; display: inline-flex; min-width: auto; min-height: var(--rdo-size-md); padding-left: calc(var(--rdo-size-sm) + var(--spacer1)); font-size: var(--rdo-fz-sm); line-height: var(--rdo-size-md);} .form-check input[type=radio] ~ label:before {position: absolute; top: 0.2rem; left: 0; width: var(--rdo-size-sm); height: var(--rdo-size-sm); background-color: var(--white); border: 1px solid var(--gray-60); border-radius: var(--rd-full);} .form-check input[type=radio] ~ label:before, .form-check input[type=radio] ~ label:after {content: ''; display: block; transition: 0.15s cubic-bezier(0.4, 0, 0.23, 1);} .form-check input[type=radio] ~ label:before, .form-check input[type=radio] ~ label:after {z-index: 0;} /* z-index: 1; */ .form-check input[type=radio] ~ label:after {position: absolute; top: calc((var(--rdo-size-sm) - var(--rdo-chk-sm)) / 1.3); left: calc((var(--rdo-size-sm) - var(--rdo-chk-sm)) / 2); width: var(--rdo-chk-sm); height: var(--rdo-chk-sm); background-color: var(--white); border-radius: var(--rd-full);} .form-check.lg > [type=radio] ~ label {font-size: var(--rdo-fz-lg); line-height: var(--rdo-size-lg); min-height: var(--rdo-size-lg); padding-left: calc(var(--rdo-size-lg) + var(--spacer2));} .form-check.lg > [type=radio] ~ label::before {width: var(--rdo-size-lg); height: var(--rdo-size-lg);} .form-check.lg > [type=radio] ~ label::after {top: calc((var(--rdo-size-lg) - var(--rdo-chk-lg)) / 2); left: calc((var(--rdo-size-lg) - var(--rdo-chk-lg)) / 2); width: var(--rdo-chk-lg); height: var(--rdo-chk-lg);} .form-check input[type=radio]:checked ~ label:before {border-color: var(--primary);} .form-check input[type=radio]:checked ~ label:after {background-color: var(--primary);} .form-check input[type=radio]:focus ~ label:before {outline-offset: 0.4rem; outline: 0.2rem solid var(--primary-50);} /* checkbox */ .check-list-wrap {display: grid; gap: var(--spacer10); padding: var(--spacer10); margin-bottom: var(--spacer8); background-color: var(--white); border: 0.1rem solid var(--gray-20); border-left: 0; border-right: 0;} .check-list-wrap .check-list {display: flex; flex: 1; gap: var(--spacer4); margin-bottom: var(--spcaer10);} .check-list-wrap .check-list .tit {display: flex; position: relative; width: 100%; padding-left: var(--spacer3); font-size: var(--fz-title-md); font-weight: 600;} .check-list-wrap .check-list .tit::before {content: ''; position: absolute; top: 0.8rem; left: 0; width: 0.3rem; height: 1.3rem; background-color: var(--primary-50);} .check-list-wrap .check-list .form-group {position: relative; flex: 1; grid-column-gap: var(--spacer4); grid-row-gap: var(--spacer6);} .check-list-wrap .check-list .form-group .form-conts {display: grid; grid-template-columns: repeat(8, 1fr); grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer5);} input[type=checkbox] ~ label, input[type=checkbox] + span, input[type=checkbox] ~ a {position: relative; display: inline-flex; align-items: center; width: max-content; min-width: 2rem; min-height: var(--rdo-size-md); padding-left: calc(var(--rdo-size-md) + var(--spacer2)); font-size: var(--rdo-fz-sm); line-height: var(--rdo-size-md); color: var(--gray-90);} input[type=checkbox] ~ label::before, input[type=checkbox] + span::before, input[type=checkbox] ~ a::before {position: absolute; top: 50%; left: 20%; width: var(--chk-size-sm); height: var(--chk-size-sm); border: 0.1rem solid var(--gray-50); border-radius: var(--rd-2); transform: translate(-50%, -50%); z-index: 1;} input[type=checkbox] ~ label::before:hover, input[type=checkbox] + span::before:hover {cursor: pointer;} input[type=checkbox] ~ label::after, input[type=checkbox] + span::after, input[type=checkbox] ~ a::after {position: absolute; top: calc((var(--chk-size-lg) - var(--chk-primary-chk-md)) / 2); left: calc((var(--chk-size-lg) - var(--chk-primary-chk-md)) / 2); width: var(--chk-primary-chk-sm); height: var(--chk-primary-chk-sm); /* background: url(../img/ico_check_primary_checked.svg) no-repeat 0 0; */ background-size: contain; z-index: 1; opacity: 0;} input[type=checkbox] ~ label::before, input[type=checkbox] ~ label::after, input[type=checkbox] ~ span::before, input[type=checkbox] ~ a::before {content: ''; display: block; transition: 0.15s cubic-bezier(0.4, 0, 0.23, 1);} input[type=checkbox]:checked ~ label::before, input[type=checkbox]:checked + span::before, input[type=checkbox]:checked ~ a::before {border-color: var(--primary-50); background: var(--primary-50) url(../img/ico_check_primary_checked.svg) no-repeat center; background-size: 1rem;} input[type=checkbox]:checked ~ label::after, input[type=checkbox]:checked + span::after, input[type=checkbox]:checked ~ a::after {opacity: 1; transition-delay: 0.1s;} input[type=checkbox]:focus ~ label::before, input[type=checkbox]:focus + span::before, input[type=checkbox]:focus ~ a::before {outline-offset: 0.4rem; outline: 0.2rem solid var(--primary-50);} input[type=checkbox]:disabled ~ label::before, input[type=checkbox]:disabled + span::before, input[type=checkbox]:disabled ~ a::before {background-color: var(--gray-30); border-color: var(--gray-40);} /* checkbox switch */ .permission-box {display: flex; flex-wrap: wrap; gap: var(--spacer15) 0; background-color: #F1F5FB; padding: var(--spacer10); border-radius: var(--rd-12);} .permission-box .component-box {flex-direction: row; width: 100%; gap: 0; border-radius: var(--rd-16); overflow: hidden;} .permission-box .desc-list li:not(.tit) {color: var(--gray-60); font-weight: 400;} .permission-box .desc-list li:not(.tit)::before {background-color: var(--gray-60);} .permission-box .tit-s {margin-bottom: 0 !important;} .permission-box .page-btn-wrap {margin-top: 0 !important;} .permission-box .component {display: flex; flex-direction: column; flex: 1 1 48%; gap: var(--spacer5); position: relative; background-color: var(--white); padding: var(--spacer10);} .permission-box .component:not(:first-of-type) {justify-content: space-between; border-left: 1px solid #F1F5FB;} .permission-box .sch-input-box {flex-direction: row; justify-content: flex-start;} .permission-box .sch-input-box .sch-input {width: 100%;} .permission-box .sch-input-box .sch-input input[type=text] {min-height: 4rem; padding-left: var(--spacer10); border: 0; background-color: #F2F6FB; font-size: var(--fz-body-sm); line-height: 1.8;} .permission-box .sch-input-box .sch-input input[type=text]::placeholder {font-size: var(--fz-body-sm) !important; font-weight: 400;} .permission-box .sch-input-box .sch-input .btn {position: absolute; top: 50%; left: 0.8rem; min-width: 2.6rem; height: 2.6rem; background-color: #ddd; transform: translateY(-50%); background: url(../img/ico_sch_b.svg) no-repeat; background-size: contain; text-indent: -9999px;} .permission-box .permission-list {display: grid; gap: var(--spacer2); overflow-y: scroll; max-height: 24.2rem;} .permission-box .permission-list li {display: flex; align-items: center; gap: var(--spacer2);} .permission-box .permission-list li.active a, .permission-box .permission-list li:hover a {background-color: #E5F3FF;} .permission-box .permission-list li a {display: flex; align-items: center; width: 100%; min-height: 4.2rem; padding: var(--spacer1) var(--spacer5); border-radius: var(--rd-4); font-size: var(--fz-body-md);} .permission-menu {max-height: 33.6rem !important; overflow-y: scroll !important; border: 0.1rem solid #F1F5FB !important; padding: var(--spacer4) !important;} .permission-menu .list {display: grid; gap: var(--spacer5);} .permission-menu .list li {} .permission-menu .list li .tit {font-weight: 700;} .permission-menu .list li dl {display: flex; align-items: center; justify-content: space-between; position: relative; padding-left: var(--spacer9);} .permission-menu .list li dl dt {} .permission-menu .list li dl::before {content: ''; position: absolute; top: 48%; left: 1.5rem; width: 1.4rem; height: 1.5rem; border: 0.1rem solid #bec5d1; transform: translateY(-50%); border-radius: var(--rd-2);} .auth-link.selected {color: var(--primary-50) !important; background-color: #E5F3FF;} .btn-switch {display: none;} .btn-switch + label {display: flex; min-width: 5.8rem !important; min-height: 3.2rem !important; border-radius: var(--rd-20) !important; background-color: #d8dce3;} .btn-switch + label:hover {cursor: pointer;} .btn-switch + label::before {position: absolute; left: 28% !important; right: 2.2rem; min-width: 3.1rem; min-height: 3.1rem; border: 0.3rem solid #d8dce3 !important; border-radius: var(--rd-full) !important; background-color: var(--white); transition: 0.2s;} .btn-switch:checked + label {min-width: inherit; padding: 0; background-color: var(--primary-50); transition: 0.2s;} .btn-switch:checked + label::before {left: inherit !important; right: 0; background: var(--white) !important; transform: translate(0, -50%); border-color: var(--primary-50) !important;} .btn-switch-view {} .btn-switch:disabled + label::before {background-color: var(--white) !important;} .form-group .link-group {display: flex; align-items: center; justify-content: center; flex-direction: row;} .form-group .link-group > li + li {position: relative; margin-left: var(--spacer4); padding-left: var(--spacer4);} .form-group .link-group > li + li::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.1rem; height: 1.4rem; background-color: var(--gray-30); transform: translateY(-50%);} .form-group .chk-area .form-conts {align-items: normal; width: 100%;} .form-group .chk-area .sm {max-width: 16rem;} .form-conts, .form-control {position: relative;} .error {border-color: var(--red) !important;} .error .form-control {border-color: var(--red);} .error .form-control:focus {outline-color: var(--red);} .error .form-tit .desc {color: var(--red) !important;} .error .form-tit .desc::before {background-image: url(../img/ico_point_error.svg) !important;} .error ~ .txt-desc {display: grid; gap: var(--spacer2); margin: var(--spacer2) 0 var(--spacer3);} .error ~ .txt-desc li {color: var(--red); line-height: 1.2;} .error ~ .txt-desc li::before {top: 0.7rem; background-color: var(--red); transform: none;} /* textarea */ textarea {font-family: 'pretendard'; width: 100%; height: 100%; padding: calc(var(--spacer1)*2); min-height: 20rem; background: none; border: 0.1rem solid var(--gray-20); border-radius: var(--rd-4); resize: none; font-size: var(--fz-body-xsm); color: var(--gray-90); white-space: pre-line;} .textarea-s {min-height: 8rem;} .inner {max-width: 144rem; width: 100%; margin: 0 auto; padding: 0 var(--spacer5);} #skip-nav {position: absolute; top: -100px; left: 0; width: 100%; text-align: center; background-color: var(--gray-90); z-index: 1000;} #skip-nav a {display: inline-block; color: white; text-decoration: none; padding: 10px 20px; font-weight: bold;} /* a에 포커스가 오면 skip-nav 전체를 보이게 함 */ #skip-nav a:focus {position: absolute; width: 100%; top: 100px; left: 0; background-color: var(--gray-90); color: var(--white); outline: 2px solid var(--white); z-index: 9999;} .hidden {overflow: hidden;} .hidden #allTopMenu, #header-top .toggle-head .inner, .hidden #header .head-body, .hidden #header .head-gnb, .hidden #header .two-depth-wrap, .hidden #container, .hidden #section, .hidden #footer {padding-right: 1rem;} /* search-container */ #search.active .top-search-container {transform: translateY(0); opacity: 1; z-index: 10;} #search ~ .tab.type2 ul li {border-color: #C7C7C7;} #search ~ .tab.type2 ul .active {border-top: 0; border-right: 0;} .top-search-container {transform: translateY(-100%); position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; min-height: 20rem; background: #02406F url(../img/search_bg.svg); transition: var(--transition-4); opacity: 0; z-index: -1;} .top-search-container .btn-close {position: absolute; top: 1.5rem; right: 1.5rem; width: 2.6rem; height: 2.6rem; background: url(../img/ico_close_w.svg) no-repeat 100%; background-size: contain; text-indent: -9999px; z-index: 1;} .top-search-container:hover {cursor: pointer;} .top-search-container:focus {outline-offset: 0.4rem; border-radius: var(--rd-2); outline-color: var(--primary-50);} .top-search-container .inner {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer2) var(--spacer24); max-width: 105rem; position: static !important;} .top-search-container .flex {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacer1);} .top-search-container .tag-list {display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spacer5);} .top-search-container .tag-list li {display: inline-flex; width: auto; min-width: fit-content; color: var(--white);} .top-search-container .tag-list li a {display: flex; color: var(--white); font-size: var(--fz-body-sm); font-weight: 300;} .on .top-search-container {transform: translateY(0); position: static; opacity: 1; z-index: 1;} .active .sch-input-box .sch-result-cnt.hidden {display: inline-block;} .sch-input-box {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacer4); width: 100%;} .sch-input-box form {width: 100%;} .sch-input-box .input-inner {display: flex; position: relative; width: 100%;} .sch-input-box .input-inner input {max-width: -webkit-fill-available; width: 100%; min-height: 5rem; padding: 0 var(--spacer9); border: 0; border-radius: var(--rd-30); font-size: var(--fz-title-lg);} .sch-input-box .input-inner input::placeholder {font-size: var(--fz-title-lg) !important; font-weight: 400;} .sch-input-box .input-inner button {position: absolute; top: 50%; right: 0; transform: translateY(-50%); border-radius: var(--rd-30); text-indent: -9999px;} .sch-input-box .input-inner button:focus {outline-offset: 0.2rem; outline-color: var(--primary-50);} .sch-input-box .input-inner .del {min-width: 2.5rem; min-height: 2.5rem; right: 7.8rem; background: url(../img/btn_sch_del.svg) no-repeat center; background-size: contain;} .sch-input-box .input-inner .sch {min-width: 3rem; min-height: 3rem; right: 3.6rem; background: url(../img/ico_sch_b.svg) no-repeat center; background-size: contain;} .sch-input-box .sch-result-cnt {display: flex; gap: var(--spacer1); color: var(--white); font-weight: 100; font-size: var(--fz-title-md);} .sch-input-box .sch-result-cnt.hidden {display: none;} .sch-input-box .sch-result-cnt strong {position: relative; font-weight: 700;} .sch-input-box .sch-result-cnt strong::before {content: "'";} .sch-input-box .sch-result-cnt strong::after {content: "'";} .sch-trend {display: grid; gap: var(--spacer3); min-width: 15rem;} .sch-trend .top {display: flex; align-items: center; gap: var(--spacer3); padding: 0 var(--spacer2); color: var(--white); font-weight: 200;} .sch-trend .top .tit {min-width: fit-content; line-height: 1; color: #C6CBD0;} .sch-trend .top .paging-control {display: flex; gap: var(--spacer1);} .sch-trend .top .paging-control a {min-width: 1.8rem; min-height: 1.8rem !important; height: inherit; padding: 0; border-radius: var(--rd-2); text-indent: -9999px;} .sch-trend .top .paging-control .left {background: var(--white) url(../img/btn_trend_prev.svg) no-repeat; background-size: contain;} .sch-trend .top .paging-control .right {background: var(--white) url(../img/btn_trend_next.svg) no-repeat; background-size: contain;} .sch-trend .swiper {overflow: hidden;} .sch-trend .bottom {display: grid;} .sch-trend .bottom .swiper-slide {height: inherit !important;} .sch-trend .bottom a {display: flex; align-items: center; min-height: 2.2rem; padding: 0 var(--spacer2); border-radius: var(--rd-4); font-size: var(--fz-body-sm); color: var(--white); font-weight: 100;} .sch-trend a:focus {outline-color: var(--white);} .sch-trend a:hover {background-color: rgba(255,255,255,0.2);} /* #header-top > .toggle-head */ #header-top {position: relative; z-index: 2;} #header-top .toggle-head {padding: 0 var(--spacer4); background-color: var(--secondary-5);} #header-top .toggle-head .inner {display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; position: relative; gap: var(--spacer1) var(--spacer4); min-height: 3.2rem; padding-left: 2.9rem;} #header-top .toggle-head .nuri-txt {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; font-size: var(--fz-body-sm); line-height: 1; word-break: break-all;} #header-top .toggle-head .nuri-txt::before {content: ''; display: inline-flex; position: absolute; left: 0; width: 2.4rem; height: 1.6rem; margin-right: var(--spacer2); background: url(../img/ico_flag_kr.svg) no-repeat center; background-size: contain;} #header-top .toggle-head .toggle-btn {display: none; font-size: 1.4rem; color: var(--secondary); height: auto;} #header-top .toggle-head .toggle-btn::after {background-image: url(../img/ico_arr_20_down_blue.svg); transition: var(--transition-1);} #header-top .toggle-head.active .toggle-btn::after {transform: rotate(-180deg);} #header-top .toggle-head.active ~ .toggle-body {display: none; height: 1rem; background-color: var(--secondary-5); opacity: 1;} #header-top .toggle-body {height: 0; transition: var(--transition-1); overflow: hidden; opacity: 0;} #header-top .toggle-body::before {content: ''; display: flex; border-top: 0.1rem solid var(--secondary-10);} #header-top .toggle-body .inner {padding-top: var(--spacer6); padding-bottom: var(--spacer6);} #header-top .toggle-body .dl {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: var(--spacer4); flex: 1;} #header-top .toggle-body .dl .dt {display: flex; gap: var(--spacer2); align-items: center; font-weight: 700;} #header-top .toggle-body .dl .dt::before {content: ''; display: inline-flex; width: 2rem; height: 2rem; background-image: url(../img/head_ico_nuri.svg);} #header-top .toggle-body .dl .dd {font-size: var(--fz-body-sm); color: var(--gray-70);} #header-top .toggle-body .dl dd {padding-left: var(--spacer7);} #header-top .toggle-body .dl dd a {display: flex; align-items: center; gap: var(--spacer1);} /* .header > util-menu */ .is-m-gnb #header {border-bottom: 0; z-index: 2;} #wrap {position: relative; min-height: 100%;} #wrap[class^=scroll] .header-in {position: relative; top: 0; left: 0; width: 100%;} #wrap.scroll-up #header {transform: translateY(0%);} #wrap.scroll-down #header {transform: translateY(-100%);} #wrap.scroll-up .lnb-wrap {top: 18rem;} /* #header > util-menu */ .hamburger {position: absolute; right: var(--spacer5); bottom: -3.8rem; min-width: 2.2rem !important; width: auto !important; min-height: 1.8rem !important; transition: var(--transition-bez); z-index: 1;} .hamburger a {display: flex; position: relative; gap: var(--spacer1); width: 100%; min-height: 1.8rem; font-weight: 200; font-size: var(--fz-body-sm); color: var(--white); text-indent: -9999px;} .hamburger a:focus {outline-offset: 0.4rem; border-radius: var(--rd-1);} .hamburger span {display: flex; position: absolute; width: 100%; height: 2px; min-height: 2px; border-radius: calc(var(--rd-10)*10); background-color: var(--black); transition: var(--transition-2);} .hamburger .line1 {top: 0;} .hamburger .line2 {top: 50%; right: 0; transform: scaleX(1) translateY(calc(-50% + 0.1px));} .hamburger .line3 {bottom: 0;} .hamburger.active .line1 {/*top: 0; transform: translate(0px, 9px) rotate(45deg);*/} .hamburger.active .line2 {transform: translateY(-50%) scaleX(0.5); transform-origin: bottom right;} .hamburger.active .line3 {/*transform: translate(0px, -7px) rotate(-45deg);*/} #header {position: sticky; top: 0; left: 0; right: 0; transform: translateY(0%); transition: transform ease 0.4s 0.01s; background-color: var(--white); z-index: 3;} #header .btn {height: auto; min-height: 2.2rem; font-size: var(--fz-body-sm);} #header .header-in {position: relative;} #header .head-etc, #header .head-etc .etc-ul {display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: row; gap: var(--spacer6);} #header .head-etc .etc-ul .li {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; position: relative;} #header .head-etc .etc-ul .li:not(:first-child)::before {content: ''; display: inline-flex; position: absolute; left: -1.3rem; width: 0.1rem; height: 1.2rem; background-color: var(--gray-30);} #header .drop-wrap {display: inline-flex; position: relative;} #header .drop-wrap .ico-arr-down {background-color: transparent; font-size: var(--fz-body-xsm);} #header .drop-wrap .ico-arr-down:focus {outline: none;} #header .drop-wrap .lang::before {content: ''; position: absolute; top: 0.3rem; left: 0; width: 1.6rem; height: 1.6rem; background: url(../img/ico_lang.svg) no-repeat;} #header .drop-wrap .view::before {content: ''; position: absolute; top: 0.3rem; left: 0; width: 1.6rem; height: 1.6rem; background: url(../img/ico_veiw_mode.svg) no-repeat;} #header .drop-wrap .drop-menu {position: absolute; top: 0; left: 50%; z-index: 6; min-width: 13rem; padding: var(--spacer2); margin-top: var(--spacer4); border-radius: var(--rd-8); border: 0.1rem solid var(--gray-30); background-color: var(--white); box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.12); transform: translateX(-50%); transition: 0.3s cubic-bezier(0.09, -0.6, 0.5, 2); opacity: 0; pointer-events: none;} #header .drop-wrap .drop-menu::before {content: ''; display: inline-flex; position: absolute; left: 50%; bottom: 100%; width: 2rem; height: 1.2rem; background-image: url(../img/ico_drop_arr.svg); transform: translateX(-50%);} #header .drop-wrap .drop-menu .drop-list {display: grid; gap: var(--spacer1); padding-bottom: var(--spacer3);} #header .drop-wrap .drop-menu .drop-list:last-of-type {padding-bottom: 0;} #header .drop-wrap .drop-menu .drop-list .item-link, .drop-wrap .drop-menu .drop-list .item-size {display: flex; align-items: center; justify-content: center; flex-direction: row; gap: var(--spacer2); height: 3.2rem; padding: 0 var(--spacer2) !important; border-radius: var(--rd-6); font-size: var(--fz-label-sm); text-transform: uppercase;} #header .drop-wrap .drop-menu .drop-btm-btn {display: flex; align-items: flex-start; justify-content: center; flex-direction: row; width: 100%; padding: var(--spacer2) var(--spacer4) 0; border-top: 0.1rem solid var(--gray-30);} #header .drop-wrap .drop-menu .drop-btm-btn .btn {flex-direction: row-reverse; flex: 1;} #header #header .drop-wrap .item-size::before {content: '가'; display: none; align-items: center; justify-content: center; flex-direction: row; flex-shrink: 0; font-size: var(--fz-body-md); line-height: 1; width: 2.5rem; height: 2.5rem; padding: 0 var(--spacer1); border-radius: var(--rd-4); border: 0.1rem solid var(--gray-30); background-color: var(--white);} #header .drop-wrap.zoom-drop .drop-menu {top: 100%; opacity: 1; pointer-events: visible;} #header .drop-wrap .item-size.xsm::before {font-size: var(--fz-body-xsm); width: 1.9rem; height: 1.9rem;} #header .drop-wrap .item-size.sm::before {font-size: var(--fz-body-sm); width: 2rem; height: 2rem;} #header .drop-wrap .item-size.md::before {font-size: var(--fz-body-md); width: 2.2rem; height: 2.2rem;} #header .drop-wrap .item-size.lg::before {font-size: var(--fz-body-lg); width: 2.4rem; height: 2.4rem;} #header .drop-wrap .item-size.xlg::before {font-size: 2.3rem; width: 2.7rem; height: 2.7rem;} #header .drop-wrap .item-size.active {font-weight: 700; color: var(--secondary); background-color: var(--secondary-5);} #header .drop-wrap .item-size.active::before {color: var(--white); background-color: var(--secondary);} #header .inner {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer6); position: relative;} #header .head-in {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacer2) var(--spacer4); width: 100%; min-height: 7rem;} #header .btn-navi {display: inline-flex; align-items: center; justify-content: space-around; gap: var(--spacer3) var(--spacer2); min-height: 3.4rem; max-height: 3.4rem; padding: 0 var(--spacer3); font-size: var(--fz-body-sm); font-weight: 700; color: var(--gray-90); line-height: 1;} #header .btn-navi:hover {height: inherit; background-color: var(--secondary-5); transition: var(--transition-1);} #header .btn-navi::before {content: ''; display: inline-flex; min-width: 2.4rem; min-height: 2.4rem; background-repeat: no-repeat; background-size: contain;} #header .btn-navi.sch::before {background-image: url(../img/head_ico_navi_sch.svg); min-width: 1.9rem; min-height: 1.9rem;} #header .btn-navi.login::before {background-image: url(../img/head_ico_navi_login.svg);} #header .btn-navi.join::before {background-image: url(../img/head_ico_navi_join.svg); width: 2rem;} #header .btn-navi.my::before {background-image: url(../img/head_ico_navi_my.svg);} #header .btn-navi.m-all {display: none;} #header .btn-navi.m-all::before {background-image: url(../img/head_ico_navi_all.svg); min-width: 2.2rem; min-height: 2.2rem;} #header .logo a {display: inline-flex; align-items: center; height: 4.2rem;} #header .logo img {width: 100%; height: 100%;} #header .right {display: inline-flex; align-items: center; gap: var(--spacer2); margin-left: auto;} #header .right .sch-trend {display: flex; align-items: center; gap: var(--spacer2) var(--spacer3); min-height: inherit; color: var(--gray-90); font-size: var(--fz-body-sm);} #header .right .top {padding: 0; color: var(--gray-90);} #header .right .top .tit {color: inherit;} #header .right .sch-trend .btn {border: 0.1rem solid var(--gray-50);} #header .right .sch-trend .btn:focus {outline: none;} #header .right .sch-trend .btn.sch {border-color: var(--gray-30);} #header .right .sch-trend .bottom li {display: flex; align-items: center; width: auto;} #header .right .sch-trend .bottom a {width: fit-content; min-height: 3rem; color: inherit; font-weight: 300; font-size: var(--fz-body-xsm); line-height: 1;} #header .right .sch-trend .bottom a:hover {background-color: var(--secondary-5);} #header .right .sch-trend .bottom a:focus {outline-offset: 0; outline-color: var(--primary-50);} #header .right .sch-trend .schTrendSwiper {position: relative; gap: 0; width: auto; margin-right: var(--spacer3); overflow: hidden;} #header .right .sch-trend .schTrendSwiper::before {display: none; content: ''; position: absolute; top: -1rem; right: -1rem; width: 115%; min-width: 14rem; min-height: 23.5rem; height: 100%; background-color: var(--white); border: 0.1rem solid var(--gray-20); z-index: -1;} #header .right .sch-trend .schTrendSwiper:hover {overflow: visible; background-color: var(--white); z-index: 1;} #header .right .sch-trend .schTrendSwiper:hover .bottom {transform: none !important;} #header .right .sch-trend .schTrendSwiper:hover::before {display: block;} /* #header > gnb > one-depth */ #header .head-body {background-color: var(--white); z-index: 1;} #header .head-body .lang {font-size: var(--fz-body-sm);} #header .head-gnb {position: relative; border: 0.1rem solid #CDD1D5; border-left: 0; border-right: 0; background-color: var(--white);} #header .head-gnb::after {content: ''; position: absolute; top: inherit; width: 100%; min-height: 29rem; background-color: var(--white); z-index: -1; transform: translateY(-101%); transition: var(--transition-2);} #header .head-gnb .gnb {display: flex; align-items: center; flex-direction: row;} #header .head-gnb .li {position: relative;} #header .head-gnb .li a {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2); padding: 0; line-height: 1.3;} #header .head-gnb .li .arrow::after {content: ''; display: inline-flex; width: 2rem; height: 2rem; background: url(../img/ico_arrow_down.svg) no-repeat center; background-size: contain;} #header .head-gnb .li:nth-child(1) .one-depth {min-width: 25rem;} #header .head-gnb .li .one-depth {position: relative; min-width: 21rem; min-height: 5.6rem; font-size: var(--fz-body-md); padding: 0 var(--spacer3); /*border-bottom: var(--spacer1) solid transparent;*/ font-weight: 700; color: var(--gray-70);} #header .head-gnb .li .one-depth .sr-only {position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0;} #header .head-gnb .li .one-depth::before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -0.1rem; height: 0.4rem; transform: scaleX(0); transform-origin: bottom left; background: var(--secondary-2); transition: var(--transition-3);} #header .head-gnb .li .one-depth:hover::before {animation: underline 0.3s ease;} #header .head-gnb .li .one-depth::after {content: ''; top: 50%; right: 2rem; min-width: 1.6em; min-height: 1.6rem; background: url(../img/ico_arrow_down.svg) no-repeat 50%; background-size: 2.1rem;} #header .head-gnb .active .one-depth::after {transform: rotate(-180deg);} /*#header .head-gnb .li .one-depth:not(.active):hover {color: var(--secondary); border-color: var(--secondary); background-color: var(--white);}*/ #header .head-gnb .li:hover .one-depth, #header .head-gnb .li.active .one-depth {background-color: var(--secondary-2); color: var(--white);} #header .head-gnb .li:hover .one-depth::after, #header .head-gnb .li.active .one-depth::after {background-image: url(../img/ico_arrow_down_w.svg); background-size: inherit; max-width: 1.6rem; min-height: 1.6rem;} #header .head-gnb .li:hover .one-depth::before, #header .head-gnb .li.active .one-depth::before {transform: scaleX(1);} #header .head-gnb .li:hover .one-depth + .two-depth-wrap, #header .head-gnb .li.active .one-depth + .two-depth-wrap {background-color: var(--secondary-2);} #header .head-gnb .li:hover .one-depth + .two-depth-wrap .two-depth a, #header .head-gnb .li.active .one-depth + .two-depth-wrap .two-depth a {color: var(--white); font-weight: 500;} #header .head-gnb .li.active .one-depth + .two-depth-wrap .two-depth a:focus {outline-color: var(--white);} #header .head-gnb .li.active .one-depth::after {transform: rotate(-180deg);} /* header > gnb > two-depth(메뉴 한번에 보이게) */ #header .two-depth-wrap {display: none; min-width: 21rem; position: absolute; top: 5.7rem; grid-template-columns: repeat(1 , 1fr); gap: var(--spacer5); width: inherit; min-height: 29rem; padding: var(--spacer5) var(--spacer2) !important;} #header .two-depth-wrap a:hover {background-color: transparent;} #header .two-depth-wrap a:focus {outline-width: 0.2rem;} #header .two-depth-wrap > li {display: flex; align-items: normal; flex-direction: column; flex: 1; gap: var(--spacer2); width: 100%; height: auto; min-height: 3rem; transition: var(--transition-3); color: var(--white);} #header.is-open {z-index: 3;} #header.is-open + #container .grid-map {z-index: 0;} #header.is-open .head-gnb::after {transform: translateY(0);} #header.is-open .two-depth-wrap {display: grid; width: 100%;} #header.is-open .li.on > .two-depth {display: grid; opacity: 1;} #header.is-open .li.on > .two-depth::before {transform: translateY(0); z-index: 0;} #header .two-depth-wrap .two-depth-tit {} #header .two-depth-wrap .two-depth-tit .btn-txt {display: inline-flex; height: auto; padding: 0 !important; font-size: var(--fz-title-md); font-weight: 700; color: var(--white);} #header .two-depth-wrap .two-depth-tit.active a {color: var(--secondary); background-color: var(--white);} #header .two-depth-wrap .two-depth {display: grid; gap: var(--spacer3);} #header .two-depth-wrap .two-depth a {display: inline-flex; align-items: center; flex-direction: row; gap: var(--spacer2); position: relative; padding: 0 var(--spacer1); border-radius: var(--rd-2); font-weight: 300; color: #3E3E3E; line-height: 1.2; font-size: var(--fz-body-sm);} #header .two-depth-wrap .two-depth li.active a, #header .two-depth-wrap .two-depth a:hover {text-decoration: underline;} #header .two-depth-wrap .two-depth li a::before {display: none; content: ''; position: absolute; top: 0.8rem; left: 0; width: 0.3rem; height: 0.3rem; background-color: var(--white); border-radius: var(--rd-4);} #header .three-depth {display: none;} #header .three-depth li.active a {text-decoration: underline; text-underline-position: under; color: var(--primary); font-weight: 500;} /* header > gnb > two-depth(메뉴 하나씩 보이게) #header .two-depth-wrap {display: none; position: absolute; top: calc(100% + 0.1rem); left: 0; width: 100%; min-height: 23rem; background-color: var(--white); z-index: 1;} #header .two-depth-wrap.is-open {display: block;} #header .two-depth-inner01 {display: flex; position: relative; background-color: var(--secondary-5);} #header .two-depth-inner01 .two-depth-menu-list {display: none; align-items: normal; justify-content: flex-start;flex-direction: column; position: relative; top: 0; left: 0; gap: var(--spacer4); width: 26.7rem; padding: var(--spacer4) 0;} #header .two-depth-inner01 .two-depth-menu-list .ul .sm {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2);font-weight: 700; width: 100%; height: 5.6rem; padding: 0 var(--spacer6);} #header .two-depth-inner01 .two-depth-menu-list .ul .sm.active {color: var(--secondary); background-color: var(--white);} #header .two-depth-inner02 {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacer5); flex: 1; background-color: var(--white); padding: var(--spacer5) 0 var(--spacer10);} #header .two-depth-inner02 a {border-radius: var(--btn-rd-lg);} #header .two-depth-inner02.type1 {padding: var(--spacer4) 0 var(--spacer10); border: 0;} #header .two-depth-inner02.type1 .two-detph-inner03 {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: var(--spacer4); padding: 0;} #header .two-detph-inner03 {display: flex;} #header .two-detph-inner03.active {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: var(--spacer6);} #header .sub-ban {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer4); padding: var(--spacer3) var(--spacer4); border-radius: var(--rd-8); background: var(--gray-5);} #header .two-depth {display: flex; align-items: normal; justify-content: flex-start; gap: var(--spacer2); flex-direction: column; flex: 1;} #header .two-depth .two-depth-tit {display: inline-flex; min-height: 4rem; padding: 0 var(--spacer2) !important; font-size: var(--fz-title-md); font-weight: 700; line-height: 1.2;} #header .three-depth {display: flex; flex-direction: column; grid-gap: var(--spacer1) var(--spacer4); padding-left: var(--spacer2);} #header .three-depth a {display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer1); position: relative; padding: var(--spacer2) var(--spacer3); border-radius: 0.8rem; font-weight: 500;} #header .three-depth li a::before {content: ''; position: absolute; top: 48%; left: 0.2rem; width: 0.4rem; height: 0.4rem; background-color: var(--gray-70); border-radius: var(--rd-full); transform: translateY(-50%);} #header .three-depth p {padding: var(--spacer2);} #header .three-depth.type1 {grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: var(--spacer10) var(--spacer14);} #header .three-depth.type1 li {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; padding: 0;} #header .three-depth.type1 li .tit {font-size: var(--fz-body-lg); font-weight: 700;} #header .three-depth.type1 li .tit a {height: 4rem; padding: 0 var(--spacer2);} #header .three-depth.type1 li .txt {color: var(--gray-70); padding: var(--spacer4) var(--spacer2) 0; margin-top: var(--spacer1); border-top: 0.1rem solid var(--gray-30);} #header .four-depth {display: grid; gap: var(--spacer1);} #header .four-depth li {} #header .four-depth li a {position: relative; padding: var(--spacer1) var(--spacer5); font-size: var(--input-fz-sm); font-weight: 300;} #header .four-depth li a:focus {} #header .four-depth li a::before {content: ''; position: absolute; top: 50%; left: 1.2rem; width: 0.2rem; height: 0.2rem; background-color: var(--gray-70); transform: translateY(-50%);}*/ /* header > m-gnb */ #header .m-gnb-wrap {display: none; position: fixed; top: 0; right: -100%; width: 100%; height: 100%; transition: right ease 0.5s 0.1s; z-index: 10;} #header .m-gnb-wrap.is-open {right: 0;} #header .m-gnb-wrap.is-open::after {display: block; opacity: 1; z-index: -1;} #header .m-gnb-wrap .m-gnb-in {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: absolute; right: 0; top: 0; min-width: 40rem; height: 100%; background-color: var(--white);} #header .m-gnb-wrap .m-gnb-top-etc {display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row;} #header .m-gnb-wrap .m-gnb-top-etc .etc-ul {display: flex;} #header .m-gnb-wrap .m-gnb-top-etc .etc-ul li {display: flex; align-items: center; justify-content: flex-start; flex-direction: row;} #header .m-gnb-wrap .m-gnb-top-etc .etc-ul li:not(:first-child) {margin-left: var(--spacer4);} #header .m-gnb-wrap .m-gnb-top-etc .etc-ul li:not(:first-child)::before {content: ''; display: inline-flex; width: 0.1rem; height: 1.6rem; margin-right: var(--spacer4); background-color: var(--gray-30);} header .m-gnb-wrap .m-gnb-top-etc .etc-ul li button {} #header .m-gnb-wrap .ico-close {width: 2.4rem; height: 2.4rem; background-image: url(../img/ico_close_24.svg);} #header .m-gnb-wrap .m-gnb-head {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: sticky; top: 0; left: 0; gap: var(--spacer4); padding: var(--spacer5) var(--spacer6) var(--spacer4);} #header .m-gnb-wrap .m-gnb-head .m-gnb-login {display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer4);} #header .m-gnb-wrap .m-gnb-head .m-gnb-login .name {font-weight: 700;} #header .m-gnb-wrap .m-gnb-top-scroll {display: none; height: 0; overflow: hidden;} #header .m-gnb-wrap::after {display: none; content: ''; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.5s 0.1s;} #header .m-gnb-wrap .m-gnb-menu {display: flex; position: relative; background-color: var(--secondary-5);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; flex: 1; border-left: 0.1rem solid var(--gray-20); background-color: var(--white);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl {padding: var(--spacer4) var(--spacer6);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl:not(:first-child) {border-top: 0.1rem solid var(--gray-20);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl .dt {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; position: relative; font-weight: 700; height: 6.4rem; margin-bottom: var(--spacer2); border-bottom: 0.1rem solid var(--gray-20);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl .sm {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; height: 5rem; padding: 0 var(--spacer2); border-radius: 0.8rem; font-weight: 600;} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl .sm:hover {background-color: var(--secondary-5);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl .sm:active {border-radius: var(--rd-6); background-color: var(--secondary-10); transition: var(--transition-1);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl .three-depth .subm {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer1); height: 4.3rem; padding: var(--spacer3) var(--spacer4); border-radius: 0.8rem; font-size: var(--fz-body-sm);} #header .m-gnb-wrap .m-gnb-menu .two-depth-inner02 .dl .three-depth .subm::before {content: '•';} #header .m-gnb-wrap .m-gnb-body {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; flex: 1; overflow-y: auto; scroll-behavior: smooth; border-top: 0.1rem solid var(--gray-20);} #header .m-gnb-wrap .m-gnb-body.type1 {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; background-color: var(--white); border: 0;} #header .m-gnb-wrap .m-gnb-body-btm {display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: var(--spacer2); padding: var(--spacer4) var(--spacer6); border-top: 0.1rem solid var(--gray-20);} #header .m-gnb-wrap .m-gnb-in.type1.is-active .m-gnb-top-scroll {display: block;} #header .m-gnb-wrap .m-gnb-in.type1 .m-gnb-head {border-bottom: 0.4rem solid var(--gray-20);} #header .m-gnb-wrap .m-gnb-menu.type1 .two-depth-inner02 .dl {padding: var(--spacer4) 0;} #header .m-gnb-wrap .m-gnb-menu.type1 .two-depth-inner02 .dl:not(:last-child) {border-bottom: 0.4rem solid var(--gray-20);} #header .m-gnb-wrap .m-gnb-menu.type1 .two-depth-inner02 .dl .dt {font-size: var(--fz-body-lg); height: 5.6rem; padding: 0 var(--spacer6);} #header .m-gnb-wrap .m-gnb-menu.typst1 .two-depth-inner02 .dl .sm {padding: 0 var(--spacer6);} #header .m-gnb-wrap .m-gnb-menu.type1 .two-depth-inner02 .dl .sub-ban {padding: var(--spacer4) var(--spacer6) 0;} #header .m-gnb-wrap .m-gnb-menu.type1 .two-depth-inner02 .dl .sub-ban .ban-in {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2); padding: 0 var(--spacer4); border-radius: 0.8rem; background-color: var(--gray-5);} #header .m-gnb-wrap .m-gnb-menu.type1 .two-depth-inner02 .dl .subm {padding: var(--spacer3) var(--spacer10);} #header .m-gnb-wrap .four-depth-body {} #header .m-gnb-wrap .four-depth-body li {} #header .m-gnb-wrap .four-depth-body li a {display: flex; padding: var(--spacer2) var(--spacer13); font-size: var(--input-fz-sm); color: var(--gray-60);} #header .m-gnb-wrap .four-depth-body li a::before {content: '+'; margin-right: var(--spacer1); font-weight: 300;} /* 사이트맵 */ .sitemap {display: none; position: absolute; top: 3vw; left: 50%; max-width: 124rem; width: 100%; min-height: 78rem; background-color: var(--white); transition: var(--transition-5); border-radius: var(--rd-20); transform: translate(-50%, 0%); box-shadow: var(--shadow-40); z-index: 5; opacity: 1;} .sitemap:focus {outline: 0.4rem solid var(--primary); outline-offset: -0.6rem; transition: var(--transition-2); outline: none;} .sitemap.active {display: flex;} .sitemap a {justify-content: flex-start; align-items: center; min-height: 3.2rem; height: auto; color: var(--gray-80);} .sitemap ul {flex-direction: column;} .sitemap .inner {display: flex; justify-content: flex-start !important; flex-direction: column; gap: var(--spacer8); padding: var(--spacer10) var(--spacer6) var(--spacer7) !important;} .sitemap .title {text-align: center; font-size: var(--fz-title-xlg); color: var(--gray-90); font-weight: 400;} .sitemap .title .btn-close {position: absolute; top: 3.5rem; right: 3.5rem; width: 2.3rem; height: 2.3rem; background: url(../img/ico_close.svg) no-repeat 100%; background-size: contain; text-indent: -9999px;} .sitemap .title .btn-close:hover {cursor: pointer;} .sitemap .title .btn-close:focus {outline-offset: 0.4rem; border-radius: var(--rd-2); outline-color: var(--primary-50);} .sitemap .full-menu {display: grid; grid-template-columns: repeat(auto-fit, minmax(27.5rem, auto)); grid-column-gap: var(--spacer2); grid-row-gap: var(--spacer9); width: 100%; height: 100%; max-height: 70rem; overflow-y: scroll;} .sitemap .full-menu > li {position: relative; flex-direction: column; align-items: flex-start; height: 100%;} .sitemap .full-menu > li::before {content: ''; position: absolute; top: 6rem; left: 0; right: 0; width: 100%; height: 0.1rem; background-color: var(--whiteOpct-02);} .sitemap .full-menu > li:not(:last-of-type)::after {content: ''; position: absolute; top: 4.5rem; right: -0.5rem; width: 0.1rem; height: 92%; background-color: #EDEDED;} .sitemap .one-depth {display: flex; align-items: center; justify-content: center; top: 0; min-height: 4rem; background-color: #173A73; font-size: var(--fz-body-sm); color: var(--white); font-weight: 400; z-index: 1;} .sitemap .one-depth:focus {outline-offset: -0.4rem; outline-color: var(--white); border-radius: 0;} .sitemap .one-depth::after, .sitemap .row .one-depth:hover::after, .sitemap .row .one-depth:focus::after {bottom: -1px !important; height: 0.1rem !important; background-color: var(--white) !important;} .sitemap .two-depth {display: grid; margin-top: var(--spacer2); padding: var(--spacer2) var(--spacer5);} .sitemap .two-depth > li {display: grid; align-items: flex-start;} .sitemap .two-depth > li > a {display: flex; position: relative; width: auto; min-height: 4.5rem; padding: 0 var(--spacer6); font-size: var(--fz-body-sm); font-weight: 700; line-height: 1.5;} .sitemap .two-depth > li > a:hover::after, .sitemap .row .two-depth a::after, .sitemap .row .two-depth a:focus::after {background-color: var(--white) !important;} .sitemap .two-depth > li > a:focus {outline-offset: -0.4rem;} .sitemap .two-depth a:focus {outline-color: var(--primary-50);} .sitemap .two-depth a::before, .circle ~ li::before {content: ''; position: absolute; top: 50%; left: 0.9rem; width: 0.4rem; height: 0.4rem; border-radius: var(--rd-8); background-color: var(--gray-30); transform: translateY(-60%);} .sitemap .two-depth > li:not(:last-of-type) {border-bottom: 0.1rem solid #EDEDED;} .sitemap .two-depth .tit:focus {outline-color: var(--white);} .sitemap .three-depth {padding: 0 var(--spacer3) var(--spacer3);} .sitemap .three-depth li {} .sitemap .three-depth li a {display: flex; position: relative; padding: 0 var(--spacer4); font-size: var(--fz-body-sm);} .sitemap .three-depth a::before {top: 1.5rem; left: 0; width: 0.7rem; height: 0.2rem; border-radius: 0;} .sch-input {display: flex; position: relative;} .sch-input .form-control {padding: 0 var(--spacer12) 0 var(--spacer4);} .sch-input .form-control ~ .ico-sch {width: 2.4rem; height: 2.4rem;} .sch-input .ico-sch {position: absolute; top: 50%; right: var(--spacer4); transform: translateY(-50%);} .form-control:placeholder-shown {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .form-control.md {height: 4.8rem; padding: 0 var(--input-px-md); border-radius: var(--input-rd-md); font-size: var(--input-fz-md);} /* container > breadcrumb */ #container > .inner {display: flex; flex-direction: row; gap: var(--spacer12); min-height: 70rem; padding: var(--spacer10) var(--spacer5) var(--spacer30);} #container .in-between .contents .breadcrumb-wrap {} #container .in-between .contents .breadcrumb-wrap .breadcrumb {padding: 0;} /* breadcrumb */ .breadcrumb-wrap {display: flex; justify-content: center; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row;} .breadcrumb-wrap .breadcrumb {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2); width: 100%; padding: 0 var(--spacer1);} .breadcrumb-wrap .breadcrumb li {display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2); font-size: 1.5rem;} .breadcrumb-wrap .breadcrumb li:not(:last-child)::after {content: ''; display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; margin-bottom: 0.2rem; background: url(../img/ico_arrow_right.svg) no-repeat; background-size: contain;} .breadcrumb-wrap .breadcrumb li .txt {display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; line-height: 1.1;} .breadcrumb-wrap .breadcrumb li span.txt {color: var(--gray-90); border-color: var(--gray-90);} .breadcrumb-wrap .breadcrumb .home {gap: var(--spacer1);} .breadcrumb-wrap .breadcrumb .home::before {content: ''; display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; width: 1.2rem; height: 1.2rem; margin-bottom: 0.1rem; background: url(../img/ico_bread_home.svg) no-repeat; background-size: contain;} /* container > lnb */ #lnb {width: 100%; max-width: 29rem;} .lnb-wrap {position: sticky; top: 2rem; width: 100%; min-width: 29rem; min-height: 49rem; padding: var(--spacer4) var(--spacer5) var(--spacer5); border: 0.1rem solid var(--gray-30); border-radius: var(--rd-12); transition: var(--transition-4);} div:not(.admin) .lnb .lnb-tit {} div:not(.admin) .lnb .one-depth {display: flex; justify-content: center; align-items: center; position: relative; min-height: 10rem; font-size: var(--fz-title-lg); border-bottom: 0.4rem solid transparent; border-image: url(../img/lnb_tit_borderline.svg) 30; background: url(../img/lnb_tit_bg.svg) no-repeat; background-size: cover; font-weight: 500; color: var(--white);} div:not(.admin) .lnb .two-depth {display: grid;} div:not(.admin) .lnb .two-depth > li {display: grid;} div:not(.admin) .lnb .two-depth > li:not(.active):last-of-type .two-depth-tit, div:not(.admin) .lnb .two-depth > li:not(.active):last-of-type a {border-bottom: 0;} div:not(.admin) .lnb .two-depth li .two-depth-tit span, div:not(.admin) .lnb .two-depth li .two-depth-tit a, div:not(.admin) .lnb .two-depth li .two-depth-tit::before {transition: var(--transition-2);} div:not(.admin) .lnb .two-depth .btn-accordion {width: 2rem; height: 2rem; background: url(../img/ico_arr_bottom.svg) no-repeat center; text-indent: -9999px;} div:not(.admin) .lnb .two-depth li .btn-accordion:focus {outline: none;} div:not(.admin) .lnb .two-depth li.active .btn-accordion {background: url(../img/ico_arr_top.svg) no-repeat center;} div:not(.admin) .lnb .two-depth li.active .two-depth-tit {position: relative; padding-left: var(--spacer5); color: var(--secondary); font-weight: 700;} div:not(.admin) .lnb .two-depth li.active .two-depth-tit::before {content: ''; position: absolute; left: 1rem; width: 0.6rem; height: 0.2rem; background-color: var(--secondary); border-radius: var(--rd-20); z-index: 1;} div:not(.admin) .lnb .two-depth-tit {border-bottom: 0.1rem solid var(--gray-30);} div:not(.admin) .lnb .two-depth-tit, .lnb .two-depth-tit a {display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; min-height: 6rem; font-size: var(--fz-title-sm); padding: 0 var(--spacer3); font-weight: 300; line-height: 1; letter-spacing: -0.2rem; color: #3E3E3E;} div:not(.admin) .lnb .two-depth-tit a {} div:not(.admin) .lnb .two-depth-tit span {line-height: 1.1;} div:not(.admin) .lnb .three-depth {display: none; position: relative; gap: calc(var(--spacer1) + 0.1rem); padding: var(--spacer4); background-color: #F6F7F8; border-bottom: 0.1rem solid #5C5C5C;} div:not(.admin) .lnb .three-depth::before {display: none; content: ''; position: absolute; width: 0.1rem; height: 100%; background-color: var(--gray-30);} div:not(.admin) .lnb .three-depth li {line-height: 1;} div:not(.admin) .lnb .three-depth li a {position: relative; display: flex; align-items: center; min-height: 3rem; padding: var(--spacer1) var(--spacer4); border-radius: var(--rd-8); font-size: var(--fz-body-sm); line-height: 1.4; font-weight: 300; color: #3E3E3E;} div:not(.admin) .lnb .three-depth li a:focus {outline-color: var(--primary-50);} div:not(.admin) .lnb .three-depth li a::before {content: ''; position: absolute; top: 1.2rem; left: 0.5rem; width: 0.3rem; height: 0.3rem; background-color: var(--secondary); border-radius: var(--rd-full);} div:not(.admin) .lnb .three-depth li.active a {color: var(--secondary); font-weight: 400; text-decoration: underline;} /* 메인 첫번째 슬라이드 */ /* .swiper {position: relative; width: 100%; max-width: 98.8rem; min-height: 32.7rem; z-index: 0;} .swiper-wrapper {display: flex; position: relative; width: 100%; height: 100%; z-index: 1; transition-property: transform; box-sizing: content-box; z-index: 0;} .swiper-slide {display: block; flex-shrink: 0; width: 100% !important; height: 100%; min-height: 38.7rem; position: relative; transition-property: transform;} .swiper-slide .thumb {display: flex; max-height: 38.7rem; overflow: hidden;} .swiper-slide .thumb img {width: 100%; height: 100%;} .swiper-slide .slide-tit-box {display: flex; align-items: center; justify-content: space-between; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; min-height: 6.7rem; padding: 0 var(--spacer7); background-color: rgba(2, 47, 80, 0.89);} .swiper-slide .slide-tit-box .slide-tit {display: flex; align-items: center; gap: var(--spacer8); color: var(--white);} .swiper-slide .slide-tit-box .slide-tit .category {color: #6AA6D0;} .swiper-slide .slide-tit-box .slide-tit .tit {font-size: var(--fz-title-lg);} .swiper-slide .slide-tit-box .date {color: #9A9A9A; font-weight: 300;} .slider .row {display: grid; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 50%; min-height: auto; height: 100%; padding-bottom: 0; transform: translateX(-50%); z-index: 10;} .slider .heading {display: flex; flex-direction: column; position: absolute; top: 44%; left: 0; width: auto !important; margin-bottom: calc(var(--spacer1)*4); color: var(--white); text-align: left; box-sizing: content-box; transform: translateY(-50%);} .slider .heading br {display: none;} .slider .heading .tit-l {justify-content: flex-start; font-size: calc(var(--font20) + 3vw); color: var(--white); line-height: 1.2; font-weight: 500; animation-delay: 0.5s;} .slider .heading .desc {display: block; margin-top: calc(var(--spacer1)*3 + 0.3rem); font-size: calc(var(--font20)*1.4); color: var(--white); font-weight: 300; line-height: 1; animation-delay: 1s;} .slider .heading .hashtag {display: none; flex-wrap: wrap; gap: calc(var(--spacer1) + 0.4rem); margin-top: calc(var(--spacer1)*4); font-size: calc(var(--font20)); color: var(--white); animation-delay: 1.6s;} .slider .heading .hashtag li {width: auto;} .slider .heading .hashtag li a {width: auto; padding: calc(var(--spacer1)/2) calc(var(--spacer1)*1.4); border: var(--bdWhite2); border-radius: calc(var(--radius)*10); color: var(--white); font-size: var(--font16); font-weight: 200;} .slider .heading .btn {width: fit-content; min-width: 20rem; min-height: 5rem; margin-top: calc(var(--spacer1) + 3vw); background-color: var(--white); color: var(--black) !important; font-size: var(--font20); font-weight: 500; animation-delay: 1.8s;} .slider .heading .btn:hover {color: var(--white) !important; background: var(--blue_04) !important;} */ /* slide > pagination control */ /*.swiper-navigation {display: flex; justify-content: center; position: absolute; left: 50%; bottom: -6.3rem; width: fit-content; box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.025); transform: translateX(-50%); z-index: 1;} .swiper-navigation .swiper-button-play {display: none;} .swiper-navigation button:hover {cursor: pointer;} .swiper-navigation button::after {pointer-events: none;} .swiper-navigation .swiper-pagination-bullet {width: 1rem; height: 1rem; margin: 0 var(--spacer1); background-color: var(--gray-50); border-radius: var(--rd-10);} .swiper-navigation .swiper-pagination-bullet:focus {outline-offset: 0.3rem; outline-color: var(--primary-50);} [class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 5rem; height: 5rem; border: 0.1rem solid var(--gray-20); background-color: var(--white);} [class^=swiper-button-]:not(:last-of-type) {border-right: 0;} [class^=swiper-button-]::after {content: ''; width: 2.6rem; height: 2.6rem; background-repeat: no-repeat; font-size: 0 !important;} .swiper-button-prev, .swiper-button-next {} .swiper-button-prev {} .swiper-button-prev::after {background-image: url(../img/ico_swiper_prev.svg); background-position: center; background-size: contain;} .swiper-button-prev.swiper-button-disabled {background-color: var(--gray-10); opacity: 1;} .swiper-button-prev.swiper-button-disabled::after {background-image: url(../img/ico_swiper_prev_gray.svg);} .swiper-button-next {} .swiper-button-next::after {background-image: url(../img/ico_swiper_next.svg); background-position: center; background-size: contain;} .swiper-button-next.swiper-button-disabled {background-color: var(--gray-10); opacity: 1;} .swiper-button-next.swiper-button-disabled::after {background-image: url(../img/ico_swiper_next_gray.svg);} .swiper-button-stop::after {background-image: url(../img/ico_swiper_stop.svg); background-size: contain;} .swiper-button-play::after {background-image: url(../img/ico_swiper_play.svg); background-size: contain;} .swiper-button-more {background-color: var(--secondary-2);} .swiper-button-more:hover {background-color: #3172a3;} .swiper-button-more::after {background-image: url(../img/ico_swiper_more.svg); background-size: contain; width: 1.6rem; height: 1.6rem;}*/ #section {min-height: 70vh;} /* 슬라이드 ver2 */ .contents-swiper-in {display: flex; justify-content: center; position: relative; width: 100%; height: 100%;} .swiper-slide, .swiper-slide a:not(.swiper-button-more) {display: flex; width: 100%; height: 100%;} .swiper-wrapper {display: flex; position: relative; height: 100%; z-index: 1; transition-property: transform; /*transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);*/ box-sizing: content-box; z-index: 0;} .indexSwiper {position: relative; width: 100%; min-height: 43.6rem; z-index: 0;} .indexSwiper .swiper-slide {display: block; min-width: 0; flex-shrink: 0; height: 100%; position: relative; transition-property: transform; box-sizing: border-box;} .indexSwiper .swiper-slide {display: flex; justify-content: center; align-items: center; height: 100%;} .indexSwiper .swiper-slide::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.4));} .indexSwiper .swiper-slide .thumb {display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1;} .indexSwiper .swiper-slide .thumb img {width: 100%; height: auto; max-width: 100%; object-fit: cover;} .indexSwiper .swiper-slide .slide-tit-box {display: flex; flex-direction: column; gap: var(--spacer20) 0; justify-content: space-between; max-width: 120rem; width: 100%; height: 100%; padding: var(--spacer14) var(--spacer7); margin: 0 auto; z-index: 2;} .indexSwiper .swiper-slide .slide-tit-box a {} .indexSwiper .swiper-slide .slide-tit-box a:hover {background-color: transparent;} .indexSwiper .swiper-slide .slide-tit-box .slide-tit {display: grid; align-items: center; gap: var(--spacer4); max-width: 48rem; color: var(--white); z-index: 1;} .indexSwiper .swiper-slide .slide-tit-box .slide-tit .yellow {display: block; color: #FFC300;} .indexSwiper .swiper-slide .slide-tit-box .slide-tit .tit {font-size: var(--fz-title-xxxxlg); line-height: 1.2; font-weight: 500;} .indexSwiper .swiper-slide .slide-tit-box .slide-tit .desc {margin-bottom: 0; line-height: 1.4;} .indexSwiper .swiper-slide .slide-tit-box .more {max-width: 15.8rem; width: 100%; min-height: 4.5rem; background-color: #FF9500; border-radius: var(--rd-30); color: var(--white); border: 0;} .indexSwiper .swiper-slide .slide-tit-box .more:hover {background-color: #F4770B;} .swiper-navigation-wrap {position: absolute; top: 50%; left: 50%; bottom: 0; max-width: 144rem; width: 100%; height: min-content; margin: 0 auto; transform: translate(-50%, -50%); z-index: 0;} .swiper-navigation-wrap02 {display: flex; gap: var(--spacer4); position: absolute; top: 0; right: 0;} .swiper-navigation-wrap02 .swiper-pagination {line-height: 1; font-weight: 600;} .swiper-navigation-wrap02 .swiper-pagination .swiper-pagination-current {color: #009FCA;} .swiper-navigation-wrap02 .swiper-pagination span {line-height: 1;} .swiper-navigation-wrap02 div {display: flex; gap: var(--spacer1); position: static;} .swiper-navigation-wrap02 [class^=swiper-button-] {background-color: var(--white); border: 0.1rem solid #E0E0E0; border-radius: var(--rd-30);} .swiper-navigation-wrap02 [class^=swiper-button-]::after {width: 0.8rem; height: 0.8rem;} .swiper-navigation-wrap02 .swiper-button-prev::after {background-image: url(../img/ico_swiper_prev_b.svg); background-position: center; background-size: contain;} .swiper-navigation-wrap02 .swiper-button-next::after {background-image: url(../img/ico_swiper_next_b.svg); background-position: center; background-size: contain;} .swiper-navigation-wrap02 .swiper-button-stop::after {background-image: url(../img/ico_swiper_stop_b.svg); background-position: 50% 50%; background-size: contain;} .swiper-navigation-wrap02 .swiper-button-play::after {background-image: url(../img/ico_swiper_play_b.svg); background-position: 70% 50%; background-size: contain;} .swiper-pagination {display: flex; align-items: center; position: absolute; top: 9rem; left: 14.7rem; min-height: 2rem; width: 100%; max-width: 8.8rem;} .swiper-pagination-bullet {display: flex; width: 1rem; height: 1rem; margin: 0 var(--spacer1); background-color: var(--gray-50); border-radius: var(--rd-10);} .swiper-pagination-bullet:hover {cursor: pointer;} .swiper-pagination-bullet-active {width: 1.2rem; height: 1.2rem; background-color: #FC9300; border: 0.3rem solid var(--gray-90); outline: 0.2rem solid #FC9300;} .indexSwiper .swiper-navigation {display: flex; justify-content: center; position: absolute; top: 8.7rem; left: 28rem; width: fit-content; box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.025); transform: translateX(-50%); z-index: 1;} .indexSwiper .swiper-navigation button {border-radius: var(--rd-2);} .indexSwiper .swiper-navigation button:hover {cursor: pointer;} .indexSwiper .swiper-navigation button::after {pointer-events: none;} .indexSwiper .swiper-navigation .swiper-pagination-bullet:focus {outline-offset: 0.3rem; outline-color: var(--primary-50);} .swiper-navigation .swiper-button-play {display: none;} .indexSwiper .swiper-navigation2 {display: flex; justify-content: space-between;} .indexSwiper .swiper-navigation2 [class^=swiper-button-] {width: 9.4rem; height: 9.4rem; border-radius: var(--rd-full); border: 0.1rem solid rgba(255,255,255,0.3);} .indexSwiper .swiper-navigation2 .swiper-button-prev::after {width: 2.2rem; height: 2.2rem; background-image: url(../img/ico_swiper_prev2_w.svg); background-position: center; background-size: contain;} .indexSwiper .swiper-navigation2 .swiper-button-next::after {width: 2.2rem; height: 2.2rem; background-image: url(../img/ico_swiper_next2_w.svg); background-position: center; background-size: contain;} [class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 2.4rem; height: 2.4rem;} [class^=swiper-button-]:not(:last-of-type) {/*border-right: 0;*/} [class^=swiper-button-]::after {content: ''; width: 1.3rem; height: 1.3rem; background-repeat: no-repeat; font-size: 0 !important;} [class^=swiper-button-]:hover {background-color: rgba(255,255,255,0.25);} .swiper-button-prev, .swiper-button-next {} .swiper-button-prev::after {background-image: url(../img/ico_swiper_prev_w.svg); background-position: center; background-size: contain;} .swiper-button-next::after {background-image: url(../img/ico_swiper_next_w.svg); background-position: center; background-size: contain;} .swiper-button-stop::after {background-image: url(../img/ico_swiper_stop_w.svg); background-position: 60% 50%; background-size: contain;} .swiper-button-play::after {background-image: url(../img/ico_swiper_play_w.svg); background-position: 70% 50%; background-size: contain;} .swiper-button-prev.swiper-button-disabled {background-color: var(--gray-10); opacity: 1;} .swiper-button-prev.swiper-button-disabled::after {background-image: url(../img/ico_swiper_prev_gray.svg);} .swiper-button-next.swiper-button-disabled {background-color: var(--gray-10); opacity: 1;} .swiper-button-next.swiper-button-disabled::after {background-image: url(../img/ico_swiper_next_gray.svg);} .swiper-button-more {display: inline-flex; gap: var(--spacer4); border: 1px solid red; z-index: 10;} .swiper-button-more:hover {background-color: #3172a3;} .swiper-button-more::after {background-image: url(../img/ico_swiper_more2.svg); background-size: contain; width: 1.7rem; background-position: center;} /* sub > visual-title */ .sub-visual-title {position: relative; display: flex; justify-content: center; align-items: center; min-height: 14vh; max-height: 14rem; padding: 0 calc(var(--spacer1)*3); /*aspect-ratio: 16/3.5; height: calc(40vw * (800 / 1560));*/ overflow: hidden;} .sub-visual-title::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.2); z-index: 1; mix-blend-mode: luminosity;} .sub-visual-title img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; animation: scaleUp 4s ease-in-out alternate both; z-index: 0;} .sub-visual-title .row {padding: 0 !important; z-index: 1;} .sub-visual-title .tit-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacer2); color: var(--white); font-weight: 200;} .sub-visual-title .tit {font-size: var(--fz-title-xlg); text-transform: uppercase; font-weight: 400;} .sub-visual-title .tit h2 .hide {display: none;} .sub-visual-title .tit p {font-size: var(--font22); font-weight: 200;} .sub-visual-title .heading {} .sub-visual-title + .row {flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: calc(var(--spacer1)*10) 0 calc(var(--spacer1)*25);} /* container > title */ .page-title-wrap.m0 {margin-bottom: 0;} .page-title-wrap {display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--spacer6); margin: var(--spacer6) 0 var(--spacer8); border-bottom: 0.4rem solid var(--secondary);} .page-title-wrap .btn-print {position: relative; min-width: 3.8rem; min-height: 3.8rem; border-radius: var(--rd-4); border: 0.1rem solid var(--gray-40); text-indent: -9999px; background: url(../img/ico_print.svg) no-repeat center;} .page-title-wrap .btn-print:focus {outline-offset: 0.4rem;} .page-title-wrap .txt {display: flex; justify-content: center; align-items: center; margin: var(--spacer15) 0 var(--spacer2); color: var(--gray-70); text-align: center; font-size: var(--fz-body-lg);} .page-title-wrap .txt strong {margin: 0 var(--spacer2);} .page-title-info {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacer5); min-height: 12.2rem; padding: var(--spacer10); margin-bottom: calc(var(--spacer22) + 0.2rem); border-radius: var(--rd-12); border: 0.3rem solid var(--gray-10);} .page-title-info .box .info {display: flex; flex-wrap: wrap; margin-bottom: var(--spacer2);} .page-title-info .box .info dt {position: relative; min-width: 8rem; font-weight: 700;} .page-title-info .box .info dt::after {content: ':'; margin: 0 var(--spacer1);} .page-title-info .box .info dd {font-weight: 400;} .page-title-info .box strong {color: var(--gray-60); font-weight: 300;} .page-title-info .btn {background-color: var(--primary-50); border-color: var(--primary-50);} .h-tit {min-height: 3.2rem; font-size: var(--fz-heading-sm); font-weight: 700; line-height: 1;} .h-tit-l {display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 2.5rem; padding-left: var(--spacer8); margin-bottom: var(--spacer7); font-size: var(--fz-heading-xsm); font-weight: 700; line-height: 1.3;} .h-tit-l:first-of-type {margin-top: var(--spacer15);} .h-tit-l:not(:first-of-type) {margin-top: var(--spacer15); padding-top: var(--spacer5);} .h-tit-l:not(:first-of-type)::before {top: 60%;} .h-tit-l::before {content: ''; position: absolute; top: 50%; left: 0; width: 1.6rem; height: 2.1rem; background: url(../img/tit-bullet.svg) no-repeat; background-size: contain; transform: translateY(-50%);} .h-tit-s {display: flex; align-items: center; font-size: var(--fz-title-md); font-weight: 600; line-height: 1.5; position: relative; padding-left: var(--spacer8); margin-bottom: var(--spacer4); color: var(--secondary);} .h-tit-s::before {content: ''; position: absolute; top: 0.9rem; left: 0.8rem; width: 1.2rem; height: 1.2rem; background: url(../img/tit-bullet2.svg) no-repeat; background-size: contain;} .h-tit-s.border {display: grid; justify-content: space-between; min-height: 2.85rem; padding: 0; border-radius: var(--rd-12); background-color: #E1EEFF; border: 0.1rem solid #C5D4EC; color: var(--secondary); overflow: hidden;} .h-tit-s.border span {display: flex; align-items: center; width: 100%; height: 100%; padding-right: var(--spacer5); font-size: var(--fz-title-sm); font-weight: 400; line-height: 1.3;} .h-tit-s.border b {display: inline-flex; align-items: center; min-height: 6.2rem; padding-right: var(--spacer5); padding-left: var(--spacer13); margin-right: var(--spacer5); min-width: 18.5rem; height: 100%; background-color: #1C70D7; color: var(--white);} .h-tit-s.border::before {top: 47%; left: 1.8rem; transform: translateY(-50%); width: 2.8rem; height: 3rem; background: url(../img/ico_electricbulb.svg) no-repeat 100%; background-size: contain;} .h-tit-s.border .btn-box {display: flex; border-radius: var(--rd-6); border: 0.1rem solid #C3C3C3; overflow: hidden;} .h-tit-s.border .btn-box button {min-width: 10rem; min-height: 3rem; color: #464C53; font-size: var(--fz-body-sm); font-weight: 400;} .h-tit-s.border .btn-box button.active {background-color: var(--secondary); color: var(--white); font-weight: 300;} .h-tit-s.border .btn-box button:focus {border-radius: var(--rd-6);} .h-tit-s.border .btn-box button:not(:last-of-type) {border-right: 0.1rem solid #C3C3C3;} .bold-tit-l {margin-bottom: var(--spacer8); font-size: var(--fz-title-xlg);} .bold-tit-s {display: inline-flex; align-items: center; margin-bottom: var(--spacer5);} .bold-tit-s ~ .table {margin-bottom: var(--spacer8) !important;} .tit-xs {margin-bottom: var(--spacer3); font-weight: 400;} .logo-box {margin-bottom: var(--spacer1);} .graph-grid-wrap {display: grid; gap: var(--spacer7); padding: 0 var(--spacer7) var(--spacer11); margin-bottom: var(--spacer10);} .graph-grid-wrap .tit-s {display: none; font-weight: 300;} .graph-grid-wrap .bold-tit-s {margin-bottom: 0; color: var(--secondary); font-size: var(--fz-title-xsm); line-height: 1.2;} .graph-grid-wrap .grid-wrap {display: grid; grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr)) !important; gap: var(--spacer8) var(--spacer4) !important;} .graph-grid-wrap .grid-wrap .graph-wrap {display: flex; flex-direction: column; gap: var(--spacer3); justify-content: space-between;} .graph-grid-wrap .grid-wrap .graph-wrap .graph {display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--spacer3); min-height: 25rem; padding: var(--spacer4); border: 0.1rem solid #E0E0E0; border-radius: var(--rd-12);} .graph-grid-wrap.col2 .grid-wrap {grid-template-columns: 1fr 2fr !important;} .graph-grid-wrap.col2 .graph-wrap {} .graph-grid-wrap .table-wrap {padding: 0;} .graph-grid-wrap .graph-table {display: flex; gap: var(--spacer2); flex-direction: column; align-items: center; justify-content: space-between; min-height: 25rem; height: 100%; padding: var(--spacer4); border: 0.1rem solid #E0E0E0; border-radius: var(--rd-12);} .graph-grid-wrap .graph-table .desc-list-wrap {display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacer3); min-width: 100%;} .graph-grid-wrap .graph-table .desc-list-wrap .desc-list .tit::before {display: none;} .graph-grid-wrap .graph-table .desc-list:last-of-type li:not(.tit) {color: var(--primary-60);} .graph-grid-wrap .graph-table .desc-list {display: flex; flex-direction: column; gap: var(--spacer1);} .graph-grid-wrap .graph-table .desc-list li {position: relative; font-size: var(--fz-body-sm); font-weight: 400;} .graph-grid-wrap .graph-table .desc-list li:not(.tit) {padding-left: var(--spacer3); font-size: var(--fz-body-xsm);} .graph-grid-wrap .graph-table .desc-list li:not(.tit)::before {content: ''; position: absolute; top: 0.9rem; left: 0.6rem; width: 0.2rem; height: 0.2rem; background-color: var(--gray-90); border-radius: var(--rd-20);} .graph-grid-wrap .graph-table .tit {display: flex; justify-content: center; align-items: center; padding-left: 0; min-height: 3.3rem; border-radius: var(--rd-6); background-color: #EAEAEA;} .graph-grid-wrap .graph-table .tit.blue {background-color: #E2EEFF;} .graph-grid-wrap .table {font-size: var(--fz-body-xsm);} .graph-grid-wrap .table th {height: 3rem; background-color: var(--secondary-5);} .graph-grid-wrap .table th, .graph-grid-wrap .table td {padding: var(--spacer2);} .graph-grid-wrap .table .desc-list {text-align: left;} .graph-grid-wrap .graph img {max-width: 23rem; width: 100%; min-height: 17.6rem;} .graph-grid-wrap .toggle-btn {position: relative; max-width: 13.2rem; height: 2.8rem; padding: 0 var(--spacer2) 0 var(--spacer7); border: 0.1rem solid #BFBFBF; border-radius: var(--rd-6); font-size: var(--fz-body-xsm); font-weight: 300;} .graph-grid-wrap .toggle-btn::before {content: ''; position: absolute; top: 50%; left: 0.6rem; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; background: url(../img/ico_graph.svg) no-repeat;} .tab-info div:last-of-type .graph-grid-wrap {padding-bottom: 0; margin-bottom: 0;} /* contents */ .contents {width: 100%;} .contents .img {display: flex; flex-wrap: wrap; margin-bottom: var(--spacer5);} .contents .img.pd {padding: 0 var(--spacer40); margin-bottom: 0 !important;} .contents .img:last-of-type {gap: var(--spacer2); margin-bottom: var(--spacer22);} .contents .img img {width: 100%;} .grid-wrap {display: flex; gap: var(--spacer12) var(--spacer16);} .grid-wrap .grid {display: flex; flex-direction: column; position: relative; max-width: 83.6rem; width: 100%; gap: var(--spacer3);} .grid-wrap .grid .tit {font-size: var(--fz-title-xlg);} .grid-wrap .reverse {display: flex; flex-direction: row-reverse;} .grid-wrap .reverse .c-thumb {align-items: center;} .grid-wrap .reverse .c-thumb img {height: fit-content;} .grid-thumb {display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--spacer7) var(--spacer8); margin-bottom: var(--spacer14);} .grid-thumb .desc:last-of-type {margin-bottom: 0;} .grid-thumb .thumb-info {width: 100%;} .grid-thumb .thumb-info .h-tit-s {padding-left: var(--spacer6);} .grid-thumb .thumb-info .h-tit-s:not(:first-of-type) {margin-top: var(--spacer10);} .grid-thumb .thumb-info .h-tit-s::before {left: 0;} .grid-thumb .img {justify-content: flex-start; gap: var(--spacer2); width: 100%; min-width: 45rem; max-width: 45rem; min-height: 30rem; margin-bottom: 0; overflow: hidden;} .grid-thumb .img img {width: 100%; min-height: 27rem; object-fit: cover; background-color: var(--gray-5);} .grid-thumb .img:last-of-type {margin-bottom: 0;} .grid-thumb.full {display: flex; flex-direction: column; align-items: center; gap: var(--spacer2); grid-template-columns: 1fr;} .grid-thumb.full .img {max-width: 73rem;} .grid-thumb.full .img img {} .grid-thumb.full .img + .img-comment {margin: 0;} .img-comment {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer1); margin: var(--spacer2) 0 var(--spacer8); font-size: var(--fz-body-xsm); color: #6D7882; font-weight: 300;} .img-comment a {display: inline-flex; justify-content: center; align-items: center; min-height: 2.2rem; background-color: var(--gray-20); padding: 0 var(--spacer2); border-radius: var(--rd-4); font-size: var(--fz-body-xsm); color: var(--gray-70);} .img .img-comment {margin: 0; font-size: var(--fz-body-xsm);} .conts-inner {} .conts-inner .grid-wrap {flex-wrap: wrap; grid-template-columns: auto; gap: 0 var(--spacer14);;} .conts-inner .grid-wrap .grid {} .article-bg {display: flex; align-items: center; justify-content: center; position: relative; min-height: 42rem; overflow: hidden;} .article-bg .inner {align-items: center; } .article-bg:first-of-type {min-height: 43.6rem;} .article-bg:first-of-type::before {content: ''; position: absolute; top: 0; left: 0; right: 0; /*min-height: 43.6rem;*/ height: 100%; background-color: #E0EAF1;} .article-bg:nth-of-type(2) {min-height: 48rem;} .article-bg:nth-of-type(2n+1) {background-color: var(--gray-5);} .ksdgs-wrap {align-items: center;} .ksdgs-wrap .h-tit-l {margin-bottom: var(--spacer5);} .ksdgs-wrap .ksdgs-tit {display: flex; align-items: center; justify-content: center; gap: var(--spacer2); position: relative; margin-bottom: var(--spacer7); font-size: var(--fz-title-xlg); color: #084470;} .ksdgs-wrap .ksdgs-tit::before {content: ''; display: flex; width: 4.6rem; height: 4.6rem; background: url(../img/k_sdgs_mini_logo.svg) no-repeat;} .ksdgs-wrap .ksdgs-tit span {color: #5F8EC6; font-weight: 400;} .ksdgs-wrap .ksdgs-box {display: grid; grid-template-columns: repeat(auto-fit, minmax(10%, auto)); gap: var(--spacer2); width: 100%;} .ksdgs-wrap .ksdgs-box li a {display: flex; align-items: center; justify-content: center; position: relative; min-width: inherit !important; width: 100%; height: 100%; padding: 0; transition: var(--transition-1); color: var(--gray-30); line-height: 1.3; text-align: center; z-index: 1;} .ksdgs-wrap .ksdgs-box li.active {border: 0;} .ksdgs-wrap .ksdgs-box li.active a {border: 0.5rem solid var(--gray-90);} .ksdgs-wrap .ksdgs-box li.active::after {display: none;} .ksdgs-wrap .ksdgs-box li a:hover {background-color: transparent; transform: scale(1.15); background-color: transparent; font-weight: 600; color: var(--white);} .ksdgs-wrap .ksdgs-box li a:hover::before {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); color: var(--white);} .ksdgs-wrap .ksdgs-box li img {width: 100%;} .ksdgs-wrap.tab {background-color: transparent; border-bottom: 0; z-index: 1; transition: var(--transition-3)} .ksdgs-wrap.tab ul {/*grid-template-columns: repeat(2, 1fr);*/} .ksdgs-wrap.tab li {border: 0;} .ksdgs-wrap.tab li a:hover {transform: scale(1);} #wrap.scroll-up .ksdgs-wrap.tab {top: 17rem;} #wrap.scroll-up .ksdgs-wrap.tab li a {min-width: 2rem; min-height: 2rem;} .ksdgs-wrap .ftbtn {perspective: 1000px;} .ksdgs-wrap .ftbtn .flip-inner {display: flex; width: 100%; height: 100%; justify-content: center; position: relative; transition: var(--transition-3); transform-style: preserve-3d; box-sizing: border-box;} .ksdgs-wrap .ftbtn:hover {position: relative; z-index: 1;} .ksdgs-wrap .ftbtn:hover .flip-inner {transform: rotateY(180deg);} .ksdgs-wrap .front {display: flex; justify-content: center; justify-items: center; align-items: center; cursor: pointer; font-size: 20px; font-weight: 900; color: #383838; backface-visibility: hidden;} .ksdgs-wrap .ftbtn a {display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; justify-content: center; position: relative; transition: 0.3s; transform-style: preserve-3d; -ms-transform-style: preserve-3d; box-sizing: border-box;} .ksdgs-wrap .ftbtn .info {display: grid; width: 100%; height: 100%; padding: var(--spacer9) var(--spacer9) var(--spacer6); color: var(--white);} .ksdgs-wrap .ftbtn .info .tit {display: flex; align-items: flex-start; gap: var(--spacer3); font-size: var(--fz-title-xlg); font-weight: 600; line-height: 1.2;} .ksdgs-wrap .ftbtn .info .tit b {font-family: 'pretendard'; min-width: fit-content; font-size: var(--fz-title-xxxlg); line-height: 1;} .ksdgs-wrap .ftbtn .info .desc {margin-bottom: 0; line-height: 1.7; font-weight: 600;} .ksdgs-wrap .ftbtn .info .icon {display: flex; align-items: flex-end; justify-content: space-between;} .ksdgs-wrap .ftbtn .info .icon img {display: flex; position: static; width: 100%; height: 100%; /*max-width: 10rem; max-height: 5.8rem;*/ z-index: 0;} .ksdgs-wrap .ftbtn .info .icon a {display: inline-flex; gap: var(--spacer3); position: relative; width: auto; min-height: 2rem; height: 3.8rem; padding: var(--spacer2); border-radius: var(--rd-4); color: var(--white); font-weight: 300;} .ksdgs-wrap .ftbtn .info .icon a::after {content: ''; display: block; width: 1rem; height: 1rem; background: url(../img/ico_swiper_next_w.svg) no-repeat; background-size: contain;} .ksdgs-wrap .ftbtn .info .icon a:hover {background-color: rgba(255,255,255,0.15); transform: scale(1);} .ksdgs-wrap .ftbtn .info .icon a:focus {outline: 0.6rem solid var(--black); outline-offset: -0.6rem; border-radius: 0;} .ksdgs-wrap .ftbtn:nth-of-type(1) .info {background-color: #EA1D2D;} .ksdgs-wrap .ftbtn:nth-of-type(2) .info {background-color: #D19F2A;} .ksdgs-wrap .ftbtn:nth-of-type(3) .info {background-color: #2D9A47;} .ksdgs-wrap .ftbtn:nth-of-type(4) .info {background-color: #C22033;} .ksdgs-wrap .ftbtn:nth-of-type(5) .info {background-color: #EF412A;} .ksdgs-wrap .ftbtn:nth-of-type(6) .info {background-color: #00ADD8;} .ksdgs-wrap .ftbtn:nth-of-type(7) .info {background-color: #FDB714;} .ksdgs-wrap .ftbtn:nth-of-type(8) .info {background-color: #8F1838;} .ksdgs-wrap .ftbtn:nth-of-type(9) .info {background-color: #F36E24;} .ksdgs-wrap .ftbtn:nth-of-type(10) .info {background-color: #E01A83;} .ksdgs-wrap .ftbtn:nth-of-type(11) .info {background-color: #F99D25;} .ksdgs-wrap .ftbtn:nth-of-type(12) .info {background-color: #CD8B2A;} .ksdgs-wrap .ftbtn:nth-of-type(13) .info {background-color: #48773C;} .ksdgs-wrap .ftbtn:nth-of-type(14) .info {background-color: #007DBB;} .ksdgs-wrap .ftbtn:nth-of-type(15) .info {background-color: #40AE49;} .ksdgs-wrap .ftbtn:nth-of-type(16) .info {background-color: #00558A;} .ksdgs-wrap .ftbtn:nth-of-type(17) .info {background-color: #1A3668;} .ksdgs-wrap .ftbtn:nth-of-type(18) .info {background-color: #EBEEF0;} .ksdgs-wrap .ftbtn:nth-of-type(9):hover .flip-inner .back {left: 0;} .ksdgs-wrap .ftbtn:last-of-type:hover .flip-inner {transform: rotateY(0);} .ksdgs-wrap .ftbtn:nth-of-type(n+10) .back {top: inherit; bottom: 0;} .ksdgs-wrap .front, .ksdgs-wrap .back {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; backface-visibility: hidden; box-sizing: border-box;} .ksdgs-wrap .back {display: flex; /*min-width: calc(14.845rem * 2 + 0.8rem); min-height: calc(14.845rem * 2 + 0.8rem);*/ position: absolute; top: 0; right: 0; width: 100%; height: 100%; transform: rotateY(-180deg); z-index: 1; pointer-events: auto; /* hover 시 작동하게 */} .ksdgs-wrap .back ul {display: grid; gap: var(--spacer2); z-index: 1;} .ksdgs-wrap .back li {position: relative; transition: var(--transition-2);} .ksdgs-wrap .back li::before {content: ''; position: absolute; top: 50%; left: -0.8rem; width: 0.3rem; height: 0.3rem; background-color: var(--white); border-radius: var(--rd-20); transform: translateY(-50%);} .ksdgs-wrap .back::after {display: none; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);} .ksdgs-wrap .back img {position: absolute; width: 100%; height: 100%; z-index: -1;} .ksdgs-wrap .ftbtn:nth-of-type(10) ~ .ksdgs-wrap .ftbtn:last-of-type {z-index: -1;} #chartContainer button {display: flex; justify-content: center; align-items: center; top: 1.5rem !important; right: 1.5rem !important; min-width: 3rem; min-height: 3rem; font-size: var(--fz-title-xxxxlg) !important; line-height: 0.5;} #chartContainer button:focus {outline-offset: 0.2rem;} .challenge-list {display: flex; gap: var(--spacer13); min-height: 6.8rem; padding: var(--spacer5) var(--spacer7); background-color: #F4F4F4; border-radius: var(--rd-8);} .challenge-list .tit {display: flex; position: relative; min-width: max-content; padding-left: var(--spacer8);} .challenge-list .tit::before {content: ''; position: absolute; left: 0; display: inline-flex; width: 1.9rem; height: 2.6rem; background: url(../img/ico_memo.svg) no-repeat; background-size: contain;} .challenge-list ul {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer3) var(--spacer9); counter-reset: number;} .challenge-list ul li {position: relative; min-height: 2.3rem; padding-left: var(--spacer5); font-size: var(--fz-body-sm);} .challenge-list ul li::before {content: counter(number); counter-increment: number; position: absolute; top: 0.3rem; left: 0; display: flex; justify-content: center; align-items: center; min-width: 1.6rem; min-height: 1.6rem; position: absolute; font-size: calc(var(--fz-body-xsm) - 0.2rem); font-weight: 600; border: 0.1rem solid var(--gray-90); color: var(--gray-90); border-radius: 100%; line-height: 1;} .slogan {font-family: 'nanumMyeongjo'; margin: var(--spacer15) auto; text-align: center; max-width: 65rem; line-height: 2; font-size: var(--fz-title-xxlg); color: var(--secondary); font-weight: 500;} .txt-desc {display: grid; margin-top: var(--spacer1);} .txt-desc li {position: relative; padding-left: var(--spacer2); font-size: var(--fz-body-xsm);} .txt-desc li::before {content: ''; position: absolute; top: 50%; left: 0.2rem; width: 0.2rem; height: 0.2rem; background-color: var(--gray-90); border-radius: var(--rd-20); transform: translateY(-50%);} .desc {margin-bottom: var(--spacer10); font-weight: 300; line-height: 2; font-size: var(--fz-body-md);} .desc strong {font-weight: 700;} .desc li {display: grid; gap: var(--spacer2);} .desc li, .desc > p {margin-bottom: var(--spacer2); font-weight: 300; line-height: 2; font-size: var(--fz-body-md); text-align: left;} .desc ~ .desc-list {margin-top: -3rem;} .desc ~ .desc-list li:not(:last-of-type) {margin-bottom: var(--spacer5);} .desc.number {counter-reset: number;} .desc.number li {display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; min-height: 2.5rem; padding-left: var(--spacer7); line-height: 1.8;} .desc.number li::before {content: counter(number); counter-increment: number; display: flex; justify-content: flex-end; align-items: center; min-width: 1.8rem; min-height: 1.8rem; position: absolute; top: 0.6rem; left: 0; font-size: var(--fz-body-xsm); font-weight: 600; background-color: var(--white); border: 0.1rem solid var(--gray-90); color: var(--gray-90); border-radius: 100%; line-height: 0;} .desc.number li .number li {padding-left: var(--spacer5);} .desc.number li .number li::before {left: -0.5rem;} .desc.number li .number li::after {content: ')'; position: absolute; top: 0; left: 1rem;} .desc.number li div {display: block;} .desc.number li.none::before {content: ''; counter-increment: none; display: none;} .desc.number li.right {display: flex; justify-content: flex-end; gap: 1rem;} .desc.number a{display: inline-block; margin-left: 1rem; padding: 0.5rem 1rem; background-color: #0066CC; color: white; border-radius: 4px; transition: background-color 0.3s;} .desc.number a:hover {background-color: #003366;} .desc.type02 {} .desc .number2 {display: flex; flex-direction: column;} .desc .number2 .tit {} .desc .number2 span {display: flex; align-items: center; position: relative;} .desc .number2 .sub-desc {display: block; margin-left: 2rem; margin-top: 0.5rem; line-height: 1.5;} .desc .number2 .sub-list {padding-left: 20px; list-style-type: none;} .desc .number2 .sub-list li::before {content: ''; counter-increment: none; display: none;} .desc-list {display: grid; gap: var(--spacer1);} .desc-list li {position: relative; min-height: 2.25rem; padding-left: var(--spacer3); font-size: var(--fz-body-sm);} .desc-list li::before {content: ''; position: absolute; top: 1rem; left: 0.2rem; width: 0.3rem; height: 0.3rem; background-color: var(--gray-90); border-radius: var(--rd-20);} .desc-list .none {padding-left: 0;} .desc-list .none::before {display: none;} .desc .list {} .desc .list .tit {position: relative; padding: 0 var(--spacer2) 0 var(--spacer5);} .desc .list .tit::before {content: ''; position: absolute; top: 50%; left: 0; width: 1.5rem; height: 1.5rem; border-radius: var(--rd-full); background-color: var(--white); border: 0.1rem solid var(--gray-90); transform: translateY(-50%);} .desc .list .tit::after {content: ':'; position: absolute; top: 0; right: 0; line-height: 1;} .desc .list .info {position: relative; padding-left: var(--spacer15); line-height: 1.8;} .desc .list .info::before {content: ''; position: absolute; top: 1.55rem; left: 4.1rem; width: 0.8rem; height: 0.1rem; background-color: var(--gray-80); transform: translateY(-50%);} .desc.bg {display: flex; align-items: center; min-height: 10rem; margin-bottom: var(--spacer15); padding: var(--spacer5) var(--spacer10); border-radius: var(--rd-12); background-color: var(--gray-5); line-height: 1.7;} .desc.bg-img {display: flex; align-items: center; position: relative; min-height: 17.4rem; padding: var(--spacer4) var(--spacer14); margin-bottom: var(--spacer15); border-radius: var(--rd-12); background: url(../img/bg_sky.png) no-repeat 100%; background-size: cover; line-height: 1.9; font-weight: 300; overflow: hidden; color: var(--white);} .desc .list .info.inner::before {display: none;} .desc .list .info:first-of-type {display: block;} .desc .list .tit + .info {padding-left: 0;} .desc .list .tit + .info::before {display: none;} .sign {display: grid; gap: var(--spacer1); text-align: right;} .sign span {display: block;} .sign .name {font-size: var(--fz-title-xlg); font-weight: 600;} .tab {display: flex; gap: var(--spacer5);} .tab ul {display: flex; overflow-x: scroll;} .tab ul li {border: 0.1rem solid #E3E3E3;} .tab:not(.ksdgs-wrap, .top-order) ul li.active a {background-color: var(--secondary-2); color: var(--white);} .tab ul li:not(:last-of-type) {border-right: 0;} .tab ul li a {display: flex; align-items: center; justify-content: center; min-width: 11.6rem; min-height: 4.2rem; padding: 0 var(--spacer2); background-color: var(--white); color: #70777F;} .tab.type2 {margin-bottom: var(--spacer10); background-color: #F6F7F8; border-bottom: 0.1rem solid #5C5C5C;} .tab.type2 ~ .inner {padding-top: var(--spacer6) !important;} .tab.type2 ul li {position: relative; border-top: 0; border-bottom: 0;} .tab.type2 ul li a {min-width: 16.3rem; min-height: 5rem; background-color: transparent;} .tab.type2 ul .active {border: 0.1rem solid #5C5C5C; border-bottom: 0;} .tab.type2 ul .active a {background-color: var(--white); color: #3E3E3E;} .tab.type2 ul li.active::after {display: none; content: ''; position: absolute; left: 0; right: 0; bottom: -0.2rem; width: 100%; height: 0.5rem; background-color: var(--white); z-index: 1;} .on ~ .tab.type2 {margin-bottom: 0; border-color: #C7C7C7;} .on ~ .tab.type2 ul li {width: 100%;} .on ~ .tab.type2 ul li a {gap: var(--spacer1); color: #3E3E3E;} .on ~ .tab.type2 ul .active {border-color: #C7C7C7;} .on ~ .tab.type2 ul .active::after {display: none;} .on ~ .tab.type2 ul .active a {color: var(--white); font-weight: 700;} .on ~ .tab.type2 ul .active a .cnt {font-weight: 400;} .tab-conts-box {display: block; height: 100%; gap: var(--spacer4);} .tab.conts-box .tab-conts {display: block; min-height: 26.2rem; max-height: 26.2rem;} .tab-conts {display: flex; gap: var(--spacer8); width: 100%; /*min-width: 42.8rem; min-height: 28.2rem;*/ height: 100%; background-color: var(--white);} .tab-conts .c-thumb {display: flex; max-width: 37rem; min-width: 16rem; min-height: 19.7rem;} .tab-conts .c-thumb img {width: 100%; object-fit: cover;} .tab-conts .c-info {display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacer5); position: relative; width: 100%; min-width: fit-content; padding: var(--spacer10) var(--spacer8) var(--spacer6);} .tab-conts .c-info .c-thumb {display: flex; gap: var(--spacer5); width: 100%; min-height: 17rem; max-height: 17rem; background: var(--gray-5) url(../img/thumb_event_s.png) no-repeat; background-size: cover;} .tab-conts .c-info .c-thumb + .c-txt {min-height: 2.2rem; -webkit-line-clamp: 1;} .tab-conts .c-info .c-tag {display: inline-flex; justify-content: center; align-items: center; width: fit-content; min-width: 3.5rem; min-height: 2rem; padding: var(--spacer1) var(--spacer2); background-color: #3BA86A; border-radius: var(--rd-4); font-size: var(--fz-body-xsm); font-weight: 300; line-height: 1; color: var(--white);} .tab-conts .c-info .c-tit {min-height: 2.2rem; font-size: var(--fz-title-md); font-weight: 700; line-height: 1.4; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .tab-conts .c-info .c-tit .tag {display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; min-width: 6rem; min-height: 2.2rem; margin-bottom: 0.1rem; padding: 0 var(--spacer2); background-color: #ddd; font-size: calc(var(--fz-body-xsm) - 0.1rem); font-weight: 300;} .tab-conts .c-info .c-tit .blue {background-color: #757575; color: var(--white);} .tab-conts .c-info .c-tit .yellow {background-color: #C79A1F; color: var(--white);} .tab-conts .c-info .c-txt {color: var(--gray-70); display: -webkit-box; min-height: 7rem; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; color: #464C53; font-size: var(--fz-body-sm); line-height: 1.5;} .tab-conts .c-info .more-info {display: flex; align-items: center; justify-content: space-between; font-size: var(--fz-body-sm); color: var(--gray-70); font-weight: 300;} .tab-conts .c-info .more-info .date {} .btn-more {position: relative; width: max-content; padding: 0 var(--spacer8) 0 0; font-size: var(--fz-body-sm); color: var(--gray-70);} .btn-more:focus {outline: 0.2rem solid var(--primary-50); border-radius: var(--rd-4);} .btn-more::after {content: ''; position: absolute; top: 50%; right: 1rem; width: 1.3rem; height: 1rem; background: url(../img/ico_arrow_more.svg) no-repeat; background-size: contain; transform: translateY(-50%);} .tab-conts.border {border: 0.1rem solid #E4E4E4;} .tab-conts.border .c-tit {display: flex !important; font-size: var(--fz-title-lg); line-height: 1.5; overflow: visible; text-overflow: inherit; font-weight: 500;} .tab-conts.border .c-info {justify-content: flex-start; gap: var(--spacer2); min-width: auto; padding: var(--spacer6);} .tab-conts.border .c-info .top {display: grid;} .tab-conts.border .c-info .btn {display: flex; gap: var(--spacer4); width: fit-content; height: inherit; min-height: 3.2rem; padding: var(--spacer1) var(--spacer2); font-size: var(--fz-body-xsm);} .tab-conts.border .c-info .btn::before {content: ''; width: 1.4rem; height: 1.8rem; background: url(../img/ico_arr_download.svg) no-repeat; background-size: contain;} .tab-conts.reverse {flex-direction: row-reverse; padding-right: var(--spacer4);} .tab-conts.reverse .c-info {justify-content: space-between; padding-right: var(--spacer5);} .tab-conts.reverse .c-thumb {background-color: transparent;} .tab-conts.blue {max-width: 50rem; background-color: #E0EAF1;} .tab-conts.blue .swiper-wrapper {overflow: hidden;} .tab-conts.blue .swiper-slide {width: 100% !important; z-index: 1;} .tab-conts.blue .c-info {display: flex; flex-direction: row; gap: var(--spacer8); width: max-content; height: 100%; padding: var(--spacer6) var(--spacer8); overflow: hidden;} .tab-conts.blue .c-info .c-txt {-webkit-line-clamp: 3;} .tab-conts.blue .c-info-box {display: flex; flex-direction: column; gap: var(--spacer3); min-width: 22rem;} .tab-conts.blue .c-info-box .btn-more {position: absolute; right: 2rem; bottom: 2rem;} .tab-conts.blue .c-thumb {width: auto; min-width: 18rem; height: 100%; min-height: 22rem; max-height: 22rem; background: url(../img/thumb_event.svg) no-repeat 50%; background-size: 19rem;} .tab-conts.blue .c-thumb img {object-fit: fill;} .tab-conts.blue .swiper-slide-active {z-index: 2;} .tab-conts.blue .swiper-slide-active .c-info {opacity: 1; z-index: 1 !important;} .tab-conts.blue.border {background-color: transparent;} .tab-conts.blue.border .c-info-box .btn-more {right: 2.5rem; bottom: 3rem;} .eduSwiper .c-info {opacity: 0;} .tab-conts-box .swiper {width: inherit;} .tab-conts-box.slide {overflow: hidden;} .tab-conts-box.slide .swiper {display: flex; min-width: 83.6rem; width: 100%; height: 100%;} .tab-conts-box.slide .tab-conts.border {} .tab-conts-box.slide .tab-conts.border .c-info {} .tab-conts-box.slide .tab-conts.border a {} .top-order {justify-content: flex-end;} .top-order ul {} .top-order ul li {position: relative; border: 0;} .top-order ul li::before {content: ''; position: absolute; top: 0.5rem; left: 0; width: 1.8rem; height: 1.4rem; background: url(../img/ico_tab_check.svg) no-repeat;} .top-order ul li.active::before {background: url(../img/ico_tab_check_on.svg) no-repeat;} .top-order ul li.active a {background-color: transparent; color: #003F9F; font-weight: 700;} .top-order ul li a {min-width: 10rem; min-height: 2rem; padding-left: var(--spacer3);} .search-result {display: grid; gap: var(--spacer5); padding: var(--spacer12) var(--spacer8) 0; text-align: center;} .search-result .result-cnt {display: flex; align-items: center; gap: var(--spacer1); min-height: 4.6rem; padding: 0 var(--spacer6); background-color: #F6F7F8; border-radius: var(--rd-12); color: #3E3E3E; font-weight: 500;} .search-result .result-cnt .tit {font-weight: 700;} .search-result .result-cnt .cnt {color: #003F9F;} .search-result .result-box {display: grid;} .search-result .result-box:not(:last-of-type) {margin-bottom: var(--spacer15);} .search-result .result-component {display: grid; gap: var(--spacer4); padding: var(--spacer6) 0; margin: 0 var(--spacer6); text-align: left;} .search-result .result-component:not(:last-of-type) {border-bottom: 0.1rem solid #EBEEF0;} .search-result .result-component .result-breadcrumb {display: flex; gap: var(--spacer8); color: var(--gray-50); font-weight: 300; font-size: var(--fz-body-sm);} .search-result .result-component .result-breadcrumb li {position: relative;} .search-result .result-component .result-breadcrumb li:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; right: -2.1rem; width: 0.8rem; height: 1.2rem; background: url(../img/ico_arrow_next_g.svg) no-repeat; transform: translateY(-50%);} .search-result .result-component .result-tit {position: relative; line-height: 1.6;} .search-result .result-component .result-tit.file::after {content: ''; position: absolute; bottom: 0.5rem; width: 2rem; height: 1.8rem; background: url(../img/ico_attatch.svg) no-repeat; margin-left: 0.8rem;} .search-result .result-component .result-tit .c-blue {margin: 0 var(--spacer1); background-color: var(--primary-50); color: var(--white); font-weight: 600;} .search-result .result-component .result-desc {display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--gray-90); line-height: 1.8; font-weight: 300;} .search-result .result-component .c-blue {padding: 0 var(--spacer1); margin: 0 calc(var(--spacer1)/2); background-color: var(--primary-50); color: var(--white); font-weight: 600;} /* 결과 없음 */ .search-result.error {align-items: center; padding: 0; height: 100vh;} .search-result .result {display: flex; align-items: center; justify-content: center; flex-direction: column;} .search-result .result img {width: fit-content;} .search-result .sch-result-tit {margin: var(--spacer8) 0 var(--spacer12); font-size: var(--fz-title-xlg); color: var(--gray-90); font-weight: 700;} .search-result .desc {display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: var(--spacer10);} .search-result .desc p {line-height: 1.8; color: var(--gray-80);} .search-result .desc-box {display: flex; justify-content: center; gap: var(--spacer5) var(--spacer10); padding: var(--spacer12) 0 0; border-top: 0.1rem solid var(--gray-20);} .search-result .desc-box img {width: fit-content; height: fit-content;} .search-result .desc-list {display: grid; gap: var(--spacer2); width: auto;} .search-result .desc-list li {width: fit-content; text-align: left; color: var(--gray-70); font-weight: 400;} .search-result .desc-list li::before {top: 0.9rem; left: 0; background-color: var(--gray-70);} /* 카드형 썸네일 */ .d-card-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(33.6rem, 1fr)); gap: var(--spacer6); margin-bottom: var(--spacer20);} .d-card {display: flex; flex-direction: column; justify-content: space-between; align-items: center; border: 1px solid #e0e0e0; border-radius: var(--rd-8); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;} .d-card:hover {transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-color: var(--secondary);} .d-card .d-thumbnail {width: 100%; min-height: 32rem; max-height: 32rem; height: 100%; object-fit: cover;} .d-card .d-thumbnail + .d-card-content {justify-content: space-between; padding: var(--spacer4);} .d-card .d-thumbnail + .d-card-content .d-title {-webkit-line-clamp: 1;} .d-card .d-thumbnail + .d-card-content .d-meta {margin-bottom: 0;} .d-card .d-thumbnail img {width: 100%; height: 100%;} .d-card .d-card-image {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; max-height: 20rem; min-height: 20rem; background: url(../img/thumb_campaign.png) no-repeat center; background-size: cover; overflow: hidden;} .d-card .d-card-image img {width: 100%; height: 100%; object-fit: cover;} .d-card .d-card-content {display: flex; flex-direction: column; flex-grow: 1; width: 100%; padding: var(--spacer5);} .d-card .d-card-content.center {align-items: center; gap: var(--spacer3);} .d-card .d-category {font-size: 0.85em; color: #777; margin-bottom: 8px;} .d-card .d-title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; gap: var(--spacer2); min-height: 3rem; font-size: var(--fz-title-lg); font-weight: 700; color: var(--gray-90); margin-top: 0; margin-bottom: var(--spacer2); line-height: 1.4;} .d-card .d-meta {font-size: 0.8em; color: #999; margin-bottom: var(--spacer3);} .d-card .d-description {font-size: 0.9em; color: #555; line-height: 1.6; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .d-card .d-card.no-image .d-card-image {display: none;} .d-card .btn {display: inline-flex; width: inherit; width: inherit; max-width: 10rem; padding: 0 var(--spacer3); background-color: var(--primary-50); color: var(--white); font-size: var(--fz-body-sm);} /* K-SDGs 소개 */ .main-content-area {} .top-title-section {text-align: center; margin-bottom: 40px;} .main-heading {display: flex; justify-content: center; align-items: center; gap: var(--spacer2); font-size: 32px; font-weight: 500; color: #333; margin-bottom: 0;} .main-heading .highlight-blue {color: #007bff; font-weight: 700; margin-right: 15px;} .sdg-main-logo {width: 5rem; height: 5rem; vertical-align: middle;} .youtube-player-container {display: flex; gap: var(--spacer5); box-sizing: border-box;} /* Content Sections (지속가능발전, UN, K-SDGs) */ .section-title {font-size: 24px; font-weight: 700; color: #333; display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0;} .section-icon {width: 32px; height: 32px; margin-right: 10px; vertical-align: middle;} .section-desc {font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 0;} .more-link {color: #007bff; font-weight: bold; white-space: nowrap;} .more-link:hover {text-decoration: underline;} /* Report Links Section */ .intro-section {padding: var(--spacer8) var(--spacer10); margin-bottom: var(--spacer10); background-color: var(--gray-5);} .intro-section .desc:last-of-type {margin-bottom: 0;} .intro-section .desc {margin-bottom: var(--spacer5); font-size: var(--fz-body-md);} .intro-section .report-content-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer1);} .intro-section .report-content-list .item {background-color: var(--white); padding: var(--spacer3) var(--spacer4); font-size: var(--fz-body-sm); color: var(--gray-70);} .intro-section .report-links-section {text-align: center; padding-bottom: 40px;} .report-intro-text {font-size: 16px; color: #333; margin-bottom: 20px;} .separator-line {width: 80%; height: 1px; background-color: #ddd; margin: 30px auto;} .report-list {list-style: none; padding: 0; margin: 0;} .report-list li {margin-bottom: 10px;} .report-list li a {color: #007bff; text-decoration: none; font-size: 16px;} .report-list li a:hover {text-decoration: underline;} /* Q&A */ .accordion-list {display: flex; flex-direction: column; /*margin-top: calc(var(--spacer1)*3); border-top: 0.1rem solid var(--gray-60); */font-size: var(--fz-title-sm);} .accordion-list .question {flex-direction: column; align-items: flex-start; position: relative; border-bottom: 0.1rem solid var(--gray-20);} .accordion-list .question::before {content: 'Q'; position: absolute; top: 2.6rem; left: 2.4rem; display: flex; justify-content: center; align-items: center; width: 3.7rem; min-width: 3.4rem; height: 3.4rem; border-radius: var(--rd-full); background-color: var(--gray-5); border: 0.1rem solid var(--gray-30); font-weight: 600; color: var(--gray-50);} .accordion-list .question .tit {display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width: auto; height: auto; white-space: inherit !important; line-height: 1.6; overflow: hidden; text-overflow: ellipsis;} .accordion-list .question > a {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; grid-row-gap: calc(var(--spacer1)*1.2); min-height: 8.6rem; padding: 0 var(--spacer15) 0 var(--spacer18); background: url(../img/ico_arr_bottom.svg) no-repeat calc(100% - 3rem); color: var(--gray-60);} .accordion-list .question > a .date {color: var(--gray-40); font-size: var(--fz-title-xsm);} .accordion-list .question.active {border-bottom: 0;} .accordion-list .question.active::before {color: var(--gray-90);} .accordion-list .question.active > a {border-bottom: 0.1rem solid var(--gray-20); background: url(../img/ico_arr_top.svg) no-repeat calc(100% - 3rem);} .accordion-list .question.active .tit {font-weight: 700; color: var(--black);} .accordion-list .question-full {width: 100%; padding: calc(var(--spacer1)*4) calc(var(--spacer1)*3 - 0.4rem) calc(var(--spacer1)*3 + 2vw); line-height: 2;} .accordion-list .answer {display: flex; justify-content: space-between; align-items: center; gap: var(--spacer10); position: relative; width: 100%; height: 100%; min-height: 12rem; padding: var(--spacer8) var(--spacer10); border-bottom: 0.1rem solid var(--gray-20); background-color: var(--gray-5); line-height: 2; font-size: var(--fz-body-sm); transition: var(--transition-4);} .accordion-list .answer .btn {display: flex; justify-content: center; align-items: center; min-width: 6rem; min-height: 3rem; height: inherit; max-height: 3rem; border-radius: var(--rd-4); background-color: var(--primary-80); color: var(--white); font-size: var(--fz-body-xsm);} .accordion-list .answer .btn:focus {outline: 0.2rem solid var(--primary-50);} .accordion-list .answer .link {color: var(--primary-80); font-weight: 600;} .thumb-list {display: flex; flex-wrap: wrap;} .thumb-list .grid:first-of-type {flex: 1 1 100%;} .thumb-list .grid {display: flex; flex: 1 1 45%; gap: var(--spacer11); padding-bottom: var(--spacer8); border-bottom: 0.1rem solid var(--gray-30);} .thumb-list:not(.col3) .grid:not(:first-of-type) {padding: var(--spacer10);} .thumb-list:not(.col3) .grid:not(:first-of-type):nth-of-type(2n+1) {padding-right: 0; border-left: 0.1rem solid var(--gray-30);} .thumb-list:not(.col3) .grid:not(:first-of-type):nth-of-type(2n) {padding-left: 0;} .thumb-list.col3 {display: grid; grid-template-columns: repeat(3, 1fr); min-height: 47rem; justify-content: center; margin-bottom: var(--spacer10); border: 0.1rem solid var(--gray-90); border-left: 0; border-right: 0;} .thumb-list.col3 .d-card-content {display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--spacer5); position: relative; width: 100%; text-align: center;} .thumb-list.col3 .d-card-content .d-title {display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; height: auto; min-height: 5rem; white-space: inherit !important; overflow: hidden; text-overflow: ellipsis; font-size: var(--fz-title-lg); line-height: 1.3; text-align: left;} .thumb-list.col3 .d-card-content .d-year {display: block;color: #868686;} .thumb-list.col3 .d-card-content .d-thumbnail {position: relative; width: 100%; max-width: 27.5rem; min-height: 37.3rem; max-height: 37.3rem; height: 100%; border: 0.1rem solid var(--gray-30); box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.1); background: url(../img/thumb_event.svg) no-repeat center; outline-offset: -2.3rem; outline: 2.3rem solid var(--white);} .thumb-list.col3 .d-card-content .d-thumbnail::before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background-color: rgba(0, 30, 52, 0.85); transform: scaleY(0); transform-origin: bottom; transition: 0.3s ease-in-out;} .thumb-list.col3 .d-card-content .d-thumbnail:hover {cursor: pointer;} .thumb-list.col3 .d-card-content .d-thumbnail:hover::before {animation: slide-up; transform: scaleY(1);} .thumb-list.col3 .d-card-content .d-thumbnail:hover ~ .desc {display: block;} .thumb-list.col3 .d-card-content .d-thumbnail img {display: block; width: 100%; height: 100%; padding: var(--spacer5);} .thumb-list.col3 .d-card-content .desc {display: none; position: absolute; top: 46%; max-width: 22.8rem; height: -webkit-fill-available; color: var(--white); transform: translateY(-50%); transition: 0.3s ease;} .thumb-list.col3 .d-card-content .desc {margin: 0; pointer-events: none;} .thumb-list.col3 .d-card-content .desc * {width: 100%; max-height: 17rem;} .thumb-list.col3 .d-card-content .desc img {width: 100%; height: 100%;} .thumb-list.col3 .d-card-content .desc li, .thumb-list.col3 .d-card-content .desc > p {position: relative; padding-left: var(--spacer2); margin-bottom: var(--spacer4); display: -webkit-box !important; -webkit-line-clamp: 7; -webkit-box-orient: vertical; width: 100%; height: auto; white-space: inherit; overflow: hidden; text-overflow: ellipsis; font-size: var(--fz-body-xsm); text-align: left;} .thumb-list.col3 .d-card-content .desc li::before, .thumb-list.col3 .d-card-content .desc > p::before {content: ''; position: absolute; top: 0.9rem; left: 0.1rem; width: 0.3rem; height: 0.3rem; background-color: var(--white); border-radius: var(--rd-20);} .thumb-list.col3 .d-card-content .desc li:last-of-type, .thumb-list.col3 .d-card-content .desc > p:last-of-type {margin-bottom: 0;} .thumb-list.col3 .d-card-content .btn {display: inline-flex; width: fit-content; min-width: 10.5rem; min-height: 3.2rem; height: auto; border: 0.1rem solid var(--gray-90); border-radius: var(--rd-4); font-size: var(--fz-body-sm);} .thumb-list.col3 .grid {flex: 1 1 33%; justify-content: center; padding: var(--spacer8);} .thumb-list.col3 .grid:nth-of-type(1) {border-bottom-color: var(--gray-30);} /* .thumb-list.col3 .grid:nth-last-of-type(1), .thumb-list.col3 .grid:nth-last-of-type(2), .thumb-list.col3 .grid:nth-last-of-type(3) {border-bottom: 0;} */ .thumb-list.col3 .grid:not(:nth-of-type(3n)) {border-right: 0.1rem solid var(--gray-30);} .thumb-list.col3 .grid:not(:nth-of-type(2n+1), :nth-of-type(4n)):last-of-type {border-right: 0;} .thumb-list.edu .d-card-content .d-thumbnail {background: url(../img/thumb_edu.svg) no-repeat center; background-size: contain;} .thumb-list.edu .d-card-content .d-thumbnail:hover {cursor: default;} .thumb-list.edu .d-card-content .d-thumbnail:hover::before {display: none;} .thumb-list .grid:first-of-type .thumb {min-width: 29rem;} .thumb-list .grid:not(:first-of-type) .history {gap: var(--spacer2); max-width: 29rem;} .thumb-list .grid:first-of-type .history .tit .name {font-size: var(--fz-title-xxxlg); font-weight: 600; line-height: 1;} .thumb-list .grid .history .tit .name {font-size: var(--fz-title-xlg);} .thumb-list .grid .thumb {max-width: 12rem; min-width: 12rem; height: fit-content; padding: var(--spacer2); border: 0.1rem solid #EBEBEB;} .thumb-list .grid .thumb img {width: 100%;} .thumb-list .grid .history {display: grid; gap: var(--spacer7);} .thumb-list .grid .history .tit {display: grid; gap: var(--spacer2);} .thumb-list .grid .history .tit span {display: flex;} .thumb-list .grid .history .history-list {display: grid; gap: var(--spacer1);} .thumb-list .grid .history .history-list .tit {} .thumb-list .grid .history .history-list .tit:first-of-type + li {} .thumb-list .grid .history .history-list li {display: flex; align-items: center; position: relative; min-height: 2.5rem; color: var(--gray-90); font-weight: 300;} .thumb-list .grid .history .history-list li:not(.tit) {padding-left: var(--spacer4); line-height: 1.3;} .thumb-list .grid .history .history-list li::before {top: 1.4rem; left: 0.5rem; width: 0.3rem; height: 0.3rem; background-color: var(--gray-70);} .history {display: flex; justify-content: space-between; position: relative; width: 100%; background-color: var(--white); transition: 1s ease;} .history::after {display: none; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; z-index: -1;} .history .left-year {display: none; position: sticky; top: 14rem; width: max-content; height: fit-content;} .history .left-year.active::before {min-height: 45rem;} .history .left-year::before {content: ''; position: absolute; top: 4.3rem; left: 50%; width: 0.2rem; min-height: 64rem; background-color: var(--gray-70); transition: 0.2s;} .history .left-year::after {content: ''; position: absolute; top: 20rem; left: 49%; width: 1.1rem; height: 1.1rem; background-color: var(--gray-30); transform: rotate(45deg) translateX(-50%); border: 0.5rem solid var(--white);} .history .left-year .tit {display: flex; justify-content: center; align-items: center; min-width: 21rem; min-height: 4.4rem; border: 0.2rem solid var(--black); border-radius: calc(var(--radius)*10); font-size: var(--fz-body-lg); color: var(--black); font-weight: 800; box-sizing: border-box;} .history-year .tit span {display: flex; position: relative; padding-right: calc(var(--spacer1)*1.2); font-size: var(--fz-body-sm); text-transform: uppercase; font-weight: 700;} .history-info {width: 100%;} .history-info .history-list {display: flex; gap: var(--spacer5); border: 0.1rem solid var(--gray-20); border-left: 0; border-right: 0;} .history-info .history-list .tit {display: flex; justify-content: center; align-items: center; min-width: 9.4rem; height: 100%; padding: var(--spacer4); border: 0.1rem solid var(--primary-80); border-left: 0; border-right: 0; color: var(--primary-80);} .history-info .history-list:not(:last-of-type) {border-bottom: 0;} .history-info .history-list:not(:last-of-type) .tit {margin-top: -0.1rem; border-bottom: 0;} .history-info .history-list .year::after, .history-info .history-list ul {display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--spacer1)*1.8); position: relative; height: auto; padding: var(--spacer8) 0;} .history-info .history-list li {display: flex; position: relative; width: auto; align-items: flex-start; gap: var(--spacer4); padding-left: calc(var(--spacer1)*2); font-weight: 400; color: #3E3E3E; transition: 0.2s;} .history-info .history-list li strong {position: relative; margin-right: calc(var(--spacer1) - 0.6rem); transition: 0.2s; font-weight: 700;} .history-info .history-list li .month {min-width: 5.9rem; font-weight: 600; text-align: right;} /* table */ .table-wrap {padding: var(--spacer4) var(--spacer7) var(--spacer20);} .table-wrap.flex {display: flex; align-items: flex-start; gap: var(--spacer4); padding: 0;} .table-wrap .table:last-of-type {margin-bottom: 0;} .table {display: table; table-layout: fixed; text-align: center; font-size: var(--fz-body-sm);} .table .c-red {margin-right: var(--spacer1); color: var(--red);} .table:last-of-type {margin-bottom: var(--spacer20);} .table thead {background-color: var(--secondary-5); border-bottom: 0.1rem solid var(--secondary-30);} /*.table thead th:first-of-type {background-color: var(--secondary-5) !important;}*/ .table thead tr {} .table thead tr + tr {background-color: #e8ebed;} .table thead tr th {padding: 0 var(--spacer2); font-weight: 400;} .table thead ~ tbody tr:first-of-type {border-top: 0;} .table tbody tr {border-bottom: 0.1rem solid var(--gray-30);} .table tbody tr:first-of-type {border-top: 0.1rem solid var(--gray-30);} .table tbody tr td {background-color: var(--white);} .table tbody tr th:not(:first-of-type), .table tbody tr td:not(:first-of-type) {border: 0.1rem solid var(--gray-30); /*border-right: 0;*/ border-top: 0; border-bottom: 0;} .table tbody tr th:first-of-type {padding-left: var(--spacer5); border-right: 0.1rem solid var(--gray-30); color: var(--gray-90);} .table tbody tr td:first-of-type {border-right: 0.1rem solid var(--gray-30);} .table tbody tr td:last-of-type {border-right: 0;} .table .form-check {position: relative; justify-content: center;} .table th, .table td {height: 5rem; padding: var(--spacer3); font-weight: 300;} .table th:first-of-type input[type=checkbox] ~ label::before, .table td:first-of-type input[type=checkbox] ~ label::before {top: 60%; left: 50%;} .table th + td:first-of-type input[type=checkbox] ~ label::before {top: 50%; left: 1rem;} .table .tit {text-align: left;} .table .tit a {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; text-align: left; font-weight: 300;} .table .form-check input[type=checkbox] ~ label {min-width: fit-content; align-items: center; padding-left: var(--spacer6);} .table .tit:focus, .table .tit a:focus {outline-offset: 0.4rem;} .table td strong {min-width: fit-content; color: var(--gray-90);} .table td .br {display: block;} .table .bg_total {background-color: var(--gray-10);} .table .active {background-color: #f6fafd; color: #0c6cb4; font-weight: 600;} .table .tag {display: inline-flex; justify-content: center; align-items: center; min-width: max-content; min-height: 2.4rem; padding: 0 var(--spacer2); background-color: var(--primary-5); border-radius: var(--rd-4); color: var(--primary-60); font-size: var(--fz-body-sm);} .table .new {display: flex; position: relative; min-width: 3.1rem; padding-left: var(--spacer4); text-underline-position: bottom; color: var(--primary); font-weight: 500;} .table .new a::after {content: ''; position: absolute; top: 0.3rem; left: -0.3rem; width: 1.5rem; height: 1.5rem; background: url(../img/ico_new.svg) no-repeat 100%; background-size: contain;} .table .btn {font-size: var(--fz-body-xsm);} .table td .desc {margin-bottom: var(--spacer2); font-size: var(--fz-body-md); line-height: 1.8; text-align: left;} .table td .desc *:not(iframe, p) {height: auto; font-size: var(--fz-body-md) !important; line-height: 1.8; text-align: left;} .table td .desc img {height: auto !important;} .table td iframe {margin-bottom: 0;} .table .contents {min-height: 30rem;} .table .contents .h-tit-l {margin-top: 0;} .table .editor {min-height: 30rem;} .table.center th, .table.center td, .table.center a {justify-content: center; text-align: center;} .table td .desc-list {justify-content: center;} .table td .desc-list li {width: fit-content;} .table td .desc-list li::before {} .table td .desc-list a {display: inline-flex; justify-content: flex-start;} .table td a:hover {background-color: transparent; text-decoration: underline;} .table td a:link {color: var(--primary-60);} .table ul:not(.view-prev-list), .table ol:not(.view-prev-list) {padding-left: var(--spacer8);} .table ul:not(.view-prev-list) li {display: list-item; list-style: disc;} .table ol:not(.view-prev-list) li {display: list-item; list-style: auto;} .table-wrap.list {padding: 0; margin-bottom: var(--spacer20);} .table-wrap.list:last-of-type {margin-bottom: 0;} .table-wrap.list .table {border-top: 0.1rem solid var(--gray-30);} .table-wrap.list .table:last-of-type {margin-bottom: 0;} .table-wrap.list .table thead {height: 5rem; background-color: #F6F7F8; border-top: 0.1rem solid var(--gray-90); border-bottom-color: var(--gray-30);} .table-wrap.list tbody tr td {height: 6rem; min-height: 6rem; border: 0;} .table-wrap.list tbody tr td:hover {cursor: default;} .table-wrap.list .cnt, .table-wrap.list .finished {text-align: -webkit-center;} .table-wrap.list .finish {display: flex; align-items: center; justify-content: center; width: max-content; min-width: 4.2rem; height: 2.4rem; background-color: var(--primary-5); border-radius: var(--rd-4); color: var(--primary-60); font-size: var(--fz-body-sm); font-weight: 400;} .table-wrap.list .finish.gray {min-width: 6rem; background-color: var(--gray-10); color: var(--gray-50);} .table-wrap.list tbody tr.active {background-color: var(--primary-5);} .table-wrap.list tbody tr:hover {cursor: pointer;} /* table - 상세 */ .txt-left {text-align: left;} .txt-cancel {text-decoration: line-through;} .table-wrap.view {padding: 0;} .table-wrap.view tbody tr {border: 0;} .table-wrap.view tbody tr:last-of-type td {padding: 0;} .table-wrap.view .contents-wrap {display: block; height: auto; min-height: 25rem; padding: var(--spacer8) var(--spacer5) var(--spacer12); /*text-align: left;*/ line-height: 2;} .table-wrap.view .contents-wrap li {/* display: flex; flex-wrap: wrap; */} .table-wrap.view .contents-wrap td {white-space: normal;} .table-wrap.view .contents-wrap tr:first-of-type td {border-top: 0;} .table-wrap.view .contents-wrap .contents {line-height: 2;} .table-wrap.view .contents-wrap .desc p {padding-left: 0 !important;} .table-wrap.view .contents-wrap tbody tr:last-of-type td {padding: var(--spacer3) var(--spacer4);} .table-wrap.view > .table, .table-wrap.view > .table > tr {border: 0;} .table-wrap.view > .table > thead {background-color: transparent; border-bottom: 0;} .table-wrap.view .table thead th {border: 0;} .table-wrap.view .table-wrap, .table-wrap.view .table thead th {padding: 0;} .table-wrap.view .table-wrap tr td {border: 0.1rem solid var(--gray-30); border-left: 0;} .table-wrap.view .table-wrap tr td:last-of-type {border-right: 0; border-left: 0.1rem solid var(--gray-30);} .table-wrap.view .title-top {background-color: var(--gray-5);} .table-wrap.view .title-top:last-of-type {border-bottom: 0.1rem solid var(--gray-30); background-color: var(--white);} .table-wrap.view .title-top .tit {display: flex; align-items: center; position: relative; min-height: 8.3rem; padding: var(--spacer5); border-bottom: 0.1rem solid var(--gray-30); padding-left: var(--spacer5); font-size: var(--fz-title-xlg); font-weight: 500; line-height: 1.4;} .table-wrap.view .title-top .tit::before {display: none; content: ''; position: absolute; top: 3.5rem; left: 0; border: solid transparent; border-left: 1.1rem solid var(--primary-50); border-top-width: 0.7rem; border-bottom-width: 0.7rem;} .table-wrap.view .title-top .writer {display: flex; align-items: center; flex-wrap: wrap; grid-column-gap: var(--spacer8); grid-row-gap: var(--spacer1); min-height: 4rem; padding: var(--spacer2) var(--spacer5);} .table-wrap.view .title-top dl {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer3); grid-row-gap: var(--spacer2); position: relative;} .table-wrap.view .title-top dl.block {} .table-wrap.view .title-top dl:not(:last-of-type)::after {content: ''; position: absolute; top: 0.4rem; right: -1.8rem; width: 0.1rem; height: 1.4rem; background-color: var(--gray-30);} .table-wrap.view .title-top dl dt {position: relative; min-width: 3rem; width: max-content; font-weight: 300; text-align: left; color: #868686;} .table-wrap.view .title-top dl dt::after {content: ':'; position: absolute; top: -0.1rem; right: -0.6rem;} .table-wrap.view .title-top dl .btn-wrap {display: flex; flex-direction: column;} .table-wrap.view .title-top dl .btn-wrap .btn {margin-top: var(--spacer2);} .table-wrap.view .title-top dl dd {color: var(--gray-90); font-weight: 300; text-align: left;} .table-wrap.view .title-top dl dd ul {} .table-wrap.view .title-top dl dd ul li {text-align: left;} .table-wrap.view .title-top dl .user-name {min-width: 3rem;} .view-prev-list {width: 100%; background-color: #F6F7F8; border: 0.1rem solid var(--gray-90); border-left: 0; border-right: 0;} .view-prev-list li {display: flex; align-items: center; width: 100%; min-height: 4.6rem; padding: var(--spacer3); font-size: var(--fz-body-xsm);} .view-prev-list li:not(:last-of-type) {border-bottom: 0.1rem solid var(--gray-30);} .view-prev-list li dl {display: flex; gap: var(--spacer5); text-align: left;} .view-prev-list li dl dt {min-width: 5.6rem; font-weight: 300; color: #868686;} .view-prev-list li dl dd {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer1);} .view-prev-list li a {display: -webkit-box; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: left; color: var(--gray-90); word-break: break-word;} .view-prev-list li a:hover {background-color: transparent;} .view-prev-list li a:focus {outline-offset: 0.4rem;} .page-btn-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacer6); margin: var(--spacer8) 0;} .page-btn-wrap .btn-wrap {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--spacer3); width: 100%; position: relative;} .page-btn-wrap .btn-wrap .btn {min-width: 10rem; min-height: 3.8rem; padding: 0 var(--spacer5); background-color: var(--secondary); color: var(--white); border-radius: var(--rd-4); font-size: var(--fz-body-md); font-weight: 300;} .page-btn-wrap.both {justify-content: space-between;} .btn-wrap {display: flex; justify-content: center; gap: var(--spacer3);} .btn-wrap .bold-tit-s {margin-bottom: 0 !important;} .btn-wrap.left {justify-content: flex-start;} .btn-wrap.right {justify-content: flex-end;} /* paging */ .paging {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--spacer2); width: 100%;} .paging .page-links li a {display: flex; align-items: center; justify-content: center; flex-direction: row; color: var(--gray-70); min-width: 2.8rem; min-height: 2.8rem; border-radius: var(--rd-4); font-size: var(--fz-body-sm);} .paging .page-links .first a, .paging .page-links .prev a, .paging .page-links .next a, .paging .page-links .last a {border: 0.1rem solid var(--gray-20); border-radius: var(--rd-4); text-indent: -9999px;} .paging .page-links .first a {background: url(../img/ico_pagelink_first.svg) no-repeat center;} .paging .page-links .first.on a {background: url(../img/ico_pagelink_first_on.svg) no-repeat center;} .paging .page-links .prev a {background: url(../img/ico_pagelink_prev.svg) no-repeat center;} .paging .page-links .prev.on {background: url(../img/ico_pagelink_prev_on.svg) no-repeat center;} .paging .page-links .next a {background: url(../img/ico_pagelink_next.svg) no-repeat center;} .paging .page-links .next.on a {background: url(../img/ico_pagelink_next_on.svg) no-repeat center; border-color: #BEBEBE;} .paging .page-links .last a {background: url(../img/ico_pagelink_last.svg) no-repeat center;} .paging .page-links .last.on a {background: url(../img/ico_pagelink_last_on.svg) no-repeat center; border-color: #BEBEBE;} .paging .page-links .page-link {display: flex; align-items: center; justify-content: center; flex-direction: row; color: var(--gray-70); min-width: 4rem; height: 4rem;} .paging .page-links .page-link.link-dot {display: none; background-image: url(../img/ico_page_dot.svg); background-repeat: no-repeat; background-position: center;} .paging .page-links .active a {font-weight: 700; color: var(--white); background-color: var(--gray-10); color: var(--secondary);} .paging .page-links .page-link.active:focus {outline-offset: 0.4rem;} .paging .page-link.prev {order: 1; padding: 0 var(--spacer2) 0 var(--spacer1);} .paging .page-link.next {order: 3; padding: 0 var(--spacer1) 0 var(--spacer2);} /* paging */ .paging .page-navi {display: inline-flex; align-items: center; justify-content: center; flex-direction: row; color: var(--gray-70); min-width: 6.2rem; height: 4rem;} .paging .page-navi.prev {order: 1; padding: 0 var(--spacer2) 0 var(--spacer1);} .paging .page-navi.prev::before {content: ''; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2.2rem; background-image: url(../img/ico_page_arr_left.svg); background-repeat: no-repeat;} .paging .page-navi.next {order: 3; padding: 0 var(--spacer1) 0 var(--spacer2);} .paging .page-navi.next::after {content: ''; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2.2rem; background-image: url(../img/ico_page_arr_right.svg); background-repeat: no-repeat;} .paging .page-links {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--spacer2);} .paging .page-links .page-link.active {font-weight: 700; color: var(--white); border-radius: 6px; background-color: var(--secondary-50);} .paging .page-links .page-link.active:focus {outline-offset: 0.4rem;} .page-btn-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacer6); width: 100%; margin: var(--spacer18) 0;} .page-btn-wrap:last-child {margin: var(--spacer25) 0; margin-bottom: 0;} .page-btn-wrap .btn-wrap {display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacer3); width: 100%; position: relative; margin-top: var(--spacer5);} .page-btn-wrap.both {justify-content: space-between;} /* #footer */ .dim {display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 2;} .w-gnb-dim {display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;} /* popup */ .popup.wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer7); max-height: inherit; height: auto; top: 7vw; left: 50%; max-width: 90rem; box-shadow: none; transform: translate(-50%, 0)} .popup.wrap .title ~ .inner {border-radius: 0 0 var(--rd-12) var(--rd-12);} .popup.wrap .title ~ .inner .component-box {min-height: 23rem; padding: var(--spacer7);} .popup.wrap .inner {min-height: inherit; height: auto; padding: 0 !important; border-radius: var(--rd-12); box-shadow: var(--shadow-btm); overflow: hidden;} .popup.wrap .btn-wrap {gap: 0; padding-top: 0;} .popup.wrap .btn-wrap .btn {width: 100%; height: 4.4rem !important; border: 0; border-radius: 0 !important;} .popup.wrap .btn-wrap .submit {background-color: var(--secondary-5); color: var(--gray-90);} .popup.wrap .component-box {min-height: inherit;} .popup {display: flex; flex-direction: column; position: fixed; top: 45%; left: calc(53% - 2rem); width: 100%; min-width: 37rem; max-width: 45rem; transform: translate(-50%, -50%); transition: all 0.3s 0.2s cubic-bezier(0.34, 0.01, 0.07, 1.5); transition-duration: 0.8s; border-radius: var(--rd-12); color: var(--gray-90); box-shadow: var(--shadow-btm); z-index: 10; overflow: hidden; /* opacity: 0; z-index: -1;*/} .popup iframe {width: 100%; max-height: 35rem; margin: 0;} .popup .table ul:not(.view-prev-list), .popup .table ol:not(.view-prev-list) {padding-left: 0;} .popup img {width: 100%; height: 100%;} .popup.sm {max-height: 45rem;} .popup.sm .component-box {max-height: 37rem; overflow-y: scroll;} .popup.md {max-width: 60rem;} .popup.md .component-box {max-height: 50rem; overflow-y: scroll;} .popup.lg {max-width: 70rem;} .popup.on {display: flex; transform: translate(-50%, -50%); opacity: 1 !important; z-index: 10 !important;} .popup.on + .dim {display: block; z-index: 2;} .popup .inner {display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacer5) !important; height: 100%; min-height: 58rem; background-color: var(--white);} .popup .title {display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 4.4rem; padding: 0 var(--spacer5) 0 var(--spacer7); background-color: var(--primary-50); border-radius: var(--rd-12) var(--rd-12) 0 0; font-weight: 600; font-size: var(--fz-body-md); color: var(--white); line-height: 1.2;} .popup .tit {font-weight: 500;} .popup .tit-s {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0; padding-left: var(--spacer3); margin-bottom: var(--spacer3); font-weight: 700; font-size: var(--fz-title-md); color: var(--primary-50);} .popup .tit-s + .tit-s {margin-top: 0 !important;} .popup .tit-s::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.6rem; height: 0.6rem; border-radius: var(--rd-6); background-color: var(--primary-50); transform: translateY(-50%);} .popup .btn-close {position: absolute; top: 50%; right: 1.5rem; min-width: 1.8rem; height: 1.8rem; text-indent: -9999px; background: url(../img/ico_close_w.svg) no-repeat 100%; background-size: contain; transform: translateY(-50%);} .popup .btn-close:focus {outline-color: var(--white); outline-offset: 0.2rem; border-radius: var(--rd-2);} .popup .component-box {gap: var(--spacer4);} .popup .component {display: grid; gap: var(--spacer2);} .popup .btn-wrap {padding-top: var(--spacer5); border-top: 0.1rem solid var(--gray-20);} .popup .btn-wrap .btn {min-width: 7rem !important;} .popup .table, .popup .table td, .popup .table td .desc * {font-size: var(--fz-body-sm); line-height: 1.4;} .popup .table td .desc li {display: flex; flex-wrap: nowrap;} .popup .table td .desc:last-of-type, .popup .table td .desc:last-of-type li:last-of-type {margin-bottom: 0;} .popup .table td .desc li b {min-width: fit-content; font-weight: 700;} .popup .table thead {height: 4rem;} .popup .table tbody tr:first-of-type td:first-of-type .desc li {display: grid;} .popup .scroll {max-height: 40rem; overflow-y: scroll;} .popup .table:last-of-type {margin-bottom: 0;} .popup .table:last-of-type + .paging {margin-top: var(--spacer5) !important;} .popup .left {text-align: left;} .popups.unused {display: none;} #footer {position: relative; background-color: var(--gray-5); font-size: var(--fz-body-sm);} #footer .f-logo {min-width: 15rem; min-height: 4.5rem;} #footer .f-logo img {width: 100%; height: 100%;} #footer > .inner {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer4) var(--spacer13); min-height: 14rem;} #footer .f-info-wrap {display: grid; gap: var(--spacer3); width: 100%; font-weight: 300;} #footer .foot-quick .inner {display: flex; padding-top: 0;} #footer .foot-quick {border-top: 0.1rem solid var(--gray-30); border-bottom: 0.1rem solid var(--gray-30); background-color: var(--white);} #footer .foot-quick .inner .link {display: inline-flex; align-items: center; justify-content: space-between; flex-direction: row; gap: var(--spacer2); position: relative; max-width: 25.6rem; width: 100%; height: 5.4rem; padding: 0 var(--spacer6); border-right: 0.1rem solid var(--gray-30);} #footer .foot-quick .inner .link:first-child {border-left: 0.1rem solid var(--gray-30);} #footer .foot-quick .inner .none {padding: 0;} #footer .foot-quick .inner .plus {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 var(--spacer6);} #footer .foot-quick .inner .plus::after {content: ''; display: inline-flex; flex-shrink: 0; width: 1.6rem; height: 1.6rem; background: url(../img/foot_ico_plus.svg) no-repeat center; background-size: contain; transition: 0.1s ease-in-out;} #footer .foot-quick .inner .plus.active::after {transform: rotate(45deg);} #footer .foot-quick-sub {position: absolute; left: -1px; bottom: 0; width: calc(100% + 2px); height: 0; transition: 0.3s cubic-bezier(0.09, -0.6, 0.5, 2); opacity: 0; overflow: hidden; z-index: 10;} #footer .foot-quick-sub.active {height: auto; bottom: 5.5rem; opacity: 1;} #footer .foot-quick-sub li {border: 0.1rem solid var(--gray-30); border-bottom: 0;} #footer .foot-quick-sub li a {display: flex; align-items: center; min-height: 4.4rem; padding: 0 var(--spacer6); font-size: var(--fz-body-sm); background-color: var(--white);} #footer .f-cnt {display: flex; justify-content: space-between; align-items: center; flex: 1; gap: var(--spacer6);} #footer .f-cnt .f-info {display: flex; align-items: normal; gap: var(--spacer10);} #footer .f-cnt .f-info .info-addr {position: relative;} #footer .f-cnt .f-info .info-addr:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; right: -2rem; width: 0.1rem; height: 1.4rem; background-color: #CDD1D5; transform: translateY(-50%);} #footer .f-cnt .f-info .info-cs {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: var(--spacer4);} #footer .f-cnt .f-info .info-cs li {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2);} #footer .f-cnt .f-link {display: none; flex-direction: column; flex-shrink: 0; gap: var(--spacer6);} #footer .f-cnt .f-link .link-go {display: flex; flex-direction: column; align-items: flex-end; flex: 1;} #footer .f-cnt .f-link .link-go .btn-txt {font-size: var(--btn-fz-xsm); font-weight: 500;} #footer .f-cnt .f-link .link-go .btn-txt::after {width: 1.2rem; height: 1.2rem;} #footer .f-cnt .f-link .link-sns {display: flex; gap: var(--spacer2); justify-content: flex-end;} #footer .f-cnt .f-link .link-sns a {display: inline-flex; width: 4rem; height: 4rem; border-radius: 4rem; background-repeat: no-repeat; background-size: auto 100%;} #footer .f-cnt .f-link .link-sns a.facebook {background-image: url(../img/foot_ico_sns_facebook.svg);} #footer .f-cnt .f-link .link-sns a.blog {background-image: url(../img/foot_ico_sns_blog.svg);} #footer .f-btm {display: flex; flex-direction: column; padding-top: var(--spacer4); gap: var(--spacer2) var(--spacer4); border-top: 0.1rem solid var(--gray-30);} #footer .f-btm .f-btm-text {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacer1) var(--spacer4);} #footer .f-btm .f-btm-text .f-menu {display: inline-flex; flex-wrap: wrap; gap: 0 var(--spacer3);} #footer .f-btm .f-btm-text .f-menu a {display: flex; align-items: center; padding: 0;} #footer .f-btm .f-btm-text .f-menu a.point {font-weight: 700; color: var(--secondary);} #footer .f-btm .f-btm-text .f-copy {min-width: max-content; font-size: var(--fz-body-sm); color: var(--gray-70); line-height: 1.3; text-align: right;} #footer .f-btm .f-btm-ban {display: flex; align-items: center; min-height: 4rem; padding: var(--spacer2) var(--spacer4); border-radius: var(--rd-6); background-color: var(--white); color: var(--gray-70);} #footer .f-btm .f-btm-ban::before {content: ''; display: none; flex-shrink: 0; width: 7.2rem; height: 2.4rem; margin-right: var(--spacer2); background: url(../img/btm_ban_ico_flag.svg) no-repeat center; background-size: contain;} /*17개 목표와 현황*/ .unsdgs-wrap {display: grid; gap: 0;} .unsdgs-wrap .h-tit-l {margin-bottom: var(--spacer5);} .unsdgs-wrap .unsdgs-tit {display: flex; align-items: center; justify-content: center; gap: var(--spacer2); margin-bottom: var(--spacer7); font-size: var(--fz-title-xlg); color: #084470;} .unsdgs-wrap .unsdgs-tit span {color: #5F8EC6; font-weight: 400;} .unsdgs-wrap .unsdgs-box {display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--spacer1);} .unsdgs-wrap .unsdgs-box li a {display: flex; position: relative; width: 100%; min-width: inherit; transition: var(--transition-1); padding: 0;} .unsdgs-wrap .unsdgs-box li a:hover {transform: rotateY(0); transition: 0;} .unsdgs-wrap .unsdgs-box li a:hover::before {content: '자세히 보기'; display: none; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); color: var(--white);} .unsdgs-wrap .unsdgs-box li a img {width: 100%;} .unsdgs-wrap .ftbtn {display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; justify-content: center; position: relative; transition: 0.6s; transform-style: preserve-3d; -ms-transform-style: preserve-3d; box-sizing: border-box;} .unsdgs-wrap .ftbtn:not(:last-of-type) {border: 0;} .unsdgs-wrap .ftbtn a:hover {transform: rotateY(-180deg); transition: 0.3s;} .unsdgs-wrap .ftbtn a:hover .back {-ms-backface-visibility: visible;} .unsdgs-wrap .front {display: flex; justify-content: center; justify-items: center; align-items: center; height: 152px; min-height: 152px; cursor: pointer; font-size: 20px; font-weight: 900; color: #383838; transform: rotate(0deg); backface-visibility: hidden;} .unsdgs-wrap .front img {margin-left: 12px;} .unsdgs-wrap .back {display: flex; flex-wrap: wrap; align-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 122px; margin: var(--spacer5) 0; background-color: var(--white); z-index: 1; transform: rotateY(-180deg); backface-visibility: hidden;} .unsdgs-wrap .back li {width: 100%; font-size: 17px; line-height: 30px; font-weight: 600;} .unsdgs-wrap .back li a {display: inline-block; position: relative; transition: linear 0.1s;} .unsdgs-wrap .back li:hover a {transform: scale(1.35); font-weight: 700; color: var(--gray-90);} .desc .disc {position: relative; padding-left: var(--spacer6);} .desc .disc::before {content: "•"; position: absolute; top: 1.2rem; left: 0.7rem; color: var(--gray-90); line-height: 0.5;} .bold-tit-s_sub {margin-bottom: var(--spacer5); padding-left: var(--spacer5);} /*지속가능발전공모전 결과*/ .casebook {display: flex; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: var(--spacer5) var(--spacer14); background-color: var(--gray-5); padding: var(--spacer12); margin-bottom: var(--spacer8);} .casebook-photo {display: flex; align-items: center; max-width: 30rem; min-width: 30rem; min-height: 30rem; background: url(../img/thumb_event.svg) no-repeat center 32%; border: 0.1rem solid var(--gray-30); text-align: center; overflow: hidden;} .casebook-photo img {width: 100%; height: 100%; object-fit: cover; font-size: var(--fz-body-xsm);} .casebook-desc {width: 100%;} .casebook-desc .casebook-title {display: grid; gap: var(--spacer4); border-bottom: 0.1rem solid var(--gray-30); min-height: 5rem; padding: 0 var(--spacer4) var(--spacer4) 0;} .casebook-desc .casebook-title h1 {min-height: 3.75rem; font-size: var(--fz-title-xlg); color: var(--secondary); line-height: 1.5;} .casebook-desc .casebook-title span {color: var(--gray-70);} .casebook-desc .casebook-detail {display: flex; flex-direction: column; gap: var(--spacer5); padding: var(--spacer5) 0;} .casebook-desc .casebook-detail .desc {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5; padding: 0; text-align: left; line-height: 1.6; font-size: var(--fz-body-md);} .casebook-desc .casebook-detail .desc:last-of-type {margin-bottom: 0;} .casebook-desc .more {gap: var(--spacer3); position: relative; width: fit-content; padding: 0 var(--spacer2); height: var(--btn-h-xsm); font-size: var(--fz-body-sm); font-weight: 500;} .casebook-desc .more:hover {background-color: var(--gray-20);} .casebook-desc .more:focus {background-color: var(--gray-40);} .casebook-desc .more::after {content: ''; display: block; width: 1.3rem; height: 0.9rem; background: url(../img/ico_arr_more.svg) no-repeat 100%; background-size: contain;} .casebook-detail-row {display: flex; gap: var(--spacer5); align-items: flex-start; min-height: 8.4rem;} .casebook-detail-tit {min-width: 6rem; font-weight: bold;} .casebook-detail-content ul {display: grid; gap: var(--spacer1);} .casebook-detail-content ul li {position: relative; padding-left: var(--spacer4);} .casebook-detail-content ul li::before {content: ''; position: absolute; top: 1rem; left: 0.5rem; width: 0.3rem; height: 0.3rem; background-color: var(--gray-80); border-radius: var(--rd-20);} .casebook-content {flex: 1;} /*세부목표와 지표*/ .toggle-btn {background-color: transparent;} .toggle-btn.toggle-btn .active {background-color:var(--secondary);} .info-section-container {margin-bottom: var(--spacer12); background-color: var(--white); padding: var(--spacer5); border: 1px solid #e0e0e0; box-shadow: 0 0 10px rgba(0,0,0,0.05); word-break: break-all;} .info-section-container * {word-break: keep-all;} .info-block {display: flex; align-items: center; padding: var(--spacer5) 0;} .info-block:not(:last-child) {border-bottom: 0.1rem solid #e0e0e0;} .info-block .logo-container {flex-shrink: 0; min-width: 13rem; max-width: 13rem; min-height: 8rem; max-height: 12rem; display: flex; justify-content: center; align-items: center; margin-right: var(--spacer10); background: var(--gray-5) url(../img/head_logo.svg) no-repeat right center; background-size: 15rem;} .info-block .no-bg {background: none;} .info-block .logo-container img {max-width: 100%; max-height: 100%; object-fit: contain;} .info-block .text-content {flex-grow: 1;} .info-block .title {font-size: var(--fz-title-lg); font-weight: bold; color: var(--primary-70); margin-bottom: var(--spacer2);} .info-block .title a {color: inherit; text-decoration: none; word-break: break-word;} .info-block .title a:hover {text-decoration: underline;} .info-block .description {font-size: 0.95em; line-height: 1.6; margin-bottom: 15px; color: #555;} .info-block .meta-info {font-size: 0.9em; color: #666; margin-bottom: var(--spacer1);} .info-block .meta-info strong {font-weight: bold; margin-right: var(--spacer1);} .search-filter-section {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 15px 0; border-bottom: 1px solid #e0e0e0;} .search-filter-section .left-controls {display: flex; gap: 10px; align-items: center;} .dropdown-wrapper {position: relative;} .dropdown-wrapper select {padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; appearance: none; background-color: var(--white); cursor: pointer; min-width: 100px;} .search-input-wrapper {display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden;} .search-input-wrapper input[type="text"] {border: none; padding: 8px 12px; font-size: 14px; flex-grow: 1; outline: none;} .search-input-wrapper .search-btn {display: flex; align-items: center; justify-content: center; background-color: #337ab7; color: var(--white); border: none; padding: 8px 12px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease;} .search-input-wrapper .search-btn:hover {background-color: #286090;} /* Publications Grid Section */ .publications-grid-container {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 20px 0;} .publication-item {background-color: var(--white); border: 1px solid #ddd; border-radius: var(--rd-8); padding: 20px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease;} .publication-item:hover {transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0,0,0,0.1);} .publication-item .year {font-size: 24px; color: #2c3e50; margin-bottom: 5px; font-weight: bold;} .publication-item .title {font-size: 18px; color: #34495e; margin-bottom: 15px; font-weight: 600;} .publication-item .thumbnail {display: flex; align-items: center; justify-content: center; margin-bottom: 20px; min-height: 200px;} .publication-item .thumbnail img {max-width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.05);} .publication-item .view-original-btn {background-color: #007bff; color: var(--white); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 15px; transition: background-color 0.2s ease; display: inline-block; width: auto;} .publication-item .view-original-btn:hover {background-color: #0056b3;} /*17개 시도별 지방위원회 구성현황*/ .region-wrap {display: grid; gap: var(--spacer4) var(--spacer10); grid-template-columns: repeat(auto-fit, minmax(27.5rem, auto)); position: relative; margin-bottom: var(--spacer5); padding: var(--spacer8); background-color: #F8F8F8;} .region-wrap .desc {position: absolute; top: 2rem; left: 2rem; right: 2rem; padding-left: var(--spacer5); margin-bottom: 0; color: var(--secondary); font-size: var(--fz-body-xsm); font-weight: 400;} .region-wrap .desc::before {content: ''; display: inline-block; position: absolute; top: 0.5rem; left: 0; width: 1.5rem; height: 1.5rem; background: url(../img/ico_info.svg) no-repeat; background-size: contain;} .region-wrap.type2 {display: flex; gap: var(--spacer5); padding: 0; background-color: transparent;} /* 마우스오버: #DADFF7*/ .region-wrap.type2 .img {background-color: #F8F8F8; padding: 0 var(--spacer5);} .region-wrap.type2 .table {margin-bottom: var(--spacer6) !important;} .region-wrap.type2 .table-wrap.list thead {height: 4.2rem; border-top: 0; border-bottom: 0.1rem solid var(--gray-90);} .region-wrap.type2 .table-wrap.list tbody tr td {height: 4.8rem; min-height: 4.8rem;} .region-wrap.type2 .swiper .swiper-wrapper {max-width: 39rem;} .region-wrap.type2 .paging {gap: var(--spacer6);} .region-wrap .tit a {color: #3e3e3e !important;} .region-wrap .table {} .region-wrap .table th, .region-wrap .table .date {color: #6D7882;} .region-wrap .ico-down {display: flex; justify-content: center; align-items: center; width: 2.8rem; height: 2.8rem; border: 0.1rem solid #c8c8c8; border-radius: var(--rd-4);} .region-wrap .ico-down::after {min-width: 1rem; min-height: 1rem; margin: 0; background-size: contain;} .region-wrap .center {display: flex; align-items: center; justify-content: center;} .region-wrap .img {max-width: 43rem; min-height: 22rem; margin-bottom: 0;} .region-wrap .img:last-of-type {margin-bottom: 0;} .region-wrap .img img {width: 100%; height: 100%; object-fit: contain;} .region-wrap .img rect {} .region-wrap .img rect + path {pointer-events: none;} .region-wrap .img rect:hover + path {} .region-wrap .region-slide-wrap {display: flex; justify-content: center; align-items: center; width: 100%; min-height: 8rem; background-color: var(--white); padding: var(--spacer8);} .region-wrap .region:hover {cursor: pointer;} .region-wrap .region.active path, .region-wrap .region:hover path {fill: #DADFF7; cursor: pointer;} .region-wrap .region.active rect, .region-wrap .region:hover rect {fill: #002F53; cursor: pointer;} .region-wrap [class^=swiper-button-] {width: 3.2rem; height: 3.2rem;} .region-wrap [class^=swiper-button-]::after{width: 1.1rem; height: 1.1rem;} .region-wrap .c-info {justify-content: flex-start; gap: var(--spacer4); padding: 0;} .region-wrap .c-info .c-tit {display: flex; align-items: center; position: relative; max-width: 29rem; min-height: 3.2rem; margin-bottom: var(--spacer5); font-size: var(--fz-title-xxlg); color: var(--secondary);} .region-wrap .c-info .c-tag {min-width: 6.4rem; min-height: 2.7rem; font-size: var(--fz-body-sm); border-radius: var(--rd-20); background-color: #002F53; color: var(--white);} .region-wrap .c-info .c-tit-s {min-height: 2.8rem; font-size: var(--fz-title-xlg); color: #1E2124; line-height: 1.4; font-weight: 600; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .region-wrap .c-info .c-tit-s + div {display: -webkit-box; min-height: 8rem; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5;} .region-wrap .swiper {position: relative; width: 100%; height: 100%; overflow: hidden;} .region-wrap .swiper .swiper-slide {min-width: 100%; width: 100% !important; padding: 0;} .region-wrap .swiper-navigation-wrap02 {top: 0; right: 0; background-color: var(--white);} .region-wrap .swiper-navigation-wrap02 .swiper-pagination {} .region-box {display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; list-style: none; margin: 0; justify-items: center;} .region-box .ftbtn {width: 100%; text-align: center; border: 1px solid lightgrey;} .region-box .ftbtn a {display: block; color: black; padding: 10px 0; border-radius: 5px; text-decoration: none; font-weight: 600; transition: 0.3s ease;} .region-box .ftbtn a:hover {background-color: var(--secondary); color: var(--white);} .region-box .ftbtn span {display: inline-block; padding: 0 10px;} /* TOP btn */ .quick-menu {position: fixed; right: 0; bottom: 5rem; transition: var(--transition-4); opacity: 0; z-index: -1;} .quick-menu.on {bottom: calc(2rem + 5vw); width: auto; height: auto; opacity: 1; z-index: 1;} .quick-menu ul {display: flex; flex-direction: column-reverse; gap: var(--spacer2);} .quick-menu ul li {} .quick-menu ul li a:hover {background-color: var(--primary-50);} .quick-menu ul li.btn-location {z-index: 1;} .quick-menu:hover ul li ~ .btn-top a:focus, .quick-menu:hover ul li ~ .btn-top a:hover {background-color: var(--primary-60);} .quick-menu:hover ul li ~ .btn-top a {bottom: 6.5rem; opacity: 1;} .quick-menu ul li a {display: flex; justify-content: center; align-items: center; min-width: 5.4rem; width: 5.4rem; height: 5.4rem; background-color: var(--gray-90); color: var(--white); transition: all 0.3s ease-in-out; transition: var(--transition-2); font-size: var(--fz-body-sm);} /* 개인정보처리방침 */ .labelling {display: flex; gap: 1.7rem; height: 250px;} .labelling li {flex: 1; display: flex; flex-direction: column; gap: 2rem; align-items: center; height: 100%; padding: 3rem 1.8rem; border: 1px solid #C6C6C6; border-radius: 12px;} .labelling li div img {height: 10rem;} .toc {display: flex; flex-wrap: wrap; gap: 2rem; padding: 3rem 4rem; border: 1px solid #C6C6C6; border-radius: 12px;} .toc li {width: calc(100% / 2 - 1rem);} .toc li a {display: flex; align-items: flex-start; gap: 0.8rem; text-decoration: none;} .toc li a img {width: 3rem;} .policy {margin-top: 3rem;} /* admin > wrapper */ .admin .wrapper {position: relative; height: 100%; min-height: 100vh; margin-left: var(--lnbWidth); overflow: hidden;/* transition: var(--transition-1);*/} .admin .wrapper.active {margin-left: 0;} /* admin > table */ .admin .page-cnt-wrap {align-items: center;} .admin .page-cnt-wrap .sch-input-box {/*width: inherit;*/} .admin .page-title-wrap {justify-content: center; padding-bottom: 0; border-bottom: 0;} .admin .page-btn-wrap .btn-wrap {margin-top: 0;} .admin .page-btn-wrap.right {display: flex; align-items: flex-end; justify-content: flex-end; margin: 0 0 var(--spacer3);} .admin .page-btn-wrap.right .btn-wrap {justify-content: flex-end !important; margin: 0;} .admin .page-btn-wrap.right .btn-wrap .btn {min-width: 5rem; min-height: 2.4rem; padding: 0 var(--spacer3); font-size: var(--fz-body-sm);} .admin .table tbody tr th:first-of-type {background-color: var(--primary-5);} .admin .table tbody tr th, .admin .table tbody tr th + td {text-align: left;} .admin .table tbody tr th {font-weight: 500;} .admin .table .desc {align-items: flex-start; min-height: 14rem; margin-bottom: var(--spacer5);} .admin .table iframe ~ .desc {min-height: auto;} .admin .table .form-check input[type=checkbox] ~ label {min-width: 2rem;} .admin .table:not(:last-of-type) {margin-bottom: var(--spacer15);} .admin .table:last-of-type {margin-bottom: var(--spacer4);} .admin .table:last-of-type + .paging {margin-top: var(--spacer20);} .admin .table:last-of-type ~ .page-btn-wrap {margin-bottom: var(--spacer20);} .admin .table:last-of-type ~ .page-btn-wrap.right .btn-wrap {justify-content: space-between;} .admin .table.center .form-check input[type=radio] ~ label {text-indent: -9999px;} .admin .table.center .form-check input[type=checkbox] ~ label {text-indent: -9999px;} .admin .table .disabled th, .admin .table .disabled td, .admin .table .disabled input {background-color: var(--gray-5); color: var(--gray-50);} .admin .table .disabled .btn {background-color: var(--gray-40); color: var(--gray-70);} .admin .table .disabled .btn.blue {background-color: var(--gray-30) !important; color: var(--gray-60) !important; border: 0 !important;} .admin .table .disabled .form-align-box .c-blue {color: var(--gray-50);} .admin .table .disabled .custom-file .custom-file-btn {background-color: #e5e5e5;} .admin input[type=date]::-webkit-calendar-picker-indicator:hover {cursor: default;} .admin .form-check {display: inline-flex;} .admin .tab ul li a {min-width: 15rem; font-size: var(--fz-body-sm);} .admin .up-and-down {display: flex; flex-direction: column; gap: var(--spacer2); justify-content: center; align-items: center;} .admin .up-and-down button {display: inline-flex; min-width: 1.6rem; min-height: 1rem; background-size: contain;} .admin .up-and-down button:focus {outline-offset: 0.2rem;} .admin .up-and-down .up {background: url(../img/ico_arr_top.svg) no-repeat 100%;} .admin .up-and-down .down {background: url(../img/ico_arr_bottom.svg) no-repeat 100%;} .admin .form-align {flex: initial;} .admin .table th .form-align, .admin .table td:first-of-type .form-align {/*justify-content: center;*/} .admin .form-align-box {gap: var(--spacer2);} /* admin > lnb */ /* lnb css */ .admin .lnb {display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; max-width: var(--lnbWidth); min-width: var(--lnbWidth); height: 100%; padding: var(--spacer4); padding-top: var(--spacer7); transition: var(--transition-4); transform: translateX(0); background-color: #2a426d; z-index: 2;} .admin .lnb .scroll {max-height: 60vh; overflow-y: scroll;} .admin .lnb .scroll::-webkit-scrollbar {width: 0.4rem !important; height: 0;} .admin .lnb .scroll::-webkit-scrollbar-thumb {background-clip: padding-box; border: 0; background: linear-gradient(var(--gray-30) 60%, var(--gray-30)); border-radius: var(--rd-20); transition: 0.5s ease;} .admin .lnb .scroll::-webkit-scrollbar-thumb:hover {background: linear-gradient(var(--secondary) 60%, var(--secondary-2)); border-radius: var(--rd-20);} .admin .lnb .scroll::-webkit-scrollbar-track {background: transparent;} .admin .lnb a:focus {outline-color: var(--white); outline-offset: -0.2rem; outline-width: 0.1rem;} .admin .lnb .logo {display: flex; justify-content: center; margin-bottom: var(--spacer7);} .admin .lnb .logo a {display: flex; justify-content: center; width: 100%; max-width: 17rem; min-height: 2.9rem;} .admin .lnb .user-info {display: grid; justify-content: center; align-items: center; gap: var(--spacer4); position: relative; min-height: 9.8rem; padding: var(--spacer4) var(--spacer6); border-radius: var(--rd-4); background-color: var(--primary-80); border: 0.1rem solid var(--gray); cursor: pointer;} .admin .lnb .user-info .user-info-profile {display: flex; justify-content: center; align-items: center; gap: var(--spacer3);} .admin .lnb .user-info .user-info-profile .avatar {border-radius: var(--rd-full);} .admin .lnb .user-info .user-info-profile .name span {font-weight: 700;} .admin .lnb .user-info .user-info-profile .name, .admin .lnb .user-info .user-info-profile .auth {display: flex; min-width: max-content; font-size: var(--fz-title-xsm); color: var(--white); font-weight: 400;} .admin .lnb .user-info .user-info-profile .auth {justify-content: center; align-items: center; padding: 0 var(--spacer2); background-color: var(--primary-50); border-radius: var(--rd-10); font-size: calc(var(--fz-body-xsm) - 0.1rem); font-weight: 300;} .admin .lnb .user-info .user-info-option {display: flex; gap: var(--spacer5); font-size: var(--fz-body-xsm);} .admin .lnb .user-info .user-info-option .myinfo {} .admin .lnb .user-info .user-info-option .myinfo::before {content: ''; display: block; width: 1.6rem; height: 1.6rem; background: url(../img/ico_setting.svg) no-repeat; background-size: contain;} .admin .lnb .user-info .user-info-option .logout {} .admin .lnb .user-info .user-info-option .logout::before {content: ''; display: block; width: 1.6rem; height: 1.6rem; background: url(../img/ico_logout.svg) no-repeat; background-size: contain;} .admin .lnb .user-info .user-info-option a {display: flex; flex-direction: row-reverse; align-items: center; position: relative; min-width: max-content; color: var(--white); font-weight: 300;} .admin .lnb .user-info .user-info-option a:focus {outline-offset: 0.2rem; border-radius: var(--rd-2);} .admin .lnb .user-info .user-info-option a:not(:last-of-type)::after {content: ''; position: absolute; right: -0.9rem; width: 0.1rem; height: 1rem; background-color: #5365A3;} .admin .lnb .tit {display: flex; justify-content: center; align-items: center; min-height: 8rem; text-align: center; font-size: var(--fz-title-lg); color: #bfb9a6; font-weight: 400;} .admin .lnb .lnb-list {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;} .admin .lnb .lnb-list .one-depth {width: 100%;} .admin .lnb .lnb-list .one-depth .one-depth-tit {display: flex; justify-content: space-between; align-items: center; position: relative; min-height: 4.4rem; padding: var(--spacer2) var(--spacer5); margin-bottom: calc(var(--spacer1) - 0.1rem); border-radius: var(--rd-4); background-color: #415881; color: #c9cee1; font-size: var(--fz-title-xsm); font-weight: 400; line-height: 1;} .admin .lnb .lnb-list .one-depth .one-depth-tit::before {content: ''; position: absolute; top: 50%; left: 9px; width: 13.5px; height: 19px; transform: translateY(-47%); opacity: 0.6;} .admin .lnb .lnb-list .one-depth .one-depth-tit::after {content: ''; position: absolute; top: 50%; right: 2rem; width: 1.4rem; height: 0.8rem; background: url(../img/ico_arr_bottom_w.svg) no-repeat; transform: translateY(-50%); transition: var(--transition-2); opacity: 0.6;} .admin .lnb .lnb-list .one-depth .one-depth-tit i {display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; transition: var(--transition-2);} .admin .lnb .lnb-list .one-depth:hover .one-depth-tit {color: var(--white);} .admin .lnb .lnb-list .one-depth.active .one-depth-tit {background-color: #4e76bb; color: var(--white); font-weight: 500;} .admin .lnb .lnb-list .one-depth.active .one-depth-tit::after {transform: rotate(-180deg) translateY(50%);} .admin .lnb .lnb-list .one-depth {display: block;} .admin .lnb .lnb-list .one-depth.none .one-depth-tit::after {display: none;} .admin .lnb .lnb-list .two-depth {display: none; padding: 0 var(--spacer2); margin-bottom: var(--spacer5);} .admin .lnb .lnb-list .two-depth li:not(:last-of-type) {border-bottom: 0.1em solid rgba(255,255,255, 0.2);} .admin .lnb .lnb-list .two-depth li a {display: flex; align-items: center; position: relative; min-height: 3.4rem; padding-left: var(--spacer3); font-size: var(--fz-title-xsm); color: var(--white); font-weight: 300;} .admin .lnb .lnb-list .two-depth li a::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.2rem; height: 0.2rem; background-color: #8091D0; transform: translateY(-50%);} .admin .lnb .lnb-list .two-depth li.active a {background-color: #38b8c4 !important; color: var(--white);} .admin .lnb .lnb-list .two-depth li.active a::before {background-color: var(--white);} .admin .lnb .lnb-list .two-depth li:hover a {background-color: rgba(255,255,255,0.07); color: var(--white);} .admin .lnb .lnb-list .two-depth li:hover a::before {background-color: rgba(255,255,255,1);} /* admin > header */ .admin #header {position: relative; width: 100%; position: sticky; top: 0; right: 0; margin-left: var(--lnbWidth);} .admin .header {display: none; justify-content: space-between; align-items: flex-end; position: relative; /*width: calc(100% - var(--lnbWidth));*/ min-height: 6.5rem; padding: var(--spacer4) var(--spacer9) 0; background-color: var(--primary-80); transition: var(--transition-01); z-index: 2;} .admin .header::before {content: ''; position: absolute; left: 0; right: 0; width: 100%; min-height: 5rem;} .admin .header.active {left: 0;} .admin .header .row {position: relative;} .admin .header h1 {margin-right: 2.5vw; z-index: 1;} .admin .header .gnb-tab {display: flex; position: relative; min-height: 4.8rem;} .admin .header .gnb-tab li {position: relative; width: auto !important; margin-right: var(--spacer1);} .admin .header .gnb-tab li .tit {display: flex; justify-content: center; align-items: center; min-width: 14rem; height: 100%; padding: var(--spacer2) var(--spacer2) var(--spacer1); backdrop-filter: blur(2px); border: 0.1rem solid rgba(255,255,255,0.15); border-radius: var(--rd-6) var(--rd-6) 0 0; font-weight: 300; color: var(--white); font-size: var(--fz-title-sm); line-height: 1;} .admin .header .gnb-tab li .btn-close {position: absolute; width: 1.6rem; height: 1.7rem; right: 1.7rem; /*background: url(../img/ico_close.svg) no-repeat 100% center;*/ text-indent: -9999px;} .admin .header .gnb-tab li:hover .tit {background-color: rgba(255,255,255,0.2);} .admin .header .gnb-tab li.active .tit {background-color: var(--white); font-weight: 700; color: var(--primary-70);} /* admin > section */ .admin .section {min-height: 100vh; padding: var(--spacer10) var(--spacer9) var(--spacer20);} .cke_contents {height: 100% !important; min-height: 40rem;} .cke_wysiwyg_frame, .cke_wysiwyg_div {height: 40rem !important;} iframe {width: 50%; height: 100%; height: 35vh; margin-bottom: var(--spacer10); border: none; overflow: hidden;} .section {position: relative; width: 100%; height: 100%; min-height: 81vh; margin-top: 0; padding: var(--spacer9); padding-top: var(--spacer10); background-color: var(--white); transition: var(--transition-4); overflow: hidden;} .section.active {margin-left: 0;} .component-box {display: flex; flex-direction: column; gap: var(--spacer8); min-height: 34rem;} .section .print {justify-content: space-between;} .section .print a:focus {border-radius: var(--rd-full);} .section .tit-l {display: flex; align-items: center; justify-content: space-between; grid-column-gap: var(--spacer2); position: relative; min-height: 3.2rem; margin-bottom: var(--spacer3); font-size: var(--fz-title-lg); color: #213479;} .section .tit-l span {display: flex; align-items: center; gap: var(--spacer2); position: relative;} .section .tit-l span::before {content: ''; width: 1.7rem; height: 1.7rem; border-radius: var(--rd-full); border: 0.5rem outset #3659D3;} .section .tit-l .btn {min-width: 5.5rem; height: 3rem; font-size: var(--fz-body-xsm);} .section .tit-s {display: flex; align-items: center; margin-bottom: var(--spacer4); font-size: var(--fz-title-lg);} .section .page-cnt-wrap {width: inherit; gap: var(--spacer2);} .section .page-cnt-wrap .flex {display: flex; gap: var(--spacer2);} .symbol-wrap {display: flex; justify-content: space-around; align-items: center; padding: var(--spacer10); border: 0.1rem solid var(--gray-30); border-radius: var(--rd-12);} .symbol-wrap .symbol {width: auto;} .symbol-wrap .btn-wrap, .table .btn-wrap {display: grid; gap: var(--spacer2); justify-content: center;} .symbol-wrap .btn-wrap .btn, .table .btn-wrap .btn {justify-content: space-between; min-width: 15.6rem; height: 3.2rem; padding: 0 var(--spacer4);} .symbol-wrap .btn-wrap a[class*=ico-]::after, .symbol-wrap .btn-wrap button[class*=ico-]::after, .table .btn-wrap a[class*=ico-]::after, .table .btn-wrap button[class*=ico-]::after {min-width: 1.6rem; min-height: 1.4rem; width: inherit !important; height: 1.3rem !important;} .dec-gray-bg {display: flex; flex-wrap: wrap; gap: var(--spacer4) var(--spacer15); min-height: 12.8rem; margin-bottom: var(--spacer10); padding: var(--spacer10); background-color: #EDF1F5; border-radius: var(--rd-12); color: var(--gray-90); font-size: var(--fz-body-lg); line-height: 1.7;} .form-align {display: flex; align-items: center; gap: var(--spacer2); flex: 1 1 45%; position: relative;} .form-align span {line-height: 1;} .form-align.full {flex: 1 !important;} .form-align .btn-box {display: flex; justify-content: space-between; gap: var(--spacer2) var(--spacer3); width: 100%;} .form-align .select-box {display: flex; gap: var(--spacer2) var(--spacer1); width: 100%;} .form-align .tit {min-width: fit-content; width: 100%; max-width: 12rem; font-size: var(--fz-title-xsm); color: var(--gray-90); font-weight: 700;} .sch-btn-wrap {display: flex; justify-content: flex-end; gap: var(--spacer2); width: 100%; padding-top: var(--spacer6); border-top: 0.1rem solid var(--gray-40);} .form-align-box {display: flex; justify-content: flex-start; align-items: center; gap: var(--spacer5);} .form-align-box:not(:last-of-type) {margin-bottom: var(--spacer3);} .form-align-box .c-blue {color: var(--primary-50); font-weight: 400;} .form-align-box .form-align {flex: none;} .form-align-box .date {color: var(--primary-50); font-weight: 300;} /* login-form */ form-group .form-control:placeholder-shown {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .form-group .form-conts.btn-ico-wrap .form-control {padding-right: var(--spacer14);} .form-group .form-conts.btn-ico-wrap .valid, .form-group .form-conts.btn-ico-wrap .btn {position: absolute; top: 50%; right: 1.6rem; min-height: auto; transform: translateY(-52%);} .form-group .form-conts.btn-ico-wrap .valid {right: 5rem;} .form-group .form-conts.btn-ico-wrap.xsm {gap: 0 !important;} .form-group .form-conts.btn-ico-wrap.xsm .valid {right: 2rem;} .btn-ico.ico-pw-visible {background-image: url(../img/ico_pw_visible.svg);} .btn-ico[class*=ico-].md {min-width: auto; width: 2.3rem; height: 2.3rem;} .login-wrap .page-title-wrap {justify-content: center; margin-bottom: 0; padding-bottom: var(--spacer10);} .login-wrap .inner {margin-top: 10%; max-width: 60rem;} .login-form {} .login-form .form-control {font-family: 'Pretendard'; min-height: 4rem;} .login-form .form-group {display: grid; gap: var(--spacer2);} .login-form input[type=checkbox] ~ label::before {top: 46%; left: 1rem;} .login-form .btn {height: auto; min-height: 2.8rem; background-color: transparent; font-size: var(--fz-body-xsm);} .login-form .btn:focus {} .login-form .primary {width: 100%; min-height: 4rem; background-color: var(--secondary-2); color: var(--white); font-size: var(--fz-body-sm);} .login-form-area {display: flex; justify-content: center; width: 100%; padding: var(--spacer10) var(--spacer8); border-bottom: 0.1rem solid var(--gray-30);} .login-form-area .login-wrap {position: relative; width: 100%; max-width: 48rem;} .login-form-area .login-wrap::after {display: none;content: ''; position: absolute; top: 0; right: 0; width: 0.1rem; height: 100%; background-color: var(--gray-30);} .login-form-area .login-info-wrap {width: 100%; padding: var(--spacer6) 0 var(--spacer6) var(--spacer14);} .login-form-area.typeB {justify-content: center; padding: 0; border: 0;} .login-form-area.typeB .login-wrap {max-width: 55rem; padding-right: 0;} .login-form-area.typeB .login-wrap::after {display: none;} .chk-area {display: flex; grid-column-gap: var(--spacer4); grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer2);} .chk-area.chk-column {flex-direction: column;} .fieldset {display: flex; flex-direction: column; gap: var(--spacer6);} @media (max-width: 1200px) { .inner {padding: 0 var(--spacer5); border-bottom: var(--spacer4); box-sizing: border-box;} .is-m-gnb {overflow: hidden;} .top-search-container {justify-content: center;} .top-search-container .inner {max-width: 90rem; flex-wrap: wrap; justify-content: center !important;} .top-search-container .sch-input-box {} .sch-input-box .input-inner input {min-height: 5rem; font-size: var(--fz-title-md);} .sch-input-box .input-inner input::placeholder {font-size: var(--fz-title-md) !important;} .sch-trend {display: flex;} #lnb {position: relative; max-width: 100%; z-index: 1;} .lnb-wrap {width: 100%; min-height: inherit; padding: 0; border: 0;} div:not(.admin) .lnb .one-depth {display: none;} div:not(.admin) .lnb .two-depth {grid-template-columns: repeat(3, 1fr)} div:not(.admin) .lnb .two-depth li.active .two-depth-tit {color: var(--white); background-color: var(--secondary);} div:not(.admin) .lnb .two-depth li.active .two-depth-tit::before, div:not(.admin) .lnb .two-depth li.active + li::before {display: none;} div:not(.admin) .lnb .two-depth li.active .btn-accordion {background: url(../img/ico_arrow_up_w.svg) no-repeat center;} div:not(.admin) .lnb .two-depth > li {display: flex; flex-direction: column; position: relative; width: 100%;} div:not(.admin) .lnb .two-depth > li:not(:nth-of-type(3n+1))::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.1rem; height: 1.8rem; background-color: var(--gray-40); transform: translateY(-50%);} div:not(.admin) .lnb .two-depth-tit {min-height: 5rem; letter-spacing: 0; padding: 0 var(--spacer5); font-size: var(--fz-title-xsm);} div:not(.admin) .lnb .two-depth > li:last-of-type .two-depth-tit, div:not(.admin) .lnb .two-depth > li:last-of-type > a {border-bottom: 0.1rem solid var(--gray-30) !important;} div:not(.admin) .lnb .three-depth {position: absolute; top: 5rem; width: 100%; z-index: 2;} .popup {max-width: 90% !important;} .popup .table td .desc li {flex-wrap: wrap;} .popup .title {border-radius: var(--rd-6) var(--rd-6) 0 0;} .popup.wrap .title ~ .inner {border-radius: 0 0 var(--rd-6) var(--rd-6);} .sitemap {top: 5vw; max-width: 95%; min-height: 82vh; height: 100%;} .sitemap .full-menu {max-height: 73vh;} /* header */ #header .head-gnb .two-depth-wrap, #header.is-open .head-gnb .two-depth-wrap {display: none;} #header .head-gnb .inner {align-items: flex-start;} #header .head-gnb .gnb {flex-wrap: wrap;} #header .head-gnb .gnb .li .one-depth {min-width: 15rem; min-height: 4.6rem; padding: var(--spacer1) var(--spacer3) 0; font-size: var(--fz-title-xsm);} #header .head-gnb .li {position: static;} #header .head-gnb::after, #header .head-gnb .li .one-depth.active + .two-depth-wrap {} #header .head-gnb .li.active .two-depth-wrap {border-bottom: 0.1rem solid var(--gray-30);} #header .head-gnb .li.active .two-depth-wrap, #header .head-gnb .li .one-depth.active + .two-depth-wrap {display: block; left: 0; background-color: var(--white);} #header .head-gnb .li:hover .one-depth + .two-depth-wrap .two-depth a, #header .head-gnb .li.active .one-depth + .two-depth-wrap .two-depth a {color: var(--gray-90);} #header .head-gnb .li .one-depth.active + .two-depth-wrap .two-depth a:focus {outline-color: var(--primary-50);} #header .two-depth-wrap {padding-top: var(--spacer6) !important;} #header .two-depth-wrap .two-depth {grid-template-columns: repeat(3, 1fr); gap: var(--spacer3);} #header .two-depth-wrap .two-depth li {background-color: var(--secondary-5); border-radius: var(--rd-2);} #header .two-depth-wrap .two-depth a {display: flex; min-height: 5rem; padding: 0 var(--spacer3);} .hamburger {bottom: -3.4rem;} /* section */ iframe {width: 100%; height: 50vw; margin-bottom: 0;} #container > .inner {flex-wrap: wrap; gap: var(--spacer6); padding: 0 var(--spacer4) var(--spacer30);} .section {} #section .inner {padding-top: var(--spacer10); padding-bottom: var(--spacer10);} .thumb-list.col3 {grid-template-columns: repeat(2, 1fr);} .thumb-list.col3 .grid:not(:nth-of-type(3n)) {border-right: 0;} .thumb-list.col3 .grid:not(:nth-of-type(2n)) {border-right: 0.1rem solid var(--gray-30);} .unsdgs-wrap .unsdgs-box, .ksdgs-wrap .ksdgs-box {grid-template-columns: repeat(6, 1fr) !important;} .grid-wrap {display: flex; flex-wrap: wrap;} .grid-wrap .grid {gap: var(--spacer5); max-width: 100%;} .grid {max-width: 100%;} .grid-thumb {gap: var(--spacer5);} .grid-thumb .img {min-width: 30rem;} .grid-thumb .desc {line-height: 1.8;} .grid-thumb .thumb-info .h-tit-s {margin-bottom: var(--spacer3);} .casebook {display: flex; gap: var(--spacer6); padding: var(--spacer6);} .casebook-desc {padding: var(--spacer1) var(--spacer3);} .casebook-photo {width: 100%; min-width: 26rem;} .casebook-detail-row {display: grid; gap: var(--spacer3);} .tab-conts-box.slide, .tab-conts .c-thumb {max-width: 100%;} .tab-conts.blue {max-width: 100%;} .page-title-wrap {gap: var(--spacer10); padding-left: var(--spacer2);} .page-cnt-wrap {flex-wrap: wrap; gap: var(--spacer2);} #footer > .inner {flex-wrap: wrap; padding: var(--spacer8) var(--spacer4);} #footer .f-logo {min-height: 3.2rem;} #footer .f-cnt {gap: var(--spacer8);} .login-form-area {flex-wrap: wrap;} .login-form-area .login-wrap {max-width: 100%; padding-right: 0;} .login-form-area .login-wrap::after {display: none;} .login-form-area .login-info-wrap {position: relative; width: 100%; margin-top: var(--spacer8); padding: var(--spacer8) 0 0; border-top: 0.1rem solid var(--gray-30);} .table-wrap.view .contents-wrap {padding: var(--spacer6) var(--spacer3) var(--spacer10);} .ksdgs-wrap .ftbtn .info {padding: var(--spacer7);} .ksdgs-wrap .ftbtn .info .tit {font-size: var(--fz-title-md);} .ksdgs-wrap .ftbtn .info .tit b {font-size: var(--fz-title-lg);} .ksdgs-wrap .ftbtn:nth-of-type(6n) .back {left: 0;} .ksdgs-wrap .ftbtn:nth-of-type(n+13) .back {top: inherit; right: 0; bottom: 0;} .popup .title {font-size: var(--fz-title-lg);} } @media (max-width: 640px) { body {font-size: var(--fz-body-sm);} .btn.border {height: 2.6rem; font-size: var(--fz-body-xsm);} .btn.border img {width: 1.5rem;} .popup.wrap {grid-template-columns: 1fr; top: 20%;} .popup {max-width: 95% !important;} .popup .table, .popup .table td, .popup .table td .desc * {font-size: var(--fz-body-xsm) !important;} #lnb {display: none; max-width: 100%;} .lnb-wrap {} .sch-input-box .flex {gap: var(--spacer3);} .sch-input-box .sch-result-cnt {font-size: var(--fz-title-xsm);} .btn-ico[class*=ico-] {} .intro-section {padding: var(--spacer4);} .region-wrap.type2 {flex-wrap: wrap;} .region-wrap.type2 .paging {} .region-wrap {padding: var(--spacer4);} .region-wrap .region-slide-wrap {padding: 0;} .region-wrap .img {justify-content: center; max-width: 100%; width: 100%; padding: var(--spacer4) !important;} .region-wrap .swiper-navigation-wrap02 {top: 2rem; right: 2rem;} .region-wrap .c-info .c-tit {margin-bottom: 0;} .region-wrap .desc {font-size: var(--fz-body-xsm) !important; line-height: 1.6;} .region-wrap .desc::before {top: 0.4rem; width: 1.3rem; height: 1.3rem;} svg:not(:root) {height: auto;} .paging .page-links {gap: var(--spacer2) 0;} .paging .page-links li a {min-width: 2.4rem; min-height: 2.4rem; font-size: var(--fz-body-xsm);} .paging .page-links .prev {margin-left: var(--spacer1); margin-right: var(--spacer5);} .paging .page-links .next {margin-left: var(--spacer5); margin-right: var(--spacer1);} .page-cnt-wrap .sch-input-box .flex {flex-wrap: wrap;} .page-cnt-wrap .sch-input-box select {max-width: 100%;} .page-cnt-wrap .sch-input-box .sch-input {width: 100% !important;} .page-cnt-wrap .sch-input-box .sch-input input[type=text] {max-width: 100% !important;} #search.active .top-search-container {min-height: 15rem; padding: 0;} .top-search-container .inner {justify-content: center; flex-wrap: wrap; padding: var(--spacer8) var(--spacer5) var(--spacer5) !important;} .top-search-container .tag-list {flex-wrap: wrap; gap: var(--spacer1) var(--spacer2);} .top-search-container .tag-list li {width: inherit;} .top-search-container .tag-list li:first-of-type {font-size: var(--fz-body-xsm);} .top-search-container .tag-list li a {font-size: var(--fz-body-xsm); font-weight: 200;} .top-search-container .sch-input-box {max-width: 48rem;} .top-search-container .btn-close {top: 0.8rem; right: 0.8rem; background-size: 1.8rem;} .sch-trend {display: flex;} .sch-input-box .input-inner input {min-height: 3.6rem; padding: 0 var(--spacer5); font-size: var(--fz-title-xsm);} .sch-input-box .input-inner input::placeholder {font-size: var(--fz-title-xsm) !important;} .sch-input-box .input-inner .sch {min-width: 2.2rem; min-height: 2.2rem; right: 1.5rem;} .sch-input-box .input-inner .del {min-width: 2rem; min-height: 2rem; right: 5.5rem;} .on .sch-input-box .sch-result-cnt.hidden {display: inline;} .on ~ .tab.type2 ul {flex-wrap: wrap;} .on ~ .tab.type2 ul li {flex: 1 1 32%;} .on ~ .tab.type2 .inner {padding: 0;} .tab.type2 ul li {border: 0;} .tab.type2 ul li:not(:last-of-type) {/*border-bottom: 0.1rem solid #C7C7C7;*/} .tab.type2 ul li:nth-last-of-type(2) {border-bottom: 0;} .tab.type2 ul li a {min-width: max-content; min-height: 3.8rem; padding: 0 var(--spacer3); font-size: var(--fz-body-xsm);} .tab.type2 ul li.active::after {display: none;} .search-result {padding: var(--spacer5) 0 0;} .search-result .result-box:not(:last-of-type) {margin-bottom: var(--spacer6);} .search-result .result img {width: 9rem;} .search-result .desc {margin-bottom: var(--spacer5);} .search-result .desc-box {gap: var(--spacer5); padding-top: var(--spacer5);} .search-result .desc-box img {display: none;} .search-result .sch-result-tit {margin: var(--spacer5) 0 var(--spacer8);} .search-result .result-component {margin: 0; padding: var(--spacer3);} .search-result .result-component .result-desc {line-height: 1.5;} .search-result .result-component .result-tit.file::after {bottom: 0.2rem; background-size: 1.6rem;} .sub-visual-title {min-height: 12vh;} .sub-visual-title .tit {font-size: var(--fz-title-lg);} .thumb-list:not(.col3) .grid:not(:first-of-type):nth-of-type(2n+1) {border-left: 0;} .thumb-list.col3 {} .thumb-list.col3 .grid {padding: var(--spacer5) var(--spacer4);} .thumb-list.col3 .d-card-content {gap: var(--spacer3);} .thumb-list.col3 .d-card-content .d-thumbnail {max-width: 17rem; min-height: 20rem; max-height: 20rem; outline-offset: -1rem; outline-width: 1rem;} .thumb-list.col3 .d-card-content .d-thumbnail:hover::before, .thumb-list.col3 .d-card-content .d-thumbnail:hover ~ .desc {display: none;} .thumb-list.col3 .d-card-content .d-thumbnail img {padding: var(--spacer2);} .thumb-list.col3 .d-card-content .d-title {min-height: auto; font-size: var(--fz-title-xsm); line-height: 1.3;} .thumb-list.col3 .d-card-content .desc {top: 52%;} .thumb-list.col3 .d-card-content .desc li, .thumb-list.col3 .d-card-content .desc > p {-webkit-line-clamp: 3;} .thumb-list.col3 .d-card-content .btn {min-width: 7rem; min-height: 2.4rem; font-size: calc(var(--fz-body-xsm) - 0.1rem); border-color: var(--gray-60);} .d-card-container {grid-template-columns: repeat(1, 1fr); gap: var(--spacer5) var(--spacer3);} .d-card .d-card-content {padding: var(--spacer4);} .d-card .d-card-image, .d-card .d-thumbnail {min-height: auto; max-height: 15rem;} .d-card .d-thumbnail img {object-fit: cover;} .d-card .d-title {min-height: auto; font-size: var(--fz-title-sm); line-height: 1.3;} .d-card .d-description {-webkit-line-clamp: 3;} .d-card .d-meta {margin-bottom: var(--spacer2);} .d-card .d-meta:last-of-type {margin-bottom: 0;} .main-heading {flex-direction: column; flex-wrap: wrap; gap: 0 var(--spacer2); font-size: var(--fz-title-md); line-height: 1.6;} .main-heading .highlight-blue {margin-right: 0;} .sdg-main-logo {width: 3.2rem; height: 3.2rem;} .thumb-list .grid {display: grid; flex: 1 1 100%; gap: var(--spacer2) var(--spacer5); padding: var(--spacer4) var(--spacer3) !important;} .thumb-list .grid:not(:first-of-type) {display: flex;} .thumb-list .grid:first-of-type .thumb {min-width: 19rem;} .thumb-list .grid:first-of-type .history .tit .name {font-size: var(--fz-title-lg);} .thumb-list .grid .thumb {max-width: min-content; min-width: 8rem;} .thumb-list .grid .history {gap: var(--spacer5);} .thumb-list .grid .history .tit .name {font-size: var(--fz-title-md);} .thumb-list .grid .history .history-list {gap: 0;} .thumb-list .grid .history .history-list .tit {font-size: var(--fz-body-sm); font-weight: 600;} .thumb-list .grid .history .history-list li {font-size: var(--fz-body-xsm);} .thumb-list .grid .history .history-list li::before {top: 1.2rem;} .accordion-list .answer {flex-wrap: wrap; gap: var(--spacer2); padding: var(--spacer5); line-height: 1.5;} .accordion-list .question > a {min-height: 6.4rem; padding-left: var(--spacer13);} .accordion-list .question::before {top: 1.8rem; left: 1.5rem; min-width: 2.8rem; width: 2.8rem; height: 2.8rem;} .accordion-list .question .tit {font-size: var(--fz-title-xsm);} .intro-section .report-content-list .item {padding: var(--spacer2); font-size: var(--fz-body-xsm);} .inner {padding-top: var(--spacer4);} .desc {margin-bottom: var(--spacer7);} .intro-section .desc {margin-bottom: var(--spacer2);} .desc br {display: none;} .desc.bg {padding: var(--spacer5) var(--spacer6); margin-bottom: var(--spacer8);} .desc.bg-img {min-height: 14rem; padding: var(--spacer4); margin-bottom: var(--spacer7);} .desc.number {display: grid; gap: var(--spacer2); margin-bottom: var(--spacer15);} .desc.number li {padding-left: var(--spacer6); line-height: 1.7; margin-bottom: 0; font-weight: 400;} .desc.number li::before {top: 0.5rem; left: 0; font-size: 1rem; min-width: 1.4rem; min-height: 1.4rem;} .desc .number2 span:not(.tit) {font-weight: 300;} .desc .list {} .desc .list .info {padding-left: var(--spacer4); font-size: var(--fz-body-sm); line-height: 2;} .desc .list .info::before {left: 0.5rem; width: 0.6rem;} .desc .list .info.inner {padding-top: 0;} .desc .list .tit::before {width: 1.2rem; height: 1.2rem;} .desc .disc {padding-left: var(--spacer3);} .desc .disc::before {top: 1rem; left: 0;} .sign span {font-size: var(--fz-title-xsm);} .sign .name {font-size: var(--fz-title-lg);} .history-info .history-list {gap: var(--spacer2);} .history-info .history-list .tit {min-width: inherit;} .history-info .history-list li {gap: var(--spacer2); padding: 0; font-size: var(--fz-body-xsm);} .history-info .history-list li .month {min-width: 5rem;} .history-info .history-list ul {font-size: var(--fz-body-sm);} .history-info .history-list .year::after, .history-info .history-list ul {padding: var(--spacer3) 0;} .slogan {font-size: var(--fz-title-sm); line-height: 1.6; font-weight: 500;} .slogan br {} #header-top {} #header-top .toggle-head {padding: var(--spacer1) var(--spacer3);} #header-top .toggle-head .inner {gap: 0; min-height: 2rem; padding: 0;} #header-top .toggle-head .nuri-txt {padding-left: var(--spacer7); font-size: calc(var(--fz-body-xsm) - 0.2rem);} #header .drop-wrap .drop-menu {left: inherit; right: -1rem; min-width: 10rem; margin-top: var(--spacer1); padding: var(--spacer1); transform: none;} #header .drop-wrap .drop-menu .drop-list .item-link, .drop-wrap .drop-menu .drop-list .item-size {height: 2.6rem; border-radius: var(--rd-4); font-size: var(--fz-body-xsm);} #header .drop-wrap .drop-menu::before {} #header .drop-wrap .item-size.active {font-weight: 500;} #wrap {} #header .head-in {min-height: inherit; flex-wrap: nowrap; gap: var(--spacer1);} #header .inner {padding: var(--spacer3);} #header .logo a {max-height: 2.2rem; line-height: 1.2;} #header .logo .logo-im {height: 100%;} .contents .img.pd {padding: 0;} /* gnb - mobile */ #wrap {overflow-x: visible;} #wrap.scroll-up #header .header-in {border-bottom: 0.1rem solid var(--gray-30);} #header.is-open {border-bottom: 0; z-index: 2;} #header.is-open .header-in {z-index: 2;} #header.is-open .head-gnb {display: block; transform: translateX(0);} #header.is-open .head-gnb .two-depth-wrap {position: static;} #header.is-open .toggle-head {display: none;} #header.is-open .hamburger {position: absolute !important; top: inherit; bottom: 1.9rem !important; z-index: 12;} .hidden #header .head-gnb {padding-right: 0;} #header {} #header .head-gnb {display: none; position: fixed; top: 0; right: 0; bottom: 0; min-height: 100vh; border: 0; transition: ease 0.4s 0.1s; transform: translateX(0%); z-index: 10; background-color: var(--white);} #header .head-gnb::after {display: none;} #header .head-gnb .inner {padding: 0;} #header .head-gnb .gnb {padding: var(--spacer12) 0 var(--spacer5);} #header .head-gnb .gnb .li .one-depth {padding: var(--spacer1) var(--spacer5);} #header .head-gnb .li {width: 100%;} #header .head-gnb .li:first-of-type .one-depth {border-top: 0.1rem solid var(--gray-30);} #header .head-gnb .li .one-depth {justify-content: space-between; padding: var(--spacer1) var(--spacer5) 0; border-bottom: 0.1rem solid var(--gray-30);} #header .head-gnb .li:hover .one-depth + .two-depth-wrap, #header .head-gnb .li.active .one-depth + .two-depth-wrap {background-color: transparent; overflow-y: scroll; max-height: 66vh;} #header ::-webkit-scrollbar {width: 0 !important;} #header .head-gnb .li:hover .one-depth + .two-depth-wrap .two-depth a, #header .head-gnb .li.active .one-depth + .two-depth-wrap .two-depth a {color: var(--gray-90); font-weight: 300;} #header .head-gnb .li:hover .one-depth, #header .head-gnb .li.active .one-depth {background-color: transparent; color: var(--gray-90);} #header .head-gnb .li:hover .one-depth::after, #header .head-gnb .li.active .one-depth::after {background: url(../img/ico_arrow_down.svg) no-repeat 50%; background-size: 2.1rem;} #header .head-gnb .li .one-depth::before {display: none;} #header .head-etc {display: none;} #header .btn {height: auto !important; padding: 0; font-size: calc(var(--fz-body-xsm) - 0.2rem) !important;} #header .btn-navi {justify-content: center; min-width: 2.8rem; min-height: 2.8rem; gap: 0; font-size: var(--fz-label-xsm); padding: 0; border-radius: var(--rd-full); text-indent: -9999px;} #header .btn-navi.sch::before {min-width: 1.5rem; min-height: 1.5rem;} #header .btn-navi.m-all {display: flex;} #header .right .sch-trend .top .tit {display: none;} #header .right .sch-trend .schTrendSwiper {width: 100%;} #header .right .sch-trend .bottom {width: 100%;} #header .right .sch-trend .bottom li {} #header .right .sch-trend .bottom a {width: 100%; font-size: 1.2rem; line-height: 1.3;} #header .two-depth-wrap {position: static; min-height: inherit; padding: var(--spacer3) var(--spacer5) !important;} #header .two-depth-wrap .two-depth {grid-template-columns: auto; gap: var(--spacer2);} #header .two-depth-wrap .two-depth li {background-color: transparent;} #header .two-depth-wrap .two-depth a {min-height: 3.4rem; padding: 0;} #header .three-depth {display: grid; gap: var(--spacer2);} #header .three-depth li {position: relative;} #header .three-depth li a {min-height: 3.2rem; padding: 0 var(--spacer5) !important; background-color: var(--gray-5) !important; font-size: var(--fz-body-xsm) !important;} #header .three-depth li::before {content: ''; position: absolute; top: 1.6rem; left: 1rem; width: 0.2rem; height: 0.2rem; background-color: var(--gray-90); z-index: 1;} .hidden .hamburger {position: absolute !important; right: 1.2rem !important; bottom: inherit !important;} .hamburger.btn-m {display: flex; top: -1.8rem; right: 2.2rem; min-width: 2rem !important; position: static; margin-left: var(--spacer3); padding-top: 0; z-index: 0; transition: none;} .hamburger .line1 {top: 0.2rem;} .hamburger .line3 {bottom: 0.2rem;} .hamburger.active .line1 {transform: translate(0px, 6px) rotate(45deg);} .hamburger.active .line2 {display: none;} .hamburger.active .line3 {transform: translate(0px, -6px) rotate(-45deg);} .sitemap, .sitemap.active {display: none;} .dim {z-index: 1;} .page-title-wrap {gap: var(--spacer5); margin-bottom: var(--spacer3); padding-left: 0; padding-bottom: var(--spacer2); border-width: 0.3rem;} .page-title-wrap .btn-print {min-width: 3.2rem; min-height: 3.2rem; background-size: 1.8rem;} .h-tit {font-size: var(--fz-title-md); line-height: 1.5;} .h-tit-l {font-size: var(--fz-title-md); padding-left: var(--spacer4); margin-bottom: var(--spacer3); line-height: 1.4;} .h-tit-l:first-of-type {flex-wrap: wrap; gap: var(--spacer1); margin-top: var(--spacer8);} .h-tit-l::before {top: 1.3rem; left: 0; width: 1.1rem; height: 1.4rem;} .h-tit-l:not(:first-of-type)::before {top: 75%;} .h-tit-s {padding-left: var(--spacer3); margin-bottom: var(--spacer1); font-size: var(--fz-title-xsm);} .h-tit-s::before {top: 0.8rem; left: 0rem; width: 0.8rem; height: 0.8rem;} .h-tit-s.border {padding: 0; margin-bottom: var(--spacer6); border-radius: var(--rd-6);} .h-tit-s.border::before {display: none;} .h-tit-s.border span {flex-wrap: wrap; height: inherit; padding: var(--spacer2); font-size: var(--fz-title-xsm);} .h-tit-s.border b {justify-content: center; width: 100%; min-height: 3.4rem; margin-bottom: var(--spacer3); margin-right: 0; padding: 0; font-size: var(--fz-title-xsm); font-weight: 400;} .bold-tit-l {padding-left: 0; margin-bottom: var(--spacer6); font-size: var(--fz-title-md);} .bold-tit-s {padding-left: 0; margin-bottom: var(--spacer1); line-height: 1.5; color: var(--secondary);} .bold-tit-s_sub {margin-bottom: var(--spacer2); padding-left: var(--spacer2);} #section .inner {padding: 0;} #container > .inner {gap: 0; flex-wrap: wrap; min-height: 60rem; padding: var(--spacer4) var(--spacer4) var(--spacer10);} .conts-inner .grid-wrap {gap: var(--spacer5);} .table thead tr th {padding: 0;} .table th, .table td {height: 4rem; padding: var(--spacer2); font-size: var(--fz-body-xsm);} .desc, .desc li, .desc > p, .intro-section .desc, .table td .desc, .table td .desc span {font-size: var(--fz-body-sm) !important;} .view-prev-list li dl {gap: 0;} .article-bg:first-of-type, .article-bg:first-of-type::before {min-height: 33rem;} .article-bg:nth-of-type(2) {min-height: auto; padding: var(--spacer7) 0;} .article-bg:nth-of-type(2) .inner {padding: 0 var(--spacer5) !important;} .grid-wrap {gap: 0;} .grid-wrap .grid {padding: var(--spacer8) var(--spacer3); border-bottom: 0.1rem solid var(--gray-20);} .grid-wrap .grid .tit {font-size: var(--fz-title-md);} .grid-thumb {grid-template-columns: 1fr; margin-bottom: var(--spacer3);} .grid-thumb .img {min-width: 100%;} .grid-thumb.full {gap: 0;} .grid-thumb.full .img {margin-top: var(--spacer5);} .grid-thumb.reverse {display: flex; flex-direction: column;} .grid-thumb .thumb-info .h-tit-s {padding-left: var(--spacer3); font-size: var(--fz-title-xsm); line-height: 1.4;} .grid-thumb .thumb-info .h-tit-s::before {top: 0.7rem; width: 0.8rem; height: 0.8rem;} .graph-grid-wrap {padding: 0;} .graph-grid-wrap .graph img {max-width: 18rem; min-height: auto;} .graph-grid-wrap .graph-table {min-height: 12rem; gap: var(--spacer4);} .graph-grid-wrap .grid-wrap .graph-wrap .graph {min-height: auto;} .challenge-list {flex-wrap: wrap; gap: var(--spacer5); min-height: inherit; padding: var(--spacer4);} .challenge-list ul {gap: var(--spacer1);} .challenge-list ul li {font-size: var(--fz-body-xsm);} .challenge-list ul li::before {top: 0.4rem; min-width: 1.3rem; min-height: 1.3rem;} .challenge-list .tit {padding-left: var(--spacer5);} .challenge-list .tit::before {top: 0.3rem; width: 1.2rem; height: 2rem;} .ksdgs-wrap .ksdgs-tit {flex-wrap: wrap; gap: 0 var(--spacer3);} .ksdgs-wrap .ksdgs-tit::before {width: 3.2rem; height: 3.2rem; background-size: contain;} .ksdgs-wrap .ksdgs-tit span {font-size: var(--fz-title-md);} .ksdgs-wrap .ftbtn {position: relative;} .ksdgs-wrap .ftbtn .info {padding: var(--spacer5) var(--spacer3) var(--spacer2) var(--spacer5); background-color: transparent !important;} .ksdgs-wrap .ftbtn .info .tit {font-size: var(--fz-title-sm);} .ksdgs-wrap .ftbtn .info .desc {font-size: var(--fz-body-xsm); font-weight: 300;} .ksdgs-wrap .ftbtn .info .icon img {max-width: 4rem; max-height: 3rem;} .ksdgs-wrap .ftbtn .info .icon a {font-size: var(--fz-body-xsm); font-weight: 300;} .ksdgs-wrap .ftbtn .info:hover, .ksdgs-wrap .ftbtn:hover .flip-inner {transform: none;} .ksdgs-wrap .back {top: inherit !important; min-width: inherit !important; min-height: inherit !important; transform: none;} .ksdgs-wrap .back .tit, .ksdgs-wrap .back .desc, .ksdgs-wrap .back img {display: none !important;} .ksdgs-wrap .back a {position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100% !important; text-indent: -9999px; border-radius: 0;} .ksdgs-wrap .ksdgs-box {gap: var(--spacer1);} .ksdgs-wrap .ksdgs-box li.active a {border-width: 0.3rem;} .unsdgs-wrap .unsdgs-box {grid-template-columns: repeat(4, 1fr);} #chartContainer {width: 100% !important; max-width: 95%; height: inherit !important;} .casebook {justify-content: center; flex-wrap: wrap; gap: var(--spacer2); padding: var(--spacer4);} .casebook-desc {padding: var(--spacer5) 0 var(--spacer2);} .casebook-desc .casebook-title h1 {min-height: 3rem; line-height: 1.3; font-size: var(--fz-title-md);} .casebook-desc .casebook-title span {} .casebook-desc .casebook-detail {padding: var(--spacer4) 0;} .casebook-desc .more {font-size: var(--fz-body-xsm);} .casebook-photo {flex-wrap: wrap; min-width: fit-content; background-size: inherit;} .casebook-detail-row {min-height: inherit;} .info-section-container {padding: var(--spacer3);} .info-block {display: grid; gap: var(--spacer4);} .info-block:first-of-type {padding-top: 0;} .info-block .description {font-size: var(--fz-body-xsm);} .info-block .logo-container {min-height: auto; max-height: inherit; overflow: hidden;} .info-block .title a {font-size: var(--fz-body-md);} .breadcrumb-wrap .breadcrumb {gap: var(--spacer2);} .breadcrumb-wrap .breadcrumb li {display: none;} .breadcrumb-wrap .breadcrumb li.home, .breadcrumb-wrap .breadcrumb li:last-child {display: flex;} .breadcrumb-wrap .breadcrumb li:not(:nth-child(2)):last-child::before {content: ''; order: 1; display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; width: 1.6rem; height: 1.6rem; background: url(../img/ico_bread_dot.svg) no-repeat; background-size: contain;} .breadcrumb-wrap .breadcrumb li:not(:nth-child(2)):last-child::after {content: ''; order: 2; display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; width: 1.4rem; height: 1.4rem; background: url(../img/ico_arrow_right.svg) no-repeat; background-size: contain;} .breadcrumb-wrap .breadcrumb li:not(:nth-child(2)):last-child .txt {order: 3;} .breadcrumb-wrap .breadcrumb li.home, .breadcrumb-wrap .breadcrumb li:last-child {gap: var(--spacer2);} .indexSwiper {min-height: 33rem;} .indexSwiper .swiper-slide .slide-tit-box {gap: var(--spacer5) 0;} .indexSwiper .swiper-slide .slide-tit-box .more {max-width: 12rem; min-height: 3.5rem; margin-bottom: var(--spacer7); font-size: var(--fz-body-xsm);} .indexSwiper .swiper-slide .slide-tit-box .slide-tit .tit {font-size: var(--fz-title-xlg);} .indexSwiper .swiper-slide .slide-tit-box .slide-tit .desc {padding: 0;} .indexSwiper .swiper-navigation {top: 10.6rem; bottom: 0; left: auto; right: 4.35rem; height: inherit;} .indexSwiper .swiper-navigation [class^=swiper-button-] {width: 4rem; height: 4rem; border: 0.1rem solid rgba(255,255,255,0.3); border-radius: var(--rd-full);} .indexSwiper .swiper-navigation .swiper-button-prev, .indexSwiper .swiper-navigation .swiper-button-next {display: none;} .indexSwiper .swiper-navigation2 {gap: var(--spacer14); position: absolute; bottom: -14.6rem; right: 0; padding: 0 var(--spacer4);} .indexSwiper .swiper-navigation2 [class^=swiper-button-] {width: 4rem; height: 4rem;} .indexSwiper .swiper-navigation2 .swiper-button-prev::after, .indexSwiper .swiper-navigation2 .swiper-button-next::after {width: 1.4rem; height: 1.4rem;} .tab-conts.blue .c-info {min-width: 22rem; gap: var(--spacer5); padding: var(--spacer4);} .tab-conts.blue .c-thumb {min-width: 36vw; min-height: 17rem;} .tab-conts.blue .c-info-box {min-width: 40vw; gap: var(--spacer1);} .tab-conts.border .c-info {padding: var(--spacer5);} .tab-conts .c-info .c-txt, .tab-conts * {font-size: var(--fz-body-xsm);} .tab-conts .c-info {gap: var(--spacer4); padding: var(--spacer7) var(--spacer5) var(--spacer5);} .tab-conts .c-info .c-tag {min-width: 3rem; border-radius: var(--rd-2);} .tab-conts .c-info .c-tit {-webkit-line-clamp: 1;} .tab-conts .c-info .c-txt {-webkit-line-clamp: 4;} .tab-conts-box.slide .swiper {min-width: inherit;} .swiper-pagination {display: none;} .swiper-navigation-wrap02 {top: 2.9rem; right: var(--spacer3);} .table-wrap.flex {flex-wrap: wrap;} .table-wrap.view .contents-wrap {padding: var(--spacer5) var(--spacer2) var(--spacer8);} .table-wrap.view .title-top .tit {min-height: auto; padding: var(--spacer5) var(--spacer2); font-size: var(--fz-title-sm); line-height: 1.3;} .table-wrap.view .title-top dl {font-size: var(--fz-body-xsm);} .table-wrap.view .title-top dl:not(:last-of-type)::after {right: -0.9rem; height: 1.2rem;} .table-wrap.view .title-top dl dt::after {right: -0.6rem;} .table-wrap.view .title-top .writer {gap: var(--spacer1) var(--spacer4); padding: var(--spacer3);} .symbol-wrap {flex-direction: column; gap: var(--spacer5); padding: var(--spacer4);} .symbol-wrap .btn-wrap {display: flex;} .symbol-wrap .btn-wrap .btn, .table .btn-wrap .btn {min-width: fit-content; height: 2.8rem; padding: 0 var(--spacer2); font-size: calc(var(--fz-body-xsm) - 0.2rem);} .symbol-wrap .btn-wrap a[class*=ico-]::after, .symbol-wrap .btn-wrap button[class*=ico-]::after, .table .btn-wrap a[class*=ico-]::after, .table .btn-wrap button[class*=ico-]::after {min-width: 1.4rem; min-height: 1.4rem;} #footer .f-logo {width: 12rem; min-width: inherit; min-height: 3rem;} #footer > .inner {gap: var(--spacer3) var(--spacer8); padding: var(--spacer5);} #footer .f-cnt {flex-direction: column; align-items: flex-end; gap: var(--spacer1); padding-bottom: var(--spacer3);} #footer .f-cnt .f-info {width: 100%; flex-direction: column; gap: var(--spacer1) var(--spacer4); font-size: var(--fz-body-xsm);} #footer .f-cnt .f-link .link-go {gap: var(--spacer4);} #footer .f-cnt .f-link .link-go .btn-txt {font-size: var(--fz-body-sm); height: auto;} #footer .f-btm {flex-direction: column; font-size: var(--fz-body-sm);} #footer .f-btm .f-btm-text {flex-direction: column; align-items: flex-start; gap: var(--spacer2); width: 100%;} #footer .f-btm .f-btm-text .f-menu {gap: var(--spacer4) var(--spacer6);} #footer .f-btm .f-btm-text .f-menu a {font-size: var(--fz-body-sm); height: auto; padding: 0;} #footer .f-btm .f-btm-text .f-copy {min-width: inherit; text-align: left;} #footer .f-btm .f-btm-ban .ban-txt {line-height: 1.1; word-break: break-all;} #footer .foot-quick .inner {flex-direction: column; padding: 0;} #footer .foot-quick .inner .link {font-size: var(--fz-body-sm); max-width: inherit; min-height: 4.8rem; padding: 0 var(--spacer4); border: 0;} #footer .foot-quick .inner .link:first-child {border: 0;} #footer .foot-quick .inner .link:not(:first-child) {border-top: 0.1rem solid var(--gray-30);} #footer .foot-quick .inner .none {flex-direction: column; gap: 0; height: auto; padding: 0;} #footer .foot-quick .inner .plus {min-height: 5.4rem; padding: 0 var(--spacer4);} #footer .foot-quick-sub {position: static;} .login-form-area {padding: var(--spacer10) 0;} .login-form .form-group {border-bottom: 0; padding-bottom: 0;} .login-form-area .login-info-wrap {font-size: var(--fz-body-sm);} .login-form .form-group .md {max-width: 100%;} } /* 영문 css */ .eng #header .logo a {height: 3.5rem;} .eng .popup {top: 50%; left: 50%; max-width: 124rem; max-height: 85vh; height: auto; grid-template-columns: auto; transform: translate(-50%, -50%);} .eng .popup .title {min-height: 7.5rem; padding: 0 var(--spacer7); font-size: var(--fz-title-xlg); background-color: #1CAAB1;} .eng .popup .title ~ .inner {padding: var(--spacer8) var(--spacer7) var(--spacer12) !important;} .eng .popup .title ~ .inner .component-box {padding: 0; padding-right: var(--spacer3); min-height: 30rem; max-height: 70vh; overflow-y: scroll;} .eng .popup .btn-close {right: 2.5rem; min-width: 3rem; height: 3rem;} .eng .popup .inner .h-tit-s {padding-left: var(--spacer5); margin-bottom: var(--spacer2); font-weight: 600;} .eng .popup .inner .h-tit-s::before {left: 0; filter: brightness(0) saturate(100%) invert(66%) sepia(40%) saturate(1223%) hue-rotate(142deg) brightness(77%) contrast(70%);} .eng .popup .table thead {border: 0.1rem solid var(--gray-30); border-left: 0; border-right: 0; background-color: var(--gray-5);} .eng .popup .table tbody tr th:first-of-type {background-color: var(--gray-5);} .eng .article-bg, .eng .indexSwiper {align-items: flex-start; min-height: 27rem;} .eng .article-bg:nth-of-type(2n+1) {align-items: flex-start; background-color: transparent;} .eng .article-bg .inner {padding: var(--spacer7) var(--spacer5);} .eng .article-bg .desc {display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin-bottom: var(--spacer5); font-size: var(--fz-body-md); line-height: 1.4;} .eng .article-bg:nth-of-type(2) {margin-top: var(--spacer11);} .eng .indexSwiper {min-height: 32rem;} .eng .indexSwiper .swiper-slide::before {background: linear-gradient(rgba(81, 35, 0, 0.4));} .eng .indexSwiper .swiper-slide .slide-tit-box {justify-content: center; align-items: center; text-align: center; padding-top: 0;} .eng .indexSwiper .swiper-slide .slide-tit-box .slide-tit {max-width: 78rem;} .eng .indexSwiper .swiper-slide .slide-tit-box .slide-tit .tit {font-size: var(--fz-title-xxxlg);} .eng .weather {flex-wrap: wrap; justify-content: flex-start; margin-bottom: var(--spacer10);} .eng .weather li {display: flex; align-items: center; gap: var(--spacer2);} .eng .grid-thumb .thumb-info .desc {line-height: 2;} .eng .grid-wrap {gap: var(--spacer4) var(--spacer9);} .eng .grid-wrap .tit {display: flex; justify-content: center; font-size: var(--fz-title-xlg); line-height: 1.4;} .eng .grid-wrap .tit + .desc strong {color: var(--secondary);} .eng .grid-wrap .btn {width: 100%;} .eng .grid-wrap .btn.ico-arr {justify-content: space-between; min-height: 5rem; padding: 0 var(--spacer8); background-color: var(--white); border: 0.1rem solid var(--gray-20);} .eng .grid-wrap .grid {max-width: inherit; background-color: var(--gray-5);} .eng .grid-wrap.col {flex-direction: column;} .eng .grid-wrap:not(.col) .grid {gap: 0; justify-content: space-between; padding: var(--spacer11);} .eng .grid-wrap:not(.col) .tit {justify-content: flex-start;} .eng .ksdgs-wrap .ftbtn .info {padding: 0; background-color: transparent !important;} .eng .ksdgs-wrap .ftbtn .info:hover {transform: none;} .eng .ksdgs-wrap .ftbtn .info .tit {font-size: var(--fz-title-sm);} .eng .ksdgs-wrap .ftbtn .info .desc {font-size: var(--fz-body-xsm); font-weight: 300;} .eng .ksdgs-wrap .ftbtn .info .icon img {object-fit: cover;} .eng .ksdgs-wrap .ftbtn .info .icon a {width: 100%; height: 100%; border-radius: 0; padding: 0; font-weight: 300;} .eng .ksdgs-wrap .ftbtn:hover {} .eng .ksdgs-wrap .ftbtn:hover .flip-inner {transform: none;} .eng .ksdgs-wrap .back {top: inherit !important; min-width: inherit !important; min-height: inherit !important; transform: none;} .eng .ksdgs-wrap .back .tit, .eng .ksdgs-wrap .back .desc, .ksdgs-wrap .back img {display: none !important;} .eng .ksdgs-wrap .back a {display: flex; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; text-indent: -9999px;} .eng .ksdgs-wrap .ksdgs-box {grid-template-columns: repeat(auto-fit, minmax(14.84rem, auto));} .eng .lnb-wrap {min-height: inherit;} .eng .lnb .one-depth {font-size: var(--fz-title-xlg) !important; background: none !important; color: var(--gray-90) !important;} .eng .lnb .two-depth-tit, .eng .lnb .two-depth-tit a {letter-spacing: 0 !important;} .eng .grid-thumb .img img {/*object-fit: contain;*/} .eng .grid-thumb.full .img {max-width: 100%; min-height: inherit;} .eng .grid-thumb.full .img img {background-color: transparent;} .eng .desc.number li::before {content: counter(number); font-size: var(--fz-body-sm); border: 0;} .eng .desc.number li::after {content: '.'; position: absolute; top: -0.2rem; left: 1.8rem;} .eng .tab-conts-box .tab {display: grid; grid-template-columns: repeat(auto-fill, minmax(auto, 12rem)); gap: var(--spacer3); padding: 0 var(--spacer7) var(--spacer7);} .eng .tab-conts-box .tab li {} .eng .tab-conts-box .tab li a {display: flex;} .eng .tab-conts-box .tab li a:hover {opacity: 0.8;} .eng .tab-conts-box .tab li img {width: 100%;} .eng .tab-info .bold-tit-s {display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacer2); width: 100%; min-height: 6.6rem; margin-bottom: 0; padding: var(--spacer3) var(--spacer5) var(--spacer3) var(--spacer7); background-color: var(--gray-5); border-radius: var(--rd-6); overflow: hidden;} .eng .tab-info .bold-tit-s + .desc-list {display: flex; flex-direction: column; min-height: 29rem; gap: var(--spacer7); padding: var(--spacer7) var(--spacer8);} .eng .tab-info .bold-tit-s span {height: auto; line-height: 1.2;} .eng .tab-info .bold-tit-s .btn-wrap {min-width: 21rem; gap: 0; border-radius: var(--rd-6); border: 0.1rem solid var(--gray-30); overflow: hidden;} .eng .tab-info .bold-tit-s .btn-wrap .btn {position: relative; width: 100%; min-height: 3.4rem; max-height: max-content; border: 0; border-radius: 0;} .eng .tab-info .bold-tit-s .btn-wrap .btn:focus {outline-offset: -0.4rem;} .eng .tab-info .bold-tit-s .btn-wrap .btn:not(:first-child) {padding: 0 var(--spacer4);} .eng .tab-info .bold-tit-s .btn-wrap .btn:not(:first-child)::before {content: ''; position: absolute; left: -0.8rem; width: 0.1rem; height: 0.9rem; background-color: var(--gray-40);} .eng .search-result {align-items: center; min-height: 100vh;} @media (max-width: 1200px) { .eng #container > .inner {min-height: inherit;} .eng .lnb-wrap {display: none;} .eng :not(.h-tit-l) + .grid-wrap {flex-wrap: nowrap; gap: var(--spacer5);} .eng .grid-wrap:not(.col) .grid {padding: var(--spacer6);} .eng .popup .title {min-height: 5.5rem; font-size: var(--fz-title-lg);} } @media (max-width: 640px) { .eng .popup .title {min-height: 5.5rem; padding: 0 var(--spacer10) 0 var(--spacer5); font-size: var(--fz-title-xsm); line-height: 1.4;} .eng .popup .tit {line-height: 1.4;} .eng .popup .btn-close {right: 1.5rem; min-width: 1.8rem; height: 1.8rem;} .eng .popup .title ~ .inner {padding: var(--spacer4) !important;} .eng .popup .inner .h-tit-s {font-size: var(--fz-title-xsm); line-height: 1.2;} .eng .popup .table {overflow-x: scroll;} .eng .popup .table th, .eng .popup .table td {padding: var(--spacer2); font-size: var(--fz-body-xsm) !important;} .eng .popup .table th {padding: 0;} .eng .popup .title ~ .inner .component-box {padding-right: var(--spacer1);} .eng .ksdgs-wrap .ksdgs-tit {display: inline-block; padding-left: var(--spacer9); font-size: var(--fz-title-lg);} .eng .ksdgs-wrap .ksdgs-tit::before {position: absolute; left: 0; width: 2.6rem; height: 2.6rem;} .eng .indexSwiper .swiper-slide .slide-tit-box {padding: var(--spacer5);} .eng .indexSwiper .swiper-slide .slide-tit-box .slide-tit .tit, .eng .grid-wrap:not(.col) .tit {font-size: var(--fz-title-lg);} .eng .indexSwiper .swiper-slide .slide-tit-box .desc {font-size: var(--fz-body-xsm);} .eng .article-bg:nth-of-type(2) {margin-top: 0;} .eng .article-bg .desc {padding: 0; font-size: var(--fz-body-sm);} .eng .grid-wrap:not(.col) .grid, .eng .article-bg:last-of-type {padding: var(--spacer5) var(--spacer6);} .eng .article-bg, .eng .indexSwiper {min-height: 22rem;} .eng .desc.number li::after {top: 0; left: 1.5rem;} .eng .tab-info .bold-tit-s {padding: var(--spacer4);} .eng .tab-info .bold-tit-s + .desc-list {padding: var(--spacer5) 0;} .eng .tab-info .bold-tit-s .btn-wrap {min-width: auto;} .eng .tab-info .bold-tit-s .btn-wrap .btn {min-height: 3rem; font-size: var(--fz-body-xsm);} .eng .tab-conts-box .tab {gap: var(--spacer1); grid-template-columns: repeat(auto-fill, minmax(6rem, auto)); padding: 0 0 var(--spacer5);} .eng .grid-wrap {flex-wrap: wrap;} .eng .grid-wrap .grid {border-bottom: 0;} .eng .grid-wrap .grid-wrap {flex-wrap: wrap; gap: var(--spacer2);} .eng .grid-wrap:not(.col) .grid {max-height: inherit;} .eng .grid-wrap .tit {font-size: var(--fz-title-lg);} .eng .grid-wrap .btn.ico-arr {padding: 0 var(--spacer4);} .eng .grid-wrap.col {flex-direction: column; flex-wrap: wrap;} .eng .grid-wrap.col .img {width: 100%; overflow: hidden;} .eng .grid-wrap.col img {width: 100%;} }