/* ----------------------------- 웹폰트 임포트 ------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;700&display=swap'); :root{ --color-primary: #CC3E18; /* #E4572E */ --color-secondary: #007845; --color-background: #fff; --color-secondary-background: #f9f9f9; --color-tertiary-background: #4b4b4b; --color-text: #000; --color-secondary-text: #666; --color-tertiary-text: #fff; --color-border: #ccc; --color-secondary-border: #999; --color-underline: #000; } /* ----------------------------- Reset & 기본설정 ------------------------------ */ *{box-sizing: border-box;} html, body{font-family: 'IBM Plex Sans KR', system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; color: var(--color-text); margin: 0; padding: 0;} html{font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; word-break: keep-all;} [role="tab"] { pointer-events: auto !important; } @media (min-width: 1199px) { body {/* 세로 스크롤 강제 활성화 */ overflow-y: auto !important;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: revert-layer !important;} a.btn-icon {color: #333 !important; text-decoration: none !important;} } @media (max-width: 1199px) { body {/* 세로 스크롤 강제 활성화 */ overflow-y: scroll !important;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: revert-layer !important;} } @media (max-width: 720px) { :root{--press-media-h: clamp(10px, 18vw, 40px);} #press-notices .press-inner{grid-template-columns: 1fr;} #sns .sns-thumb img {height: auto; width: 100%;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: revert-layer !important;} a.btn-icon {color: #333 !important; text-decoration: none !important;} #press-notices .press-desc, .press-media { font-weight:700; line-height:1.4; margin-bottom:12px; margin-top: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; max-height: calc(1.4em * 2); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease;} } @media (max-width: 1024px) { html{font-size: 15px;} } @media (max-width: 1199px) { a.btn:visited, a.btn:link{color:#000;} .contact-info a.btn-text {color:#fff;} } body{font-size: 1rem;} p{margin: 0;} a{color: #000; text-decoration: none;} h2{font-size: 1.5rem; margin: 0; line-height: 1.3; font-weight: 700;} ul{list-style: none; padding: 0; margin: 0;} *:focus{outline: 3px solid #111; outline-offset: 3px;} @supports selector(:focus-visible){ *:focus {outline: none;} :focus-visible{outline: 3px solid #111; outline-offset: 3px;} } @media (prefers-reduced-motion: reduce){ * {transition: none !important; animation: none !important; scroll-behavior: auto !important;} } #fullpage {transform: none !important;} /* ----------------------------- 스킵링크 (Skip to Content) ------------------------------ */ /* .skip-link{width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; position: absolute; top: -60px; left: 0; background: #111; color: #fff; line-height: 1; z-index: 1000; transition: top 0.3s ease;} */ /* .skip-link:focus{top: 0;} */ /* ----------------------------- 스크린리더 전용 텍스트 (sr-only) ------------------------------ */ .sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;} /* ----------------------------- 반응형 공통 레이아웃 ------------------------------ */ .container{width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 16px;} .flex-responsive{display:flex; gap:40px; flex-wrap:wrap; align-items: stretch;} .flex-responsive > *{min-width:0;} .u-flex-1{flex:1 1 0;} .u-flex-2{flex:2 1 0;} .flex-responsive > section{display: flex; flex-direction: column; min-width: 0;} .mt-80{margin-top: 40px;} .mt-40{margin-top: 40px;} .mb-100{margin-bottom: 40px;} @media (max-width:1024px){ .flex-responsive{flex-direction:column; gap: 24px;} .flex-responsive > *{flex:0 0 auto; width:100%;} .mt-80 {margin-top: 48px;} .mt-40 {margin-top: 24px;} .mb-100{margin-bottom: 50px;} } /* ----------------------------- 버튼 및 링크 스타일 ------------------------------ */ .btn{width: 100%; padding: 10px 20px; display: flex; align-items: center; border-radius: 10px; font-weight: 700; box-sizing:inherit !important;} .btn-icon{min-height: 44px; padding-right: 56px; position: relative; background: var(--color-background); border: 1px solid var(--color-border); transition: background-color 0.3s ease, border-color 0.3s ease;} .btn-icon::after{content: ''; width:25px; height: 4px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); background: url(../../images/main/btn-arrow-right.svg) no-repeat 100%;} .btn-icon:hover, .btn-icon:focus-visible{background-color: #f5fbf9; border: 1px solid var(--color-secondary);} .btn-text{font-size:14px; min-height: 0; width:150px; height:40px; background-color: var(--color-tertiary-background); color: var(--color-tertiary-text); justify-content: center; padding: 0px 0px;} .btn-tab{position: relative; font-family: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1.3; background: transparent; color: var(--color-secondary-text); border: 0; padding: 0; margin: 0 20px 0 0; -webkit-appearance: none; appearance: none; cursor: pointer;} .btn-tab::before{content:""; position:absolute; left:50%; top:50%; width:100%; height:44px; transform:translate(-50%,-50%); pointer-events:auto;}/* 모바일 클릭 높이 44px 이상 대응용 */ .btn-tab:last-child{margin-right: 0;} .btn-tab[aria-selected="true"]{color: #000;} .btn-tab[aria-selected="false"]{color: #999;} .btn-more{display: inline-block; width: 44px; height: 44px; background: url('../../images/main/btn-more.svg') no-repeat center / contain; text-indent: -9999px; /* 시각적으로 숨기기 */ overflow: hidden; border: none; cursor: pointer; flex-shrink: 0; margin-left: auto;} .btn-more:focus-visible{border-radius: 50%; outline-offset: 3px;} /* ----------------------------- 타이틀 스타일 ------------------------------ */ #qna h2, #contact-reports h2, #resources h2{margin-bottom: 20px;} /* ----------------------------- visual 섹션 ------------------------------ */ #visual{height: 488px; position: relative; overflow: hidden; padding: 0 60px; background: url("../../images/main/visual-bg1.jpg") center / cover no-repeat; border-radius: 10px;} #visual .visual-slide{height: 100%; position: relative; display: flex; align-items: center; padding: 50px 0;} #visual .visual-slide-inner{position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 40px;} #visual .visual-quick{display: grid; grid-template-columns: repeat(2, 1fr); align-items: flex-start; gap: 10px; background-color:#dddadaa8; padding: 20px; border-radius: 20px;} #visual .visual-quick-btn{display: grid; justify-content: center; gap: 10px; text-align: center; width: 100%; } #visual .visual-quick-btn:focus-visible{outline: 3px solid #fff; outline-offset: 3px; border-radius: 10px;} #visual .visual-quick-btn:hover .visual-quick-ico, #visual .visual-quick-btn:focus-visible .visual-quick-ico{border: 5px solid var(--color-secondary);} #visual .visual-quick-ico{width: 50px; height: 50px; background: var(--color-background); border: 5px solid transparent; transition: border 0.3s ease, transform 0.3s ease; border-radius: 10px; margin: auto; outline: 2px solid #ccc;} #visual .visual-quick-ico img{ max-width: 100%; height: auto; display: block;} #visual .visual-quick p{line-height: 1.3; color: var(--color-tertiary-text); font-weight: 700; margin: 0; font-size:14px; color:#393939; /* text-shadow: 2px 2px 4px rgba(0,0,0,1); */} #visual .visual-slide-inner > .mo-only-visual-title {display:none;} @media (max-width: 1190px) { #visual{height: 70vh; min-height: 360px; max-height: 700px; background: url("../../images/main/visual-bg1-mo.png") center top / cover no-repeat;} #visual .visual-quick{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; overflow: visible; width: 50%;} } @media (min-width: 540px) and (max-width: 872px) { #visual{padding: 0 24px;} #visual .visual-slide{align-items: flex-end;} #visual .visual-slide-inner{justify-content: center; gap: 20px;} #visual .visual-quick{display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; overflow: visible; width: 100%;} #visual .visual-quick-btn{width: 100%;} #visual .visual-quick-ico{width: 60px; height: 60px;} } @media (max-width: 540px) { #visual {background: transparent; padding:0; height:auto; } #visual .visual-slide{align-items: flex-end; height: auto; padding:0;} #visual .visual-slide-inner{justify-content: left; flex-wrap: wrap; width:100%; gap:20px;} #visual .visual-slide-inner > .mo-only-visual-title > h3{font-size:14px; color:#fff;} #visual .visual-slide-inner > .mo-only-visual-title > p {font-size:20px; font-weight:600; color:#fff;} #visual .visual-quick{grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 30px 0; width:100%;} #visual .visual-quick-btn{width: 100%;} #visual .visual-quick-ico{width: 60px; height: 60px;} #visual .visual-slide-inner > .mo-only-visual-title {display:block; width:100%; padding:20px 20px 120px; background:url(../../images/main/mo_visual_img.png) center -40px / cover no-repeat; border-radius: 20px; text-shadow: 1px 1px 10px #000;} } @media (max-width: 380px) { /* #visual .visual-slide{ padding:50px 0px 10px !important; } */ } /* ----------------------------- 기관갤러리, 홍보영상 섹션 ------------------------------ */ #gallery-video .gallery-video-header{margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;} #gallery-video .gallery-video-inner{display: flex; flex-direction: column; overflow: hidden; gap: 20px; transition: color 0.3s ease;} #gallery-video .gallery-video-thumb{width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px;} #gallery-video .gallery-video-thumb img{width: 100%; height: 100%; object-fit: cover; display: block;} #gallery-video .gallery-video-text{flex: 1;} #gallery-video .gallery-video-title{font-weight:700; line-height:1.4; margin-bottom:12px; margin-top: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; min-height: calc(1.4em * 2); max-height: calc(1.4em * 2); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease;} #gallery-video .gallery-video-inner:hover .gallery-video-title, #gallery-video .gallery-video-inner:focus-visible .gallery-video-title{text-decoration-color: var(--color-underline);} #gallery-video .gallery-video-desc{margin-top: 12px; color: var(--color-secondary-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #gallery-video .gallery-video-inner:focus-visible{border-radius: 10px;} #gallery-video .btn-tab:focus-visible{border-radius: 5px;} @media (max-width: 1024px){ #gallery-video .gallery-video-thumb{height:300px;} #gallery-video .gallery-video-thumb img{height:300px;} .panel-gv-con{height: 359px; overflow: hidden;} } @media (min-width: 1025px){ .gallery-video-thumb{height:216px;} .gallery-video-thumb > img{height:216px;} } /* ----------------------------- 한눈에 보는 SNS 섹션 ------------------------------ */ #sns .sns-header{margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 40px;} #sns #panel-youtube .sns-inner{flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 24px; align-content: start;} #sns .sns-inner{flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(136px, 1fr)); gap: 24px; align-content: start;} #sns .sns-link{display: flex; width:100%; flex-direction: column; overflow: visible; gap: 20px;} #sns .sns-link:focus-visible{border-radius: 10px;} #sns #panel-youtube .sns-thumb{width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px;} #sns .sns-thumb{width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; display: flex;} #sns .sns-thumb img{width: 100%; flex: 1; min-width: 0; height: 100%; object-fit: cover; display: block;} /* #sns .sns-thumb img{width: 100%; flex: 1; min-width: 0; height: 100%; object-fit: contain; object-position:center !important; display: block;} */ #sns .sns-link-title{margin: 0; font-weight:700; line-height:1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; min-height: calc(1.4em * 2); max-height: calc(1.4em * 2); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease;} #sns .sns-link:hover .sns-link-title{text-decoration-color: var(--color-underline);} #sns .sns-link:hover .sns-link-title, #sns .sns-link:focus-visible .sns-link-title{text-decoration-color: var(--color-underline);} #sns .sns-link-desc{color: var(--color-secondary-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #sns .sns-tabs{display:flex; align-items:center;} #sns .btn-tab{--tab-gap: 0px; display: inline-flex; align-items: center; gap: var(--tab-gap); transition: background-color .25s ease, border-color .25s ease;} #sns .sns-tabs-ico{width: 44px; height: 44px; flex: 0 0 auto; transition: transform .3s ease;} #sns .btn-tab span{margin: 0; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transform: translateX(-6px); transition: max-width .35s ease, opacity .35s ease, transform .35s ease;} #sns .btn-tab[aria-selected="true"]{--tab-gap: 10px;} #sns .btn-tab[aria-selected="true"] span{max-width: 120px; opacity: 1; transform: translateX(0);} #sns .btn-tab[aria-selected="true"] .sns-tabs-ico{transform: translateX(-2px);} #sns .btn-tab:focus-visible{border-radius: 5px;} @media (max-width: 1190px){ #sns .sns-inner{gap:14px !important;} } @media (min-width: 1024px){ .sns-thumb{height:216px;} #panel-youtube .sns-inner .sns-item{display: flex; flex-wrap: wrap; gap: 20px;} #sns .sns-thumb img{ object-fit: contain; } } @media (max-width: 1024px){ .sns-panels{height: 262px; overflow: hidden;} .sns-thumb{height:200px;} .sns-thumb > img{height:200px;} #panel-youtube .sns-inner .sns-item{display: flex; flex-wrap: wrap; gap: 20px;} #sns .sns-thumb img{ object-fit: contain; } } @media (max-width: 768px){ #sns .sns-header{display: grid; justify-content: normal; gap: 12px;} #sns .sns-inner{grid-template-columns: 1fr;} #sns .sns-item:nth-child(n+2){display: none;} #sns #panel-youtube .sns-inner{grid-template-columns:repeat(1, minmax(280px, 1fr))} .sns-thumb{aspect-ratio:auto;} #sns .sns-thumb img{ object-fit: contain; } } @media (prefers-reduced-motion: reduce){ #sns .btn-tab, #sns .sns-tabs-ico, #sns .btn-tab span{transition: none;} } /* ----------------------------- 공지 섹션 ------------------------------ */ #notice .notice-inner{display: flex; align-items: center; gap: 30px; background: var(--color-secondary-background); padding: 20px; border-radius: 10px;} #notice .notice-label{display: flex; align-items: center; gap: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0;} #notice .notice-ico{display: inline-block; width: 25px; height: 25px; background: url('../../images/main/ico-speaker.svg') no-repeat center/contain;} #notice .notice-link{display:flex; align-items:center; gap:20px; height:28px; min-width:0; flex: 0 0 clamp(480px, 55%, 880px);} .notice-rolling{overflow: hidden; height: 22px;} #notice .notice-link:focus-visible{border-radius: 5px;} #notice .notice-text{flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease;} #notice .notice-link:hover .notice-text, #notice .notice-link:focus-visible .notice-text{text-decoration-color: var(--color-underline);} #notice .notice-link time{color: var(--color-secondary-text); white-space: nowrap; flex-shrink: 0;} @media (max-width: 1024px){ #notice .notice-link{flex: 0 0 clamp(360px, 50%, 680px);} #panel-press .press-inner .press-item .press-link{height:352px;} #panel-recruit .press-inner .press-item .press-link{height:352px;} #panel-bids .press-inner .press-item .press-link{height:352px;} .panel-press-con {height: 354px; overflow: hidden;} } @media (max-width: 1199px){ #press-notices .press-link{padding: 28px 20px !important;} #press-notices .press-content {height:318px !important;} .press-inner{gap:14px !important;} } @media (max-width: 768px){ #notice .notice-inner{flex-wrap: wrap; gap: 12px;} #notice .notice-ico{width: 20px; height: 20px;} #notice .notice-link{order: 2; flex: 0 0 100%; width: 100%; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px;} #notice .btn-more{order: 3; margin-left: auto; flex-shrink: 0;} #notice .notice-text{display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } /* ----------------------------- 보도자료, 채용공고, 입찰공고 섹션 ------------------------------ */ /* :root{--press-media-h: clamp(70px, 18vw, 110px);} */ :root{--press-media-h: clamp(10px, 18vw, 10px);} .press-tabs{margin-bottom: 20px;} #press-notices{display: flex; flex-direction: column;} #press-notices article[role="tabpanel"]:not([hidden]){flex: 1 1 auto; display: flex; min-height: 0;} #press-notices .press-inner{flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 24px; align-content: start;} #press-notices .press-item{position:relative; border:1px solid var(--color-border); border-radius:10px; background:var(--color-background); transition: box-shadow .2s, border-color .2s; overflow:visible;} #press-notices .press-item:hover{ border-color:#999; box-shadow:0 4px 10px rgba(0,0,0,.1); } #press-notices .press-link{display:flex; grid-template-rows: var(--press-media-h) auto; padding:20px 20px; position:relative; width:100%; height:100%; min-height: 70px;} #press-notices .press-link:focus-visible{border-radius: 10px;} #press-notices .press-media{ display:block; height:100%; background: var(--color-background); border-radius:8px;} #press-notices .press-content{display:flex; flex-direction:column; height:100%; justify-content: space-between;} /* #press-notices .press-content img{width:100%; height:150px; object-fit: contain; margin-bottom: 10px; border: 1px solid #ccc} */ #press-notices .press-content img{width:100%; height:150px; object-fit: contain; margin-bottom: 10px;} #press-notices .press-title{font-weight:700; line-height:1.4; margin-bottom:12px; margin-top: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; max-height: calc(1.4em * 2); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease;} #press-notices .press-link:hover .press-title, #press-notices .press-link:focus-visible .press-title{text-decoration-color: var(--color-underline);} #press-notices .press-desc{color:var(--color-secondary-text); line-height:1.5; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; height:168px;} #press-notices .press-img-desc{color:var(--color-secondary-text); line-height:1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; min-height:0; height:44px;} #press-notices .press-date{display:block; margin-top:30px;} /* #press-notices .press-badge{position: absolute; top: 0; right: 20px; width: 45px; height: 40px; display: flex;align-items: flex-start; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--color-tertiary-text); background: url("../../images/main/ico-new.svg") no-repeat center top / contain; text-align: center; padding-top: 6px; pointer-events: none;} */ #press-notices .btn-tab:focus-visible{border-radius: 5px;} @media (min-width: 1190px){ #press-notices .press-link{height:370px;} #press-notices .press-title{min-height:45px;} } @media (max-width: 768px){ :root{--press-media-h: clamp(10px, 18vw, 10px);} #press-notices .press-inner{grid-template-columns: 1fr;} .press-item{width:100%;} #notice .notice-link {flex-direction:row;} /* #press-notices .press-content{width:80%;} */ } @media (max-width: 460px){ #press-notices .press-link{height:377px;} } /* ----------------------------- 자료실 섹션 ------------------------------ */ #resources .resources-inner{background-color: var(--color-secondary-background); border-radius: 10px; padding: 20px;} #resources .resources-inner li+li{margin-top: 10px;} #qna .qna-inner, #contact-reports .contact-reports-inner{height: 220px; box-sizing: border-box;} /* ----------------------------- 자주묻는질문 섹션 ------------------------------ */ #qna .qna-inner{position: relative; background-color: var(--color-secondary-background); border-radius: 10px; padding: 30px 20px;} #qna .qna-inner > * { position: relative; z-index: 1;} #qna .qna-inner::after{content: ""; display:none; position: absolute; left: 20px; bottom: 20px; width: 87px; height: 76px; background: url("../../images/main/ico-robot.png") no-repeat center / contain; pointer-events: none; z-index: 2;} #qna .qna-inner li+li{margin-top: 10px;} .popup_inner{background:#ccc;} @media (max-width: 1199px){ #qna .qna-inner{padding: 46px 20px;} #qna .qna-inner, #contact-reports .contact-reports-inner{height: 254px;} } @media (max-width: 1024px){ #qna .qna-inner{padding-bottom: 112px;} #qna .qna-inner::after{bottom: 16px;} } @media (max-width: 360px){ #qna .qna-inner::after{display: none;} } /* ----------------------------- 상담·이용불편·부정신고 섹션 ------------------------------ */ #contact-reports .contact-reports-inner{display: flex; flex-direction: column; padding: 22px 20px; background-color: var(--color-secondary-background); border-radius: 10px;} #contact-reports .contact-reports-inner .contact-block{position: relative; font-size:12px;} #contact-reports .contact-reports-inner .contact-block:not(:last-child)::after{content: ""; display: block; width: 100%; height: 1px; margin: 14px auto 0; border-bottom: 1px dashed var(--color-secondary-border);} #contact-reports .contact-reports-inner .contact-block + .contact-block{padding-top: 0;} #contact-reports .contact-header{display: flex; align-items: center; gap: 10px;} #contact-reports .contact-header .contact-txt{display: flex; flex-direction: column; font-size:16px;} .contact-text{font-size:16px;} /* #contact-reports .contact-icon{width: 18px; height: 18px; vertical-align: middle;} */ #contact-reports .contact-title{font-weight: 700;} #contact-reports .contact-hours{color: var(--color-secondary-text); font-size:12px;} #contact-reports .contact-phone1, #contact-reports .contact-phone2{font-weight: 700; text-decoration: none;} #contact-reports .contact-phone1{color: var(--color-secondary);} #contact-reports .contact-phone2{color: var(--color-primary);} .contact-con{display:flex; justify-content: space-between; align-items: center; padding-left: 30px;} .contact-block:last-child .contact-con{margin-top:16px; position: relative;} .contact-info{display:flex; gap:16px; align-items: center; justify-content: space-between;} .contact-info-txt{font-size:16px;} .contact-con .contact-txt::before{content:''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; background: url(../../images/main/ico-headphones.svg) center/cover;} .contact-reports-inner .contact-block:nth-of-type(2) .contact-con .contact-txt::before{background: url(../../images/main/ico-alert-triangle.svg) center/cover;} @media (max-width: 1199px){ .contact-txt{width:100%;} } @media (min-width: 1190px){ .contact-txt{width:100%;} } @media (max-width: 1024px){ #contact-reports .contact-reports-inner{padding: 40px 20px;} } @media (max-width: 720px){ .contact-reports-inner{height: auto !important;} #contact-reports .contact-reports-inner{padding: 40px 20px;} } /* ----------------------------- 팝업존 섹션 ------------------------------ */ #popup-zone, #popup-zone .pz-inner, #popup-zone .pz-viewport{min-width:0; height:100%;} #popup-zone .pz-inner{position:relative; --pz-shadow:0 2px 6px rgba(0,0,0,.15); display:flex; flex-direction:column; height:100%; min-height:0;} #popup-zone .pz-toolbar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px} #popup-zone .pz-controls{display:flex; align-items:center; gap:16px} #popup-zone .pz-counter{min-width:72px; text-align:center; font-weight:700;} #popup-zone .pz-current{color:var(--color-primary)} .pz-btn{min-width:14px; min-height:14px; cursor:pointer; border:0; position: relative;} .pz-btn::before{content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); background: transparent;}/* 모바일 클릭 높이 44px 이상 대응용 */ #popup-zone .ico-prev-sm{background:center/contain no-repeat url(../../images/main/btn-slide-arrow-prev.svg);} #popup-zone .ico-next-sm{background:center/contain no-repeat url(../../images/main/btn-slide-arrow-next.svg);} #popup-zone .ico-prev-lg{background:center/12px 24px no-repeat url(../../images/main/btn-slide-arrow-prev.svg);} #popup-zone .ico-next-lg{background:center/12px 24px no-repeat url(../../images/main/btn-slide-arrow-next.svg);} #popup-zone .ico-play{background:center/contain no-repeat; background-image:url(../../images/main/btn-slide-control-play.svg);} #popup-zone .ico-pause{background:center/contain no-repeat; background-image:url(../../images/main/btn-slide-control-pause.svg);} #popup-zone .ico-grid{background:center/contain no-repeat; background-image:url(../../images/main/btn-popup-collection.svg);} #popup-zone .pz-viewport{position:relative; overflow:hidden; flex:1 1 auto; min-height:0; clip-path:inset(0);} #popup-zone .pz-slides{height:100%; display:flex; gap:0!important; margin:0; padding:0; list-style:none; width:100%; transition:transform .4s ease; will-change:transform; backface-visibility:hidden;} #popup-zone .pz-slide{aspect-ratio: 12 / 10; height:100%; background-color: var(--color-secondary-background); flex:0 0 100%; max-width:100%; box-sizing:border-box; border-radius:10px; overflow:hidden;} #popup-zone .pz-slide img{width: 100%; height:100%; object-fit:cover;} #popup-zone .pz-arrow{position:absolute; top:60%; transform:translateY(-50%); width:44px; height:44px; background-color: var(--color-background); border: 1px solid var(--color-border); background-size: 7px 14px; border-radius:50%; box-shadow:var(--pz-shadow); cursor:pointer; z-index:3;} #popup-zone .pz-prev{left:-12px;} #popup-zone .pz-next{right:-12px;} @media (min-width:1024px){ #popup-zone .pz-inner{display:block;} #popup-zone .pz-viewport{height:220px;} } @media (max-width:1024px){ #popup-zone .pz-inner{display:block; height:100%;} .pz-btn{min-width: 20px; min-height: 20px;} #popup-zone .pz-viewport{height:220px;} } @media (max-width:1199px){ #popup-zone .pz-viewport{height:254px;} } /* ----------------------------- 모달 ------------------------------ */ .pz-modal[hidden]{display:none} .pz-modal{position:fixed; inset:0; z-index:1000} .pz-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45)} .pz-modal-body{position:relative; max-width:960px; margin:5vh auto; background:var(--color-background); border-radius:14px; overflow:hidden} .pz-modal-header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--color-border)} .pz-modal-header h3{margin: 0;} .pz-modal-content{padding:16px; max-height:70vh; overflow:auto; background:var(--color-background)} .pz-history{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; list-style:none; margin:0; padding:0} .pz-history li,.pz-history a,.pz-history img{position:static; float:none} .pz-history a{display:block; border:1px solid var(--color-border); border-radius:10px; overflow:hidden; background:var(--color-background)} .pz-history img{display:block; width:100%; aspect-ratio: 9 / 9; object-fit:cover} .pz-modal .ico-close{display: inline-block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; background-image: url('../../images/main/btn-popup-close.svg'); background-color: transparent;} html.is-locked{overflow: hidden; padding-right: var(--bar-w, 0);} html.is-locked body{position: fixed; width: 100%;} .pz-modal, .pz-modal-content{ overscroll-behavior: contain; } @media (max-width:1024px){ .pz-modal-body{margin:5vh 16px;} .pz-history{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .pz-history{grid-template-columns:repeat(2,1fr)} .pz-modal .ico-close{width: 36px; height: 36px; background-size: 18px 18px;} } /* 원본 css */ .bn_wrap{/*margin:0 30px 0 250px;*/ margin:0 auto; height:50px; max-width:1200px; padding:0 40px;} .bn_wrap .slick-slide{/*margin:-7px 10px 0 10px;*/ margin:0 10px;} .bn_wrap .slick-arrow{position: absolute; width:15px; height:27px; top:13px; font-size:0;} .bn_wrap .slick-next{/*left:210px;*/ right:0; background:url(../../images/icon/icon_f_next.png) no-repeat center;} .bn_wrap .slick-prev{left:0; background:url(../../images/icon/icon_f_prev.png) no-repeat center;} .main{margin-top:125px; position:relative;} .main .main-title{width:100%; max-width:1200px; margin:0 auto; text-align:right; padding-top:60px;} .main .main-title .txt_pc{display:block;} .main .main-title .txt_m{display:none;} div.scrollDown{} div.scrollDown a{display:block;position:relative;height:110px;} div.scrollDown a div{width:31px;height:16px;position:absolute;left:50%;margin-left:-15.5px; background:url(../../images/icon/scrolldown_arrow.png) no-repeat center;animation: scrollDown 1s infinite ease;} div.scrollDown a div:nth-child(1){top:0px;display:none;} div.scrollDown a div:nth-child(2){bottom:12px;animation-delay:-0.5s;} div.scrollDown a div:nth-child(3){bottom:5px;animation-delay:-0.75s;} div.scrollDown p{text-align:center;font-size:14px;} div.scrollDown a:before{content:"";display:block;width:1px;height:100px;margin: 0 auto;/*background:url(../../images/scrolldown_line.png);*/} div.scrollDown a:before{background:url(../../images/scrolldown_line2.png);} .popup_wrap{position: fixed; z-index:1000; top:0px; bottom:0px; left:0; right:0; width:100%; background: rgba(51, 51, 51, 0.4); padding:0;display:none; } .divpop{width:auto; height: auto; position: fixed; z-index: 10000; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);padding:0;} /* .divpop{width:25%; height: 60%; position: fixed; z-index: 10000; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);padding:0;} */ .divpop img{width:100%;height:auto;} .divpop_sub{padding:0;height: calc(470px - 50px);overflow-y: auto;} .popupzone{display:none;} .popup_title{font-size:1.25rem; line-height:22px; padding:5px 0 20px 0; font-weight: 700;} .popup_tab:after{display:block; clear:both; height:0px; margin-top:-1px; content:'';} .popup_tab li{float:left; margin:0 5px 5px 0;} .popup_tab li a{display:block; width:10px; height:10px; font-size:0; background:#ccc; border-radius:10px;} .popup_tab li.popup_select a{background:#ffdd21; width:30px;} .popup_li_hide { display:none; } .pc_popup_footer {background:#fff; position:static; bottom:0; width:100%; padding:10px 0; text-align:center;} .layer_img[usemap]{ border:none; height:inherit; max-width:100%; width:auto;} .banner_zone{width:100%; position: relative; margin:30px 0; background:#fff; float:left;} .banner_zone h3{position:absolute; line-height:25px; left:30px; top:0; letter-spacing: -1px; font-size:0;} /* @media (max-width:768px){ .divpop{height: 65%; position: fixed; z-index: 10000; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);padding:0;} .divpop_sub{padding:0; overflow-y: auto;} .pop_today{width: 18px; height: 18px;} body{font-size: 1.6rem;} } */ @media (max-width:1024px){ .divpop{width:30%;} .divpop_sub{height:auto;} } @media (max-width:768px){ .divpop{width:40%;} .divpop_sub{height:auto;} } @media (max-width:450px){ .divpop{width:60%;} .divpop_sub{height:auto;} } /* @media (max-width:640px){ */ /* .divpop{width:70%; height: 60%; position: fixed; z-index: 10000; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);padding:0;} */ /* .divpop_sub{padding:0;height: calc(470px - 50px);overflow-y: auto;} */ /* body{font-size: 1rem;} */ /* } */ @media all and (max-width: 670px){ .banner_zone{margin:30px 0; display:none;} } /* 원본 css */