한번 감싸줘야 header가 스크롤시 숨지 않는다) */ /* 태그 바로 아래

감싸기 */ top: 32px !important; } .header { background-color: #f8f9fa; padding: 20px; height: 90px; display: flex; align-items: center; } .header > .inner { display: flex; align-items: center; column-gap: 188px; padding: 0; max-width: 1440px; } .logo { display: flex; align-items: center; max-width: 300px; width: 100%; height: 38px; position: relative; z-index: 100; margin-left: 20px; background-image: url("./images/logo-new.png"); background-repeat: no-repeat; background-position: left center; background-size: contain; } .logo-footer { max-width: 290px !important; height: 32px !important; background-image: url("./images/logo-footer.png") !important; } .logo a { width: 100%; height: 100%; } @media all and (max-width: 1480px) { .logo {margin-left: 0;} } /* ============================================================ */ /* nav : (구)헤더용으로 추후 전부 삭제 요망 */ .nav { width: 100%; } .nav > ul { display: flex; justify-content: space-between; } .nav a { margin-left: 20px; text-decoration: none; color: #000; font-family: SCDream500; } .nav a:focus { outline: 2px solid #0061d0; } /* ============================================================ */ /* footer */ .footer { position: relative !important; width: 100%; overflow: hidden; z-index: 0 !important; bottom: 0; } .foot_cont { background-color: #222 !important; } .cont_inner { position: relative; width: 100%; max-width: 1440px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; } /* footer - selectBox */ .form-select.sm.footer-select { height: 35px; background-color: #444; background-image: url("./images/icon/arrow-down.png"); color: #fff; border-radius: 0; border: 0; font-family: ScDream400; font-size: 14px; min-width: fit-content; max-width: 240px; } .cont_inner .flex-row { border-bottom: 1px solid #393939; flex-wrap: wrap; column-gap: 46px; } .cont_inner .menu_list { display: flex; align-items: center; flex-wrap: wrap; padding: 15px 0 21px 0; height: 70px; overflow: hidden; } .cont_inner .menu_list:first-child { width: fit-content; } .cont_inner .menu_list:last-child { flex: 1; } .cont_inner .menu_list li a { transition: all 0.25s ease; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-family: SCDream400; font-size: 15px; line-height: 150%; letter-spacing: -0.5px; } .cont_inner .menu_list li a:hover, .cont_inner .menu_list li a:active, .cont_inner .menu_list li a:focus, .cont_inner .menu_list li a.active, .cont_inner .menu_list li a.active:hover { color: #00b8be !important; } .cont_inner .det_info { padding: 37px 0 70px 0; display: flex; align-items: center; column-gap: 35px; } .cont_inner .det_info .addr_info dd { color: #fff; font-family: Pretendard; font-size: 14px; font-weight: 400; /* line-height: 100%; */ letter-spacing: -0.5px; line-height: 23px; } /* top button */ .footer .page_top { display: block; position: fixed; bottom: 234px; right: 0; margin: 0; border: 0; box-sizing: border-box; border-radius: none; cursor: pointer; width: 50px; height: 50px; background: #222; } .footer .page_top span { display: block; font-weight: 700; font-family: Pretendard; letter-spacing: normal; font-size: 12px; color: #fff; background-size: 13px 13px; } @media all and (max-width: 840px) { .cont_inner .flex-row { flex-direction: column; align-items: flex-start; border-bottom: 0; } .cont_inner .menu_list { width: 100% !important; align-items: flex-start !important; } .cont_inner .menu_list:first-child { border-bottom: 1px solid #393939; padding: 21px 0; } .cont_inner .menu_list:last-child { padding: 21px 0 0 0; } .cont_inner .menu_list:last-child > .form-select.ml-auto { margin-left: 0; } .cont_inner .det_info { padding: 21px 20px 40px 20px; flex-direction: column; align-items: flex-start; row-gap: 8px; } } @media all and (max-width: 600px) { .cont_inner .det_info { padding: 22px 20px 38px 20px !important; } .cont_inner .menu_list:last-child.gap-20 { row-gap: 8px; } .cont_inner .det_info .addr_info dd { font-size: 12px; } } /* ============================================================ */ /* notice */ .notice { width: 100%; height: 60px; background-color: #00829B; display: flex; align-items: center; } .notice .title { font-family: ScDream600; font-size: 18px; color: #fff; line-height: 28px; } .notice .content { position: relative; width: 100%; height: 30px; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; background: transparent; display: flex; align-items: center; } .slick-notice { width: calc(100% - 100px); height: 30px; margin-left: 90px; } .slick-notice .slick-list { height: 100%; } .slick-notice .slick-slide { padding-left: 70px; height: 30px !important; padding-top: 4px; } .notice-cont-wrap { /* 개발환경 */ height: 60px; top: 0; } .notice-cont { width: 100%; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; } .notice-cont .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-family: SCDream500; font-size: 15px; color: #fff; } .notice-cont .tit::before { content: "ㆍ"; margin-right: 1px; } .notice-cont .date { min-width: 83px; font-family: SCDream500; font-size: 14px; color: #fff; opacity: 1; } @media all and (max-width: 800px) { .slick-notice .slick-slide { padding-left: 20px !important; } } @media all and (max-width: 600px) { .slick-notice { margin-left: 66px; width: calc(100% - 66px); } .slick-notice .slick-slide { padding-left: 0 !important; } .notice .gap-22 { gap: 6px; } } /* ============================================================ */ /* banner */ .banner { width: 100%; height: 85px; background-color: #fff; display: flex; align-items: center; } .banner .content { position: relative; width: 100%; height: 85px; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; background: transparent; display: flex; align-items: center; } .slick-banner { width: calc(100% - 144px); height: 45px; margin-left: 164px; } .slick-banner .slick-list { height: 100%; } .slick-banner .slick-slide { height: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .banner-cont-wrap { /* 개발환경 */ height: 85px; top: 0; } .banner-cont { cursor: pointer; } /* ============================================================ */ /* Main page */ /* ============================================================ */ #container { height: 100%; background: #f4fbff; } /* main */ .main-wrap { position: relative; width: 100%; padding-bottom: 400px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* 개발환경 */ background: #f4fbff; } .mask { position: fixed; top: 122px; z-index: 99996; width: 100%; /* height: 100%; */ height: 396px; background: #676767; opacity: 0.2; /* display: none; */ } .bg-wrap, .bg-wrap-main { width: 100%; height: 500px; margin-top: -1px; } .bg-wrap > img, .bg-wrap-main > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 3s ease-in-out; } .bg-wrap > img:hover { transform: scale(1.2); transition: transform 4s ease-in-out; } .bg-wrap-main > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 3s ease-in-out; } .bg-cont-wrap { position: absolute; top: 114px; width: 100%; max-width: 1400px; text-align: center; display: flex; flex-direction: column; } /* 서브 헤더 이미지 */ .sub-cont-wrap { /* 1) 부모 컨테이너는 위치를 굳이 absolute로 하지 않아도 된다면 relative나 static으로 바꿉니다. */ position: absolute; /* top: -12em; */ /* 꼭 필요한 경우에만 사용 */ width: 100%; /* 플렉스 컨테이너 설정 */ display: flex; flex-direction: column; /* 내용 가운데 정렬을 원하면: */ align-items: flex-start; } .sub-cont-wrap > .mainTitle { /* 2) absolute와 고정 폭, 고정 위치 제거 */ position: static; width: auto; height: auto; margin-top: -2.2em; /* 글자 속성 */ font-family: 'S-Core Dream', sans-serif; font-style: normal; font-weight: 600; font-size: 5.5rem; line-height: 1.2; /* 1.2~1.3 정도로 권장 */ letter-spacing: -0.03em; color: #FFFFFF; /* 텍스트 줄바꿈을 위해 */ white-space: normal; word-break: break-word; overflow-wrap: break-word; /* 반응형으로 폭을 제한하고 싶다면 */ max-width: 90%; /* or 100%, 적절히 조정 */ text-align: left; /* 원하시는 정렬 */ } .sub-cont-wrap > .subTitle { position: absolute; width: auto; height: auto; margin-top: -10em; /* 글자 속성 */ font-family: 'Gmarket Sans', sans-serif; font-style: normal; font-weight: 500; font-size: 1.4rem; line-height: 1.4; letter-spacing: 1em; color: rgba(255, 255, 255, 0.3); /* 줄바꿈 설정 */ white-space: normal; word-break: break-word; overflow-wrap: break-word; /* 폭 제한 */ max-width: 90%; text-align: left; /* 원하시는 정렬 */ } /* 기본 스타일 */ .sub-cont-wrap > .mainTitle, .sub-cont-wrap > .subTitle { margin-left: 19%; } /* 큰 화면 (1400px 이상) */ @media (min-width: 1400px) { .sub-cont-wrap > .mainTitle, .sub-cont-wrap > .subTitle { margin-left: 19%; } } /* 중간 큰 화면 (1200px ~ 1399px) */ @media (max-width: 1399px) and (min-width: 992px) { .sub-cont-wrap > .mainTitle, .sub-cont-wrap > .subTitle { margin-left: 15%; } } /* 중간 작은 화면 (991px ~ 768px) */ @media (max-width: 991px) and (min-width: 768px) { .sub-cont-wrap > .mainTitle, .sub-cont-wrap > .subTitle { margin-left: 10%; } } /* 작은 화면 (767px 이하) */ @media (max-width: 767px) { .sub-cont-wrap > .mainTitle, .sub-cont-wrap > .subTitle { margin-left: 5%; } } /* 3) 작은 화면 대응 */ @media (max-width: 768px) { .sub-cont-wrap > .mainTitle { font-size: 4rem; /* 기존 5.5rem에서 축소 */ line-height: 0em; } .sub-cont-wrap > .subTitle { font-size: 1.5rem; letter-spacing: 0.5em; } } /* 메인 - 타이틀 */ .main-wrap .title { font-family: SCDream800; font-size: 50px; line-height: 70px; letter-spacing: -0.95px; color: #fff; margin: 0 auto 22px auto; } .main-wrap .title .color1 { color: #00e3eb; } .main-wrap .title .color2 { color: #33b1ff; } .main-wrap .title .light { font-family: SCDream400; } @media all and (max-width: 910px) { .main-wrap .title { width: 80%; } .bg-cont-wrap { top: 70px; } } @media all and (max-width: 670px) { .main-wrap .title { width: 100%; } } @media all and (max-width: 545px) { .main-wrap .title { width: 80%; font-size: 30px; line-height: 38px; } .bg-cont-wrap { top: 80px; } } @media all and (max-width: 420px) { .main-wrap .title { width: 100%; } } /* 메인 - 검색폼 */ .bg-search-wrap { background: linear-gradient(to right, #00e3eb 0%, #0095ff 100%); width: 100%; max-width: 900px; height: 70px; margin: 0 auto; border-radius: 90px; position: relative; display: flex; align-items: center; justify-content: center; } .bg-search-inner { background: #fff; width: calc(100% - 12px); max-width: 888px; height: 60px; border-radius: 90px; position: absolute; display: flex; align-items: center; padding-right: 6px; } .bg-search-inner > .form-select { height: 60px; background-color: #fff; background-image: url("./images/icon/arrow-down-search.png"); color: #0a1f63; border-radius: 90px 0 0 90px; border: 0; font-family: ScDream500; font-size: 16.5px; letter-spacing: -0.3px; text-align: center !important; width: 100%; max-width: 232px; padding: 0; } .bg-search-inner > .form-control { font-family: ScDream500; font-size: 16.5px; letter-spacing: -0.3px; color: #444; border-radius: 0; border: 0; flex: 1; height: 60px; } .form-control::placeholder { color: #717171 !important; } .bg-search-inner .btn-search { background: #0b9fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background-image: url("./images/icon/search-icon.png"); background-repeat: no-repeat; background-position: center; background-size: 24px 26px; } @media all and (max-width: 670px) { .bg-search-inner > .form-select { max-width: 160px; } } @media all and (max-width: 500px) { /* 모바일 */ .bg-search-wrap { height: 50px; } .bg-search-inner, .bg-search-inner > .form-select, .bg-search-inner > .form-control { height: 40px; font-size: 13px; transition: none; } .bg-search-inner { padding-right: 4px; } .bg-search-inner > .form-select { padding: 2px 0 0 16px; text-align: left !important; max-width: 100px !important; background-size: 13px 7px; background-position: calc(100% - 6px) center; } .bg-search-inner .btn-search { width: 34px; height: 34px; background-size: 15px 16px; right: 0 !important; } } /* 메인 - 검색폼(sub) small */ .bg-search-wrap.sub { max-width: 630px !important; height: 54px !important; } .bg-search-wrap.sub .bg-search-inner { width: calc(100% - 6px); max-width: 628px; height: 48px; position: absolute; } .bg-search-wrap.sub .bg-search-inner > .form-select { max-width: 160px; padding-right: 40px; padding-left: 30px; text-align: left !important; } .bg-search-wrap.sub .bg-search-inner > .form-select, .bg-search-wrap.sub .bg-search-inner > .form-control { height: 48px; font-size: 15px; margin-left:20px; } .bg-search-wrap.sub .bg-search-inner > .form-control { font-family: ScDream400; } .bg-search-wrap.sub .bg-search-inner .btn-search { width: 42px; height: 42px; position: relative; right: -2px; top: 0px; } .bg-search-wrap.sub .bg-search-inner .btn-search > img { width: 20px; height: 20px; } /* 메인 - 태그 영역 */ .tags { margin-top: 25px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; column-gap: 30px; } .tag { font-family: SCDream600; font-size: 15px; color: #fff; opacity: 1; } .tag::before { content: "#"; margin-right: 8px; } /* 메인 - 중앙 컨텐츠 탭영역 */ .mid-cont-wrap { width: 100%; max-width: 1440px; padding: 0 20px; height: 300px; position: absolute; top: 431px; } .top-tabs { width: 100%; height: 68px; background: linear-gradient(to right, #003975 0%, #0061d0 100%); border-radius: 20px 20px 0 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 80px; } .top-tabs .tab { background: #00388b; width: 100%; max-width: 285px; min-width: 160px; height: 44px; text-align: center; display: flex; align-items: center; justify-content: center; color: #fff; font-family: SCDream800; font-size: 19px; border-radius: 90px; position: relative; } .top-tabs .flex-row.fir { flex: 1; justify-content: space-between; } .top-tabs .flex-row.sec { } .top-tabs .tab:first-child { min-width: 200px; } .top-tabs .tab:focus, .top-tabs .tab.active { background: white; color:#00388b ; } .top-tabs .tab:focus::before, .top-tabs .tab.active::before { content: ""; background-image: url("./images/icon/check_blue.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 24px; height: 24px; position: absolute; left: 16px; margin-top: 4px; } .top-tabs .form-select { display: none; } @media all and (max-width: 730px) { .top-tabs .slash, .top-tabs .tab:focus::before, .top-tabs .tab.active::before { display: none; } .top-tabs { padding: 14px 20px 10px 20px !important; } .top-tabs .tab, .top-tabs .tab:first-child { max-width: 100% !important; min-width: 30% !important; } } @media all and (max-width: 540px) { .top-tabs .tab { font-size: 16px; } } .slash { background-image: url("./images/icon/slash.png"); background-repeat: no-repeat; background-position: center; background-size: contain; min-width: 20px; width: 20px; height: 20px; } .dash { border: 1px dashed #fff; max-width: 140px; min-width: 140px; width: 100%; opacity: 0.8; } .top-tabs .number { font-family: SCDream500; font-size: 18px; color: #fff; } .top-tabs .number > strong { font-family: GmarketSansB; font-size: 31px; color: #01e3eb; letter-spacing: -0.8px; margin-right: 10px; } /* 메인 - 중앙 컨텐츠 아이콘 슬라이드 */ .icon-slide { width: 100%; height: 230px; background: linear-gradient(to right, #0062a8 0%, #042876 100%); display: flex; align-items: center; border-radius: 0 0 20px 20px; padding : 0 40px; } .icon-slide .content { position: relative; width: 100%; height: fit-content; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; background: transparent; display: flex; align-items: center; } .slick-icon-slide { width: 100%; height: 162px; margin: 0 auto; padding: 25px 0; } .slick-icon-slide .slick-list { height: 100%; } .slick-icon-slide .slick-slide { height: 130px; } .each-5 { display: flex !important; flex-wrap: nowrap; } .icon-cont { width: 100%; display: flex !important; flex-direction: column; align-items: center; gap: 6px; /* pointer-events: none; */ cursor: pointer; } .icon-con { position: relative; z-index: 10; } .hidden-list { height: auto; max-height: 154px; overflow-y: auto; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); background-color: #FFF; color: #464A51; padding: 10px 40px; position: absolute; top: -6%; transform: translate(0%, 0%); border-radius: 14px; list-style: disc; border: 1px solid #ccc; overflow-y: auto; box-sizing: border-box; display: none; z-index: 9999; } .hidden-list::-webkit-scrollbar { width: 8px; } .hidden-list::-webkit-scrollbar-track { margin: 8px; background: #f1f1f1; border-radius: 14px; } .hidden-list::-webkit-scrollbar-thumb { background: #00C2CB; border-radius: 14px; } .hidden-list::-webkit-scrollbar-thumb:hover { background: #009FA5; } .hidden-list li { list-style: disc; padding: 8px 0; cursor: pointer; } .hidden-list li:hover { color: #009FA5; } .hidden-list li::marker { font-size: 0.65em; } .icon-list { overflow: visible !important; position: relative; display: block; margin: 0; padding: 0; } .hidden { overflow: hidden !important; height: 100% !important; } .icon-con { /*overflow: visible !important;*/ } .icon-cont { position: relative; border:none; background:none; } @media all and (max-width: 800px) { .hidden-list { max-height: 150px; transform: translate(0%, 0%); } } .icon-cont > img { height: 70px; } .icon-cont .tit { padding-top: 10px; font-family: SCDream400; font-size: 16px; letter-spacing: -0.3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-cont .num { font-family: GmarketSansB; font-size: 31px; color: #01e3eb; letter-spacing: -0.8px; } /* 메인 - 하단 컨텐츠 */ .bottom-cont-wrap { width: 100%; max-width: 1440px; padding: 0 20px; height: 400px; position: relative; top: 340px; } .heading { display: flex; align-items: center; justify-content: flex-start; gap: 24px; position: relative; } .heading .title { font-family: SCDream500; font-size: 30px; letter-spacing: -1.4px; line-height: 150%; color: #111; margin: 0; position: relative; z-index: 1; width: fit-content; } .heading .title > strong { font-family: SCDream600; } .heading .sub { font-family: Pretendard; font-weight: 500; font-size: 16px; letter-spacing: -0.3px; color: #1e286d; } .heading > img { position: absolute; left: -110px; top: -50px; z-index: 0; } @media all and (max-width: 1080px) { .bottom-cont-wrap { top: 350px; } .heading > img { left: -30px; } } @media all and (max-width: 820px) { .bottom-cont-wrap { top: 400px; } .heading .sub { display: none; } } @media all and (max-width: 600px) { .bottom-cont-wrap { top: 580px; } } @media all and (max-width: 545px) { .mid-cont-wrap { top: 372px; } .bottom-cont-wrap { top: 540px; } } /* 메인 - 하단 컨텐츠 카드 슬라이드(style1) */ .card-slide { width: 100%; height: 300px; display: flex; align-items: flex-end; margin-bottom: 60px; } .card-slide .content { position: relative; width: 100%; height: 345px; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; background: transparent; display: flex; align-items: flex-end; } .card-slide.poisn { height: 275px; margin-bottom: 0; } .card-slide.poisn .content { height: 320px; } .slick-card-slide { width: 100%; height: 290px; margin: 0 !important; padding: 0; } .slick-card-slide .slick-list { height: 100%; margin: 0 -15px; padding: 10px 0 0 0; } .slick-card-slide .slick-slide { /* height: 130px; */ height: 220px; margin: 0 15px; } .poisn .slick-card-slide { height: 265px; } .poisn .slick-card-slide .slick-list { height: 265px; } .poisn .slick-card-slide .slick-slide { height: 170px; } .slick-dots li.slick-active button:focus::before, .btn-more:focus, .btn-mor:focus-visible{ outline: 2px solid rgba(36, 107, 235, 0.8); } .slick-climate .slick-dots li.slick-active button:focus, .slick-news .slick-dots li.slick-active button:focus{ outline: 2px solid rgba(36, 107, 235, 0.8) !important; border-radius: 50%; } /* 카드 슬라이드(style1) - end */ /* 메인 - 하단 컨텐츠 카드 슬라이드(style2) */ /* .card-slide { width: 100%; height: 300px; display: flex; align-items: center; margin-bottom: 60px; } .card-slide .content { position: relative; width: 100%; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; background: transparent; display: flex; align-items: center; } .slick-card-slide { width: calc(100% - 80px); height: 260px; margin: 0 auto; padding: 0 30px; } .slick-card-slide .slick-list { height: 100%; margin: 0 -15px; padding: 10px 0 0 0; } .slick-card-slide .slick-slide { height: 130px; margin: 0 15px; } */ /* 카드 슬라이드(style2) - end */ .card-cont { width: 100%; height: 220px; display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; background: #fff; border-radius: 15px; box-shadow: rgba(228, 229, 239, 0.6) 0px 10px 14px 0px; padding: 30px 30px 25px; } .card-cont .tit { font-family: SCDream600; font-size: 19px; letter-spacing: -0.3px; color: #006cb2; margin-bottom: 6px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .card-cont .text, .card-cont .source { font-family: Pretendard; font-weight: 400; font-size: 15px; line-height: 170%; letter-spacing: -1px; color: #8b8d90; word-break: break-all; } .card-cont .source { font-weight: 500; color: #00829B; margin-top: 10px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .card-cont .text { min-height: 77px; max-height: 77px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .poisn .card-cont { height: 170px; } /* 팝업 스타일 */ .popup-window { position: absolute; top: 50%; left: 50%; width: 400px; height: 440px; padding: 0; background-color: white; border: 1px solid #ddd; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; display: flex; flex-direction: column; justify-content: space-between; margin-top: -200px; /* 높이의 절반 */ margin-left: -200px; /* 너비의 절반 */ } .popup-content { padding: 20px; overflow-y: auto; flex-grow: 1; cursor: move; } .popup-footer { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 10px; } .close-btn { padding: 5px 10px; background-color: #f0f0f0; border: none; cursor: pointer; } /* ============================================================ */ /* location */ .location, .banner_location { width: 100%; background: #031c5c; color: #fff; } .banner_location{ background: rgb(3, 28, 92, 0.7); position: absolute; bottom: 0; } .location .inner, .banner_location .inner { display: flex; align-items: center; max-width: 1440px; } .location .home, .banner_location .home { width: 55px; min-width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(225, 225, 225, 0.3); border-top: 0; border-bottom: 0; cursor: pointer; } /* location - selectBox */ .location-select { display: inline-block; width: 260px; height: 55px; border-right: 1px solid #e1e1e14d; text-align: left; position: relative; } .location-select .selected { display: flex; align-items: center; justify-content: space-between; padding-right: 16px; width: 100%; height: 100%; } .location-select .selected .selected-value { width: 100%; /* min-width: 90px; */ height: 100%; padding: 17px 16px 17px 20px; font-family: SCDream400; font-size: 14px; letter-spacing: 0px; color: #fff; } .location-select .selected .arrow { width: 24px; height: 24px; background: url("./images/icon/arrow-down.png") no-repeat; background-size: 18px 18px; background-position: center; cursor: pointer; } .location-select ul { width: 100%; position: absolute; z-index: 1; top: 55px; background: rgba(0, 19, 67, 0.8); border-top: none; margin: 0; cursor: pointer; display: none; } .location-select.active ul { display: initial; } .location-select ul li { height: 55px; display: flex; align-items: center; font-family: SCDream600; font-size: 14px; letter-spacing: 0px; color: #fff; } .location-select ul li a { width: 100%; height: 100%; padding: 16px 20px; } .location-select ul li a, .location-select .selected .selected-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .location-select ul li:hover { background: #001343; transition: all 0.3s ease-in-out; } .location-select ul li a.option.active { background: linear-gradient(to right, #00c2ff 0%, #006ff1 100%); } @media all and (max-width: 600px) { .location-select ul { top: 55px; right: 0; } } /* banner_location */ .health-banner { width: 100%; height: 300px; background-image: url("../css/images/banner/healthBanner.png"); background-position: center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color: white; position: relative; } .poisoning-banner { width: 100%; height: 300px; background-image: url('../css/images/banner/poisoning.png'); background-position: center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color: white; position: relative; } .weather-banner { width: 100%; height: 300px; background-image: url('../css/images/banner/weather.png'); background-position: center; background-size: cover; display: flex; align-items: center; justify-content: flex-start; color: white; position: relative; } .banner-content { max-width: 1440px; padding: 0 20px; margin: 0 auto; width: 100%; position: relative; z-index: 2; top: -10px; } .banner-content h1 { font-size: 56px; font-family: "SCDream600"; margin-bottom: 10px; } .banner-content span { font-size: 14px; font-family: "GmarketSansM"; letter-spacing: .9rem; color: rgba(255, 255, 255, 0.9); } .banner-box { position: relative; } /* ============================================================ */ /* Sub page */ /* ============================================================ */ .sub-wrap { padding: 64px 0; background: #fff; height: 100%; } .sub-wrap.poisn { padding-bottom: 0; } .sub-wrap h1 { font-family: SCDream500; font-size: 42px; letter-spacing: -0.5px; color: #000; position: relative; width: fit-content; margin: 0 auto; margin-bottom: 48px; display: block; } .sub-wrap h1::after { content: ""; width: 40px !important; height: 2px !important; background: #000; position: absolute; bottom: -8px; left: calc(50% - 20px); } /* 서브(메인) bg타이틀 추가 */ .sub-wrap h1.sub-main-title { position: relative; font-family: SCDream200; font-size: 42px; line-height: 140%; letter-spacing: -1px; color: #111; text-align: center; margin: 0 auto 30px auto; } .sub-wrap h1.sub-main-title > strong { font-family: SCDream600; } .sub-wrap h1.sub-main-title > .color { font-family: SCDream700; color: #00829B; } .sub-wrap h1.sub-main-title::before, .sub-wrap h1.sub-main-title::after { content: ""; width: 70px !important; height: 53px !important; /* border: 1px solid red; */ background: url("./images/sub-main-title-bg-left.png") no-repeat; background-position: center; background-size: contain; position: absolute; top: -20px; left: -60px; } .sub-wrap h1.sub-main-title::after { content: ""; background: url("./images/sub-main-title-bg-right.png") no-repeat; left: calc(100% - 10px); } /* tab 안쪽영역 대타이들 */ .sub-wrap h2{ font-family: SCDream600; font-size: 28px; line-height: 120%; letter-spacing: -0.5px; color: #333; position: relative; width: fit-content; margin-bottom: 30px; display: block; } .sub-wrap h2::after { /*content: "";*/ width: 27px !important; height: 1px !important; background: #000; position: absolute; top: -10px; left: 0; } @media all and (max-width: 750px) { .sub-wrap h1.sub-main-title { margin: 60px auto 80px auto; } .sub-wrap h1.sub-main-title::before { top: -58px; left: calc(50% - 35px); } .sub-wrap h1.sub-main-title::after { top: calc(100% + 8px); left: calc(50% - 35px); } } @media all and (max-width: 500px) { .sub-wrap h1.sub-main-title { font-size: 36px; } .sub-wrap h1{font-size: 33px;} } .sub-wrap .inner { max-width: 1440px; padding: 0 20px; box-sizing: border-box; } /* 서브 - 컨텐츠 영역 */ .sub-cont-body { width: 100%; height: 100%; margin-top: 40px; position: relative; z-index: 1; } /* 컨텐츠 영역 내부 영역 */ .sub-cont-inner-wrap { min-height: 480px; } /* indicator */ .indicator { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 24px; row-gap: 10px; margin-bottom: 25px; } .indicator.center{justify-content: center;} .indicator-with-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 25px; } /* 게시글 갯수 */ .count { font-family: Pretendard; font-size: 21px; font-weight: 800; line-height: 150%; letter-spacing: -0.8px; color: #1d1d1d; } .count > strong { color: #00829B; margin-left: 8px; margin-right: 2px; } .count > .page { font-weight: 400; } .count > .page > strong { font-weight: 900; } /* 정렬 */ .sort { display: flex; align-items: center; gap: 16px; } .sort, .sort label { font-family: Pretendard; font-size: 17px; font-weight: 900; line-height: 150%; letter-spacing: -0.3px; color: #1d1d1d; } .sort button, .sort a { font-weight: 400; color: #555555; } .sort button.active, .sort a.active { font-weight: 400; color: #1d1d1d; text-decoration: underline; text-underline-offset: 3px; } /* 검색결과 */ .search-result { font-family: SCDream500; font-size: 30px; line-height: 150%; letter-spacing: -0.7px; color: #1d1d1d; } .search-result > strong { font-family: SCDream700; color: #007ff3; } /* 게시글 데이터 뷰형식 */ .view-style-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .view-style-btn > button, .view-style-btn > a { width: 30px; height: 30px; } .card-btn { background: url("./images/icon/card-btn-stroke.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } .card-btn.fill { background: url("./images/icon/card-btn-fill.png"); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; } .list-btn { background: url("./images/icon/list-btn-stroke.png"); background-repeat: no-repeat; background-position: center; background-size: 32px 32px; } .list-btn.fill { background: url("./images/icon/list-btn-fill.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* 테이블 타이틀 */ .table-heading { display: flex; align-items: center; flex-wrap: wrap; column-gap: 22px; row-gap: 6px; } .table-heading .title { font-family: SCDream600; font-size: 26px; line-height: 140%; letter-spacing: -1px; color: #0f3362; width: fit-content; } .table-heading .sub { font-family: Pretendard; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: -0.3px; color: #0f3362; } /* 테이블 select 검색 */ .select-search { background: #f0f5fb; border-radius: 10px; width: 100%; padding: 20px 40px; display: flex; align-items: center; column-gap: 30px; } .select-search .label { font-family: Pretendard; font-size: 17px; font-weight: 900; line-height: 150%; letter-spacing: -0.3px; color: #1d1d1d; position: relative; margin-right: 20px; } .select-search .label::after { content: ""; width: 1px; height: 16px; background: #1d1d1d; position: absolute; right: -20px; margin-top: 4px; } .select-wrap { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .select-wrap .form-select { flex: 1; max-width: 320px; } /* append */ .append { display: none; } a.card, a card, a.list, a list { cursor:pointer; } /* board-card */ .board-card { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media all and (max-width: 1130px) { .board-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media all and (max-width: 860px) { .board-card { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .board-card .card { border: 1px solid #c6c6c6; border-radius: 12px; padding: 30px 35px 35px 30px; display: flex; flex-direction: column; gap: 16px; } .board-card .card .tag, .board-list .list .tag { background: #eff9fa; border-radius: 4px; padding: 5px 9px 4px 9px; font-family: Pretendard; font-size: 15px; font-weight: 500; line-height: 100%; letter-spacing: -0.3px; color: #037E8A; opacity: 1 !important; width: fit-content; margin-bottom: 3px; } .board-card .card .tag::before, .board-list .list .tag::before { display: none; } .board-card .card .title, .board-list .list .title { width: 100%; font-family: Pretendard; font-size: 21px; font-weight: 800; line-height: 150%; letter-spacing: -0.3px; color: #1d1d1d; display: flex; align-items: center; } .board-card .card .title > span, .board-list .list .title > span { max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-card .card .title::after, .board-list .list .title::after { content: ""; background-image: url("./images/icon/arrow-left-black.png"); background-repeat: no-repeat; background-position: center; background-size: 8px 12px; width: 20px; height: 20px; rotate: 180deg; margin-top: 2px; margin-left: 4px; filter: brightness(0) saturate(100%); } .board-card .card .title:hover::after, .board-card .card .title:active::after, .board-card .card .title:focus::after, .board-list .list .title:hover::after, .board-list .list .title:active::after, .board-list .list .title:focus::after { filter: brightness(0) saturate(100%) invert(71%) sepia(8%) saturate(5%) hue-rotate(331deg) brightness(91%) contrast(96%); animation: move-right 1.2s ease-in-out infinite; } .board-card .card .title._blank::after, .board-list .list .title._blank::after { content: ""; background-image: url("./images/icon/_blank.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 20px; height: 20px; rotate: 0deg; margin-top: 2px; margin-left: 8px; filter: none; } .board-card .card .title._blank:hover::after, .board-card .card .title._blank:active::after, .board-card .card .title._blank:focus::after, .board-list .list .title._blank:hover::after, .board-list .list .title._blank:active::after, .board-list .list .title._blank:focus::after { filter: none; animation: none; } @keyframes move-right { 0% { margin-left: 4px; } 50% { margin-left: 10px; } 100% { margin-left: 4px; } } .board-card .card .text { font-family: Pretendard; font-size: 17px; font-weight: 400; line-height: 150%; letter-spacing: -0.3px; color: #555555; word-break: break-all; max-height: 102px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .board-card .card:hover, .board-list .list:hover { border: 1px solid #00aec6; outline: 2px solid #00aec6; } .board-card .card:focus, .board-list .list:focus { outline: 3px solid #00aec6; } /* board-list */ .board-list { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px; } .board-list .list { border: 1px solid #c6c6c6; border-radius: 12px; padding: 32px 40px; display: flex; flex-direction: column; gap: 12px; } .board-list .list .text { font-family: Pretendard; font-size: 17px; font-weight: 500; line-height: 150%; letter-spacing: -0.3px; color: #555555; word-break: keep-all; max-height: 82px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .board-list .list .text > span { display: block; } .board-list .list strong, .gallery-list .list strong { color: #0175E4; text-decoration: underline; text-underline-offset: 3px; } /* 통합검색 스타일 board-list */ .unitySearch-wrap{width: 100%; min-height: 480px;} .unitySearch-wrap .board-list{gap: 0;} .unitySearch-wrap .board-list .list{ border: 0; border-bottom: 1px solid #EAEAEA; border-radius: 0; } .unitySearch-wrap .board-list .list:last-child{ border-bottom: none; } .unitySearch-wrap .board-list .list:hover, .unitySearch-wrap .board-list .list:focus { outline: 0; background: #F8F8F8; } .unitySearch-wrap .board-list .no-data, .unitySearch-wrap .gallery-list .no-data{ padding: 44px 0 40px 0; margin: 0 auto; font-family: Pretendard; font-size: 17px; font-weight: 500; line-height: 150%; letter-spacing: -0.3px; color: #555555; word-break: keep-all; } .unitySearch-wrap .gallery-list .no-data{ width: 100%; text-align: center; grid-column: span 4 / span 4; border-top: 1px solid #B2C0DA; position: relative; } .unitySearch-wrap .gallery-list .no-data::after{ content: ""; width: 100%; height: 5px; background: linear-gradient(-45deg, #fff 25%, #dadada 0, #dadada 50%, #fff 0, #fff 75%, #dadada 0); -webkit-background-size: 4px 4px; background-size: 4px 4px; position: absolute; left: 0; bottom: 0; } /* 통합검색 갯수 제어 */ .unitySearch-wrap #dTabAll .board-list .list:nth-child(n+3), .unitySearch-wrap #dTabAll .gallery-list .list:nth-child(n+5){display: none;} /* gallery-list */ .gallery-list { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } @media all and (max-width: 1400px) { .gallery-list {grid-template-columns: repeat(3, minmax(0, 1fr));} .unitySearch-wrap #dTabAll .gallery-list .list:nth-child(n+4){display: none;} } @media all and (max-width: 1100px) { .gallery-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;} .unitySearch-wrap #dTabAll .gallery-list .list:nth-child(n+3){display: none;} } @media all and (max-width: 900px) { .gallery-list {grid-template-columns: repeat(3, minmax(0, 1fr));} .unitySearch-wrap #dTabAll .gallery-list .list:nth-child(3){display: block;} } @media all and (max-width: 800px) { .gallery-list {grid-template-columns: repeat(2, minmax(0, 1fr));} .unitySearch-wrap #dTabAll .gallery-list .list:nth-child(3){display: none;} } @media all and (max-width: 500px) { .gallery-list {grid-template-columns: repeat(1, minmax(0, 1fr));} .unitySearch-wrap .board-list .list{padding: 30px 20px;} } .gallery-list .list { border: 1px solid #c6c6c6; border-radius: 12px; display: flex; flex-direction: column; } .gallery-list .img-wrap{ width: 100%; height: 100%; min-height: 200px; max-height: 200px; overflow: hidden; border-radius: 12px 12px 0 0; } .gallery-list .img-wrap > img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 2s ease-in-out; } .gallery-list .img-wrap > img:hover{ transform: scale(1.2); transition: transform 1s ease-in-out; } .gallery-list .list .title { width: 100%; padding: 17px 20px 17px 20px; font-family: Pretendard; font-weight: 700; font-size: 18px; line-height: 100%; letter-spacing: -0.5px; color: #1d1d1d; display: flex; align-items: center; } .gallery-list .list .title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* pagination */ .board-foot { margin-top: 20px; margin-bottom: 60px; display: flex; justify-content: center; } .pagination { display: flex; gap: 2px !important; } .pagination a, .pagination strong { border: 1px solid transparent; border-radius: 5px; cursor: pointer; box-sizing: border-box; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: Pretendard; font-size: 17px; font-weight: 400; line-height: 150%; color: #555555; } /* strong태그 / active클래스로 제어 가능 */ .pagination strong, .pagination .active, .pagination strong:hover, .pagination .active:hover { border: 1px solid #2f445a; background: #2f445a; color: #fff; font-weight: 800; } .pagination a:hover { border: 1px solid #ddd; transition: all 0.3s ease-in-out; } .pagination a:focus, .pagination .ctrl:focus { outline: none; } .pagination a:focus-visible, .pagination .ctrl:focus-visible { outline-offset: -2px !important; outline: 2px solid rgba(36, 107, 235, 0.8); } .pagination .ctrl { display: inline-block; box-sizing: border-box; height: 40px; width: 62px; vertical-align: middle; margin-left: -1px; cursor: pointer; } .pagination .ctrl.first, .pagination .ctrl.last { width: 40px; } .pagination .ctrl.first { background: #fff url("./images/icon/pagination-first.png") no-repeat 50% 50%; background-size: 14px 14px; } .pagination .ctrl.back { background: #fff url("./images/icon/pagination-back.png") no-repeat 50% 50%; background-size: 100% 40px; position: relative; } .pagination .ctrl.next { background: #fff url("./images/icon/pagination-next.png") no-repeat 50% 50%; background-size: 100% 40px; } .pagination .ctrl.last { background: #fff url("./images/icon/pagination-last.png") no-repeat 50% 50%; background-size: 14px 14px; } @media all and (max-width: 600px) { .board-foot { margin-top: 0; } .pagination { flex-wrap: wrap !important; } .pagination a, .pagination strong { width: 28px; height: 28px; font-size: 15px; } .pagination .ctrl { /* border: 1px solid red; */ height: 28px; width: 50px; } .pagination .ctrl.back, .pagination .ctrl.next { background-size: 97% 36px; } .pagination .ctrl.first, .pagination .ctrl.last { width: 30px; background-size: 11px 11px; } } /* ============================================================ */ /* Sub page - 시스템 소개 */ /* ============================================================ */ .sub-wrap.portal {background: #fff;} .sub-wrap.portal .inner{overflow: hidden;} .title-wrap { max-width: 1000px; margin: 0 auto; } .sub-wrap .title-wrap .title { font-family: SCDream400; font-size: 40px; line-height: 150%; letter-spacing: -1.5px; color: #222; margin: 0 auto 22px auto; width: fit-content; text-align: center; position: relative; } .sub-wrap .title-wrap .title .color1 { font-family: SCDream700; color: #00829B; } .sub-wrap .title-wrap .title .color2 { font-family: SCDream700; color: #178eff; } .sub-wrap .title-wrap .title .light { font-family: SCDream400; } .sub-wrap .title-wrap .title::before, .sub-wrap .title-wrap .title::after { content: ""; width: 42px; height: 31px; background: url("./images/icon/double-quotes-open.png") no-repeat; background-position: center; background-size: contain; position: absolute; left: -70px; } .sub-wrap .title-wrap .title::after { content: ""; background: url("./images/icon/double-quotes-close.png") no-repeat; left: calc(100% + 20px); } .portal-subtxt { font-family: Pretendard; font-size: 26px; font-weight: 400; line-height: 150%; letter-spacing: -1px; color: #000; text-align: center; } .portal-subtxt > strong { font-weight: 600; color: #178eff; } /* 도형 */ .portal-intro .diagram { width: 100%; height: 738px; margin-top: 34px; margin-bottom: 60px; display: flex; align-items: center; justify-content: center; position: relative; } .portal-intro .diagram .bg{ width: 100%; height: 738px; background: url("./images/portal-intro-bg-arrow.png") no-repeat; background-size: contain; background-position: center; position: absolute; } /* 원 */ .portal-intro .bg-circle { width: 100%; height: 100%; max-width: 474px; max-height: 474px; border-radius: 50%; background: linear-gradient(91.08deg, #ADDEFF 0.92%, #A4E0F0 48.04%, #AEB5FF 98.6%); display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; position: relative; } .portal-intro .bg-circle-inner { width: 90%; height: 90%; max-width: 427px; max-height: 427px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .portal-intro .bg-circle-inner .tit{ font-family: SCDream600; font-size: 36px; line-height: 140%; letter-spacing: -0.6px; text-align: center; } .portal-intro .bg-circle-inner .tit > strong{ font-family: SCDream800; font-size: 48px; } .portal-intro .sm-circle{ position: absolute; width: 100%; height: 100%; max-width: 182px; max-height: 182px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: SCDream800; font-size: 20px; line-height: 140%; letter-spacing: -0.3px; text-align: center; } .portal-intro .sm-circle.lt{ top: -12%; left: -16%; background: #F2F8FF; color: #283B7F; box-shadow: 0px 7px 16px 0px #4EB5FB59; } .portal-intro .sm-circle.rt{ top: -12%; right: -16%; background: #5D698F; color: #FFFFFF; box-shadow: 0px 7px 16px 0px #5D698F4D; } .portal-intro .sm-circle.rb{ bottom: -12%; left: -16%; background: rgba(46, 80, 119, 0.95); color: #FFFFFF; box-shadow: 0px 4px 16px 0px #2E50774D; } .portal-intro .sm-circle.lb{ bottom: -12%; right: -16%; background: #5372CE; color: #FFFFFF; box-shadow: 0px 4px 16px 0px #5576C74D; } .bg-circle-inner .icon-wrap{display: flex; gap: 40px; padding-bottom: 10px;} .bg-circle-inner .icon-wrap .icon-col{ display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } .bg-circle-inner .icon-wrap .icon-col::after{ content: ""; width: 24px; height: 26px; background: url("./images/portal-diagram-icon-arrow.png") no-repeat; background-position: center; background-size: contain; position: absolute; top: 20px; right: -30px; } .bg-circle-inner .icon-wrap .icon-col:last-child::after{display: none;} .bg-circle-inner .icon-wrap .icon-col .text{ font-family: SCDream500; font-size: 18px; line-height: 130%; letter-spacing: -0.3px; color: #42518A; } /* 사각형 */ .portal-intro .square{ font-family: SCDream700; font-size: 24px; line-height: 140%; letter-spacing: -0.3px; text-align: center; position: absolute; border-radius: 20px; width: 360px; padding: 24px; box-shadow: 0px 4px 20px 0px #BDDAFF; } .portal-intro .square.lt{ background: #FFFFFF; color: #283B7F; left: 0; } .portal-intro .square.rb{ background: #110E71; color: #fff; right: 0; } /* 도형 - 반응형 */ @media all and (max-width: 1399px) { .portal-intro .diagram .bg{ transform: rotate(90deg); transition: transform 0.2s ease; background-size: 100% 100%; width: 930px; height: 790px; top: 60px; } .portal-intro .diagram{margin-top: 160px; margin-bottom: 220px;} .portal-intro .square.lt{top: -90px; left: calc(50% - 180px);} .portal-intro .square.rb{bottom: -70px; left: calc(50% - 180px);} } @media all and (max-width: 1040px) { .title-wrap{max-width: 570px;} } @media all and (max-width: 700px) { .portal-intro .diagram{margin-top: 140px;} .portal-intro .square{font-size: 17px;} .portal-intro .bg-circle{ max-width: 360px; max-height: 360px; position: absolute; top: 186px;} .portal-intro .sm-circle{font-size: 16px; max-width: 160px; max-height: 160px;} .portal-intro .sm-circle.lt{top: -28%; left: 0%;} .portal-intro .sm-circle.rb{bottom: -28%; left: 0%;} .portal-intro .sm-circle.rt{top: -28%; right: 0%;} .portal-intro .sm-circle.lb{bottom: -28%; right: 0%;} .portal-intro .bg-circle-inner{max-width: 400px; max-height: 400px;} .portal-intro .bg-circle-inner .tit{font-size: 25px;} .portal-intro .bg-circle-inner .tit > strong{font-size: 32px;} .bg-circle-inner .icon-wrap .icon-col .text{font-size: 14px;} .bg-circle-inner .icon-wrap{gap: 12px;} .bg-circle-inner .icon-wrap .icon-col::after{display: none;} .portal-intro .square.lt{top: -76px;} .portal-intro .square.rb{bottom: -35px;} } @media all and (max-width: 650px) { .title-wrap{max-width: 480px;} .sub-wrap.portal h1{font-size: 33px;} .sub-wrap .title-wrap .title{font-size: 28px;} .sub-wrap .title-wrap .title::before, .sub-wrap .title-wrap .title::after{display: none;} .portal-subtxt{font-size: 20px;} } @media all and (max-width: 410px) { .portal-intro .diagram{margin-top: 120px; margin-bottom: 140px;} .portal-intro .diagram .bg{opacity: 0;} .portal-intro .bg-circle{ max-width: 320px; max-height: 320px; position: absolute; top: 75px;} .portal-intro .bg-circle, .portal-intro .bg-circle-inner{border-radius: 96px;} .portal-intro .sm-circle.lt{top: 107%; left: 2%; z-index: 1;} .portal-intro .sm-circle.rb{bottom: -97%; left: 2%; z-index: 2;} .portal-intro .sm-circle.rt{top: 107%; right: 2%;} .portal-intro .sm-circle.lb{bottom: -97%; right: 2%;} .portal-intro .square{width: 100%;} .portal-intro .square.lt, .portal-intro .square.rb{left: 0;} .portal-intro .square.rb{bottom: -70px;} } /* 시스템 소개 - 주요기능 */ .portal .grid .subject{font-size: 24px;} .portal .grid .subject::before{top: 5px;} .sys-wrap{ display: flex; align-items: stretch; border-top: 2px solid #343448; border-bottom: 2px solid #343448; margin: 20px 0 80px 0; } .sys-wrap .step{ width: 100%; border-right: 1px solid #343448; padding: 41px 20px 40px 20px; overflow: hidden; position: relative; } .sys-wrap .step:first-child{padding-left: 0;} .sys-wrap .step:last-child{border-right: 0;} .sys-wrap .step .tit{ font-family: SCDream800; font-size: 32px; line-height: 130%; letter-spacing: -0.3px; color: #00829B; margin: 6px 0 24px 0; } .sys-wrap .step .sub-tit{ font-family: SCDream700; font-size: 22px; line-height: 130%; letter-spacing: -0.3px; color: #283B7F; } .sys-wrap .step ul li{ font-family: SCDream500; font-size: 18px; line-height: 140%; letter-spacing: -0.3px; color: #525265; position: relative; padding-left: 16px; margin-bottom: 16px; } .sys-wrap .step ul li:last-child{margin-bottom: 0;} .sys-wrap .step ul li::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: #283B7F; position: absolute; top: 10px; left: 0; } .sys-wrap .step ul li span{display: block; width: 306px;} .sys-wrap .step::after{ content: ""; font-family: "GmarketSansB"; font-size: 134px; line-height: 100%; letter-spacing: -2px; color: rgba(8, 105, 216, 0.05); position: absolute; } .sys-wrap .step1::after{content: "01"; bottom: -25px; right: -13px;} .sys-wrap .step2::after{content: "02"; bottom: -26px; right: -17px;} .sys-wrap .step3::after{content: "03"; bottom: -23px; right: -3px;} @media all and (max-width: 1080px) { .sys-wrap{flex-direction: column;} .sys-wrap .step{border-bottom: 1px solid #343448; border-right: 0;} .sys-wrap .step:last-child{border-bottom: 0;} .sys-wrap .step:first-child{padding: 41px 20px 40px 20px;} .sys-wrap .step ul li span{width: 100%;} } @media all and (max-width: 600px) { .sys-wrap .step .sub-tit{font-size: 17px;} .sys-wrap .step .tit{font-size: 23px;} .sys-wrap .step ul li{font-size: 15px;} .sys-table-wrap .th, .sys-table-wrap .td{font-size: 14px !important;} } /* 시스템 소개 - 건강위해정보 제공기관 */ .sys-table-wrap{ margin: 20px 0 60px 0; overflow: auto; } .sys-table-wrap .row{ width: 100%; min-width: 400px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .sys-table-wrap .th, .sys-table-wrap .td{ flex: 1; min-width: 170px; display: flex; align-items: center; justify-content: center; font-family: Pretendard; font-weight: 700; font-size: 16px; letter-spacing: -0.3px; text-align: center; border-right: 1px solid #DEDEDE; } .sys-table-wrap .th{ background: #0A1F63; color: #fff; line-height: 100%; padding: 11px 10px 10px 10px; } .sys-table-wrap .td{ background: #F7FBFF; color: #444444; border-bottom: 1px solid #DEDEDE; line-height: 130%; padding: 9px 10px 8px 10px; } .sys-table-wrap .th:nth-child(4n), .sys-table-wrap .td:nth-child(4n){ border-right: 0; } @media all and (max-width: 760px) { .sys-table-wrap .row{grid-template-columns: repeat(2, minmax(0, 1fr));} .sys-table-wrap .row .th:nth-child(n+3){display: none;} .sys-table-wrap .row .td:nth-child(2n){border-right: 0;} .sys-table-wrap .td{justify-content: flex-start; text-align: left;} } /* 인사말 */ .portal-greeting{max-width: 980px; margin: 0 auto;} .greeting-wrap { width: 100%; display: flex; align-items: flex-start; justify-content: center; gap: 40px; box-sizing: border-box; } .portal-greeting .title-wrap { width: calc(100% - 360px); min-width: 546px; max-width: 546px; margin: 0; margin-bottom: 40px; position: relative; } .portal-greeting .title-wrap .title { margin: 0; text-align: left; line-height: 100%; } .portal-greeting .title-wrap .title::before, .portal-greeting .title-wrap .title::after { display: none; } .portal-greeting .title-wrap .portal-subtxt { text-align: left; font-family: SCDream400; font-size: 19px; line-height: 150%; color: #444; word-break: keep-all; } .portal-greeting .title-wrap .portal-subtxt strong { font-family: SCDream700; color: #444; } .portal-greeting .title-wrap .portal-subtxt .h3 { font-family: SCDream400; font-size: 24px; } .portal-greeting .title-wrap .portal-subtxt .h3 strong { font-family: SCDream600; } .portal-greeting .title-wrap .portal-subtxt .h2 { font-family: SCDream500; font-size: 18px; } .portal-greeting .title-wrap .portal-subtxt .h2 strong { font-family: SCDream400; font-size: 23px; color: #222; } /* 사진 */ .greeting-img { width: 260px; height: 320px; position: relative; } .greeting-img > img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; } @media all and (max-width: 1000px) { .greeting-wrap {flex-wrap: wrap; flex-direction: column-reverse; gap: 30px;} .portal-greeting .title-wrap, .greeting-img{margin: 0 auto;} } @media all and (max-width: 650px) { .portal-greeting .title-wrap .title {font-size: 36px;} .portal-greeting .title-wrap .portal-subtxt .h3 {font-size: 22px;} } @media all and (max-width: 600px) { .portal-greeting .title-wrap{min-width: 100%;} .portal-greeting .title-wrap .portal-subtxt {font-size: 16px;} } @media all and (max-width: 510px) { .portal-greeting .title-wrap .title {font-size: 30px;} .portal-greeting .title-wrap .portal-subtxt .h3 {font-size: 18px;} .portal-greeting .title-wrap .portal-subtxt {font-size: 14px;} .greeting-img {width: 260px; height: 281px;} } /* 인사말 end */ /* ============================================================ */ /* Sub page - 인기검색어 */ /* ============================================================ */ .with-ranking { display: flex; align-items: flex-start; column-gap: 60px; row-gap: 30px; } .ranking { width: 100%; max-width: 160px; min-width: 160px; flex: 1; } .ranking.float { max-width: 160px; min-width: 160px; position: absolute; top: 0px; left: -190px; } .ranking h4 { width: 100%; font-family: SCDream600; font-size: 18px; line-height: 170%; letter-spacing: -0.25%; color: #333; position: relative; margin-left: 30px; margin-bottom: 26px; } .ranking h4::before { content: ""; width: 24px; height: 24px; background: url("./images/icon/ranking-icon.png") no-repeat; background-position: center; background-size: contain; position: absolute; left: -30px; top: 2px; } .ranking h4::after { content: ""; width: 100%; border-bottom: 1px solid #666; position: absolute; top: 44px; left: -30px; } .ranking > ul { padding: 10px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .ranking > ul > li { font-family: SCDream300; font-size: 14px; line-height: 150%; letter-spacing: -0.5px; color: #666; padding-left: 26px; position: relative; width: 100%; word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ranking > ul > li .num { font-family: SCDream600; font-size: 12px; line-height: 0; color: #2f445a; width: 19px; height: 16px; padding-right: 2px; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; left: 0; top: 3px; } .ranking > ul > li .num::before { content: ""; border: 1px solid #dddddd; background: #fff; width: 18px; height: 18px; position: absolute; z-index: -1; left: 0; top: -1px; } .ranking > ul > li:nth-child(-n + 3) { font-family: SCDream400; color: #111; } .ranking > ul > li:nth-child(-n + 3) .num { font-family: SCDream500; color: #fff; } .ranking > ul > li:nth-child(-n + 3) .num::before { border: 1px solid #2f445a; background: #2f445a; } .ranking > ul > li:hover a { text-decoration: underline; text-underline-offset: 2px; } @media all and (max-width: 900px) { .sub-cont-body .with-ranking, .with-ranking.poisn { flex-direction: column; } .with-ranking.poisn .ranking, .ranking { max-width: 100% !important; } .with-ranking.poisn .ranking > ul, .ranking > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ranking > ul > li:nth-child(-n + 5) { grid-column: 1; } .ranking > ul > li:nth-child(n + 6) { grid-column: 2; } .ranking > ul > li:nth-child(6) { grid-row: 1; } .ranking > ul > li:nth-child(7) { grid-row: 2; } .ranking > ul > li:nth-child(8) { grid-row: 3; } .ranking > ul > li:nth-child(9) { grid-row: 4; } .ranking > ul > li:nth-child(10) { grid-row: 5; } } /* ============================================================ */ /* Sub Main - 중독정보 서브메인 */ /* ============================================================ */ .poisn-card { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .poisn-card > .card { height: 500px; padding: 46px 43px; border-radius: 15px; color: #fff; transform: scale(1); transition: transform 0.4s ease-in-out; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; } .poisn-card > .card:hover { transform: scale(1.05); transition: transform 0.4s ease-in-out; } .poisn-card > .card h2 { font-family: SCDream700; font-size: 34px; line-height: 150%; letter-spacing: -0.25%; color: #fff; margin-bottom: 16px; } .poisn-card > .card .txt, .poisn-card > .card .txt > p { font-family: Pretendard; font-size: 17px; font-weight: 500; line-height: 150%; letter-spacing: -0.5px; color: #fff; } .poisn-card > .card:hover .txt, .poisn-card > .card:focus .txt, .poisn-card > .card:focus-visible .txt { text-decoration: underline; text-underline-offset: 3px; outline-offset: 2px; } .poisn-card > .card.chemical { background: url("./images/poisn-sample-img-1.png") no-repeat; background-position: center; background-size: cover; } .poisn-card > .card.physical { background: url("./images/poisn-sample-img-2.png") no-repeat; background-position: center; background-size: cover; } .poisn-card > .card.natural { background: url("./images/poisn-sample-img-3.png") no-repeat; background-position: center; background-size: cover; } @media all and (max-width: 1080px) { .with-ranking.poisn { justify-content: space-between; } .poisn-card { gap: 10px; } } @media all and (max-width: 900px) { .poisn-card { gap: 20px; } } @media all and (max-width: 670px) { .poisn-card { grid-template-columns: repeat(1, minmax(0, 1fr)); } .poisn-card > .card { height: 100%; padding: 30px 40px; } .poisn-card > .card h2 { font-size: 30px; margin-bottom: 10px; } .poisn-card > .card .txt { font-size: 16px; } } @media all and (max-width: 500px) { .poisn-card > .card { padding: 20px 30px; } .poisn-card > .card h2 { font-size: 20px; margin-bottom: 6px; } .poisn-card > .card .txt, .poisn-card > .card .txt > p { font-size: 13px; } .with-ranking.poisn .ranking > ul, .ranking > ul { display: flex; } } .bg-lightsky { background: #f4fbff; position: relative; z-index: 0; margin-top: -50px; padding-top: 130px; } /* ============================================================ */ /* Sub Main - 기후보건 서브메인 */ /* ============================================================ */ .climate-wrap, .poisn-wrap { display: flex; align-items: stretch !important; align-self: stretch; gap: 24px; width: 100%; height: 100%; margin-bottom: 50px; } @media all and (max-width: 1800px) { .climate-wrap, .poisn-wrap { width: calc(100% - 220px); } } @media all and (max-width: 900px) { .climate-wrap, .poisn-wrap { width: 100%; } } .climate-wrap .left, .poisn-wrap .left { flex: 1; width: calc(68.5555555555555% - 24px); height: 100%; } .climate-wrap .right, .poisn-wrap .right { width: 31.5555555555555%; height: 100%; margin-bottom: -56px; } .climate-tit, .poisn-tit { font-family: SCDream500; font-size: 26px; line-height: 130%; letter-spacing: -1.5px; color: #111; margin-bottom: 16px; } .climate-tit strong, .poisn-tit strong { font-family: SCDream700; } @media all and (max-width: 1300px) { .climate-wrap, .poisn-wrap { flex-direction: column; row-gap: 48px; } .climate-wrap .left, .poisn-wrap .left { width: 100%; padding: 0; } .climate-wrap .right, .poisn-wrap .right { width: 510px; padding: 0 0 0 68px; margin: 0 auto -56px auto; } } @media all and (max-width: 900px) { .climate-wrap .left, .poisn-wrap .left, .climate-wrap .right, .poisn-wrap .right { padding: 0; } .climate-wrap .right, .poisn-wrap .right { width: 442px; } } @media all and (max-width: 500px) { .climate-wrap .right, .poisn-wrap .right { width: 100%; } .climate-tit, .poisn-tit { font-size: 22px; } } /* 바로가기 버튼 추가 */ .shortcut { position: relative; top: -56px; display: block; border-radius: 10px; } .btn-shortcut { width: 100%; height: 70px; background: #c8f0ff; /*background: #ffc7ba;*/ border: 1px solid #e3e6ee; border-radius: 10px; padding: 0 16px 0 28px; margin-top: 20px; } .btn-shortcut p { flex: 1; font-family: SCDream600; font-size: 20px; line-height: 130%; letter-spacing: -1px; color: #2F67BC; /*color : #cd4318;*/ } .btn-shortcut p .navy { color: #1e286d; } .btn-shortcut .img-wrap { background: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @keyframes bounce-small { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .btn-shortcut:hover .img-wrap { animation: bounce-small 1.5s ease infinite; } @media all and (max-width: 1800px) { .btn-shortcut { height: 64px; margin-top: 23px; } } @media all and (max-width: 600px) { .btn-shortcut p { font-size: 16px; } .btn-shortcut .img-wrap { width: 40px; height: 40px; } } /* link-dataRoom(자료실) */ .link-dataRoom { width: 100%; } .link-dataRoom .part { padding: 28px 25px 34px 25px; border: 1px solid #dddddd; overflow: hidden; border-right: 1px dashed #dddddd; transition: transform 0.6s ease-in-out, transform 0.2s ease-in-out; } .link-dataRoom .part:not(:first-child) { border-left: 0; } .link-dataRoom .part:first-child { border-radius: 20px 0 0 20px; } .link-dataRoom .part:last-child { border-radius: 0 20px 20px 0; border-right: 1px solid #dddddd; } .link-dataRoom .part:hover { transform: scale(1.03) translateX(6px); box-shadow: 0px 10px 20px rgba(1, 1, 1, 0.3); } .link-dataRoom .part:first-child:hover { transform: scale(1.03) translateX(-8px); } .link-dataRoom .part:not(:first-child):not(:last-child):hover { transform: scale(1.03) translateX(6px); } .link-dataRoom .part:not(:first-child):not(:last-child):hover ~ .part { transform: translateX(12px); } .link-dataRoom .title { font-family: SCDream600; font-size: 22px; line-height: 140%; letter-spacing: -1.5px; color: #1e286d; display: flex; align-items: center; gap: 16px; border-bottom: 1px dashed #b9cce4; padding-bottom: 22px; margin-bottom: 22px; width: 100%; } .link-dataRoom.climate .title { align-items: flex-start; } .link-dataRoom .title .flex-col > a { width: fit-content; font-family: SCDream400; font-size: 13px; line-height: 140%; letter-spacing: -0.5px; color: #586F89; } .link-dataRoom .title .flex-col > a:hover { text-decoration: underline; } .link-dataRoom .title .flex-col { width: 80%; } .link-dataRoom.climate .title .flex-col { min-height: 110px; justify-content: space-between; } .link-dataRoom .title .img-wrap { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; background: #b1b1b1; border-radius: 5px; overflow: hidden; } .link-dataRoom .title .img-wrap > img { width: 100%; height: 100%; object-fit: cover; } .link-dataRoom .link { font-family: Pretendard; font-size: 19px; font-weight: 600; line-height: 120%; letter-spacing: -0.5px; color: #000; } .link-dataRoom.climate .link{min-height: 172px;} .link-dataRoom .link > li:first-child { padding-top: 6px; } .link-dataRoom .link > li > a { font-family: Pretendard; font-size: 16px; font-weight: 400; line-height: 0; letter-spacing: -0.5px; color: #444; } .link-dataRoom .link > li:hover > a { text-decoration: underline; text-underline-offset: 3px; } .link-dataRoom .link > li.dot::before { content: "ㆍ"; margin-right: 4px; font-size: 14px; } /* 중독예방 자료실 - 반응형 */ @media all and (max-width: 975px) { .link-dataRoom .title { flex-direction: column-reverse; align-items: flex-start; } } @media all and (max-width: 540px) { .link-dataRoom .grid-col-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; } .link-dataRoom .part { border-radius: 20px !important; border: 1px solid #dddddd !important; padding: 25px 20px; } .link-dataRoom .title .flex-col.gap-20 { width: 100%; flex-direction: row !important; align-items: center !important; justify-content: space-between; flex-wrap: wrap; gap: 10px !important; } .link-dataRoom.climate .title .flex-col.gap-20 { flex-direction: column !important; align-items: flex-start !important; } .link-dataRoom .title { font-size: 18px; padding-bottom: 14px; margin-bottom: 14px; } .link-dataRoom .link { font-size: 16px; } .link-dataRoom .link > li > a { font-size: 15px; } } /* 기후보건 자료실 - 반응형 */ @media all and (max-width: 1420px) { .link-dataRoom.climate .title { flex-direction: column-reverse; align-items: flex-start; } .link-dataRoom.climate .title .flex-col { min-height: 104px; } } @media all and (max-width: 900px) { .link-dataRoom.climate .grid-col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .link-dataRoom .part:not(:first-child):not(:last-child):hover, .link-dataRoom .part:first-child:hover, .link-dataRoom .part:hover{ transform: scale(1.03) translateX(0); } .link-dataRoom .part:not(:first-child):not(:last-child):hover ~ .part{ transform: translateX(0); } .link-dataRoom.climate .part { border-radius: 20px !important; border: 1px solid #dddddd !important; padding: 25px 20px; } .link-dataRoom.climate .title .flex-col { min-height: 100%; } } @media all and (max-width: 500px) { .link-dataRoom.climate .grid-col-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* ======================================== */ /* ※ 개발팀 2024-12-24 : css 작업내용 추가 */ /* ※ 기후보건정보 content 영역을 위해 추가하였습니다. */ /* ※ 기후보건정보 퍼블리싱 화면 추가 이후, 불필요한 부분은 추후에 삭제 하도록 하겠습니다 */ /* ======================================== */ /* clmtSubInfo */ .clmt-sub-box { display: flex; align-items: stretch; flex-wrap: nowrap; border-bottom: 1px solid #DDDDDD; margin-bottom: 57px; width: 100%; overflow: auto; /* IE and Edge */ -ms-overflow-style: none; /* Firefox */ scrollbar-width: none; } .clmt-sub-box::-webkit-scrollbar { display: none; } .clmt-sub-box .arrow { display: none; } .clmt-sub-box .sub-option { flex: 1; text-align: center; cursor: pointer; background: #fff; font-family: SCDream600; font-size: 18px; line-height: 150%; letter-spacing: -0.7px; color: #767676; min-width: 160px; min-width: 110px; padding: 14px; height: auto; border-bottom: 3px solid transparent; } .clmt-sub-box .sub-option:hover { color: #0F3362; } .clmt-sub-box .sub-option.active { color: #00829B; border-bottom: 3px solid #00AEC6; position: relative; } .clmt-info-content .text{padding: 8px 0 40px 0;} @media all and (max-width: 900px) { /* 1단계 탭 - 반응형 디자인 */ .clmt-info-box .location-select{ width: 100%; height: 60px; background: linear-gradient(to right, #00d3db 0%, #0085e3 100%); border-radius: 10px; } .clmt-info-box .location-select .selected .selected-value, .clmt-info-box .location-select ul li { font-family: SCDream500; font-size: 18px; line-height: 150%; letter-spacing: -0.7px; color: #fff; } .clmt-info-box .location-select ul, .tabintab .location-select ul{ width: 100%; top: 60px; left: 0; background: #fff; border: 1px solid #ECF1F6; border-radius: 10px; overflow: hidden; } .clmt-info-box .location-select ul li, .tabintab .location-select ul li{ color: #666; border-bottom: 1px solid #ECF1F6; height: 60px; } .clmt-info-box .location-select ul li:last-child, .tabintab .location-select ul li:last-child{ border-bottom: 0; } .clmt-info-box .location-select ul li:hover, .tabintab .location-select ul li:hover{ background: #fff; color: #0F3362; } .clmt-info-box .location-select ul li a.option.active, .tabintab .location-select ul li a.option.active{ background: #ECF1F6; } /* 2단계 탭 - 반응형 디자인 */ .tabintab.pt30, .clmt-info-box ~ .tabintab{ flex-direction: column; padding-top: 16px !important; } .tabintab.pt30 .right{padding-top: 30px;} .tabintab .left{width: 100%;} .tabintab .location-select{ margin-bottom: 26px; width: calc(100% + 2px); height: 55px; background: #fff; border-radius: 0; border: 1px solid transparent; } .tabintab .location-select .selected .arrow{ filter: invert(77%) sepia(7%) saturate(647%) hue-rotate(183deg) brightness(86%) contrast(82%); } .tabintab .location-select ul, .tabintab .location-select ul li{ top: 55px; border-radius: 0; } .tabintab .location-select ul{ border-left: 0; z-index: 99; } .tabintab .location-select ul li a{ border-left: 6px solid #ECF1F6; } .tabintab .location-select .selected .selected-value, .tabintab .location-select ul li { font-family: SCDream500; font-size: 19px; line-height: 130%; letter-spacing: -0.7px; word-break: keep-all; color: #767676; } .tabintab .location-select .selected .selected-value{ border-left: 6px solid #0F3362; height: 55px; } } @media all and (max-width: 600px) { .clmt-info-box .location-select, .clmt-info-box .location-select ul li{height: 55px;} .clmt-info-box .location-select ul{top: 55px;} .tabintab .location-select, .tabintab .location-select ul li{height: 45px;} .tabintab .location-select .selected .selected-value, .tabintab .tab-btn{ height: 45px !important; min-height: 45px !important; padding: 14px 16px 14px 20px !important; } .tabintab .location-select ul, .tabintab .location-select ul li{top: 44px;} .clmt-info-box .location-select .selected .selected-value, .clmt-info-box .location-select ul li, .tabintab .location-select .selected .selected-value, .tabintab .location-select ul li, .tabintab .location-select ul li a{font-size: 16px;} .clmt-sub-box .sub-option{ font-size: 16px; line-height: 130%; padding: 8px 14px; } .clmt-sub-box{margin-bottom: 30px;} } /* ======================================== */ /* 사이트맵 */ .siteMap .grid{padding-bottom: 120px;} .siteMap .grid .subject{ font-size: 24px; padding-bottom: 24px; margin-bottom: 47px; border-bottom: 3px solid #0F3362; margin-left: 0; padding-left: 34px; } .siteMap .grid .subject::before{top: 5px;left: 0;} .siteMap ul{ border: 1xp solid red; display: flex; align-items: center; flex-wrap: wrap; column-gap: 40px; row-gap: 20px; } .siteMap ul li{ font-family: Pretendard; font-weight: 400; font-size: 18px; line-height: 140%; letter-spacing: -0.3px; color: #525265; position: relative; padding-left: 16px; } .siteMap ul li::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: #283B7F; position: absolute; top: 10px; left: 0; } .siteMap ul li:hover{ text-decoration: underline; text-underline-offset: 4px; } /* ======================================== */ /* file 파일 (공지사항상세, 시각화페이지, 자료실상세) */ .file-download { display: inline-block; margin-left: 10px; } .file-download a { color: #0066cc; text-decoration: underline; } .file-download a:hover { text-decoration: none; } .file-image { max-width: 100%; height: auto; margin: 20px 0; } /* ======================================== */ /**[2025-04-14 jieunmoon] 홍보자료 이미지박스 교체건 **/ .heatIllness { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1120px; margin: 0 auto; } .coldIllness, .heatReport, .coldReport { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1120px; margin: 0 auto; } .climateHealthImpact, .climateHealthPlan { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1120px; margin: 0 auto; } /* 이미지 박스 기본 설정 */ .img-box { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; margin-bottom: 35px; } /* 이미지 크기 */ .img-box .thumnail-img { width: 198px; height: 280px; display: block; border-radius: 8px; /*object-fit: cover;*/ border: 1px solid lightgray; } .img-box .thumnail-img3 { width: 148px; height: 208px; display: block; border-radius: 8px; object-fit: cover; } .img-box p { /*display: -webkit-box;*/ /*-webkit-line-clamp: 2;*/ /*-webkit-box-orient: vertical;*/ /*overflow: hidden;*/ /*text-overflow: ellipsis;*/ /*word-break: break-word;*/ /*height:51px;*/ } /* 다운로드 버튼 */ .goto-btn { display: inline-block; margin-top: 12px; padding: 8px 14px; border: 1px solid #003366; border-radius: 4px; background-color: #fff; color: #003366; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s ease; height: 47px; display: flex; justify-content: center; align-items: center; gap: 4px; } /* 버튼 안 아이콘 이미지 크기 */ .coldIllness .goto-btn img, .heatReport .goto-btn img, .coldReport .goto-btn img { width: 16px; height: 16px; } .climateHealthImpact .goto-btn img, .climateHealthPlan .goto-btn img { width: 16px; height: 16px; } /* 버튼 hover 효과 */ .goto-btn:hover { background-color: #003366; color: #fff; } /* hover 시 아이콘 이미지 교체 */ .coldIllness .goto-btn:hover .btn-icon, .heatReport .goto-btn:hover .btn-icon, .coldReport .goto-btn:hover .btn-icon { content: url("./images/chevron-right_white.png"); } .climateHealthImpact .goto-btn:hover .btn-icon, .climateHealthPlan .goto-btn:hover .btn-icon { content: url("./images/download-white.png"); } /* ✅ 반응형 */ @media (max-width: 1350px) { .climateHealthImpact, .climateHealthPlan { grid-template-columns: repeat(4, 1fr); } } .heatReport , .coldReport{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 1230px) { .climateHealthImpact, .climateHealthPlan { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 765px) { .heatIllness, .coldIllness { width: 60%; grid-template-columns: repeat(1, 1fr); } .climateHealthImpact, .climateHealthPlan, .heatReport, .coldReport { grid-template-columns: repeat(2, 1fr); } .img-box { flex: 1 1 100%; } } @media (max-width: 390px) { .heatReport, .coldReport { gap:20px; } .heatReport .img-box .thumnail-img, .coldReport .img-box .thumnail-img{ height: 200px; } .goto-btn { height: 0 !important; padding: 17px 14px; font-size: 14px; } .goto-btn .btn-icon{ width: 16px; } } /* 온열/한랭 탭버튼 */ .heat-cold-tab-btns { width: 100%; display: flex; margin: 20px 0; } .heat-cold-tab-btns button { width: 100%; padding: 8px 20px; border: 1px solid #ccc; background: #f9f9f9; cursor: pointer; } .heat-cold-tab-btns button.active{ background: #FFFFFF; color: #043763; font-weight: bold; border: 2px solid #043763; } /* ======================================== */