@charset "UTF-8";
/* NO CSS*/
@keyframes bizMoreRotate { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
@keyframes bizScrollDown { 0% { bottom: calc(100% + 1.2rem); }
  50% { bottom: calc(100% + 2.4rem); }
  100% { bottom: calc(100% + 1.2rem); } }
@keyframes dash { to { stroke-dashoffset: 0; } }
html { font-size: 10px; }

p, ul li, ol li { font-size: 1.8rem; }

html { min-width: 1920px; }

.overlay { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100%; background-color: #000; opacity: 0; z-index: 5; }

[data-blind*="on"] .overlay { visibility: visible; opacity: .4; }
[data-blind*="on"][data-overlay*="on"] .overlay { opacity: .7; z-index: 50; transition: .35s opacity, 0s visibility; }
[data-blind*="on"][data-blind="on-popup"] .overlay { z-index: 15; }

.animation-text { aspect-ratio: 1920 / 400; font-family: "SBAggro"; font-weight: 700; }

.aggro { font-family: "SBAggro"; }

.color-black { color: #222 !important; }
.color-gradient { background: linear-gradient(to right, #eb717e, #ef1353, #4643b0, #1ba7e4, #0ea7c2); color: transparent; background-clip: text; -webkit-background-clip: text; }

.layout { padding: 0; width: 1400px; }

i[class*="ri-"], i[class^="ri-"], i[class*="icon-"], i[class^="icon-"] { font-weight: 400 !important; line-height: 1 !important; }

.header { padding: 0; width: 100%; min-width: 1820px; height: 9rem; z-index: 10; }
.header:before { display: none; }
.header-container { position: relative; width: 1820px; }
.header-logo { left: 0; }
.header-logo > a { width: 26.9rem; aspect-ratio: 269 / 38; background: url(/sdgs/public/images/layout/header-logo-black.svg) no-repeat 50% 50%/contain; }
.header-logo > a img { display: none; }
.header-util { right: 0; display: flex; align-items: center; gap: 2.8rem; }
.header-util > div a:has(> i), .header-util > div button:has(> i) { display: flex; justify-content: center; align-items: center; }
.header-util > div a:has(> i) > i[class*="social-icon"], .header-util > div button:has(> i) > i[class*="social-icon"] { width: 2.4rem; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
.header-util > div a:has(> i) > i[class^="ri-"], .header-util > div button:has(> i) > i[class^="ri-"] { font-size: 2.4rem; }
.header-util-social { display: flex; gap: 2rem; }
.header-util-social .social-icon-facebook { background-image: url(/sdgs/public/images/layout/social-facebook-black.svg); }
.header-util-social .social-icon-youtube { background-image: url(/sdgs/public/images/layout/social-youtube-black.svg); }
.header-util-social .social-icon-instagram { background-image: url(/sdgs/public/images/layout/social-instagram-black.svg); }
.header-util-user { display: flex; gap: 1rem; }
.header-util-user-session { display: flex; align-items: center; gap: .5rem; font-size: 1.6rem; }
.header-util-user-session > i { flex-shrink: 0; transform: translatey(-0.1rem); }
.header-util-user-session > span { color: #ef1353; }
.header-util-user-logout { display: flex; gap: .5rem; align-items: center; padding: .4rem 1rem; border: 1px solid #333; font-size: 1.6rem; }
.header-navi a, .header-navi button { position: relative; }
.header-navi a[target="_blank"]:after, .header-navi button[target="_blank"]:after { content: " "; font-family: "iconoir"; }
.header-navi a[target="_blank"]:has(> span):after, .header-navi button[target="_blank"]:has(> span):after { content: unset; }
.header-navi a[target="_blank"]:has(> span) > span:after, .header-navi button[target="_blank"]:has(> span) > span:after { content: " "; font-family: "iconoir"; }
.header-navi { padding-left: 20rem; width: 100%; height: 100%; }
.header-navi-bg { visibility: hidden; position: absolute; top: 100%; left: 50%; width: 100vw; background-color: #fff; border-bottom: 1px solid #e0e0e0; transform: translatex(-50%); opacity: 0; }
.header-navi > ul { display: flex; justify-content: flex-end; height: 100%; }
.header-navi > ul > li { position: relative; height: 100%; }
.header-navi > ul > li > a, .header-navi > ul > li > button { display: flex; justify-content: center; align-items: center; padding: 0 2rem; height: 100%; color: #222; font-size: 1.8rem; font-weight: 500; line-height: 1.4; transition: .5s padding; text-align: center; }
.header-navi > ul > li > a > span, .header-navi > ul > li > button > span { position: relative; }
.header-navi > ul > li button { display: none; }
.header-navi > ul > li.on > .header-menu-2depth:has(> ul) { background-color: #f5f5f5; }
.header-navi > ul > li.on > a > span:after, .header-navi > ul > li.on > button > span:after { content: ""; position: absolute; top: calc(100% + 1.6rem); left: 0; width: 100%; height: .4rem; background-color: #0195b5; }
.header-navi > ul > li:first-child > .header-menu-2depth { border-left: 1px solid #e0e0e0; }

.footer { position: relative; background-color: #050d20; padding: 4.8rem 6rem; }
.footer > .layout { display: flex; justify-content: space-between; align-items: center; }
.footer-logo { width: 25.6rem; }
.footer-info { display: flex; flex-direction: column; row-gap: .8rem; text-align: right; }
.footer-info * { color: #7b7f8b; }

.mice-card { display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.2rem; width: 32rem; }
.mice-card-group { display: flex; justify-content: center; }
.mice-card-hashtag { padding: 1.2rem 2.4rem; border: 1px solid #222; border-radius: 6rem; color: #222; font-weight: 500; line-height: 1.4; }
.mice-card-hashtag:before { content: "#"; }
.mice-card-hashtag.eng { border: none; position: absolute; padding: 1.8rem 1.5rem; color: #fff; font-size: 1.6rem; }
.mice-card-img { padding: 1.2rem; width: 100%; background-color: #fff; border-radius: 2.4rem; box-shadow: 0.8rem 0.8rem 2.4rem rgba(0, 0, 0, 0.12); }
.mice-card-img > img { border-radius: 1.2rem; }

.mt-0 { margin-top: 0 !important; }

.mt-5 { margin-top: 0.5rem !important; }

.mt-10 { margin-top: 1rem !important; }

.mt-15 { margin-top: 1.5rem !important; }

.mt-20 { margin-top: 2rem !important; }

.mt-25 { margin-top: 2.5rem !important; }

.mt-30 { margin-top: 3rem !important; }

.mt-35 { margin-top: 3.5rem !important; }

.mt-40 { margin-top: 4rem !important; }

.mt-45 { margin-top: 4.5rem !important; }

.mt-50 { margin-top: 5rem !important; }

.mt-55 { margin-top: 5.5rem !important; }

.mt-60 { margin-top: 6rem !important; }

.mt-65 { margin-top: 6.5rem !important; }

.mt-70 { margin-top: 7rem !important; }

.mt-75 { margin-top: 7.5rem !important; }

.mt-80 { margin-top: 8rem !important; }

.mt-85 { margin-top: 8.5rem !important; }

.mt-90 { margin-top: 9rem !important; }

.mt-95 { margin-top: 9.5rem !important; }

.mt-100 { margin-top: 10rem !important; }

.mb-0 { margin-bottom: 0 !important; }

.mb-5 { margin-bottom: 0.5rem !important; }

.mb-10 { margin-bottom: 1rem !important; }

.mb-15 { margin-bottom: 1.5rem !important; }

.mb-20 { margin-bottom: 2rem !important; }

.mb-25 { margin-bottom: 2.5rem !important; }

.mb-30 { margin-bottom: 3rem !important; }

.mb-35 { margin-bottom: 3.5rem !important; }

.mb-40 { margin-bottom: 4rem !important; }

.mb-45 { margin-bottom: 4.5rem !important; }

.mb-50 { margin-bottom: 5rem !important; }

.mb-55 { margin-bottom: 5.5rem !important; }

.mb-60 { margin-bottom: 6rem !important; }

.mb-65 { margin-bottom: 6.5rem !important; }

.mb-70 { margin-bottom: 7rem !important; }

.mb-75 { margin-bottom: 7.5rem !important; }

.mb-80 { margin-bottom: 8rem !important; }

.mb-85 { margin-bottom: 8.5rem !important; }

.mb-90 { margin-bottom: 9rem !important; }

.mb-95 { margin-bottom: 9.5rem !important; }

.mb-100 { margin-bottom: 10rem !important; }

.ml-0 { margin-left: 0 !important; }

.ml-5 { margin-left: 0.5rem !important; }

.ml-10 { margin-left: 1rem !important; }

.ml-15 { margin-left: 1.5rem !important; }

.ml-20 { margin-left: 2rem !important; }

.ml-25 { margin-left: 2.5rem !important; }

.ml-30 { margin-left: 3rem !important; }

.ml-35 { margin-left: 3.5rem !important; }

.ml-40 { margin-left: 4rem !important; }

.ml-45 { margin-left: 4.5rem !important; }

.ml-50 { margin-left: 5rem !important; }

.mr-0 { margin-right: 0 !important; }

.mr-5 { margin-right: 0.5rem !important; }

.mr-10 { margin-right: 1rem !important; }

.mr-15 { margin-right: 1.5rem !important; }

.mr-20 { margin-right: 2rem !important; }

.mr-25 { margin-right: 2.5rem !important; }

.mr-30 { margin-right: 3rem !important; }

.mr-35 { margin-right: 3.5rem !important; }

.mr-40 { margin-right: 4rem !important; }

.mr-45 { margin-right: 4.5rem !important; }

.mr-50 { margin-right: 5rem !important; }