:root { --gnb-height: 35px; --header-height: 60px; --header-padding: 60px; --header-height-minus: -60px; --max-width: 1520px; --gradient-color: linear-gradient(to right, rgba(var(--basic-color-50),0.8) 0%, rgb(var(--basic-color-60)) 100%); --gradient-color-90: linear-gradient(to bottom, rgba(var(--basic-color-50),0.8) 0%, rgb(var(--basic-color-60)) 100%); --gradient-color-opacity: linear-gradient(to right, rgba(var(--basic-color-50),0.8) 0%, rgba(var(--basic-color-60),0.8) 100%); --swiper-pagination-bullet-size: clamp(7px, 1vw, 8px); --swiper-pagination-bullet-inactive-color: #fff; --swiper-pagination-bullet-inactive-opacity: .5; } @media (min-width: 1024px){ :root { --header-height: 80px; --header-padding: 80px; --header-height-minus: -80px; } } @media (min-width: 1400px){ :root { --header-height: 80px; --header-padding: 80px; --header-height-minus: -80px; } } html { color: #333; } body { background-color: #fff; } article, .fullVw, .path-wrap { padding-left: 2rem; padding-right: 2rem; } @media (min-width: 768px){ article, .fullVw, .fullVw-m, .path-wrap { padding-left: 3rem; padding-right: 3rem; } } @media (min-width: 980px){ article, .fullVw, .fullVw-m, .path-wrap { padding-left: 4rem; padding-right: 4rem; } } .singleNav-style { border-color: rgba(255,255,255,0); } .headerNav-wrap { position: static; } #gnbBar ul.gnbRight .gnbOpendesk a { color: rgb(var(--yellow-color-50)); } .headerNav-wrap #headerNav { max-width: none; flex: 1; min-width: 1px; } .headerNav-wrap #headerNav > ul { max-width: 140rem; margin: auto; } .headerNav-wrap #headerNav > ul > .navItem { flex: 1; min-width: 1px; position: static; } .headerNav-wrap #headerNav > ul > .navItem > a { justify-content: center; } .headerNav-wrap #headerNav > ul > .navItem > a > span { position: relative; z-index: 2; font-size: clamp(1.6rem, 2vw, 1.7rem); font-family: var(--special-font); } .headerNav-wrap #headerNav > ul > .navItem > a > span:before { content:''; display: block; position: absolute; left: -8px; bottom: -2px; width: calc(100% + 16px); height: 50%; z-index: -1; } .headerNav-wrap #headerNav > ul > .navItem.current > a > span:before { border-radius: 1px; background-color: rgba(var(--basic-color-50),1); } .headerNav-wrap #headerNav > .navIndicator { border-radius: 1px; position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; margin-left: -8px; padding: 0 0.5rem; box-sizing: content-box; background-color: rgba(var(--gray-color-50),1); opacity: 0; pointer-events: none; } .headerNav-wrap #headerNav > .navIndicator.is-ready { transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease; } .headerNav-wrap #headerNav > ul > .navItem > a:hover span { color: rgb(var(--basic-color-50)); } .scrollOn .headerNav-wrap #headerNav > ul > .navItem.current > a > span:before, .headerOver .headerNav-wrap #headerNav > ul > .navItem.current > a > span:before { background-color: rgb(var(--basic-color-40)); } .scrollOn .headerNav-wrap #headerNav > .navIndicator, .headerOver .headerNav-wrap #headerNav > .navIndicator { background-color: rgb(var(--gray-color-40)); } .singleNav-style nav .multiNav > .multiNav-inner { display: flex; background-color: rgba(var(--basic-color-50)); left: 0; width: 100%; transform: translateX(0); padding-top: 0 !important; transition: none !important; } .singleNav-style nav .multiNav > .multiNav-inner::before { width: 20%; min-width: 32rem; content: attr(data-navTitle); font-family: var(--special-font); color: #fff; font-weight: 500; font-size: 1.8rem; padding: 4rem; padding-left: clamp(2rem, 12vw, 30rem); display: flex; align-items: center; justify-content: flex-end; } .singleNav-style nav .multiNav > .multiNav-inner ul { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 28rem)); gap: 1rem clamp(1rem, 2vw, 1.6rem); padding: 3rem 4rem; box-shadow: none; border-radius: 0; border-bottom-left-radius: 4rem; border-left: 0; border-right: 0; align-items: center; background-image: url(/style_www/img/bg/logo_bg.svg); background-repeat: no-repeat; background-position: 80% calc(0px + 10px); background-size: auto 180px; } .singleNav-style nav .multiNav > .multiNav-inner ul li { flex: 1; max-width: 28rem; } .singleNav-style nav .multiNav > .multiNav-inner ul a { padding: 0.8rem 2rem; border-radius: var(--radius-s); border: 1px solid rgba(var(--gray-color-30), 1); } .singleNav-style nav .multiNav > .multiNav-inner ul a span { white-space: nowrap; font-size: 1.6rem; } .navRight-wrap { display: flex; justify-content: flex-end; margin-left: auto; } .navRight-wrap .gnbNav { display: flex; align-items: center; margin-right: 2rem; padding-left: 2.5rem; } .navRight-wrap .gnbNav > li { position: relative; } .navRight-wrap .gnbNav > li + li { padding-left: 1rem; margin-left: 1rem; } .navRight-wrap .gnbNav > li a { color: #555; font-size: 1.4rem; display: block; padding-top: 0.2rem; } .navRight-wrap .gnbNav > li + li:before { content:''; display: block; width: 1px; height: 50%; background-color: rgba(0,0,0,0.2); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .burgerBtn-wrap { position: relative; } .burgerBtn-wrap > a { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; height: var(--header-height); } .burgerBtn span { background-color: #fff; height: 2px; border-radius: 2px; } .headerOver { background-color: #fff !important; } .scrollOn .burgerBtn span, .headerOver .burgerBtn span, #wrap:has(#contentContainer .userLoaction-wrap) .burgerBtn span { background-color: rgb(var(--basic-color-50)); } .scrollOn .multiNav > a, .headerOver .multiNav > a, #wrap:has(#contentContainer .userLoaction-wrap) .multiNav > a { color: #333 !important; } #sideNav-wrap .gnbNav > ul { overflow: hidden; } #sideNav-wrap .gnbNav > ul li.gnbOpendesk { width: 100%; } #sideNav-wrap .gnbNav > ul li.gnbOpendesk a { background-color: rgb(var(--yellow-color-50)); color: #041139; } @media (max-width: 1279.9px){ .headerNav-wrap #headerNav > ul > .navItem { flex: none; } } @media (min-width: 1400px){ .navRight-wrap .gnbNav > li a { font-size: 1.5rem; } } #wrap footer { background-color: rgba(var(--gray-color-40),0.5); border-radius: var(--radius-l) var(--radius-l) 0 0; } #wrap footer .footerNav-wrap .footerNav { padding: 0.3rem 0.5rem 0; border-bottom: 1px solid rgba(var(--gray-color-50), 0.8); } #wrap footer .footerNav-wrap ul li { display: inline-block; vertical-align: middle; } #wrap footer .footerNav-wrap ul li + li { margin-left: 3rem; } #wrap footer .footerNav-wrap ul li a { display: block; color: rgba(var(--gray-color-80),1); font-size: 1.5rem; padding: 1.8rem 0; } #wrap footer .footer-wrap { padding: 3rem 0; } #wrap footer .footer-wrap .footer { display: flex; flex-direction: column; } #wrap footer .footer-wrap .footer-logo { width: 14rem; margin-bottom: 1rem; padding-top: 0.2em; } #wrap footer .footer-wrap .footer-text dl { display: block; margin-bottom: 2rem; font-size: clamp(1.3rem, 1.5vw, 1.4rem); } #wrap footer .footer-wrap .footer-text dl dt { font-weight: 700; font-size: 1.5rem; color: #555555; margin-bottom: 1rem; } #wrap footer .footer-wrap .footer-text dl dd { color: #888; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span { display: block; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span font { display: block; margin-top: 0.3rem; } #wrap footer .footer-wrap .footer-text .copyText { font-size: 1.3rem; line-height: 1.5; color: #aaa; } #wrap footer .footer-wrap .footerLink { margin: 1rem 0 2rem; } #wrap footer .footer-wrap .footerLink * { color: #555; } #wrap footer .footer-wrap .footerLink .customSelect { border: 0; display: inline-block; font-size: 1.4rem; border-radius: 2rem 0 0 2rem; padding-left: 1rem; background-color: rgba(var(--gray-color-50), 0.3); } #wrap footer .footer-wrap .footerLink button { border: 0; display: inline-block; padding: 1rem 2rem 1rem 1.5rem; color: #555; border-radius: 0 2rem 2rem 0; background-color: rgba(var(--gray-color-50), 0.3); } .footerSlider-wrap { background-color: #fff; padding: 2rem 3rem; font-size: 0; position: relative; } .footerSlider-wrap > .inner { display: flex; overflow: hidden; align-items: center; } .footerSlider-wrap > .inner:after { content: ''; display: block; width: 4rem; height: 100%; position: absolute; right: 0; top:0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .footerSlider-title { display: none; font-family: var(--special-font); color: #555; font-size: 2rem; line-height: 2.5rem; height: 2.5rem; } .footerSlider-wrap .sliderControl-wrap { display: none; font-size: 0; position: relative; padding: 0; } .footerSlider-wrap .sliderControl-wrap > .inner { width: 8rem; text-align: center; } .footerSlider-wrap .sliderControl-wrap > .inner > * { display: inline-block; vertical-align: top; width: 1.8rem; } .footerSlider-wrap .sliderControl-wrap *:before { font-size: 1.8rem; display: block; position: relative; top: 0; line-height: 2.5rem; height: 2.5rem; color: #555a54; } .footerSlider-content { flex: 1; } .footerSlider a { display: block; color: #d4d4d4; font-size: 1.4rem; padding: 0rem; width: 20rem; max-width: 30vw; } .footerSlider a:hover { text-decoration: underline; } .footerSlider a .imgContainer-fit { padding-bottom: 30%; } @media (min-width: 1024px){ #wrap footer .footer-wrap { padding-top: 4rem; padding-bottom: 4rem; } #wrap footer .footer-wrap .footer { flex-direction: row; gap: 0 5rem; } #wrap footer .footer-wrap .footer-logo { width: 20rem; } #wrap footer .footer-wrap .footer-text { } #wrap footer .footer-wrap .footer-text dl { display: block; margin-bottom: 2rem; } #wrap footer .footer-wrap .footer-text dl dt { font-weight: 700; font-size: 1.5rem; color: #555555; margin-bottom: 1rem; } #wrap footer .footer-wrap .footer-text dl dd { color: #888; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span { display: block; line-height: 1.5; } #wrap footer .footer-wrap .footer-text dl dd span + span { margin-top: 0.3rem; } #wrap footer .footer-wrap .footer-text dl dd span font { display: inline-block; } #wrap footer .footer-wrap .footerLink { position: absolute; right: 0; top: 0; margin: 0; } .footerSlider-title, .footerSlider-wrap .sliderControl-wrap { display: block; } } /** floatingNav **/ .floatingNav-wrap { width: clamp(6.5rem, 9.5vw, 9.8rem); right: 0; padding-bottom: 5rem; } .floatingNav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; aspect-ratio: 1 / 1.15; border-radius: var(--radius-l) 0 0 var(--radius-l); background-color: rgb(var(--yellow-color-50)); color: #041139; box-shadow: 0 4px 14px rgba(0,0,0,0.15); text-align: center; padding: 28% 1% 20% 9%; transition: transform .2s ease, box-shadow .2s ease; } .floatingNav-link:hover { color: #fff; transform: translateY(-0.4rem); box-shadow: 0 8px 10px rgba(0,0,0,0.2); } .floatingNav-link i { display: block; width: 45%; } .floatingNav-link i img { display: block; width: 100%; } .floatingNav-link .opendesk-text { display: block; font-family: var(--special-font); font-weight: 500; } .floatingNav-link .opendesk-text span { display: block; font-size: clamp(1.2rem, 1.5vw, 1.6rem); line-height: 1.2; text-align: justify; text-align-last: justify; text-justify: inter-character; } /*@media (max-width: 767.9px){*/ /* .floatingNav-link { padding-right: 0.3rem; }*/ /*}*/ /** mainBasic **/ .mainContent-wrap { margin-top: clamp(4rem, 3vw, 5rem); } .mainContent-wrap section { position: relative; margin-top: clamp(4rem, 3vw, 5rem); } .mainContent-wrap section:first-child { margin-top: 0; } .mainSection-title { display: flex; align-items: flex-end; gap: 0; margin-bottom: clamp(1rem, 2vw, 2rem); text-align: left; } .mainSection-title h3 { color: #222; position: relative; display: flex; align-items: center; gap: 0 1.2rem; font-size: clamp(1.8rem, 2vw, 2.6rem); font-weight: 500; font-family: var(--special-font); } .mainSection-title h3 * { display: block; } .mainSection-more { display: flex; align-items: center; justify-content: center; width: clamp(5.5rem, 6.5vw, 7.5rem); padding-bottom: 0.15em; flex-shrink: 0; margin-left: auto; transition: transform 0.2s ease; } .mainSection-more:hover { transform: translateX(0.5rem); } .mainSection-more:hover i { color: #fff; } .mainBoard-tab { display: flex !important; gap: clamp(3.4rem, 4.2vw, 4rem); align-items: center; } .mainBoard-tab li { position: relative; } .mainBoard-tab li:after { content:''; position:absolute; top:0; right: calc(clamp(3.4rem, 4.2vw, 4rem) / -2); bottom:0; width:1px; height:12px; margin:auto; background:#c7c7c7; } .mainBoard-tab li:last-child::after { display: none; } .mainBoard-tab li button span { font-family: var(--special-font); word-spacing: -0.05em; font-size: clamp(1.7rem, 2vw, 2.4rem); font-weight: 500; color: rgb(var(--gray-color-60)); } .mainBoard-tab li.current button span { color: rgb(var(--basic-color-50)); font-size: clamp(1.8rem, 2vw, 2.6rem); } .mainBoard-tab li:not(.current) button:hover span { color: rgb(var(--gray-color-70)); } .sliderControl-wrap button { font-size: 0; display: block; } .sliderControl-wrap button i { transition: transform 0.3s; } .sliderControl-wrap button:hover i { transform: scale(1.5); } .sliderControl-wrap button i:before { display: block; font-size: 1.6rem; color: rgb(var(--gray-color-60)); } .sliderControl-wrap button:hover i:before { color: rgb(var(--basic-color-50)); } .sliderControl-wrap .slider-dots { display: flex; align-items: center; gap: 1.2rem; } .sliderControl-wrap .swiper-pagination-bullet { width: auto; height: auto; margin: 0 !important; background: transparent; opacity: 1; display: flex; align-items: center; gap: 0.8rem; font-size: clamp(1.3rem, 2vw, 1.4rem); font-weight: 400; line-height: 1; cursor: pointer; transition: color 0.3s; } .sliderControl-wrap .slider-progress { display: none; width: clamp(4rem, 6vw, 6rem); height: 0.2rem; } .sliderControl-wrap .swiper-pagination-bullet-active .slider-progress { display: inline-block; } .sliderControl-wrap .slider-progress span { display: block; height: 100%; width: 0%; } .is-paused .sliderControl-wrap .slider-progress span { animation-play-state: paused; } @keyframes sliderProgress { from { width: 0%; } to { width: 100%; } } .sliderControl-wrap { margin-top: 1.3rem; } .sliderControl-wrap .sliderControl { justify-content: center; } .sliderControl-wrap .sliderControl > .inner { display: flex; flex-wrap: wrap; align-items: center; width: max-content; gap: clamp(0.8rem, 0.8vw, 2rem); } .sliderControl-wrap .sliderControl > .inner .slider-dots { display: flex; width: max-content; } .sliderControl-wrap .sliderControl > .inner .prev, .sliderControl-wrap .sliderControl > .inner .next { display: none !important; } .swiper-pagination-bullet { color: rgb(var(--gray-color-40)); } .swiper-pagination-bullet-active { color: rgb(var(--basic-color-50)); } .slider-progress { background: rgb(var(--gray-color-20)); } .slider-progress span { background: rgb(var(--basic-color-50)); } .swiper-pagination-bullet-active .slider-progress span { animation: sliderProgress 4s linear forwards; } .grayBg-wrap { background-color: rgba(var(--basic-color-10),0.4); } /** mainBasic **/ /** mainTop **/ .mainTop-wrap { padding-top: var(--header-padding); position: relative; background-color: #ebfafa; overflow: hidden; } .mainTop-wrap:before { content:''; display: block; background: url("/style_www/img/common/header/shadow.webp"); position: absolute; top: 0; right: 0; left: 0; height: 250px; background-repeat: repeat-x; background-size: auto 100%; z-index: 1;} .mainSlider-container { max-width: calc(var(--max-width) - clamp(10rem, 15vw, 18rem)); margin: auto; padding-top: clamp(9rem, 10vw, 14rem); padding-bottom: clamp(8.5rem, 10vw, 9rem); padding-left: clamp(1rem, 2vw, 2rem); } .mainSlider { font-size: 0; } .mainSlider-content { position: relative; } .mainSlider-bgList { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .mainSlider-bg { opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.1); } .mainSlider-bg:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); z-index: 1; } .mainSlider-bg video { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; object-position: center; } .mainSlider-bg.is-active { opacity: 1; z-index: 1; animation: mainBg 6s 0s ease-out normal 1 forwards; } @keyframes mainBg { from { transform: scale(1); } to { transform: scale(1.1); } } .mainSlider .mainSlider-text > .inner { display: flex; flex-direction: column; gap: clamp(0.6rem, 0.8vw, 1rem); position: relative; z-index: 100; width: 100%; } .mainSlider .mainSlider-text > .inner * { font-family: var(--special-font); color: #fff; text-shadow: 2rem 2rem 5rem rgba(0,0,0,0.4); text-align: left; } .mainSlider .mainSlider-text > .inner > * { opacity: 1; display: block; } .mainSlider .mainSlider-text > .inner em { display: block; width: clamp(12rem, 15vw, 22rem); opacity: 0.7; } .mainSlider .mainSlider-text > .inner em img { width: 100%; display: block; } .mainSlider .mainSlider-text > .inner .mainSlider-title { font-size: clamp(1.8rem, 4.5vw, 6.5rem); font-weight: 600; line-height: 1.15; display: block; text-transform: uppercase; color: rgba(255,255,255,0.9); } .mainSlider .mainSlider-text > .inner .mainSlider-copy { font-size: clamp(1rem, 3vw, 2rem); color: #fff; line-height: 1.4; } /* mainSlider control */ .mainSlider-wrap .sliderControl-wrap { margin-top: clamp(2rem, 3vw, 4.5rem); } .mainSlider-wrap .sliderControl { width: 100%; justify-content: start; } .mainSlider-wrap .sliderControl-wrap button i:before { display: block; font-size: clamp(1.6rem, 2vw, 1.8rem); color: #fff; text-shadow: 0rem 0rem 1rem rgba(0,0,0,0.4); } .mainSlider-wrap .sliderControl-wrap .sliderControl-nav { border: 1px solid #fff; border-radius: 50%; padding: clamp(0.8rem, 1.7vw, 1.5rem); } .mainSlider-wrap .sliderControl-wrap .sliderControl-nav i:before { font-size: clamp(1.2rem, 2vw, 1.5rem); } .mainSlider-wrap .swiper-pagination-bullet { color: rgba(255,255,255,0.5); font-size: clamp(1.3rem, 2vw, 1.8rem); } .mainSlider-wrap .swiper-pagination-bullet-active { color: #fff; } .mainSlider-wrap .slider-progress { background: rgba(255,255,255,0.8); } .mainSlider-wrap .slider-progress span { background: rgb(var(--basic-color-50)); } .mainSlider-wrap .swiper-pagination-bullet-active .slider-progress span { animation: sliderProgress 5s linear forwards; } .mainSlider-wrap .sliderControl-wrap .sliderControl > .inner { margin-left: clamp(1rem, 2.2vw, 2rem); } @media (min-width: 768px){ .mainTop-wrap { height: calc(100dvh - var(--gnb-height)); max-height: 100rem; min-height: 80rem; display: flex; flex-direction: column; justify-content: space-between; } .mainSlider-wrap { flex: 1; display: flex; } } @media (min-width: 1024px){ .mainSlider-wrap > .maxWidth {} } .mainQuick-wrap { padding-bottom: clamp(1rem, 0.8vw, 1.2rem); position: relative; z-index: 10; width: 100%; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.3); } .mainQuick { padding: clamp(0.5rem, 2vw, 1rem) 0 clamp(0.5rem, 1.5vw, 2rem); } .mainQuick-icon { gap: clamp(0.5rem, 1.2vw, 1rem); } .mainQuick-icon a > * { display: block; text-align: center; font-family: var(--special-font); color: #fff; font-size: clamp(0.5rem, 2.4vw, 1.4rem); text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); } .mainQuick-icon a > i { width: 80%; max-width: clamp(8rem, 10vw, 12rem); margin: auto; padding: 0.2rem 0.5rem; } @media (min-width: 768px){ .mainQuick-icon a > * { font-size: clamp(0.5rem, 1.85vw, 1.6rem); } } @media (min-width: 1180px){ .mainQuick { padding-right: calc(clamp(42rem, 30vw, 64rem) + clamp(4rem, 4vw, 6rem)); } .mainContent-board { padding-right: calc(clamp(42rem, 30vw, 64rem) + clamp(4rem, 4vw, 6rem)); } .mainContent-board .noneData, .mainBoard-list { min-height: 266px; } } .sliderMask { pointer-events: none; position: absolute; width: 100%; height: clamp(1rem, 1.5vw, 3rem); bottom: -1px; left: 0; z-index: 10; background: url('/style_www/img/bg/bg.png') no-repeat; background-size: 100% 100%; } /* mainBoard-list */ .mainContent-wrap:has(.mainContent-board) { padding-top: 1rem; } .mainBoard-list { font-family: var(--special-font); border-top: 1px solid rgb(var(--gray-color-90)); padding-top: clamp(0.3rem, 1vw, 0.8rem) } .mainBoard-list li { padding: clamp(0.8rem, 1.2vw, 1.4rem) 0.3rem; border-bottom: 1px solid rgb(var(--gray-color-30));} .mainBoard-list-first > a { display: flex; flex-direction: row-reverse; align-items: center; gap: clamp(1.5rem, 1.6vw, 2rem); } .mainBoard-list-first > a .mainBoard-text { flex: 1; min-width: 1px; } .mainBoard-list-first > a .mainBoard-text strong { font-weight: 600; font-size: clamp(1.6rem, 2.2vw, 1.9rem); } .mainBoard-list-first > a .mainBoard-text span { margin-top: 0.3rem; line-height: 1.4; height: calc(1.4em * 2); font-size: clamp(1.3rem, 2vw, 1.5rem); color: rgb(var(--gray-color-70)); } .mainBoard-list-first .mainBoard-date { font-size: clamp(4.2rem, 5.2vw, 5.2rem); } .mainBoard-list-first .mainBoard-date * { display: block; text-align: justify; text-align-last: justify; text-justify: inter-character; } .mainBoard-list-first .mainBoard-date strong { font-weight: 800; font-size: 1em; line-height: 1; } .mainBoard-list-first .mainBoard-date span { font-size: 0.3em; color: rgb(var(--gray-color-60)); } .mainBoard-list-item a { display: flex; position: relative; padding-left: 1rem; } .mainBoard-list-item a:before { content: ''; display: block; width: 0.4rem; height: 0.4rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: rgb(var(--basic-color-50)); border-radius: 50%; } .mainBoard-list-item a strong { flex: 1; min-width: 1px; font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.6rem); color: rgb(var(--gray-color-80)); } .mainBoard-list-item a span { font-size: clamp(1.3rem, 2vw, 1.4rem); color: rgb(var(--gray-color-60)); padding-left: 2rem; } .mainContent-board .noneData { display: flex; align-items: center; flex-direction: column; justify-content: center; border: 1px solid #ededed; border-radius: var(--radius-xm); } @media (max-width: 767.9px){ .mainBoard-list-item a span { display: none; } } /** mainNews **/ .mainNews-wrap { margin-top: clamp(2rem, 3vw, 5rem) !important; } .mainNews-container { padding: clamp(2rem, 2.5vw, 4rem); background-color: rgb(var(--basic-color-50)); border-radius: var(--radius-xm) var(--radius-xm) calc(var(--radius-xm) * 3.2) var(--radius-xm); } .mainNews-container .mainSection-title h3 { color: #fff; } .mainNews { overflow: hidden } .mainNews .swiper-wrapper { cursor: grab; } .mainNews .newsCard { display: flex; background-color: #fff; font-family: var(--special-font); border-radius: var(--radius-m) var(--radius-m) calc(var(--radius-m) * 4) var(--radius-m); overflow: hidden; transition: border-radius 0.2s ease;; } .mainNews .newsCard .newsCard-img { width: 36%; max-width: 15rem; padding: 0; flex-shrink: 0; } .mainNews .newsCard .newsCard-title { padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 2.5vw, 2rem); flex: 1; min-width: 1px; } .mainNews .newsCard .newsCard-title .lineClamp { font-size: clamp(1.4rem, 2vw, 1.6rem); } .mainNews .newsCard .newsCard-date { display: block; margin-top: 0.3rem; color: rgb(var(--gray-color-60)); font-size: clamp(1.3rem, 2vw, 1.4rem); } @media (min-width: 768px) { .swiper-slide-active .newsCard { border-radius: var(--radius-m); } } @media (min-width: 960px) { .mainNews .swiper-slide { width: auto !important; margin: 0 !important; } .mainNews-wrap .sliderControl-wrap { display: none; } } @media (min-width: 960px) and (max-width: 1179.9px){ .mainNews { overflow: visible; } .mainNews .swiper-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8rem; transform: none !important; cursor: auto; } } @media (min-width: 1180px){ .mainNews-container {} .mainNews .swiper-wrapper { display: block; } .mainNews .swiper-wrapper .swiper-slide + .swiper-slide { margin-top: clamp(1.5rem, 1.2vw, 2rem) !important; } .mainNews .swiper-wrapper .swiper-slide:not(:last-child) .newsCard { border-radius: var(--radius-m); } } @media (min-width: 1180px){ .mainNews-wrap { position: absolute !important; right: 0; bottom: 0; z-index: 10; margin-top: 0 !important; width: clamp(42rem, 30vw, 64rem); } .mainNews-wrap .mainSection-title { margin-bottom: clamp(1rem, 2vw, 2.7rem); } } .mainContent-wrap.grayBg-wrap { padding-top: clamp(3rem, 3vw, 5rem); padding-bottom: clamp(3rem, 3vw, 5rem); } /** mainPopupzone **/ .mainPopupzone-wrap .mainPopupzone .imgContainer-fit { padding-bottom: 65%; border-radius: var(--radius-xm); overflow: hidden; } .mainPopupzone-wrap .mainPopupzone .swiper-slide a { position: absolute; inset: 0; } @media (max-width: 767.9px){ .mainPopupzone-container { position: relative; overflow: hiddne; } .mainPopupzone-container:before, .mainPopupzone-container:after { content: ''; display: block; height: 100%; width: calc(50% - 16.1rem); position: absolute; top: 0; background-color: rgba(var(--gray-color-50),0.5); } .mainPopupzone-container:before { left: 0; border-radius: 0 var(--radius-xm) var(--radius-xm) 0; } .mainPopupzone-container:after { right: 0; border-radius: var(--radius-xm) 0 0 var(--radius-xm); } .mainPopupzone-wrap .mainPopupzone:not(.mainPopupzone-min) .swiper-slide,.mainPopupzone-min { max-width: 29rem; } } /* mainGallery */ .mainGallery-wrap .mainSection-title { border-bottom: 1px solid rgb(var(--gray-color-90)); padding-bottom: clamp(1rem, 2vw, 2rem); } .mainGallery { overflow: hidden; } .mainGallery .swiper-wrapper { cursor: grab; } @media (min-width: 1200px) { .boardContainer .galleryCard-grid { grid-template-columns: repeat(3, 1fr); } } .galleryCard { display: block; position: relative; } .galleryCard-img { display: block; position: relative; padding-bottom: 68%; overflow: hidden; background-color: #f0f0f0; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-xm); } .galleryCard-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .galleryCard:hover .galleryCard-img img { transform: scale(1.06); } .galleryCard-title { display: block; font-size: clamp(1.5rem, 2vw, 1.7rem); color: #333; font-family: var(--special-font); margin-top: 0.8rem; } .galleryCard-title .lineClamp { font-size: clamp(1.4rem, 2vw, 1.5rem); } .galleryCard-date { display: block; margin-top: 0.5rem; color: rgb(var(--gray-color-60)); font-size: clamp(1.3rem, 2vw, 1.4rem); } .galleryCard:hover .galleryCard-title { color: rgb(var(--basic-color-50)); } @media (max-width: 499.9px){ .mainGallery-container { padding-right: 0; } } @media (min-width: 1180px){ .mainGallery { overflow: visible; } .mainGallery .swiper-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 2vw, 2.5rem); transform: none !important; cursor: auto; } .mainGallery .swiper-slide { width: auto !important; margin: 0 !important; } .mainGallery-wrap .sliderControl-wrap { display: none; } } @media (max-width: 767.9px){ .mainContent-wrap.grayBg-wrap { padding-left: 0; padding-right: 0; } .mainContent-wrap.grayBg-wrap .mainSection-title { width: calc(100% - 4rem); margin-left: auto; margin-right: auto; } .mainGallery-container { padding-left: 2rem; } } @media (min-width: 500px) and (max-width: 767.9px){ .mainGallery-container { padding-right: 2rem; } } @media (min-width: 768px){ .mainContent-wrap.grayBg-wrap > .maxWidth { display: flex; gap: clamp(4rem, 4vw, 6rem); } .mainPopupzone-wrap { flex-shrink: 0; } .mainGallery-wrap { flex: 1; min-width: 1px; margin-top: 0 !important; } } @media (min-width: 768px) and (max-width: 1179.9px){ .mainPopupzone-wrap { width: 43%; max-width: 45.5rem; min-width: 31.5rem; } } @media (min-width: 1180px) { .mainPopupzone-wrap { width: 34.5%; max-width: 47.5rem; } } /* mainOpendesk */ .mainContent-opendesk { padding-bottom: clamp(4rem, 3vw, 5rem); } .mainOpendesk-wrap .mainSection-title { display: flex; align-items: flex-start; flex-direction: column; gap: 0.5rem; font-family: var(--special-font); } .mainOpendesk-wrap .mainSection-title h3 { color: rgb(var(--basic-color-50)); font-size: clamp(1.5rem, 1.8vw, 1.6rem); } .mainOpendesk-wrap .mainSection-title p { font-size: clamp(2.4rem, 2.5vw, 2.8rem); font-weight: 600; margin-top: 0.2em;} .mainOpendesk-wrap .mainSection-title em { font-size: clamp(1.5rem, 2vw, 1.7rem); color: #777; } .mainOpendesk { font-family: var(--special-font); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 1.5vw, 2.5rem); } .mainOpendesk a { padding: clamp(2rem, 2vw, 3rem); display: block; background-color: rgba(var(--green-color-10), 0.5); border-radius: var(--radius-xm); } .mainOpendesk a * { display: block; } .mainOpendesk a strong { font-size: clamp(1.6rem, 1.7vw, 1.8rem); font-weight: 600; } .mainOpendesk a p { font-size: clamp(1.2rem, 1.3vw, 1.4rem); color: #777; margin-top: 0.3em; } .mainOpendesk a.mainOpendesk_2 { background-color: rgba(var(--purple-color-10), 0.5); } .mainOpendesk a.mainOpendesk_3 { background-color: rgba(var(--blue-color-10), 0.5); } .mainOpendesk a.mainOpendesk_4 { background-color: rgba(var(--red-color-10), 0.5); } .mainOpendesk a span { margin-top: 0.5rem; display: flex; justify-content: space-between; align-items: flex-end; flex-direction: row-reverse; } .mainOpendesk a .open_m_icon { width: clamp(5rem, 5vw, 6rem);; transform: translateY(10%); } .mainOpendesk a span i { color: #aaa; } .mainOpendesk a:hover span i { color: rgb(var(--basic-color-50)); } @media (min-width: 960px){ .mainOpendesk { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* mainSite */ .mainContent-wrap:has(.mainSite-wrap) { padding: clamp(4rem, 3vw, 5rem) 0; border-top: 1px solid rgba(var(--gray-color-40), 0.5); margin-top: 0; } .mainSite-wrap { padding-left: clamp(2rem, 2.8vw, 3rem); padding-right: clamp(2rem, 2.8vw, 3rem); } .mainSite { overflow: hidden; } .mainSite .swiper-wrapper { cursor: grab; } .mainSite-logo { display: block; } .mainSite-logo img { display: block; width: 100%; border: 1px solid rgba(var(--gray-color-60),0.5); border-radius: var(--radius-m); overflow: hidden; } .mainSite-wrap .sliderControl-wrap { margin-top: 0; } .mainSite-wrap .sliderControl-nav { display: flex; align-items: center; height: 100%; position: absolute; top: 0; } .mainSite-wrap .sliderControl-nav.prev { left: 0; } .mainSite-wrap .sliderControl-nav.next { right: 0; } /** mainSection end **/ .familyAgree-check_wrap { display: flex; align-items: center; gap: 1rem; } .familyAgree-check_wrap a { font-size: clamp(1.4rem, 1.8vw, 1.5rem); color: rgb(var(--basic-color-50)); text-decoration: underline } /** mainCustomer-end **/ /** ************************************************** **/ /** subPage-wrap **/ .subHero-wrap { background-color: transparent; position: relative; background-size: cover; background-position: center; } .subHero-bg { background-color: rgb(var(--basic-color-70)); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-size: cover; background-position: center center; animation-duration: 70s; animation-name: bounceAni; animation-iteration-count: infinite; } .subHero { padding-top: 1rem; } .subHero-wrap:after { opacity: 1; width: 100%; max-width: 100%; background: rgba(0,0,0,0.2) } .subHero-wrap:before { opacity: 0.5; } .subHero-text { position: relative; width: 100%; text-align: center; padding: clamp(5rem, 7vw, 8rem) 1rem; font-family: var(--special-font); } .subHero-text h1 { font-size: clamp(3rem, 3vw, 4rem); } .subHero-text h1 * { display: block; } .subHero-text h1 strong { font-size: 1em; font-weight: 600; letter-spacing: 0.05em; } .subHero-text h1 span { font-size: 0.45em; font-weight: 400; opacity: 0.8; margin-bottom: 0.4em; background: rgba(var(--basic-color-50),1); background-clip: text; color: transparent; } .subPage-leftNav { z-index: 50 !important; } .subPage-leftNav .subNav { background-color: transparent; } .subPage-leftNav .subNav-wrap { width: 25rem; top: -9rem; } .subPage-leftNav .subNav-wrap * { font-family: var(--special-font); } .subPage-leftNav .subNav-wrap #subTitle { text-align: center; padding: 4rem 0; background: rgb(var(--basic-color-50)); border-radius: var(--radius-xm); box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1); margin-bottom: 1rem; } .subPage-leftNav .subNav-wrap #subTitle strong { color: #fff; font-weight: 600; font-size: 2.2rem; } .subPage-leftNav .subNav-wrap #subTitle:before { display: none; } .subPage-leftNav .subNav-wrap .subNav { overflow: visible; } .subPage-leftNav #subNav-list { border-radius: var(--radius-xm) var(--radius-xm) var(--radius-xl) var(--radius-xm); background-color: #fff; padding: 1.3rem 2rem 1.5rem; overflow: visible; border-color: rgba(0, 0, 0, 0.05); box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1); } .subPage-leftNav #subNav-list li a { position: relative; padding-left: 0.5rem; padding-right: 0.5rem; } .subPage-leftNav #subNav-list li a span { position: relative; z-index: 10; color: #797979; } .subPage-leftNav #subNav-list li.current a { background-color: transparent; color: rgb(var(--basic-color-50)) !important; } .subPage-leftNav #subNav-list li.current a span { color: rgb(var(--basic-color-50)) !important; } .subPage-leftNav #subNav-list li.current a:hover span { color: rgb(var(--basic-color-60)) !important; } .subPage-leftNav #subNav-list li + li { border-top: 0 } .subPage-leftNav #subNav-list li { border-bottom: 1px solid rgba(var(--gray-color-50),0.3); } .subPage-leftNav #subNav-list li.current { border-color: rgb(var(--basic-color-50)); } .subPage-leftNav #subNav-list li:last-child { border-bottom: 0; } /*.subPage-leftNav #subNav-list li.current a:before { content: ""; display: block; position: absolute; top: 0; left: -2.5rem; width: calc(100% + 3rem); height: 100%; background-color: rgb(var(--basic-color-50)); border-radius: var(--radius-m); }*/ .subPage-leftNav #subNav-list a:hover * { color: rgba(var(--basic-color-50),1) } .subPage-leftNav #subNav-list a:after { content: "\ea6e"; font-family: 'remixicon' !important; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } @media (min-width: 1360px){ .subPage-wrap.subPage-leftNav { padding-left: 34rem; } .subPage-wrap article { padding-left: 0; padding-right: 0; } } .subPage { margin-left: auto; margin-right: auto; position: relative; padding-bottom: clamp(6rem, 7vw, 10rem); } .subPage-wrap { position: relative; z-index: 1; } .path-wrap { background: #fff; border-bottom: 0; margin-top: clamp(2rem, 3vw, 3rem); } .path { border: 1px solid rgba(var(--gray-color-20), 0.8); border-radius: var(--radius-xm); box-shadow: 0 8px 24px #1a29470a, 0 2px 8px #1a294714; } .path > ul > li:first-child a { color: #999; width: 5.2rem; background-color: transparent; border-radius: calc(var(--radius-xm) - 2px) 0 0 calc(var(--radius-xm) - 2px); } .path > ul > li:first-child a, .path .scriptSelect-wrap { border-color: rgba(var(--gray-color-30),0.5) !important; } .path > ul > li:last-child a { border-radius: 0 calc(var(--radius-xm) - 2px) calc(var(--radius-xm) - 2px) 0; } .path > ul > li:first-child a, .path .scriptSelect-trigger { line-height: 5.2rem; } .path .scriptSelect-trigger { color: #555; font-family: var(--special-font); font-size: clamp(1.3rem, 2vw, 1.5rem); } .path .scriptSelect-trigger:after { border-color: rgba(var(--basic-color-50),1); } .path > ul > li:first-child a:hover, .path .scriptSelect-trigger:hover { color: rgba(var(--basic-color-50),1); background: rgb(var(--gray-color-10)); } .pageTitle-wrap { margin-bottom: 0; } .pageTitle { display: flex; align-items: flex-end; padding: clamp(3rem, 4vw, 6rem) 0 clamp(1rem, 2vw, 2rem); font-size: clamp(1.8rem, 3vw, 2.2rem); justify-content: center; } #pageTitle { padding-left: 0.2rem; display: none; } #pageTitle .pageTitle-text { font-family: var(--special-font); font-weight: 600; } .pageTitle-right { display: none; } .pageLocation-wrap { margin-top: 1.5rem; font-family: var(--special-font); } .pageLocation ul { padding-top: 0; padding-bottom: 0; gap: clamp(0.5rem, 2vw, 1rem); justify-content: center; } .pageLocation ul span { font-size: clamp(1.3rem, 2vw, 1.5rem); } .pageLocation ul li > i, .pageLocation ul li a > i:before { color: #fff; } .pageTitle-right { text-align: right; flex: 1; } .pageBtn-wrap { display: inline-block; vertical-align: middle; } .pageBtn-wrap ul li + li { margin-left: 0.8rem; } .pageBtn-wrap ul li > * { background-color: #fff; border-radius: 1.5rem; color: #7f8893; width: 40px; height: 40px; text-align: center; display: block; font-size: 0; border: 1px solid rgba(var(--gray-color-30),0.8) } .pageBtn-wrap ul li > *:hover { background-color: rgb(var(--basic-color-50)); color: #fff; } .pageBtn-wrap ul li > * i:before { font-size: 1.6rem; line-height: 40px; } .searchContainer-wrap { padding-top: 1.5rem; padding-bottom: 2rem; } .searchContainer > .inner { border-radius: var(--radius-s); } @media (min-width: 1024px){ .searchContainer-wrap { padding-top: 2rem; padding-bottom: 3.5rem; } } @media (max-width: 1359.9px){ .pageTitle-wrap { display: none; } .subPage-customNav #subNav-list li a { line-height: 5.3rem; } .subPage { padding-top: clamp(1rem, 1.5vw, 1.5rem); } } @media (min-width: 1360px){ .path-wrap { visibility: hidden; height: 0; overflow: hidden; } .pageTitle { padding-top: 0; padding-bottom: 1.5rem; } .pageTitle-right { display: block; } } .subContent-wrap { margin-top: clamp(1rem, 2vw, 2rem); } .subContent-wrap ~ .subContent-wrap { margin-top: 4rem; } .subContent-wrap > section { max-width: var(--max-width); margin-left: auto; margin-right: auto; } .subContent-wrap .subContent-section { font-size: 1.6rem; margin-top: clamp(3rem, 5.2vw, 5rem); } .subContent-wrap .subContent-section:first-child, .subContent-wrap .subContent-first { margin-top: 0; } @media (min-width: 1024px) { .subContent-wrap ~ .subContent-wrap { margin-top: 5rem; } } @media (min-width: 1360px){ .subContent-wrap ~ .subContent-wrap { margin-top: 6rem; } } .subContent-title { font-size: clamp(1.8rem, 2vw, 2.2rem); position: relative; margin-bottom: clamp(1.8rem, 2vw, 2.2rem); } .subContent-title h3 { display: block; padding-left: 1.6em; position: relative; font-size: 1em; } .subContent-title h3 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; } .subContent-title h3 span { font-weight: normal; padding-right: 0.5em; display: none; } .subContent-title h3 strong { color: #252525; font-weight: 500; } .subContent-title h3:before { content: ''; display: block; width: 0.95em; height: 0.95em; position: absolute; left: 0; top: 0.35em; background: url("/style_www/img/common/icon/title_dot.png") no-repeat center; background-size: contain; } .subContent-title h3 strong span { font-weight: normal; font-size: 0.8em; } .subContent-title:has(h3) + .subContent-title:has(h4) { margin-top: clamp(2.2rem, 2.4vw, 2.6rem); } .subContent-title:has(h4) { margin-bottom: clamp(0.8rem, 1.4vw, 1.2rem); } .subContent-title h4 { font-size: 0.85em; display: block; padding-left: 1.25em; position: relative; } .subContent-title h4 * { font-family: var(--special-font); display: inline-block; vertical-align: middle; font-weight: 500; } .subContent-title h4:before { content: ''; display: block; width: 0.8em; height: 0.8em; position: absolute; top: 0.37em; left: 0; border-radius: 0.3rem; border: 0.2rem solid rgb(var(--special-color-50)); } .subContent-title ~ .subContent-title ~ .subContent-title { margin-top: 3rem; } .subContent-title .initialBtn { font-size: 1.6rem; width: 8rem; position: absolute; right: 0; bottom: 2rem; padding: 0.7rem 0.8rem; } .subContent-text { font-size: 1.8rem; } .subContent-text > p { line-height: 1.5; } .subContent-text > p ~ p { margin-top: 2rem; } .subContent-text-info { font-size: clamp(1.5rem, 1.6vw, 1.7rem); line-height: 1.4; color: #777; } .subContent-text-info b { color: rgb(var(--basic-color-70)); } .subText { font-size: 1.5rem; } .subText > p { line-height: 1.5; color: #555; } .subText > p ~ p { margin-top: 1em; } @media (min-width: 1360px){ .subText { font-size: 1.6rem; } } .colorBg-wrap { font-family: var(--special-font); } .colorBg-box { background-color: rgb(var(--gray-color-10)); padding: clamp(2rem, 2vw, 2.5rem) clamp(3rem, 2.5vw, 4rem); gap: clamp(0.5rem, 2vw, 1rem); border-radius: var(--radius-xm); display: flex; align-items: center; } .colorBg-box i { display:block; width: clamp(6rem, 6vw, 8rem); } .colorBg-box dl { flex: 1; font-size: clamp(2rem, 2.2vw, 2.2rem); padding-left: 1.5rem; } .colorBg-box dl dt { font-weight: 700; text-transform: uppercase; } .colorBg-box dl dd { color: #555; font-size: 0.7em; margin-top: 0.3em; line-height: 1.5; } .simpleText-box { background-color: rgb(var(--gray-color-10)); padding: 3rem 3rem; border-radius: 1.5rem; } .simpleText-box dl { font-size: 2rem; } .simpleText-box dl dt { font-weight: 900; text-transform: uppercase; } .simpleText-box dl dt span { display: none; } .simpleText-box dl dd { color: #555; font-size: 0.8em; margin-top: 0.7em; line-height: 1.5; } .simpleText-box dl dd > * { line-height: 1.6; } @media (min-width: 1024px){ .simpleText-box dl { display: table; font-size: 2.4rem; } .simpleText-box dl > * { display: table-cell; vertical-align: top; } .simpleText-box dl dt { min-width: 160px; } .simpleText-box dl dt span { display: inline; } .simpleText-box dl dd { font-size: 0.65em; margin-top: 0; } } .borderTop-box { margin-bottom: 1.5rem; padding: 2rem; border: 1px solid #cecece; border-top: 0.3rem solid rgb(var(--basic-color-50)); line-height: 1.7; border-radius: 3px; } @media (min-width: 768px){ .borderTop-box { padding: 3rem; } } .customCheckbox label span { font-size: 1.5rem; } .borderTop-box-agree { font-size: 1.5rem; line-height: 1.5; } .borderTop-box-agree .thinTable { table-layout: fixed; width: 100%; margin: 1rem 0; } .borderTop-box-agree .thinTable th, .thinTable td { border: 1px solid #dedede; padding: 0.5rem 0.2rem; text-align: center; } .borderTop-box-agree .thinTable th { border-top-color: #252525; } .basicTable-wrap table.alignCenter-all *, .basicTable-wrap table.alignCenter-all tbody td:nth-child(2) { text-align: center; } .basicTable-wrap table.alignCenter-all tbody td.alignLeft { padding-left: 1.5rem; } .subImg-box { border: 1px solid #ddd; background: #fff; padding: 1rem 1rem; border-radius: var(--radius-m); overflow: hidden; } .subImg-box-double { display: flex; flex-wrap: wrap; border: 1px solid #ddd; background: #fff; padding: 1rem 1rem; border-radius: 0.6rem; } .subImg-box-double > * { padding: 1rem; } .subImg-box img { margin: auto; } .subImg-double { border: 1px solid #ddd; border-radius: 0.6rem; overflow: hidden; } .subImg-double:after { content: ''; display: block; clear: both; } .subImg-double img { display: block; width: 50%; float: left; } .subImg-triple { display: flex; flex-wrap: wrap; font-size: 0; border-radius: 0.6rem; overflow: hidden; border: 1px solid #ddd; } .subImg-triple > div:nth-child(1) { width: 50%; } .subImg-triple > div:nth-child(2) { width: 50%; } .subImg-triple > div:nth-child(3) { width: 100%; } .subImg-triple > div .imgContainer-fit { padding: 0; height: 20rem; } .subVideo-box { border-radius: 0.6rem; overflow: hidden; border: 1px solid #ddd; background-color: rgb(var(--gray-color-10)); font-size: 0; } .subVideo-box .inner { max-width: 80rem; margin: auto; } .pcImg { display: none; } @media (min-width: 720px){ .subImg-box { padding: 2rem; } .mobileImg { display: none; } .pcImg { display: block; } .subImg-triple > div:nth-child(1) { width: 25%; } .subImg-triple > div:nth-child(2) { width: 25%; } .subImg-triple > div:nth-child(3) { width: 50%; } .subImg-triple > div .imgContainer-fit { height: 100%; } } @media (min-width: 950px){ .subImg-box { padding: 5rem 8rem; } .subImg-box-double > * { width: 50%; padding: 2rem; } } /* @media (min-width: 1024px){ .subImg-box { padding: 5rem 15rem; } } */ .subContent-lineBox { background-image: url("/style_www/img/common/pattern/diagonal.gif"); padding: 2rem; border: 1px solid #ddd; border-radius: 0.5rem; font-size: 1.7rem; } .subContent-lineBox > * { display: block; line-height: 1.5; } .subContent-lineBox strong { font-size: 1.1em; } .subContent-lineBox p { margin-top: 1rem; } .subContent-lineBox .dotList li { font-size: 1.7rem } .subContent-lineBox .dotList li:before { top: 0.6em; } @media (min-width: 950px){ .subContent-lineBox { padding: 3rem; } } /**-- subContent-wrap custom --**/ .fileDown-list a { color: #555; } .fileDown-list a * { display: inline-block; vertical-align: middle; } .fileDown-list a i { background-color: #4179c6; color: #fff; font-size: 0; padding: 0.2rem 1rem; border-radius: 2rem; margin-left: 0.2rem; } .fileDown-list a i:before { font-size: 1.3rem; } .fileDown-list a:hover span { text-decoration: underline; } .fileDown-list a:hover i { background-color: #013e6c; } .dotList-s li + li { margin-top: 0.8rem; } .dotList-s li:before { top: 0.65em; } .dotList strong { display: block; } .dotList .dotList-s { margin-top: 1rem; } .dotList .dotList-s li { font-size: 0.9em; } .dotList .dotList-s li + li { margin-top: 0.5rem; } .dotList sub { transform: translateY(-25%); display: inline-block; color: #555; } .dotList-num > li + li { margin-top: 0.9em; } /**-- subContent-wrap custom end --**/ /** subContent-wrap end **/ /** pageTab-wrap **/ .pageTab-wrap { padding: 1rem 0 3rem; } .pageTab { border-bottom: 2px solid rgb(var(--special-color-50)); } .pageTab.maxWidth { padding: 0; } .pageTab > ul:after { content: ''; display: block; clear: both; } .pageTab > ul { margin-left: 0; transform: translateY(2px); } .pageTab > ul > li { float: left; padding-left: 0; } .pageTab > ul > li a { display: block; font-size: 3.2vw; padding: 1.5rem 1.5rem; text-align: center; position: relative; background-color: #fff; color: #aaa; font-weight: 500; border-radius: 0.2rem; } .pageTab > ul > li a:before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 0; height: 100%; background-color: rgba(0,0,0, 0); transition: all 0.2s ease-in-out; } .pageTab > ul > li a:hover:before { width: 100%; background-color: rgba(0,0,0, 0.1); } .pageTab > ul > li.active a { border: 2px solid rgb(var(--special-color-50)); border-bottom: 0; color: #333; border-radius: 0.5rem 0.5rem 0 0; } .pageTab > ul > li a span { font-size: 0.95em; } .pageTab > ul > li.active a span { font-size: 1em; } .pageTab_2 > ul > li { width: 50%; } .pageTab_3 > ul > li { width: 33.333333%; } @media (min-width: 600px){ .pageTab > ul > li a { font-size: 1.7rem; } } @media (min-width: 750px){ .pageTab > ul > li { width: inherit; } .pageTab > ul > li a { font-size: 1.8rem; padding: 1.7rem 2.5rem; } .pageTab-wrap { padding: 1rem 0 5rem; } } @media (max-width: 749.9px){ .pageTab_4 { border-bottom: 0; } .pageTab_4 > ul { margin-left: -0.3rem; margin-top: -0.5rem; display: flex; flex-wrap: wrap; } .pageTab_4 > ul > li { width: 50%; padding-left: 0.3rem; padding-top: 0.5rem; } .pageTab_4 > ul > li a { border: 2px solid var(--gray-color); border-radius: 0.5rem; } .pageTab_4 > ul > li.active a { border-bottom: 2px solid rgb(var(--special-color-50)); border-radius: 0.5rem; } .pageTab_5 { border-bottom: 0; } .pageTab_5 > ul { margin-left: -0.3rem; margin-top: -0.5rem; display: flex; flex-wrap: wrap; } .pageTab_5 > ul > li { width: 50%; padding-left: 0.3rem; padding-top: 0.5rem; } .pageTab_5 > ul > li:nth-child(n + 3) { width: 33.33333333333%; } .pageTab_5 > ul > li a { border: 2px solid var(--gray-color); border-radius: 0.5rem; } .pageTab_5 > ul > li.active a { border-bottom: 2px solid rgb(var(--special-color-50)); border-radius: 0.5rem; } } /** pageTab-wrap end **/ /** boxTitle **/ .boxTitle { position: relative; font-family: var(--special-font); text-align: center; font-size: 2rem; padding: 4rem 2rem; border: 0.7rem solid #ededed; word-break: keep-all; } .boxTitle:before { content: ''; position: absolute; top: -0.7rem; left: -0.7rem; width: 3rem; height: 3rem; border-top: 0.7rem solid rgb(var(--special-color-50)); border-left: 0.7rem solid rgb(var(--special-color-50)); } .boxTitle:after { content: ''; position: absolute; bottom: -0.7rem; right: -0.7rem; width: 3rem; height: 3rem; border-bottom: 0.7rem solid rgb(var(--basic-color-50)); border-right: 0.7rem solid rgb(var(--basic-color-50)); } .boxTitle strong { font-family: var(--special-font); } /** boxTitle end **/ /** basicTab-wrap **/ .basicTab { display: flex; padding: 0.5rem; background-color: rgba(var(--basic-color-5)); border-radius: var(--radius-xm); } .basicTab > * { display: flex; justify-content: center; align-items: center; flex: 1; min-width: 1px; font-family: var(--special-font); font-weight: 600; font-size: 1.7rem; color: rgb(var(--gray-color-60)); padding: clamp(1rem, 1.5vw, 1.5rem) 0.5rem; } .basicTab > *:hover { color: rgba(var(--basic-color-50)); } .basicTab .current { background-color: rgba(var(--basic-color-60)); box-shadow: 0 4px 14px rgba(var(--basic-color-60), 0.28); color: #fff !important; border-radius: var(--radius-m); } /** basicTab-wrap end **/ /** taskTab-wrap **/ .taskTab { margin-bottom: 1.5rem; } .taskTab ul { font-size: 0; } .taskTab ul > li { display: inline-block; vertical-align: middle; width: 50%; position: relative; border: 1px solid #dedede; border-top: 0; } .taskTab ul > li:first-child { border-top: 1px solid #dedede; border-radius: 1rem 0 0 0; overflow: hidden; } .taskTab ul > li:nth-child(2) { border-top: 1px solid #dedede; border-radius: 0 1rem 0 0; } .taskTab ul > li:last-child { border-radius: 0 0 1rem 0; } .taskTab ul > li:nth-last-child(2) { border-radius: 0 0 0 1rem; } .taskTab ul > li:nth-child(2n) { border-left: 0; } .taskTab ul > li > .inner { display: block; position: relative; width: 100%; padding: 1.3rem 1.5rem; text-align: left; color: #555; } .taskTab ul > li > .inner > * { display: inline-block; vertical-align: middle; letter-spacing: -0.05px; word-spacing: -0.1px; } .taskTab ul > li > .inner > em { font-size: 3vw; } .taskTab ul > li > .inner > span { font-size: 1.4rem; color: #01306c; } .taskTab ul > li.active { border-color: rgb(var(--special-color-50)) !important; } .taskTab ul > li.active > .inner *, .taskTab ul > li > .inner:hover * { color: rgb(var(--special-color-50)); font-weight: 500; } .taskTab ul > li.active:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; border-bottom: 0.8rem solid transparent; border-top: 0.8rem solid rgb(var(--special-color-50)); border-left: 0.8rem solid rgb(var(--special-color-50)); border-right: 0.8rem solid transparent; } .taskTab ul > li + li.active:after { content: ''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; left: -1px; top: -1px; border: 1px solid rgb(var(--special-color-50)); border-width: 1px 0 0 1px; } .taskTab ul > li:nth-child(2).active:after { border-top: 0; } .taskTab ul > li:nth-last-child(2).active:after { border-radius: 0 0 0 1rem; } @media (min-width: 500px){ .taskTab ul > li > .inner > em { font-size: 1.5rem; } } @media (min-width: 950px){ .taskTab { display: table; table-layout: fixed; width: 100%; margin-bottom: 3rem; } .taskTab ul { display: table-row; margin: 0; } .taskTab ul > li { display: table-cell; vertical-align: middle; border: 1px solid #dedede; border-left: 0; } .taskTab ul > li:first-child { border-left: 1px solid #dedede; border-radius: 1rem 0 0 1rem; } .taskTab ul > li:nth-child(2) { border-radius: 0; } .taskTab ul > li:last-child { border-radius: 0 1rem 1rem 0; } .taskTab ul > li:nth-last-child(2) { border-radius: 0; } .taskTab ul > li > .inner { font-size: 1.4rem; border-radius: 0; padding: 1.2rem 1.5rem; } .taskTab ul > li > .inner > * { display: block; } .taskTab ul > li > .inner > em { font-size: 1.5rem; } .taskTab ul > li > .inner > span { padding-top: 0.5rem; } .taskTab ul > li:last-child.active:after { border-top: 0; } } @media (min-width: 1024px){ .taskTab ul > li > .inner { font-size: 1.5rem; } } @media (min-width: 1360px){ .taskTab ul > li > .inner > * { display: inline-block; } .taskTab ul > li > .inner > span { padding-top: 0; } } .task-wrap .boardSearch { padding: 2rem 0 1rem; } .task-wrap .filter-wrap { margin-bottom: 1rem; } .task-wrap .filter-wrap:after { content: ''; display: block; clear: both; } .task-wrap .filter { float: right; } .task-wrap .filter i, .task-wrap .filter .customSelect { display: inline-block; vertical-align: middle; } .task-wrap .filter i { color: #cecece; } .task-wrap .filter .customSelect { width: 10rem; border: 0; } /** taskTab-wrap end **/ /** itemBox **/ .itemBox { background-color: rgba(var(--gray-color-10),1); color: rgba(var(--gray-color-90),1); border-radius: var(--radius-m); padding: var(--padding-m); } .itemBox dt { font-weight: 600; } .itemBox dd { color: rgba(var(--gray-color-70),1); font-size: 0.9em; } .itemBox-blue { background-color: rgba(var(--blue-color-10),0.5); color: rgba(var(--blue-color-70),1); } .itemBox-mint { background-color: rgba(var(--mint-color-10),0.5); color: rgba(var(--mint-color-70),1); } .itemBox-purple { background-color: rgba(var(--purple-color-10),0.5); color: rgba(var(--purple-color-70),1); } .itemBox-orange { background-color: rgba(var(--orange-color-10),0.5); color: rgba(var(--orange-color-80),1); } .itemBox-pink { background-color: rgba(var(--pink-color-10),0.5); color: rgba(var(--pink-color-70),1); } /** itemBox end **/ .reactiveList dl ~ dl { margin-top: 1.3rem; } .reactiveList dl dt { background-color: #f3f6fa; padding: 0.8rem; font-weight: 500; border-radius: 0.5rem; color: rgb(var(--basic-color-70)); } .reactiveList dl dd { padding: 0.8rem 0.8rem 0; } @media print, (min-width: 768px){ .reactiveList { display: table; table-layout: fixed; width: 100%; border-top: 2px solid #555; } .reactiveList dl { display: table-row; } .reactiveList dl > * { display: table-cell; padding: 1.5rem 2rem !important; } .reactiveList dl dt { border-radius: 0; width: 25rem; border: 1px solid #dedede; border-left: 0; border-top: 0; } .reactiveList dl dd { border-bottom: 1px solid #dedede; } } .reactiveTable { table-layout: fixed; width: 100%; border-top: 2px solid #555; } .reactiveTable th { background-color: #f3f6fa; font-weight: 500; color: rgb(var(--basic-color-70)); } .reactiveTable tr > * { border-bottom: 1px solid #dedede; padding: 1.5rem 2rem; } .reactiveTable tr > * + * { border-left: 1px solid #dedede; } @media print, (max-width: 768px){ .reactiveTable { border-top: 0; } .reactiveTable colspan { display: none; } .reactiveTable, .reactiveTable tbody, .reactiveTable tr, .reactiveTable th, .reactiveTable td { display: block; border-radius: 0.5rem; } .reactiveTable tr > * { border-bottom: 0; } .reactiveTable tr > * + * { border-left: 0; } .reactiveTable tr > th { border: 1px solid rgb(var(--basic-color-40)); padding: 0.8rem; } .reactiveTable tr > td { padding: 0.8rem 0.8rem 1.3rem; } .reactiveTable tr:last-child > *:last-child { padding-bottom: 0; } } /** contact **/ .contactMap-wrap { display: flex; flex-direction: column-reverse; gap: 2rem; } .contactInfo-wrap { font-family: var(--special-font); padding: 2rem clamp(3rem, 4vw, 4rem); background-color: rgba(var(--gray-color-10),1); border-radius: var(--radius-s); overflow: hidden; } .contactInfo-wrap dl { display: flex; flex-direction: column; font-size: 1.5rem; } .contactInfo-wrap dl dt { font-size: 0.9em; margin-bottom: 0.5rem; color: rgb(var(--basic-color-50)); } .contactInfo-wrap dl * ~ dt { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgb(var(--gray-color-20)); } .mapContent { flex: 1; min-width: 1px; border: 1px solid rgb(var(--gray-color-20)); border-radius: var(--radius-s); overflow: hidden; } .contactTraffic-wrap .itemBox { padding: clamp(1.5rem, 2vw, 2.3rem); } .contactTraffic-wrap dt { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.7rem, 2vw, 1.8rem); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(var(--gray-color-60),0.2); } .contactTraffic-wrap dt strong { font-weight: 600; } .contactTraffic-wrap dt, .contactTraffic-wrap em { font-family: var(--special-font); } .contactTraffic-wrap dl dd { font-size: clamp(1.5rem, 1.6vw, 1.6rem); } .contactTraffic-wrap dl dd + dd { margin-top: 1rem; } .contactTraffic-wrap dl dd em { font-size: 0.95em; display: block; color: rgb(var(--basic-color-60)); font-weight: 600; } .contactTraffic-wrap dl dd span { font-size: 0.9em; display: block; margin-top: 0.2rem; } .contactDepartment-wrap { display: flex; flex-direction: column; gap: 1rem; } .contactDepartment-wrap li { border: 1px solid rgba(var(--gray-color-20),0.8); border-radius: var(--radius-m); padding: 18px 22px; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; align-items: center; } .contactDepartment-wrap li .pn { font-family: var(--special-font); padding-bottom: 0.5rem; } .contactDepartment-wrap li .pn b { font-weight: 500; } .contactDepartment-wrap li .pd:not(.tel) { font-size: 0.9em; } .contactDepartment-wrap li .tel { color: rgb(var(--basic-color-50)); font-weight: 600; } @media (min-width: 960px){ .contactMap-wrap { flex-direction: row-reverse; gap: clamp(2rem, 3vw, 3rem); } .contactInfo-wrap { padding: clamp(3rem, 3vw, 3rem) clamp(3rem, 4vw, 4rem); max-width: 40rem; } .contactMap-wrap #map { height: 100% !important; } .contactDepartment-wrap li { grid-template-columns: 190px minmax(0, 1fr) 250px 120px; } } /** contact end **/ /** greeting **/ .greeting-header { position: relative; background-image: url("/style_www/img/sub/introduce/gretting.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right center; border-radius: var(--radius-xm) var(--radius-xm) calc(var(--radius-xm) * 3.2) var(--radius-xm); } .greeting-title { font-family: var(--special-font); padding: clamp(3rem, 4vw, 5rem) clamp(2.5rem, 4vw, 5rem) ; color: #333; font-size: clamp(2rem, 2.6vw, 2.6rem); width: max-content; max-width: 100%; } .greeting-title * { display: block; } .greeting-title span { color: rgb(var(--basic-color-50)); font-size: 0.7em; margin-top: 0.2em; } .quotes-icon { font-size: clamp(3rem, 4vw, 5rem); position: absolute; color: rgb(var(--basic-color-50)); } .quotes-icon.ri-double-quotes-l { left: -0.2em; top: -0.5em; } .quotes-icon.ri-double-quotes-r { right: -0.2em; bottom: -0.4em; } .greeting-body { margin-top: clamp(2.5rem, 4vw, 4rem); } .greeting-body p { color: #555; line-height: 1.7; font-size: clamp(1.5rem, 2vw, 1.7rem); } .greeting-body p + p { margin-top: 1.5rem; } .greeting-body .sign > em { margin-top: 1.8rem; gap: 0.6em; display: flex; align-items: flex-end; justify-content: flex-end; font-size: clamp(1.5rem, 2vw, 1.7rem); font-family: var(--special-font); } .greeting-body .sign > em span { font-size: 0.9em; } .greeting-body .sign > span { color: rgba(var(--gray-color-60)); display: block; margin-top: 0.3rem; text-align: right; } .greeting-project .itemBox { padding: clamp(2.5rem, 3vw, 3rem) 1.5rem; text-align: center; gap: 0.5rem; } .greeting-project .itemBox dt { font-size: clamp(1.6rem, 1.8vw, 1.8rem); } /* org */ .orgChart-panel { font-family: var(--special-font); background-color: rgba(var(--gray-color-10),0.8); border-radius: var(--radius-l); padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); } .orgChart-tree { position: relative; } .orgChart-tree > * { position: relative; z-index: 1; } /* head = topmost tier (총장), item = every tier below it (단장/부단장/사업관리실 등); both render as one label banner + an optional white body for whatever comes after the label */ .orgChart-head, .orgChart-item { max-width: 44rem; margin: 0 auto; text-align: center; border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 1px 7px rgba(0,0,0,0.1); position: relative; } .orgChart-item { margin-top: 2rem; } .orgChart-head-label, .orgChart-item-label { display: block; padding: 1.4rem 1.5rem; font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 500; } .orgChart-head-label + *, .orgChart-item-label + * { background-color: #fff; } .orgChart-centers { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.6rem; margin-top: 2rem; } /* grid items default to min-width:auto (their content's min-content); without min-width:0 a long unbroken Korean run (no space to wrap at) forces its whole grid track wider than the container */ .orgChart-centers > .orgChart-node { min-width: 0; } .orgChart-node { display: flex; flex-direction: column; text-align: center; background-color: #fff; border-radius: var(--radius-m); box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 1.2rem 1.4rem; } .orgChart-node-title { font-family: var(--special-font); display: block; font-weight: 700; font-size: clamp(1.5rem, 2vw, 1.6rem); } .orgChart-node-desc { display: block; padding: var(--padding-s); margin-top: 0.6rem; font-size: clamp(1.4rem, 1.6vw, 1.5rem); color: #555; line-height: 1.6; background-color: #fff; border-radius: var(--radius-s); flex: 1; } .org-mint .orgChart-node-desc { display: flex; flex-direction: column; align-items: center; justify-content: center; } .org-mint .orgChart-node-desc dt { color: rgba(var(--mint-color-80)); font-weight: 500; gap: 0.3rem; } .org-mint .orgChart-node-desc dd { font-size: 0.9em; color: rgba(var(--gray-color-60)) } /* inner-item: a paired-committee grid nested inside a head/item box; osupport: the larger collaborating-org tag grid inside a node-desc */ .orgChart-inner-item, .osupport { display: grid; gap: var(--padding-s); } .orgChart-inner-item > *, .osupport > * { border: 1px dashed rgb(var(--gray-color-50)); border-radius: var(--radius-m); padding: var(--padding-s); min-width: 0; } .orgChart-inner-item { grid-template-columns: repeat(2, 1fr); padding: var(--padding-s); } .orgChart-inner-item > * { font-size: clamp(1.4rem, 1.6vw, 1.5rem); color: #555; } .osupport { grid-template-columns: repeat(2, 1fr); } /* color palette for head/item/node backgrounds */ .org-basic { background-color: rgb(var(--basic-color-50)); color: #fff; } .org-basic-deep { background-color: rgb(var(--basic-color-80)); color: #fff; } .org-blue { background-color: rgb(var(--blue-color-70)); color: #fff; } .org-blue-light { background-color: rgb(var(--blue-color-10)); color: rgb(var(--blue-color-70)); } .org-mint { background-color: rgb(var(--mint-color-60)); color: #fff; } .org-purple { background-color: rgb(var(--purple-color-60)); color: #fff; } .org-green { background-color: rgb(var(--green-color-60)); color: #fff; } .org-orange { background-color: rgb(var(--orange-color-60)); color: #fff; } /* mobile: every tier (head/item/centers node) stacks in one left-rail timeline, tick + rail drawn via :before/:after */ @media (max-width: 767.9px){ .orgChart-tree { padding-left: 1.6rem; } .orgChart-head, .orgChart-item { max-width: 100%; overflow: visible; } .orgChart-head > *:last-child, .orgChart-item > *:last-child { border-radius: 0 0 var(--radius-m) var(--radius-m); } .orgChart-head, .orgChart-item, .orgChart-centers .orgChart-node { position: relative; } .orgChart-head:before, .orgChart-item:before, .orgChart-centers .orgChart-node:before { content: ''; position: absolute; top: calc(50% - 1px); left: -1.6rem; width: 1.6rem; height: 2px; background-color: rgb(var(--gray-color-40)); } .orgChart-head:after, .orgChart-item:after, .orgChart-centers .orgChart-node:after { content: ''; position: absolute; top: -1rem; left: -1.6rem; width: 2px; height: calc(100% + 2rem); background-color: rgb(var(--gray-color-40)); } .orgChart-head:after { top: 50%; height: calc(50% + 1rem); } .orgChart-last:after { top: -1rem !important; height: calc(50% + 1rem) !important; } .osupport { grid-template-columns: repeat(3, 1fr); } } /* desktop: trunk runs behind the boxes; centers row branches sideways/down off it, with cols-5/org-full as layout modifiers */ @media (min-width: 768px){ .orgChart-tree:before { content: ''; position: absolute; top: 0; height: 100%; left: 50%; width: 2px; background-color: rgb(var(--gray-color-40)); transform: translateX(-50%); z-index: 0; } .orgChart-centers { grid-template-columns: repeat(4, 1fr); margin-top: 4rem; position: relative; } .orgChart-centers.cols-5 { grid-template-columns: repeat(5, 1fr); } .orgChart-centers .orgChart-node { position: relative; } .orgChart-centers .orgChart-node:not(.org-full):after { content: ''; position: absolute; top: -1.8rem; left: -1rem; height: 2px; width: calc(100% + 2rem); background-color: rgb(var(--gray-color-40)); z-index: 1; } .orgChart-row-last:after { width: calc(50% + 1.1rem) !important; } .orgChart-row-first:after { width: calc(50% + 1.1rem) !important; left: calc(50% - 0.1rem) !important; } .orgChart-centers .orgChart-node:before { content: ''; position: absolute; top: -1.6rem; left: 50%; width: 2px; height: 1.6rem; background-color: rgb(var(--gray-color-40)); transform: translateX(-50%); z-index: 1; } .osupport { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px){ .osupport { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px){ .osupport { grid-template-columns: repeat(6, 1fr); } } /* org-full: a node that spans the full row width, used when a management node (e.g. 사업관리실) sits above and manages the row of centers below it */ .orgChart-centers .orgChart-node.org-full { grid-column: 1 / -1; } /* network / partners (institution.jsp) */ .factrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: clamp(2rem, 3vw, 3rem); } .fct { text-align: center; background-color: rgb(var(--gray-color-10)); border-radius: var(--radius-m); padding: 1.6rem 1rem; } .fct b { display: block; font-family: var(--special-font); font-size: clamp(2rem, 2.4vw, 2.4rem); font-weight: 700; color: rgb(var(--basic-color-50)); } .fct span { display: block; margin-top: 0.4rem; font-size: clamp(1.3rem, 1.5vw, 1.4rem); color: #555; } .cNetwork-list { margin-top: clamp(2.5rem, 3.5vw, 3.5rem); } .cNetwork-tab { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.2rem; } .cNetwork-tab li { flex-shrink: 0; } .cNetwork-tab button { display: block; font-family: var(--special-font); font-size: clamp(1.4rem, 1.6vw, 1.5rem); font-weight: 500; padding: 1rem 1.8rem; border-radius: 99px; background-color: rgb(var(--gray-color-10)); color: rgb(var(--gray-color-70)); white-space: nowrap; transition: background-color 0.2s, color 0.2s; } .cNetwork-tab li:not(.current):hover button { background-color: rgb(var(--gray-color-20)); } .cNetwork-tab li.current button { background-color: rgb(var(--basic-color-50)); color: #fff; } .cNetwork-panel { display: none; margin-top: 1.6rem; } .cNetwork-panel.current { display: block; } .cNetwork-rows { display: flex; flex-direction: column; gap: 1rem; } .cNetwork-rows li { border: 1px solid rgba(var(--gray-color-20),0.8); border-radius: var(--radius-m); padding: 1.3rem 2rem; background: #fff; display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: center; } .cNetwork-rows .pn { grid-column: 1 / 2; font-family: var(--special-font); display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 0.2rem 0.8rem; } .cNetwork-rows .pn b { font-weight: 500; font-size: 1.05em; } .cNetwork-rows .pn small { color: rgb(var(--gray-color-60)); font-size: 0.85em; } .cNetwork-rows .pn-logo { max-height: 2.6rem; width: auto; } .cNetwork-rows .sortText-icon { grid-column: 2 / 3; justify-self: end; } .cNetwork-rows .pd { grid-column: 1 / -1; font-size: 0.9em; color: #555; line-height: 1.6; } @media (min-width: 640px){ .factrow { grid-template-columns: repeat(3, 1fr); } .factrow.factrow-item-4 { grid-template-columns: repeat(2, 1fr);} .factrow.factrow-item-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px){ .factrow { grid-template-columns: repeat(6, 1fr); } .factrow.factrow-item-4 { grid-template-columns: repeat(4, 1fr);} .cNetwork-rows li { grid-template-columns: minmax(240px, 300px) 120px minmax(0, 1fr); gap: 0.5rem 1.5rem; } .cNetwork-rows .pn { grid-column: auto; } .cNetwork-rows .sortText-icon { grid-column: auto; justify-self: start; } .cNetwork-rows .pd { grid-column: auto; } } /* cLinkage */ .cLinkage-wrap { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; } .cLinkage-card { border-radius: var(--radius-m); padding: clamp(2rem, 2.5vw, 2.5rem) clamp(1.8rem, 2vw, 2.2rem); } .cLinkage-card b { display: block; font-family: var(--special-font); font-size: clamp(1.7rem, 1.9vw, 1.9rem); font-weight: 700; margin-bottom: 1rem; } .cLinkage-card span { display: block; font-size: clamp(1.4rem, 1.6vw, 1.5rem); color: #555; line-height: 1.6; } .cLinkage-card em { display: block; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(0,0,0,0.08); font-style: normal; font-family: var(--special-font); font-size: clamp(1.3rem, 1.4vw, 1.4rem); font-weight: 600; } .cLinkage-blue { background-color: rgba(var(--blue-color-10),0.5); } .cLinkage-blue b, .cLinkage-blue em { color: rgb(var(--blue-color-60)); } .cLinkage-yellow { background-color: rgb(var(--yellow-color-10)); } .cLinkage-yellow b, .cLinkage-yellow em { color: rgb(var(--yellow-color-80)); } .cLinkage-green { background-color: rgba(var(--green-color-10),0.5); } .cLinkage-green b, .cLinkage-green em { color: rgb(var(--green-color-60)); } .cLinkage-purple { background-color: rgba(var(--purple-color-10),0.5); } .cLinkage-purple b, .cLinkage-purple em { color: rgb(var(--purple-color-60)); } .cLinkage-orange { background-color: rgba(var(--orange-color-10),0.5); } .cLinkage-orange b, .cLinkage-orange em { color: rgb(var(--orange-color-70)); } /* optional acronym chip sitting above the title, e.g. ACE / 3C / OPEN */ .cLinkage-card .cLinkage-chip { display: inline-block; font-family: var(--special-font); font-weight: 700; font-size: 1.3rem; color: #fff; padding: 0.5rem 1.3rem; border-radius: 99px; margin-bottom: 1rem; } .cLinkage-blue .cLinkage-chip { background-color: rgb(var(--blue-color-60)); } .cLinkage-yellow .cLinkage-chip { background-color: rgb(var(--yellow-color-70)); } .cLinkage-green .cLinkage-chip { background-color: rgb(var(--green-color-60)); } .cLinkage-purple .cLinkage-chip { background-color: rgb(var(--purple-color-50)); } .cLinkage-orange .cLinkage-chip { background-color: rgb(var(--orange-color-60)); } @media (max-width: 679.9px){ .cLinkage-wrap { grid-template-columns: repeat(1, 1fr) !important; } } /* cPolicy: 참여 협의체·정책 네트워크 — same card metrics as .contactDepartment-wrap li / .cNetwork-rows li, arranged as a 2-col grid instead of a stacked list */ .cPolicy-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; } .cPolicy-grid > div { border: 1px solid rgba(var(--gray-color-20),0.8); border-radius: var(--radius-m); padding: 18px 22px; background: #fff; } .cPolicy-grid .pn { display: flex; align-items: center; gap: 0.8rem; font-family: var(--special-font); margin-bottom: 0.6rem; } .cPolicy-grid .pn b { font-weight: 500; font-size: 1.05em; } .cPolicy-grid .pd { display: block; font-size: 0.95em; color: #555; line-height: 1.6; } /* optional lead icon, e.g. ... */ .cPolicy-grid .pn i { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background-color: rgb(var(--basic-color-10)); color: rgb(var(--basic-color-50)); font-size: 1.8rem; line-height: 1; flex-shrink: 0; } @media (min-width: 640px){ .cPolicy-grid { grid-template-columns: repeat(2, 1fr); } .cPolicy-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .sortText-icon { display: inline-block; font-family: var(--special-font); min-width: 66px; background-color: rgb(var(--gray-color-60)); color: #fff; text-align: center; padding: var(--padding-xs) var(--padding-m); border-radius: 99px; font-size: clamp(1.3rem, 2vw, 1.4rem); font-weight: 500; line-height: 1.1; } .sortText-icon small { font-size: 0.9em; } .sortText-icon_green { background-color: rgb(var(--green-color-10)); color: rgb(var(--green-color-60))} .sortText-icon_blue { background-color: rgb(var(--blue-color-10)); color: rgb(var(--blue-color-60)) } .sortText-icon_yellow { background-color: rgb(var(--yellow-color-10)); color: rgb(var(--yellow-color-80)) } .sortText-icon_orange { background-color: rgb(var(--orange-color-10)); color: rgb(var(--orange-color-80)) } /** yearBoard-wrap **/ .yearBoard-wrap .xScroll-outer { --xScroll-fade-color: 240,240,240; } .yearBoard-search-wrap { display: flex; justify-content: end; margin-bottom: clamp(1.5rem, 2vw, 1.8rem); } .yearBoard-search { display: flex; gap: 0.5rem; } .yearBoard-search .customSelect { width: 8rem; font-size: clamp(1.4rem, 1.5vw, 1.5rem); display: flex; align-items: center; } .yearBoard-search .customSelect > label { padding: 0 1rem; } .yearBoard-search .yearBoard-search-insert { display: flex; gap: 0.5rem; } .yearBoard-search .yearBoard-search-insert > input { font-size: 1.5rem; padding: 0.9rem 1rem; } .yearBoard-search .yearBoard-search-insert > button { position: relative; padding: 1rem 1.1rem; } .yearBoard-search .yearBoard-search-insert > button span { position: absolute; top: 0; left: 0; visibility: hidden; } .yearBoard-tab { background-color: rgb(240,240,240); } .yearBoard-tab ul { display: flex; padding: var(--padding-m); } .yearBoard-tab ul li { position: relative; } .yearBoard-tab ul li + li:before { content: ''; display: block; width: 1px; height: 50%; position: absolute; left: 0; top: calc(50% + 0.1em); transform: translateY(-50%); background-color: rgb(var(--gray-color-50)); } .yearBoard-tab ul li button { padding: 0 1.5rem; } .yearBoard-tab ul li button span { opacity: 0.4; font-size: clamp(1.4rem, 2vw, 1.5rem); font-family: var(--special-font); } .yearBoard-tab ul li button:hover span { opacity: 0.7; } .yearBoard-tab ul li.current button span { opacity: 1; color: rgb(var(--basic-color-50)); font-weight: 500; } .yearBoard-wrap .xScroll-on { padding-bottom: 0; } .yearBoard-wrap .xScroll-on i { width: 4.5rem; height: 4.5rem; padding: 1rem; } .yearBoard-content-wrap { border-top: 1px solid rgb(var(--gray-color-90)); border-bottom: 1px solid rgb(var(--gray-color-50)); margin-top: clamp(1.5rem, 2vw, 1.8rem); } .yearBoard-content dl { display: block; padding: clamp(2rem, 3vw, 3rem) 0; } .yearBoard-content dl + dl { border-top: 1px solid rgb(var(--gray-color-30)); } .yearBoard-content dl dt, .yearBoard-content dl dt > * { display: block; } .yearBoard-content dl dt span { font-size: clamp(1.4rem, 2vw, 1.6rem); color: rgb(var(--basic-color-50)); } .yearBoard-content dl dt strong { font-size: clamp(1.8rem, 2.4vw, 2.3rem); font-weight: 500; margin-top: clamp(0.5rem, 1vw, 1rem); } .yearBoard-content dl dt:after { content: ''; display: block; width: 3rem; height: 2px; border-radius: 99px; background-color: rgb(var(--gray-color-50)); margin: clamp(1rem, 2vw, 1.5rem) 0; } .yearBoard-content dl dd { padding-top: 0.5rem; font-size: 1.5rem; } @media (min-width: 500px){ .yearBoard-content dl { display: block; padding: clamp(2rem, 3vw, 3rem) clamp(3rem, 4vw, 4rem); } } /** programBoard-wrap **/ .state_icon { display: inline-block; font-family: var(--special-font); min-width: 66px; border-radius: var(--radius-xs); background-color: rgb(var(--gray-color-60)); color: #fff; text-align: center; padding: 0.5rem 0.5rem 0.4rem; font-size: clamp(1.3rem, 2vw, 1.4rem); font-weight: 500; line-height: 1.1; } .state_ready { border: 1px solid rgb(var(--gray-color-60)); background-color: #fff; color: #555; } .state_ing { background-color: rgb(var(--green-color-50)); } .state_edu { background-color: rgb(var(--blue-color-50)); } .state_always { background-color: rgb(var(--mint-color-60)); } .state_return { background-color: rgb(var(--red-color-50)); } .state_acc { background-color: rgb(var(--purple-color-50)); } .state_finish { background-color: rgb(var(--gray-color-70)); } .pro_cate { display: inline-block; font-family: var(--special-font); border-radius: var(--radius-xl); background-color: rgb(var(--gray-color-60)); color: #fff; text-align: center; padding: 0.5rem 1.5rem; font-size: clamp(1.3rem, 2vw, 1.4rem); font-weight: 500; line-height: 1.1; } .pro_cate_cooperation { background-color: rgba(var(--green-color-50),0.2); color: rgb(var(--green-color-60)); } .pro_cate_support { background-color: rgba(var(--purple-color-50),0.2); color: rgb(var(--purple-color-60)); } .pro_cate_future { background-color: rgba(var(--blue-color-50),0.2); color: rgb(var(--blue-color-60)); } .pro_cate_lifelong { background-color: rgba(var(--orange-color-50),0.2); color: rgb(var(--orange-color-60)); } .pro_cate_expert { background-color: rgba(var(--mint-color-50),0.2); color: rgb(var(--mint-color-60)); } .programList { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem 2rem; } @media (min-width: 600px){ .programList { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px){ .programList { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.3rem; } } /*@media (min-width: 1180px){ .programList { grid-template-columns: repeat(4, minmax(0, 1fr)); } }*/ .programList-item { background-color: rgba(var(--gray-color-10),0.8); border-radius: var(--radius-m); border: 1px solid rgb(var(--gray-color-30)); overflow: hidden; position: relative; } .programList-item a:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .programList-item .state_icon { position: absolute; top: 0.5rem; left: 0.5rem; } .programList-img { border-bottom: 1px solid rgb(var(--gray-color-30));} .programList-img .imgContainer-fit { padding-bottom: 56.25%; } .programList-info { padding: 1.5rem 1.8rem; font-family: var(--special-font); } .programList-info .tit { font-weight: 500; font-size: clamp(1.6rem, 2vw, 1.7rem); margin-bottom: 0.75rem; } .programList-info dl { display: flex; gap: 1rem; font-size: clamp(1.3rem, 1.8vw, 1.4rem); padding: 0.4rem 0 0; } .programList-info dl dt { color: rgba(var(--gray-color-70), 0.8); flex-shrink: 0; text-align: justify; text-align-last: justify; text-justify: inter-character; width: clamp(4.8rem, 5vw, 5rem); } .programList-info dl dd { color: #555; } .pv_top { position: relative; border: 8px solid rgba(var(--gray-color-20),0.9); background: #fff; font-family: var(--special-font); padding: clamp(1.5rem, 2vw, 2.5rem) clamp(1.5rem, 2.5vw, 4rem); text-align: justify; transition: all 0.3s ease; border-radius: 0 var(--radius-l) calc(var(--radius-l) + 3vw) var(--radius-l); } .pv_top:after { position:absolute; content:''; top: -8px; left: -8px; width: 4rem; height: 4rem; border-left: 8px solid rgb(var(--basic-color-70)); border-top: 8px solid rgb(var(--basic-color-50)); } .pv_top_img > * { padding-bottom: 56.25%; border-radius: var(--radius-m); border: 1px solid rgb(var(--gray-color-30)); background-color: rgba(var(--gray-color-30),0.3); } .pv_top_text { margin-top: 2rem; } .pv_top_text .tit { font-size: clamp(1.8rem, 2vw, 2rem); font-weight: 500; } .pv_top_text .tit > i { transform: translateY(-0.15em); margin-right: 0.8rem; } .tit_sub { font-size: clamp(1.4rem, 2vw, 1.6rem); padding-left: 0.3rem; margin-top: clamp(1rem, 1.5vw, 1.5rem); color: #555; } .tit_info { margin-top: clamp(1.5rem, 2vw, 2rem); border-radius: var(--radius-m); background-color: rgba(var(--gray-color-10)); padding: 1rem 0; overflow: hidden; } .tit_info dl { display: grid; align-items: center; grid-template-columns: min(max(20%, 90px), 160px) 1fr; } .tit_info dl > dt { font-size: 0.9em; background-color: rgba(var(--gray-color-10),1); color: rgba(var(--gray-color-70), 0.8); } .tit_info dl > * { padding: clamp(0.5rem,1vw, 0.7rem) clamp(1.2rem, 2vw, 2rem); font-size: clamp(1.4rem, 1.8vw, 1.5rem); } .pv_top_btns { margin-top: clamp(3rem, 3.5vw, 4rem); } .pv_top_btns .initialBtn { width: 100%; border-radius: var(--radius-m); padding: 1.5rem 0; } .pv_top_btns .initialBtn span { font-weight: 400; } .pv_login_check { padding: clamp(4.5rem, 5vw, 7rem) 0 clamp(3rem, 4vw, 4rem); text-align: center; } .pv_login_check i { width: clamp(8rem, 10vw, 12rem); height: clamp(8rem, 10vw, 12rem); display: flex; align-items: center; justify-content: center; border-radius: 10rem; margin: auto; font-size: clamp(5rem, 7vw, 6rem); color: rgb(var(--gray-color-50)); background-color: rgba(var(--gray-color-20)); } .pv_login_check p { font-family: var(--special-font); font-size: clamp(1.8rem, 2vw, 2rem); padding: clamp(2rem, 3vw, 3rem) 0; } .pv_login_check_btns { width: 40rem; max-width: 80%; margin: auto; display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--special-font); } .pv_login_check_btns a { flex: 1; padding: 1.5rem 1rem; } @media (min-width: 1024px){ .pv_top { display: flex; gap: 3rem; } .pv_top_img { width: 40%; } .pv_top_img > * { padding: 0; height: 100%; } .pv_top_text { flex: 1; min-width: 1px; margin-top: 0.5rem; } } /** programBoard-wrap end **/ /** opendesk-wrap **/ .opendesk-page .colorBg-box i { background-color: rgb(var(--yellow-color-50)); padding: clamp(1.5rem, 2vw, 2rem); border-radius: 50%; height: clamp(6rem, 6vw, 8rem); } .opendesk-page .colorBg-box i img { transform: translate(6.5%, 6.5%); } .opendeskInsert-wrap { display: flex; gap: 4rem; flex-direction: row-reverse; padding-top: clamp(2rem, 2.5vw, 3rem);} .opendesk-page .stepGuide-wrap { margin-top: clamp(1rem, 2vw, 2rem); width: 32rem; flex-shrink: 0; color: #fff; } .opendesk-page .stepGuide { background-color: rgb(var(--basic-color-80)); border-radius: var(--radius-xm); padding: 3rem 2.8rem 2.5rem; } .opendesk-page .stepGuide h3 { display: flex; flex-direction: column; gap: 0.2em; font-family: var(--special-font); font-size: clamp(1.8rem, 2vw, 2rem); } .opendesk-page .stepGuide h3 span { font-size: 0.65em; color: rgb(var(--yellow-color-50)); font-weight: 500; } .opendesk-page .stepGuide h3 strong { font-weight: 700; } .opendesk-page .stepGuide-list { margin-top: 1.8rem; } .opendesk-page .stepGuide-list li { display: flex; gap: 1.5rem; align-items: flex-start; } .opendesk-page .stepGuide-list li + li { margin-top: 1.5rem;} .opendesk-page .stepGuide-list li * { display: block; } .opendesk-page .stepGuide-list li i { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; font-size: 2.2rem; font-weight: 100; border-radius: var(--radius-m); background-color: rgb(var(--blue-color-50)); line-height: 1; } .opendesk-page .stepGuide-list li b { flex: 1; min-width: 1px; font-family: var(--special-font); font-size: clamp(1.4rem, 1.6vw, 1.5rem); font-weight: 600; } .opendesk-page .stepGuide-list li span { font-size: 1.3rem; opacity: 0.8; margin-top: 0.5rem; } .inputForm-group { display: grid; gap: 2rem clamp(2rem, 3vw, 2.5rem); grid-template-columns: repeat(1, minmax(0, 1fr)); } .inputForm-item-full { grid-column: 1 / -1; } .inputForm-group dl > * { display: block; } .inputForm-group dt { font-family: var(--special-font); margin-bottom: 0.5rem; padding-left: 0.1em; font-weight: 500; } .inputForm-group dd input, .inputForm-group dd select { width: 100%; padding: clamp(1rem, 1.5vw, 1.2rem); border-radius: var(--radius-m); } .inputForm-group dd input[type="file"] { padding: 0; } .inputForm-group dd input[type=file].customFile::file-selector-button { border-radius: var(--radius-m); } .charCount-wrap { margin-top: 0.5rem; text-align: right; font-size: 1.3rem; color: #999; } .bottomContent .initialBtn { font-size: 1.4rem; padding: 1.2rem var(--padding-l); font-family: var(--special-font); } @media (min-width: 768px){ .inputForm-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 979.9px){ .opendeskInsert-wrap { flex-direction: column-reverse; } .opendesk-page .stepGuide-wrap { width: 100%; } .opendesk-page .stepGuide-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));; } .opendesk-page .stepGuide-list li + li { margin-top: 0; } } .compleate-wrap { font-family: var(--special-font); text-align: center; } .compleate-wrap > i { width: clamp(8rem, 10vw, 10rem); height: clamp(8rem, 10vw, 10rem); display: flex; align-items: center; justify-content: center; border-radius: 10rem; margin: auto; font-size: clamp(4rem, 7vw, 5rem); color: rgb(var(--basic-color-80)); background-color: rgba(var(--yellow-color-50)); } .compleateTitle { display: flex; flex-direction: column; gap: 0.2em; font-size: clamp(2.6rem, 2.6vw, 3rem); padding: clamp(2rem, 3vw, 3rem) 0 clamp(1.5rem, 3vw, 1.8rem); } .compleateTitle em { font-size: 0.6em; font-weight: 500; color: rgb(var(--basic-color-50)); } .compleateTitle strong { font-weight: 700; } .compleateInfo { display: flex; flex-direction: column; gap: 0.2em; color: rgb(var(--gray-color-70)); font-size: clamp(1.4rem, 1.6vw, 1.5rem); } .compleateBox-wrap { background-color: rgba(var(--gray-color-20), 0.6); max-width: 60rem; margin: clamp(2rem, 3vw, 3rem) auto 0; padding: clamp(2rem, 3vw, 3rem) 2rem; border-radius: var(--radius-xm); } .compleateBox { display: flex; flex-direction: column; gap: 0.1em; font-size: clamp(2rem, 2.5vw, 2.4rem); } .compleateBox dt { font-size: 0.6em; } .compleateBox dd { font-weight: 700; color: rgb(var(--basic-color-50)); } .compleate_btns { display: flex; gap: 1.2rem; align-items: center; justify-content: center; margin-top: clamp(2rem, 3vw, 3rem); } .compleate_btns .initialBtn { padding: 1.5rem 2.5rem; } /** opendesk-wrap end **/ /** introduce.jsp: anchor project overview **/ /* tone-*: a shared 5-color identity (산학협력=basic, AI=purple, 미래키움=mint, 평생교육=green, 고숙련=orange) reused across .perfUnit / .ub / .lc-tag below, so the same unit project reads as the same color everywhere on this page */ .introduceTop-wrap { font-family: var(--special-font); background-image: url("/style_www/img/sub/introduce/introduce.jpg"); background-size: cover; background-position: center; padding: clamp(2rem, 3vw, 3rem); border-radius: var(--radius-xm); position: relative; overflow: hidden; } .introduceTop-wrap:before { background-color: rgba(var(--basic-color-70),0.85); content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 0; } .introduceTop-wrap p { padding: 0 clamp(0.3rem, 1vw, 1rem); font-size: clamp(1.7rem, 2vw, 1.8rem); color: #fff; position: relative; z-index: 1; } .introduceInfo-wrap { padding: clamp(1.5rem, 2vw, 2rem); margin-top: 2rem; max-width: 100%; background-color: rgba(255,255,255,0.85); backdrop-filter: blur(15px); border-radius: var(--radius-m); border: 1px solid rgb(255,255,255,0.5); display: flex; flex-direction: column; font-size: 1.5rem; } .introduceInfo-wrap dl + dl { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgba(var(--basic-color-70),0.2);} .introduceInfo-wrap dl dt { font-size: 0.9em; margin-bottom: 0.5rem; color: rgb(var(--basic-color-50)); } @media (min-width: 960px){ .introduceInfo-wrap { flex-direction: row; padding-left: 0; padding-right: 0; } .introduceInfo-wrap dl { flex: 1; min-width: 1px; padding: 0 2rem !important; } .introduceInfo-wrap dl + dl { margin-top: 0; border-top: 0; border-left: 1px solid rgba(var(--basic-color-70),0.2); } } .visionCore { text-align: center; border: 3px solid rgb(var(--basic-color-60)); border-radius: var(--radius-m); padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem); margin-top: 2rem; } .visionCore small { display: block; font-family: var(--special-font); letter-spacing: 0.1em; font-size: 1.3rem; font-weight: 600; color: rgb(var(--basic-color-50)); margin-bottom: 0.8rem; } .visionCore b { display: block; font-family: var(--special-font); font-size: clamp(1.9rem, 2.4vw, 2.4rem); font-weight: 700; color: #333; } /* performance units (1차년도 운영 실적) */ .perfUnit-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2rem; } .perfUnit { border: 1px solid rgba(var(--gray-color-20),0.8); border-radius: var(--radius-m); overflow: hidden; background: #fff; } .perfUnit-head { display: flex; align-items: center; gap: 0.8rem; padding: 1.6rem 2rem; } .perfUnit-dot { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; } .perfUnit-head b { font-family: var(--special-font); font-size: clamp(1.6rem, 1.8vw, 1.8rem); } .perfUnit-body { padding: 0 2rem 2rem; } .perfUnit-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.4rem; } .perfUnit-stat { min-width: 0; text-align: center; border: 1px dashed rgb(var(--gray-color-30)); border-radius: var(--radius-s); padding: 1.2rem 0.5rem; } .perfUnit-stat em { display: block; font-family: var(--special-font); font-style: normal; font-weight: 700; font-size: clamp(1.5rem, 1.8vw, 1.8rem); } .perfUnit-stat i { display: block; font-style: normal; margin-top: 0.3rem; font-size: 1.4rem; color: #777; } .perfUnit-body p { font-size: 1.5rem; color: #555; line-height: 1.6; } .perfUnit-head.tone-basic b { color: rgb(var(--basic-color-60)); } .perfUnit-head.tone-purple b { color: rgb(var(--purple-color-60)); } .perfUnit-head.tone-mint b { color: rgb(var(--mint-color-70)); } .perfUnit-head.tone-green b { color: rgb(var(--green-color-70)); } .perfUnit-head.tone-orange b { color: rgb(var(--orange-color-70)); } /* 5개 단위사업 추진축 */ .ub-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.2rem; margin-top: 2rem; } .ub { min-width: 0; border-radius: var(--radius-m); padding: 2rem 2.2rem; position: relative; } .ub-dot { display: block; width: 1.2rem; height: 1.2rem; border-radius: 50%; margin-bottom: 1.5rem; } .ub b { display: block; font-family: var(--special-font); font-size: clamp(1.6rem, 1.8vw, 1.8rem); font-weight: 700; margin-bottom: 0.5rem; } .ub span { display: block; font-size: 1.5rem; color: #555; } .ub em { position: absolute; right: 1.4rem; top: 1.5rem; display: inline-block; font-style: normal; font-family: var(--special-font); font-size: 1.2rem; font-weight: 600; padding: 0.2rem 1.1rem 0.15rem; border-radius: 99px; border: 1px solid; } .tone-basic .perfUnit-dot, .tone-basic .ub-dot { background-color: rgb(var(--basic-color-50)); } .tone-purple .perfUnit-dot, .tone-purple .ub-dot { background-color: rgb(var(--purple-color-50)); } .tone-mint .perfUnit-dot, .tone-mint .ub-dot { background-color: rgb(var(--mint-color-60)); } .tone-green .perfUnit-dot, .tone-green .ub-dot { background-color: rgb(var(--green-color-60)); } .tone-orange .perfUnit-dot, .tone-orange .ub-dot { background-color: rgb(var(--orange-color-60)); } .ub.tone-basic, .eduTrack.tone-basic { background-color: rgba(var(--basic-color-10),0.6); } .ub.tone-basic em { color: rgb(var(--basic-color-60)); border-color: rgb(var(--basic-color-60)); } .ub.tone-purple, .eduTrack.tone-purple { background-color: rgba(var(--purple-color-10),0.6); } .ub.tone-purple em { color: rgb(var(--purple-color-60)); border-color: rgb(var(--purple-color-60)); } .ub.tone-mint, .eduTrack.tone-mint { background-color: rgba(var(--mint-color-10),0.6); } .ub.tone-mint em { color: rgb(var(--mint-color-70)); border-color: rgb(var(--mint-color-70)); } .ub.tone-green, .eduTrack.tone-green { background-color: rgba(var(--green-color-10),0.6); } .ub.tone-green em { color: rgb(var(--green-color-70)); border-color: rgb(var(--green-color-70)); } .ub.tone-orange, .eduTrack.tone-orange { background-color: rgba(var(--orange-color-10),0.6); } .ub.tone-orange em { color: rgb(var(--orange-color-70)); border-color: rgb(var(--orange-color-70)); } .eduTrack-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .eduTrack { min-width: 0; border-radius: var(--radius-m); padding: 1.8rem 2.2rem; } .eduTrack b { display: block; font-family: var(--special-font); font-size: clamp(1.6rem, 1.8vw, 1.8rem); font-weight: 700; margin-bottom: 0.4rem; } .eduTrack .td { display: block; font-size: 1.4rem; color: #555; margin-bottom: 0.8rem; } .eduTrack .tl { display: block; font-size: 1.3rem; color: #777; line-height: 1.6; } .eduTrack.tone-basic b { color: rgb(var(--basic-color-60)); } .eduTrack.tone-purple b { color: rgb(var(--purple-color-60)); } .eduTrack.tone-mint b { color: rgb(var(--mint-color-70)); } .eduTrack.tone-green b { color: rgb(var(--green-color-70)); } .eduTrack.tone-orange b { color: rgb(var(--orange-color-70)); } /* 생애주기 포용교육 동반성장 모델 */ .lc-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.2rem; margin-top: 2rem; } .lc-card { min-width: 0; border: 1px solid rgba(var(--gray-color-20),0.8); border-radius: var(--radius-m); padding: 1.8rem 2rem; } .lc-tag { display: inline-block; font-family: var(--special-font); color: #fff; font-size: 1.2rem; font-weight: 500; padding: 0.4rem 1.2rem; border-radius: 99px; margin-bottom: 1rem; } .lc-card b { display: block; font-family: var(--special-font); font-size: clamp(1.6rem, 1.8vw, 1.8rem); margin-bottom: 0.4rem; } .lc-card .lcd { display: block; font-size: 1.5rem; color: #777; } .lc-tag.tone-basic { background-color: rgb(var(--basic-color-50)); } .lc-tag.tone-green { background-color: rgb(var(--green-color-60)); } .lc-tag.tone-orange { background-color: rgb(var(--orange-color-60)); } .lc-tag.tone-purple { background-color: rgb(var(--purple-color-50)); } /* 사업 추진 프로세스 */ .procSteps { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; margin-top: 2.5rem; position: relative; } .procStep { min-width: 0; text-align: center; } .procStep-num { display: inline-flex !important; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background-color: rgb(var(--basic-color-50)); color: #fff !important; font-family: var(--special-font); font-weight: 700; font-size: 1.6rem; margin-bottom: 1.2rem; } .procStep b { display: block; font-family: var(--special-font); font-size: clamp(1.6rem, 1.8vw, 1.8rem); margin-bottom: 0.6rem; } .procStep span { display: block; font-size: 1.5rem; color: #555; line-height: 1.4; } @media (min-width: 640px){ .perfUnit-stats { grid-template-columns: repeat(4, 1fr); } .lc-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px){ .ub-grid { grid-template-columns: repeat(5, 1fr); } .lc-grid { grid-template-columns: repeat(4, 1fr); } .procSteps { grid-template-columns: repeat(4, 1fr); } .procSteps:before { content: ''; position: absolute; top: 2rem; left: 12.5%; right: 12.5%; height: 2px; background-color: rgb(var(--gray-color-30)); z-index: 0; } .procSteps.cols-5 { grid-template-columns: repeat(5, 1fr); } .procSteps.cols-5:before { left: 10%; right: 10%; } .procStep { position: relative; z-index: 1; } } .sceneList { gap: 2rem 4rem; } .sceneList .sceneImg { border-radius: var(--radius-xm); overflow: hidden; } .sceneList span { font-size: 1.6rem; margin-top: 1rem; color: #555; } /** cooperation/index.jsp: 산학협력 생태계 활성화 **/ .leadbox { border-left: 4px solid rgb(var(--basic-color-50)); background-color: rgb(var(--gray-color-10)); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 1.8rem 2.2rem; } .leadbox p { font-size: clamp(1.5rem, 1.7vw, 1.7rem); color: #444; line-height: 1.7; } .leadbox p + p.note { margin-top: 0.8rem; font-size: 0.95em; color: #888; } /* leadbox tone: same per-project color identity as .tone-* elsewhere (산학협력=basic, AI=purple, 미래키움=mint, 평생교육=green, 고숙련=orange) */ .leadbox.tone-basic { border-left-color: rgb(var(--basic-color-50)); } .leadbox.tone-purple { border-left-color: rgb(var(--purple-color-50)); } .leadbox.tone-mint { border-left-color: rgb(var(--mint-color-60)); } .leadbox.tone-green { border-left-color: rgb(var(--green-color-60)); } .leadbox.tone-orange { border-left-color: rgb(var(--orange-color-60)); } .leadbox .initialBtn { font-family: var(--special-font); gap: 0.8rem; margin-top: 1rem; } .leadbox .initialBtn span { font-size: 1.5rem; } .leadbox .initialBtn * { line-height: 1.2; color: #fff; } .leadbox.tone-green .initialBtn { border-color: rgb(var(--green-color-70)); background-color: rgb(var(--green-color-60));} .leadbox.tone-mint .initialBtn { border-color: rgb(var(--mint-color-70)); background-color: rgb(var(--mint-color-60));} .awards { margin-top: 1.6rem; padding: 1.4rem 1.8rem; background-color: rgb(var(--yellow-color-10)); border-radius: var(--radius-m); font-size: 1.4rem; line-height: 1.6; } .awards b { font-family: var(--special-font); color: rgb(var(--yellow-color-80)); margin-right: 0.8rem; } .awards em { font-style: normal; font-weight: 700; color: rgb(var(--basic-color-60)); } .roadmap-list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.6rem; margin-top: 2rem; } .roadmap-card { position: relative; min-width: 0; border: 1px solid rgba(var(--gray-color-20),0.8); border-radius: var(--radius-m); padding: 2rem 2.2rem; } .roadmap-card i { position: absolute; top: 1.5rem; right: 1.5rem; } .roadmap-card b { display: block; font-family: var(--special-font); font-size: clamp(1.7rem, 1.9vw, 1.9rem); margin: 0.8rem 0 0.2rem; } .roadmap-card i + b { margin-top: 0; } .roadmap-card small { display: block; color: #888; font-size: 1.3rem; margin-bottom: 1rem; } @media (min-width: 960px){ .roadmap-list { grid-template-columns: repeat(3, 1fr); } } .ctaband { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; background-color: rgb(var(--basic-color-70)); color: #fff; border-radius: var(--radius-m); padding: clamp(2rem, 3vw, 3rem); margin-top: clamp(3rem, 4vw, 4rem); } .ctaband b { display: block; font-family: var(--special-font); font-size: clamp(1.8rem, 2vw, 2.1rem); margin-bottom: 0.5rem; } .ctaband span { display: block; font-size: 1.4rem; opacity: 0.85; } .ctaband .btn { display: inline-block; background-color: #fff; color: rgb(var(--basic-color-70)); font-family: var(--special-font); font-weight: 600; padding: 1.2rem 2.2rem; border-radius: 99px; font-size: 1.5rem; white-space: nowrap; } @media (min-width: 768px){ .ctaband { flex-direction: row; align-items: center; justify-content: space-between; } } /* flowChain: a plain arrow-chain breadcrumb (모집·신청 → 교육 참여 → 수료) — standalone in a banner for a shared step, or nested inside a cLinkage-card for a branch-specific path */ .flowChain { display: flex; flex-wrap: wrap; align-items: center; font-family: var(--special-font); } .flowChain span { display: inline-block; font-weight: 600; font-size: 1.5rem; color: #333; } .flowChain span:not(:last-child):after { content: '→'; margin: 0 0.8rem; color: rgb(var(--basic-color-50)); font-weight: 400; } .flowChain-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; background-color: rgb(var(--gray-color-10)); border-radius: var(--radius-m); padding: 1.6rem 2.2rem; margin-bottom: 1.6rem; } .flowChain-banner .flowChain-label { flex-shrink: 0; font-family: var(--special-font); font-weight: 700; font-size: 1.4rem; color: rgb(var(--basic-color-60)); background-color: #fff; padding: 0.5rem 1.4rem; border-radius: 99px; } .cLinkage-card .flowChain { margin-bottom: 1rem; } .cLinkage-card .flowChain span { font-size: 1.5rem; }