@charset "UTF-8"; @font-face { font-family: "NanumSquare"; src: url(/common/kr/fonts/NanumSquareEB.eot); src: url(/common/kr/fonts/NanumSquareEB.eot?#iefix) format("embedded-opentype"), url(/common/kr/fonts/NanumSquareEB.woff2) format("woff2"), url(/common/kr/fonts/NanumSquareEB.woff) format("woff"), url(/common/kr/fonts/NanumSquareEB.ttf) format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "NanumSquare"; src: url(/common/kr/fonts/NanumSquareB.eot); src: url(/common/kr/fonts/NanumSquareB.eot?#iefix) format("embedded-opentype"), url(/common/kr/fonts/NanumSquareB.woff2) format("woff2"), url(/common/kr/fonts/NanumSquareB.woff) format("woff"), url(/common/kr/fonts/NanumSquareB.ttf) format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "NanumSquare"; src: url(/common/kr/fonts/NanumSquareR.eot); src: url(/common/kr/fonts/NanumSquareR.eot?#iefix) format("embedded-opentype"), url(/common/kr/fonts/NanumSquareR.woff2) format("woff2"), url(/common/kr/fonts/NanumSquareR.woff) format("woff"), url(/common/kr/fonts/NanumSquareR.ttf) format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "NanumSquare"; src: url(/common/kr/fonts/NanumSquareL.eot); src: url(/common/kr/fonts/NanumSquareL.eot?#iefix) format("embedded-opentype"), url(/common/kr/fonts/NanumSquareL.woff2) format("woff2"), url(/common/kr/fonts/NanumSquareL.woff) format("woff"), url(/common/kr/fonts/NanumSquareL.ttf) format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "GmarketSansBold"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); font-weight: normal; font-style: normal; } .f-bold { font-weight: 700; } .f-dp1 { font-weight: 800; font-size: 80rem; line-height: 140%; letter-spacing: -.02em; } .f-dp2 { font-weight: 800; font-size: 56rem; line-height: 150%; letter-spacing: -.02em; } .f-hd1 { font-weight: 800; font-size: 48rem; line-height: 150%; letter-spacing: -.02em; } .f-tit1 { font-weight: 800; font-size: 40rem; line-height: 155%; letter-spacing: -.01em; } .f-tit2 { font-weight: 700; font-size: 32rem; line-height: 160%; letter-spacing: -.01em; } .f-tit3 { font-weight: 700; font-size: 24rem; line-height: 170%; letter-spacing: -.02em; } .f-tit4 { font-weight: 800; font-size: 20rem; line-height: 170%; letter-spacing: -.02em; } .f-body1-r { font-weight: 400; font-size: 19rem; line-height: 180%; letter-spacing: -.01em; } .f-body1-b { font-weight: 700; font-size: 19rem; line-height: 180%; letter-spacing: -.01em; } .f-body2-r { font-weight: 400; font-size: 17rem; line-height: 170%; letter-spacing: -.01em; } .f-body2-b { font-weight: 700; font-size: 17rem; line-height: 170%; letter-spacing: -.01em; } .f-body3-r { font-weight: 400; font-size: 16rem; line-height: 170%; letter-spacing: -.02em; } .f-body3-b { font-weight: 700; font-size: 16rem; line-height: 170%; letter-spacing: -.02em; } .f-caption-r { font-weight: 400; font-size: 14rem; line-height: 160%; letter-spacing: -.02em; } .f-caption-b { font-weight: 700; font-size: 14rem; line-height: 160%; letter-spacing: -.02em; } @media all and (max-width: 1024px) { .f-dp1 { font-weight: 800; font-size: 40rem; line-height: 135%; letter-spacing: -.02em; } .f-dp2 { font-weight: 800; font-size: 32rem; line-height: 140%; letter-spacing: -.02em; } .f-hd1 { font-weight: 800; font-size: 26rem; line-height: 145%; letter-spacing: -.02em; } .f-tit1 { font-weight: 800; font-size: 23rem; line-height: 150%; letter-spacing: -.01em; } .f-tit2 { font-weight: 700; font-size: 20rem; line-height: 155%; letter-spacing: -.01em; } .f-tit3 { font-weight: 700; font-size: 18rem; line-height: 160%; letter-spacing: -.01em; } .f-tit4 { font-weight: 800; font-size: 16rem; line-height: 160%; letter-spacing: -.01em; } .f-body1-r { font-weight: 400; font-size: 15rem; line-height: 170%; letter-spacing: -.01em; } .f-body1-b { font-weight: 700; font-size: 15rem; line-height: 170%; letter-spacing: -.01em; } .f-body2-r { font-weight: 400; font-size: 14rem; line-height: 170%; letter-spacing: -.01em; } .f-body2-b { font-weight: 700; font-size: 14rem; line-height: 170%; letter-spacing: -.01em; } .f-body3-r { font-weight: 400; font-size: 13rem; line-height: 165%; letter-spacing: -.01em; } .f-body3-b { font-weight: 700; font-size: 13rem; line-height: 165%; letter-spacing: -.01em; } .f-caption-r { font-weight: 400; font-size: 12rem; line-height: 160%; letter-spacing: -.01em; } .f-caption-b { font-weight: 700; font-size: 12rem; line-height: 160%; letter-spacing: -.01em; } } html { width: 100%; height: 100%; font-size: .052vw; } body { position: relative; height: 100%; font-family: "NanumSquare", sans-serif; font-weight: 400; font-size: 16rem; color: #465466; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word; line-height: 1; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; overflow-x: hidden; } @media all and (max-width: 1024px) { body { width: 100%; font-size: 13rem; } } body, header, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td, a, input, span, section, article, figure { margin: 0; padding: 0; box-sizing: border-box; font-family: "NanumSquare", sans-serif; word-break: keep-all; } ul, ol, li { list-style: none; } img, fieldset { border: none; vertical-align: top; } em { font-style: normal; } legend, caption { position: absolute; top: 0; left: 0; z-index: -1; color: transparent; width: 0; height: 0; text-indent: -9999px; } textarea, button { vertical-align: middle; font-family: "NanumSquare", sans-serif; } textarea { color: #222; resize: none; overflow-y: auto; -ms-overflow-style: auto; } select { font-family: "NanumSquare", sans-serif; font-weight: 400; vertical-align: middle; letter-spacing: -.75px; border: 0; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } select::-ms-expand { display: none; } input, textarea { vertical-align: middle; border: 0; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } option { padding: 10px; } /* input[type="text"], input[type="password"] {outline: 0;} */ input[type=radio], input[type=checkbox] { padding: 0; height: auto; font-size: 18px; border: 0; box-shadow: none; } input[type=text]::-ms-clear { display: none; } input::-moz-placeholder { font-family: "NanumSquare", sans-serif; } input::placeholder { font-family: "NanumSquare", sans-serif; } input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input:focus::-moz-placeholder { color: transparent; } input:focus::placeholder { color: transparent; } textarea::-moz-placeholder { font-family: "NanumSquare", sans-serif; } textarea::placeholder { font-family: "NanumSquare", sans-serif; } textarea:focus::-moz-placeholder { color: transparent; } textarea:focus::placeholder { color: transparent; } a { text-decoration: none; color: inherit; } aa:hover, aa:focus, aa:active { text-decoration: none; } table { width: 100%; border-collapse: collapse; table-layout: fixed; } button { overflow: visible; padding: 0; margin: 0; font-size: 14px; white-space: nowrap; border: none; cursor: pointer; background: none; } button:active { outline: none; } button::-moz-focus-inner { padding: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; position: relative; } .bg-navy { background-color: #2b29af; } .bg-deepnavy { background-color: #211f86; } .bg-gray { background-color: #eceff2; } header { position: fixed; left: 0; top: 0; width: 100%; height: 104rem; background-color: #fff; z-index: 100; transition: top .5s ease; } header .skip { width: 100vw; height: 30px; background: red; text-align: center; display: flex; align-items: center; justify-content: center; color: #fff; position: fixed; top: -40px; } header .skip:focus { top: 0; } header.main { background: 0; } header.main nav { border-bottom: 1px solid rgba(255, 255, 255, .25); } header.main nav .gnb .one-depth { color: #fff; } header.main h1 .logo { display: block; width: 100%; height: 100%; background: url("/common/kr/images/logo-main.svg") no-repeat center center/100% auto; } header.main .util-area .lang-area .btn-lang { background: url("/common/kr/images/icon-language-wht.svg") no-repeat center center/100% auto; } header.main .util-area .all-menu-area .btn-all-menu { background: url("/common/kr/images/btn-all-menu-wht.svg") no-repeat center center/100% auto; } @media all and (max-width: 1024px) { header.main { height: 70rem; } header.main h1 { display: block; width: 150rem; height: 35rem; left: 20rem; top: 20rem; } header.main.mouse-hover { background: 0; } header.main nav:after { display: none; } header.main nav::before { display: none; } header.main.mouse-hover nav:after { display: none; } header.main.mouse-hover h1 .logo { background: url("/common/kr/images/logo-main.svg") no-repeat center center/100% auto; } header.main.mouse-hover .util-area .all-menu-area .btn-all-menu { background: url("/common/kr/images/btn-all-menu-wht.svg") no-repeat center center/100% auto; } } header.hide { top: -104rem; } header.mouse-hover { background: #fff; } header.mouse-hover nav .gnb .one-depth { color: #000; } header.mouse-hover nav:after { display: block; } header.mouse-hover h1 .logo { display: block; width: 100%; height: 100%; background: url("/common/kr/images/logo-color.svg") no-repeat center center/100% auto; } header.mouse-hover .util-area .lang-area .btn-lang { background: url("/common/kr/images/icon-language-black.svg") no-repeat center center/100% auto; } header.mouse-hover .util-area .all-menu-area .btn-all-menu { background: url("/common/kr/images/btn-all-menu-black.svg") no-repeat center center/100% auto; } header .header-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; overflow: visible; } header h1 { position: absolute; left: 40rem; top: 28rem; width: 212rem; height: 48rem; z-index: 1; } header h1 .logo { display: block; width: 100%; height: 100%; background: url("/common/kr/images/logo-color.svg") no-repeat center center/100% auto; } header nav { position: relative; display: flex; justify-content: center; width: 100%; height: 100%; } header nav .gnb-hover-bar { display: block; content: ""; position: absolute; left: 0; right: 0; top: 102rem; width: 94rem; height: 2px; transform: translateX(-50%); opacity: 0; background-color: #1c222a; z-index: 1; } header nav .gnb { display: flex; justify-content: center; gap: 64rem; height: 100%; z-index: 1; } header nav .gnb > li { height: 104rem; } header nav .gnb > li.active .two-pack { visibility: visible; } /* header nav .gnb > li.active .two-pack > .swiper-wrapper >.swiper-slide {padding-top: 25rem;} */ header nav .gnb > li.active .two-pack > .swiper-wrapper .swiper-slide .two-depth { transform: translateY(0); } header nav .gnb .one-depth { position: relative; display: flex; align-items: center; justify-content: center; height: 104rem; color: #000; font-size: 24rem; } header nav .gnb .two-pack { visibility: hidden; position: absolute; left: 50%; transform: translateX(-50%); top: 104rem; display: flex; justify-content: center; gap: 48rem; width: 100vw; height: 74rem; overflow: visible; background-color: #fff; border-top: 1px solid #eceff2; } header nav .gnb .two-pack.active { height: 165rem; } header nav .gnb .two-pack > .swiper-wrapper { justify-content: center; position: unset; overflow: visible; height: 74rem; } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide { position: unset; width: auto; padding: 0 24rem; font-size: 19rem; } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide.active .thr-pack { visibility: visible; transform: translateX(-50%); } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide.active .thr-pack .swiper-wrapper > .swiper-slide { transform: translateY(0); } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide.active .two-depth::before, header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide:hover .two-depth::before { width: 100%; opacity: 1; } header nav .gnb .two-pack .two-depth { display: flex; align-items: center; height: 100%; color: #000; white-space: nowrap; transform: translateY(-10%); transition: transform .3s ease; } header nav .gnb .two-pack .two-depth::before { display: block; content: ""; position: absolute; left: 50%; transform: translate(-50%); bottom: 0; width: 0%; height: 2px; background-color: #1c222a; opacity: 0; transition: opacity .3s ease-out, width .3s ease-out; } header nav .gnb .two-pack .thr-pack { visibility: hidden; position: absolute; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; padding: 32rem 0; width: 100vw; background-color: #fff; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper { justify-content: center; text-align: center; gap: 56rem; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper .swiper-slide { transform: translateY(-10%); transition: transform .3s ease; width: auto; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper .swiper-slide.active .thr-depth { color: #fff; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper .swiper-slide.active .thr-depth::before { background-color: #1c222a; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper .swiper-slide.active .thr-depth::before, header nav .gnb .two-pack .thr-pack > .swiper-wrapper .swiper-slide:hover .thr-depth::before { opacity: 1; } header nav .gnb .two-pack .thr-pack .thr-depth { position: relative; color: #000; white-space: nowrap; color: #1c222a; font-size: 16rem; } header nav .gnb .two-pack .thr-pack .thr-depth::before { display: block; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14rem 24rem; width: 100%; height: 100%; background-color: #f6f7f9; border-radius: 100rem; opacity: 0; z-index: -1; transition: opacity .3s ease-out; } header .util-area { position: absolute; right: 40rem; top: 32rem; display: flex; gap: 20rem; z-index: 1; } header .util-area .lang-area { position: relative; } header .util-area .lang-area .btn-lang { width: 40rem; height: 40rem; border-radius: 800rem; transition: all ease-in-out .15s; background: url("/common/kr/images/icon-language-black.svg") no-repeat center center/100% auto; } header .util-area .lang-area .btn-lang:hover { background: url("/common/kr/images/icon-language-black.svg") no-repeat center center/100% auto #f6f7f9; } header.main .util-area .lang-area .btn-lang:hover { background: url("/common/kr/images/icon-language-wht.svg") no-repeat center center/100% auto rgba(0, 0, 0, .4); } header .util-area .lang-area .lang-pop { position: absolute; left: 50%; top: 44rem; transform: translate(-50%); display: none; padding: 12rem 24rem; background-color: #1c222a; border-radius: 100rem; } header .util-area .lang-area .lang-pop .lang-pop-inner { display: flex; align-items: center; gap: 24rem; } header .util-area .lang-area .lang-pop .btn-lang-list { color: #fff; opacity: .7; font-size: 16rem; } header .util-area .lang-area .lang-pop .btn-lang-list.active { opacity: 1; } header .util-area .all-menu-area .btn-all-menu { width: 40rem; height: 40rem; border-radius: 800rem; transition: all ease-in-out .15s; background: url("/common/kr/images/btn-all-menu-black.svg") no-repeat center center/100% auto; } header .util-area .all-menu-area .btn-all-menu:hover { background: url("/common/kr/images/btn-all-menu-black.svg") no-repeat center center/100% auto #f6f7f9; } header.main .util-area .all-menu-area .btn-all-menu:hover { background: url("/common/kr/images/btn-all-menu-wht.svg") no-repeat center center/100% auto rgba(0, 0, 0, .4); } @media all and (max-width: 1024px) { header nav .gnb > li.active .two-pack > .swiper-wrapper >.swiper-slide.has-thr {padding-top: 25rem;} header nav .gnb > li.active .two-pack > .swiper-wrapper .swiper-slide.has-thr .two-depth { transform: translateY(0); width: 80vw; height: 30rem; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } header nav .gnb .one-depth span {width: 80vw; white-space: normal; text-overflow: ellipsis; display: -webkit-box; height: 30rem; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} header .util-area { position: absolute; right: 20rem; top: 24rem; display: flex; gap: 20rem; z-index: 1; height: 32rem; } header .util-area .lang-area .btn-lang { opacity: 0; display: none; } header .util-area .all-menu-area .btn-all-menu { width: 32rem; height: 32rem; background: url("/common/kr/images/btn-all-menu-black.svg") no-repeat center center/100% auto; } header .util-area .all-menu-area .btn-all-menu:hover { background: url("/common/kr/images/btn-all-menu-black.svg") no-repeat center center/100% auto; } /* header nav .gnb .two-pack {display: flex; align-items: center; height: 90rem; margin-top: 0 !important; background: pink;} */ header nav .gnb .two-pack .two-depth {overflow: hidden;} } header .all-menu-pop { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; padding: 20rem 40rem; background: #eceff2; /* background: url("/common/kr/images/img-all-menu-bg.jpg") no-repeat center center/cover; */ color: #000; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; } header .all-menu-pop .logo { position: absolute; top: 28rem; left: 40rem; width: 212rem; } @media all and (max-width: 1024px) { header .all-menu-pop .logo { top: 20rem; left: 20rem; width: 150rem; height: 35rem; } } header .all-menu-pop .all-menu-wrap { width: 100%; height: 100%; padding: 134rem 0 24rem; background: url("/common/kr/images/img-all-menu-wrap-bg.png") no-repeat top left/100% 100%; border-radius: 24rem; } header .all-menu-pop .all-menu-wrap .scroll-area { width: 100%; height: 100%; padding: 0 195rem 0 155rem; overflow-y: auto; } header .all-menu-pop .all-menu-wrap .scroll-area::-webkit-scrollbar { width: 6rem; } header .all-menu-pop .all-menu-wrap .scroll-area::-webkit-scrollbar-thumb { background-color: #8797ad; border-radius: 20rem 20rem 20rem 20rem; } header .all-menu-pop .all-menu-wrap .scroll-area::-webkit-scrollbar-track { background-color: #eceff2; border-radius: 20rem 20rem 20rem 20rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap { display: flex; justify-content: space-between; margin-bottom: 80rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div { width: 250rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .one-depth { padding-bottom: 24rem; border-bottom: 1px solid #e2e6eb; font-size: 32rem; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .one-depth { position: relative; padding: 20rem 0; cursor: pointer; font-size: 20rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .one-depth::after { content: ""; position: absolute; top: 50%; right: 0; display: block; width: 16rem; height: 16rem; background: url("/common/kr/images/ico-acco.svg") no-repeat center center/cover; transform: translateY(-50%); } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .one-depth.on::after { transform: translateY(-50%) rotate(180deg); } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .f-body2-b { font-size: 15rem !important; } } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth { margin-top: 24rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li { margin-bottom: 12rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .f-body2-b { transition: color .3s ease; font-size: 19rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li:hover .f-body2-b { color: #2995e0; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .f-body2-b:hover { color: initial; } } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth { margin: 12rem 0 24rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth li { margin-bottom: 12rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth li a { display: inline-block; font-size: 16rem; padding: 10rem 20rem; background-color: #f6f7f9; color: #465466; font-weight: 400; border-radius: 50rem; transition: background .3s ease; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth li a:hover { background-color: #eceff2; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth { margin: 20rem 0 24rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth li a { padding: 8rem 16rem; font-size: 13rem; } } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth li:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth li { margin-bottom: 12rem; } } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .three-depth { display: none; } } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li:last-child { margin-bottom: 0; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li:last-child .three-depth { margin-bottom: 0; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li { margin-bottom: 16rem; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .has-three { position: relative; } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .has-three::after { content: ""; position: absolute; top: 50%; right: 0; width: 12rem; height: 12rem; background: url("/common/kr/images/ico-acco-gray.svg") no-repeat center center/cover; transform: translateY(-50%); } header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth > li .has-three.on::after { transform: translateY(-50%) rotate(180deg); } } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div .two-depth { display: none; margin: 12rem 0 24rem; } } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap .menu-div { width: 100%; } } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .menu-wrap { flex-wrap: wrap; } } header .all-menu-pop .all-menu-wrap .scroll-area .mob-lang-btn-wrap { display: none; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area .mob-lang-btn-wrap { display: flex; gap: 8rem; } header .all-menu-pop .all-menu-wrap .scroll-area .mob-lang-btn-wrap a { padding: 8rem 16rem; color: #5a6d85; background-color: #f6f7f9; border-radius: 50rem; } header .all-menu-pop .all-menu-wrap .scroll-area .mob-lang-btn-wrap a.active { background-color: #000; color: #fff; } header .all-menu-pop .all-menu-wrap .scroll-area .mob-lang-btn-wrap a .kor { margin-right: 8rem; } } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap .scroll-area { padding: 0 20rem; } } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-wrap { padding: 80rem 0 25rem; } } header .all-menu-pop .all-menu-close { position: absolute; top: 50rem; right: 76rem; width: 48rem; height: 48rem; background: url("/common/kr/images/btn-close.svg") no-repeat center center/cover; border-radius: 50%; transition: background .3s ease; } header .all-menu-pop .all-menu-close:hover { background: #f6f7f9 url("/common/kr/images/btn-close.svg") no-repeat center center/cover; } @media all and (max-width: 1024px) { header .all-menu-pop .all-menu-close { top: 24rem; right: 20rem; width: 32rem; height: 32rem; } } @media all and (max-width: 1024px) { header .all-menu-pop { padding: 0; background: #fff; } } header .all-menu-pop.active { opacity: 1; visibility: visible; } @media all and (max-width: 1024px) { header { height: 120rem; } header.hide { top: -79rem; } header h1 { display: none; } header nav { display: block; } header nav::before { content: ""; width: 100vw; height: 1px; display: block; background: #eceff2; position: absolute; left: 0; top: 79rem; z-index: 2; } header nav .back { display: block; width: 32rem; height: 32rem; background: url("/common/kr/images/ico-go-back.svg") no-repeat; background-size: cover; position: absolute; top: 20rem; left: 20rem; z-index: 2; } header nav .gnb-hover-bar { display: none; } header nav .gnb { display: block; } header nav .gnb > li { display: none; height: auto; } header nav .gnb > li.active { display: block; } header nav .gnb .one-depth { font-size: 18rem; height: auto; display: block; margin-top: 24rem; margin-left: 20rem; } header nav .gnb .two-pack { width: 100%; margin-top: 25rem; position: unset; transform: translateX(0); gap: 0; padding: 0; border-top: 0; } header nav .gnb .two-pack > .swiper-wrapper { justify-content: unset; position: relative; height: 54rem; padding-left: 8rem; } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide { font-size: 15rem; padding: 0 12rem; } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide.has-thr { height: 79rem; font-size: 18rem; margin-top: -24rem; } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide.has-thr .two-depth::before { display: none; } header nav .gnb .two-pack > .swiper-wrapper > .swiper-slide.has-thr .two-depth:hover { border: 0; } header.android nav .gnb .two-pack .thr-pack { top: 79rem; } header nav .gnb .two-pack .thr-pack { left: 0; transform: translateX(0) !important; padding: 0; align-items: center; height: 69rem; top: 54rem; } header nav .gnb .two-pack .thr-pack::after {content: ""; width: 200vw; height: 69rem; background: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block;} header nav .gnb .two-pack .thr-pack > .swiper-wrapper { justify-content: unset; height: 100%; gap: 0; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper > .swiper-slide { padding: 0 12rem; font-size: 13rem; height: 100%; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper > .swiper-slide.active .thr-depth { padding: 0 16rem; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper > .swiper-slide.active .thr-depth::after { content: ""; width: 100%; height: 37rem; background: #1c222a; display: block; position: absolute; bottom: 17rem; left: 0; z-index: -1; border-radius: 80rem; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper > .swiper-slide .thr-depth { height: 100%; display: flex; align-items: center; font-size: 13rem; } header nav .gnb .two-pack .thr-pack > .swiper-wrapper > .swiper-slide .thr-depth::before { display: none; } } footer { border-top: 1px solid #e2e6eb; } footer .footer-wrapper { padding: 48rem 40rem; } footer .footer-wrapper .divide-box { display: flex; justify-content: space-between; } footer .footer-wrapper .util-link-area { display: flex; gap: 32rem; } footer .footer-wrapper .util-link-area .util-link { color: #465466; } footer .footer-wrapper .util-link-area .util-link:hover {text-decoration: underline;} footer .footer-wrapper .util-link-area .util-link.personnel-policy { color: #000; } footer .footer-wrapper .company-info-area { display: flex; -moz-column-gap: 12rem; column-gap: 12rem; row-gap: 6rem; flex-wrap: wrap; margin-top: 24rem; max-width: 790rem; } footer .footer-wrapper .company-info-area .list { color: #5a6d85; } footer .footer-wrapper .copyright { margin-top: 24rem; } footer .footer-wrapper .site-group { display: flex; -moz-column-gap: 24rem; column-gap: 24rem; } footer .footer-wrapper .site-group .form-select { width: 240rem; } @media all and (max-width: 1024px) { footer .footer-wrapper { padding: 32rem 20rem; } footer .footer-wrapper .company-info-area { display: block; } footer .footer-wrapper .company-info-area .list + .list { margin-top: 4rem; } footer .footer-wrapper .company-info-area .list:nth-of-type(2) { margin-top: 16rem; } footer .footer-wrapper .company-info-area .list:nth-of-type(4) { margin-top: 16rem; } footer .footer-wrapper .util-link-area { gap: 20rem; } footer .footer-wrapper .divide-box { display: block; } footer .footer-wrapper .copyright { margin-top: 32rem; } footer .footer-wrapper .site-group { display: block; margin-top: 64rem; } footer .footer-wrapper .site-group .form-group + .form-group { margin-top: 12rem; } footer .footer-wrapper .site-group .form-select { width: calc(100% - 20rem); } } html body #wrap { width: 100%; padding: 320rem 0 160rem; } html body #wrap.main { padding: 0; position: relative; } @media all and (max-width: 1024px) { html body #wrap { padding: 197rem 0 80rem; } html body #wrap.etc { padding-top: 144rem; } } html body .inner { width: 910rem; margin: 0 auto; } html body .inner.wide { width: 1220rem; } @media all and (max-width: 1024px) { html body .inner.wide { width: calc(100% - 40rem); } } html body .inner.full { width: 100%; } html body .inner.full .top-area { width: 910rem; margin: 0 auto; } @media all and (max-width: 1024px) { html body .inner.full .top-area { width: 100%; } } @media all and (max-width: 1024px) { html body .inner { width: calc(100% - 40rem); } } html body.stop-scroll { overflow: hidden; } @media all and (max-width: 1024px) { html { font-size: .13vw; } } @media all and (max-width: 599px) { html { font-size: .256vw; } } .top-area { position: relative; } .top-area .page-tit-area { display: flex; justify-content: space-between; } .top-area .page-tit-area .page-tit { color: #000; width: calc(100% - 50rem); } .top-area .page-tit-area .page-tit span { display: block; } .top-area .tab-div { margin-top: 120rem; } .top-area .tab-div a { position: relative; margin-right: 32rem; padding-bottom: 14rem; color: #000; transition: opacity .3s ease; opacity: .4; } .top-area .tab-div a:last-of-type { margin-right: 0; } .top-area .tab-div a.active { opacity: 1; } .top-area .tab-div a.active::after { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 2rem; background-color: #000; } .top-area .tab-div a:hover { opacity: 1; } @media all and (max-width: 1024px) { .top-area .tab-div a { margin-right: 0; padding-bottom: 10rem; } } @media all and (max-width: 1024px) { .top-area .tab-div { display: flex; justify-content: space-between; max-width: 357rem; margin-top: 64rem; } } #subCon .btn-wrap:first-child { display: flex; -moz-column-gap: 8rem; column-gap: 8rem; margin-top: 16rem; } @media all and (max-width: 1024px) { #subCon .btn-wrap:first-child { flex-direction: column; row-gap: 12rem; } } #subCon .article-info-head { display: flex; justify-content: space-between; align-items: center; margin: 64rem auto 56rem; } #subCon .article-info-head.no-flex { display: block; } #subCon .article-info-head .total-count { color: #465466; } #subCon .article-info-head .total-count .count { font-weight: 700; color: #1c222a; } @media all and (max-width: 1024px) { #subCon .article-info-head .total-count { margin-top: 24rem; } } #subCon .article-info-head .policy-date { display: flex; -moz-column-gap: 30rem; column-gap: 30rem; margin-top: 24rem; } @media all and (max-width: 1024px) { #subCon .article-info-head .policy-date { -moz-column-gap: 16rem; column-gap: 16rem; margin-top: 16rem; } } @media all and (max-width: 1024px) { #subCon .article-info-head { flex-direction: column-reverse; align-items: flex-start; margin: 32rem 0 16rem; } } @media all and (max-width: 599px) { .article-info-head .division { width: 100%; } .article-info-head .division .filter-area { width: 100%; } } .form-group { display: flex; -moz-column-gap: 4rem; column-gap: 4rem; } @media all and (max-width: 599px) { .form-group { justify-content: flex-end; } } .form-group.for-thr .for-flex { display: flex; } .form-group.for-thr .for-flex .form-select { margin-right: 8rem; } @media all and (max-width: 599px) { .form-group.for-thr { flex-wrap: wrap; } .form-group.for-thr > .form-select { width: 100%; } .form-group.for-thr .for-flex { margin-top: 12rem; width: 100%; } .form-group.for-thr .for-flex .form-select { margin-right: 8rem; } } .form-input { position: relative; justify-content: space-between; border-radius: 8rem; } .form-input.srch-input { width: 308rem; background: #f6f7f9; } .form-input.srch-input input { width: calc(100% - 96rem); } @media all and (max-width: 1024px) { .form-input.srch-input { width: 260rem; } } .form-input input { padding: 10rem 16rem; background-color: #f6f7f9; width: 100%; height: 46rem; font-weight: 400; color: #465466; font-size: 16rem; border-radius: 8rem; letter-spacing: -.32rem; } .form-input input::-moz-placeholder { color: rgba(70, 84, 102, .5); } .form-input input::placeholder { color: rgba(70, 84, 102, .5); } @media all and (max-width: 1024px) { .form-input input { font-size: 13rem; } } .form-input .input-btn-wrap { position: absolute; top: 50%; transform: translateY(-50%); right: 5rem; display: inline-flex; align-items: center; -moz-column-gap: 16rem; column-gap: 16rem; padding-right: 16rem; } .form-input .input-btn-wrap .delete-btn { display: none; width: 24rem; height: 24rem; background: url("/common/kr/images/icon-btn-delete.svg") no-repeat center center/24rem; } .form-input .input-btn-wrap .srch-btn { width: 20rem; height: 20rem; background: url("/common/kr/images/icon-btn-search.svg") no-repeat center center/20rem; } .form-input.msg > p { margin-top: 12rem; color: #ce842e; } @media all and (max-width: 1024px) { .form-input.msg > p { margin-top: 12rem; } } .form-text { width: 100%; } .form-text textarea { padding: 10rem 16rem; background: #f6f7f9; box-sizing: border-box; width: 100%; min-height: 240rem; font-weight: 400; border-radius: 8rem; color: #465466; font-size: 16rem; letter-spacing: -.32rem; } .form-text textarea::-moz-placeholder { color: rgba(70, 84, 102, .5); } .form-text textarea::placeholder { color: rgba(70, 84, 102, .5); } .form-text.msg > p { margin-top: 12rem; color: #5a6d85; } @media all and (max-width: 1024px) { .form-text textarea { font-size: 13rem; padding: 16rem; } .form-text.msg > p { margin-top: 8rem; } } .form-select { display: inline-flex; align-items: center; position: relative; min-height: 46rem; background-color: #f6f7f9; border-radius: 8rem; z-index: 1; } .form-select::before { content: ""; display: inline-block; position: absolute; right: 15rem; top: 50%; transform: translateY(-50%); width: 24rem; height: 24rem; background: url("/common/kr/images/icon-arrow-down.svg") no-repeat center center/16rem; z-index: -1; } .form-select.w298 { width: 298rem; } .form-select select { padding: 9rem 42rem 9rem 16rem; width: 100%; height: 100%; color: #465466; } .form-checkbox { position: relative; display: flex; } .form-checkbox input { position: absolute; top: 0; left: 0; width: max(24rem, 15px); height: max(24rem, 15px); opacity: .001; } .form-checkbox input + label { position: relative; display: inline-block; padding-left: max(34rem, 30px); min-height: max(24rem, 15px); width: auto; background: url("../images/ico-chk.svg") left top no-repeat; background-size: contain; z-index: 1; cursor: pointer; } .form-checkbox input:checked + label { background: url("../images/ico-chk-on.svg") no-repeat; background-size: contain; } .accordion { border-top: 1px solid #1c222a; margin-bottom: 48rem; } .accordion li + li { border-top: 1px solid #e2e6eb; } .accordion li .question { width: 100%; padding: 24rem; display: flex; transition: all .7s; position: relative; } .accordion li .question > p { color: #2995e0; } .accordion li .question::after { content: ""; display: block; width: 16rem; height: 16rem; background: url("../images/ico-acco.svg") no-repeat; position: absolute; right: 24rem; transition: all .4s; background-size: contain; } .accordion li .question div { display: flex; color: #1c222a; width: 100%; } .accordion li .question div p:first-of-type { width: 200rem; margin: 0 20rem; text-align: center; padding-top: 4rem; } .accordion li .question div p:last-of-type { transition: all .2s; margin-right: 30rem; width: calc(100% - 230rem); } .accordion li .question:hover div p:last-of-type { color: #2995e0; } .accordion li .answer { padding: 24rem 24rem 48rem 24rem; display: none; } .accordion li .answer > div { display: flex; } .accordion li .answer > div div { margin-left: 20rem; color: #465466; line-height: 170%; } .accordion li.on .question div p:last-of-type { color: #2995e0; } .accordion li.on .question::after { content: ""; transform: rotate(180deg); } @media all and (max-width: 1024px) { .accordion li .question { padding: 24rem 10rem; align-items: initial; } .accordion li .question div { margin: 0 10rem; flex-wrap: wrap; flex-direction: column-reverse; } .accordion li .question div p:first-of-type { width: 100%; text-align: left; margin: 0; margin-top: 4rem; } .accordion li .question div p:last-of-type { transition: all .4s; margin-right: 0; width: 100%; } .accordion li .question::after { right: 10rem; } .accordion li .answer { padding: 0 10rem 24rem 10rem; } .accordion li .answer div div { margin-left: 10rem; } } .form-table { width: 100%; border-top: 1px solid #1c222a; border-bottom: 1px solid #e2e6eb; } .form-table thead tr th { font-size: 14rem; padding: 16rem 24rem; border-right: 1px solid #e2e6eb; color: #465466; text-align: center; border-bottom: 1px solid #8797ad; font-weight: 700; } .form-table thead tr th:last-of-type { border-right: 0; } .form-table tbody tr th, .form-table tbody tr td { font-size: 14rem; padding: 16rem 24rem; border-right: 1px solid #e2e6eb; color: #5a6d85; border-top: 1px solid #e2e6eb; line-height: 160%; } .form-table tbody tr th { text-align: center; font-weight: 400; } .form-table tbody tr td:last-of-type { border-right: 0; } @media all and (max-width: 1024px) { .form-table .table-wrap { overflow-x: auto; } .form-table .table-wrap table { width: 800rem; } } @media all and (max-width: 599px) { .form-table colgroup { display: none; } .form-table .table-wrap table { width: 538rem; } } .btn-wrap .btn { /* disable */ } .btn-wrap .btn.btn-line.disabled { border: 1px solid #e2e6eb; } .btn-wrap .btn.disabled { background-color: #e2e6eb; border: 0; } .btn-wrap .btn.disabled:hover { background-color: #e2e6eb; } .btn-wrap .btn.disabled .txt { color: rgba(0, 0, 0, .4); } .btn-wrap.center { text-align: center; margin-top: 80rem; } @media all and (max-width: 1024px) { .btn-wrap.center { margin-top: 64rem; display: grid; grid-template-columns: 1fr 1fr; -moz-column-gap: 8rem; column-gap: 8rem; } .btn-wrap.center .btn { width: 100%; } } .btn-wrap.vertical { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12rem; } .btn-wrap.for-flex { width: 100%; display: flex; justify-content: space-between; } @media all and (max-width: 599px) { .btn-wrap.for-flex { display: grid; grid-template-columns: 1fr 1fr; -moz-column-gap: 8rem; column-gap: 8rem; } } .btn-wrap.for-thr { display: flex; } @media all and (max-width: 599px) { .btn-wrap.for-thr { display: block; } .btn-wrap.for-thr > div { display: flex; display: grid; grid-template-columns: 1fr 1fr; -moz-column-gap: 8rem; column-gap: 8rem; width: 100%; } .btn-wrap.for-thr .btn { width: 100%; margin-top: 12rem; } } /* 버튼 공통 가이드 */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10rem 40rem; border-radius: 8rem; } .btn .txt { display: flex; align-items: center; position: relative; } .btn.block { display: flex; width: -moz-fit-content; width: fit-content; margin-bottom: 8rem; } .btn.block:last-of-type { margin-bottom: 0; } .btn.link .txt { position: relative; padding-right: 20rem; } .btn.link .txt::after { content: ""; position: absolute; top: 0; right: 0; display: block; width: 20rem; height: 20rem; background: url("/common/kr/images/icon-link-grey.svg") no-repeat center center/cover; transition: background-image .3s ease; } @media all and (max-width: 1024px) { .btn.download { justify-content: space-between; } .btn.link .txt { padding-right: 16rem; } .btn.link .txt::after { width: 16rem; height: 16rem; } } .btn.link:hover .txt::after { background-image: url("/common/kr/images/icon-link.svg"); } /* solid */ .btn-solid { transition: background-color .3s ease; } .btn-solid.bg-navy:hover { /* hover */ background-color: #211f86; } .btn-solid.bg-navy.link .txt::after { background: url(/common/kr/images/icon-link-white.svg) no-repeat center center/cover; } .btn-solid.bg-gray { padding: 10rem 20rem; } .btn-solid.bg-gray:hover { background-color: #e2e6eb; } .btn-solid.bg-gray .txt { color: #000; font-weight: 400; } .btn-solid.tertiary { padding: 9.5rem 20rem; background-color: #eceff2; } .btn-solid.tertiary .txt { color: #000; } .btn-solid.tertiary:hover { background-color: #e2e6eb; } @media all and (max-width: 1024px) { .btn-solid.tertiary { padding: 12.5rem 19rem; } } .btn-solid .txt { color: #fff; } /* line */ .btn-line { padding: 9rem 40rem; } .btn-line.primary { border: 1px solid #5a6d85; } .btn-line.secondary { border: 1px solid #e2e6eb; } .btn-line:hover .txt { color: #000; } .btn-line.has-icon {/* icon */} .btn-line.has-icon .txt:before { margin-right: 10rem; } .btn-line.setting .txt:before { content: ""; display: inline-block; width: 32rem; height: 32rem; background: url("/common/kr/images/@icon-setting.svg") no-repeat center center/32rem; } .btn-line .txt { color: #465466; transition: color .3s ease; } .print-div + .btn-wrap { margin-top: 16rem; } @media all and (max-width: 1024px) { .print-div + .btn-wrap .btn { width: 100%; } .print-div + .btn-wrap .btn + .btn { margin-top: 12rem; } } .btn-wrap.left { text-align: right; margin-top: 48rem; } @media all and (max-width: 1024px) { .btn-wrap.left .btn { width: 100%; } } .attatched-file-area .btn { padding: 12rem 20rem; } .attatched-file-area .btn:after { content: ""; display: inline-block; margin-left: 10rem; width: 20rem; height: 20rem; background: url("/common/kr/images/icon-download-line.svg") no-repeat center center/20rem; } .attatched-file-area .btn.complaint { padding: 9rem 40rem; } .link-wrap { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12rem; } .link-wrap > a { color: #1c222a; } .link-wrap > a:hover .txt { text-decoration: underline; } .link-wrap > a .txt { position: relative; display: inline-block; padding-right: 28rem; } .link-wrap > a .txt::after { content: ""; position: absolute; top: 0; right: 0; display: block; width: 28rem; height: 28rem; background: url("/common/kr/images/icon-link.svg") no-repeat top 0 right 0/cover; } @media all and (max-width: 1024px) { .attatched-file-area .btn.complaint { justify-content: center; width: 100%; } .link-wrap > a .txt::after { right: 0; width: 20rem; height: 20rem; } .link-wrap > a .txt { padding-right: 20rem; } } .link-wrap .no-link { color: #1c222a; } .link-wrap .link-indent-div { padding: 0 0 1rem 24rem; } @media all and (max-width: 1024px) { .link-wrap .link-indent-div { padding: 0 0 1rem 16rem; } } @media all and (max-width: 1024px) { .link-wrap { row-gap: 14rem; } } .board-list-type { margin: 56rem 0 48rem; opacity: 0; transform: translateY(100rem); transition-duration: .7s; transition-delay: .2s; } .board-list-type.active { transform: translateY(0); opacity: 1; } .board-list-type .no-srch-area { opacity: 1; transform: translateY(0); } .board-list-type .unit-title { display: flex; justify-content: space-between; align-items: center; padding: 20rem 0; text-align: center; } .board-list-type .unit-title .number { width: 72rem; } .board-list-type .unit-title .cate { width: 200rem; } .board-list-type .unit-title .title { width: 598rem; } .board-list-type .unit-title.small .title { width: 378rem; } .board-list-type .unit-title .date { width: 108rem; } .board-list-type .unit-title .view { width: 72rem; } .board-list-type .unit-title .writer { width: 108rem; margin-right: 10rem; } .board-list-type .unit-title .state { width: 72rem; margin-left: 35rem; } @media all and (max-width: 1024px) { .board-list-type .unit-title { display: none; } } .board-list-type .unit-div { border-top: 1rem solid #1c222a; } .board-list-type .unit-div .unit { display: flex; padding: 24rem 0; border-bottom: 1rem solid #e2e6eb; text-align: center; } .board-list-type .unit-div .unit .number { width: 72rem; margin-right: 20rem; color: #5a6d85; } .board-list-type .unit-div .unit .number.noti { font-weight: 700; color: #2b29af; } @media all and (max-width: 1024px) { .board-list-type .unit-div .unit .number { width: 36rem; margin-right: 16rem; } } .board-list-type .unit-div .unit .cate { width: 200rem; margin-right: 20rem; display: -webkit-box; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 24rem; } .board-list-type .unit-div .unit .cate + .title-div {width: 379rem !important;} @media all and (max-width: 1024px) { .board-list-type .unit-div .unit .cate { width: 100%; text-align: left; } .board-list-type .unit-div .unit .cate + .title-div {width: 100% !important;} } .board-list-type .unit-div .unit .mobile-flex-div { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 92rem); text-align: center; } .board-list-type .unit-div .unit .mobile-flex-div .title-div { display: flex; width: 598rem; margin-right: 20rem; } .board-list-type .unit-div .unit .mobile-flex-div .title-div .title { display: -webkit-box; margin-right: 4rem; color: #1c222a; text-align: left; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media all and (max-width: 1024px) { .board-list-type .unit-div .unit .mobile-flex-div .title-div .title { margin-right: 0; -webkit-line-clamp: 2; } } .board-list-type .unit-div .unit .mobile-flex-div .title-div .state-div { display: flex; } .board-list-type .unit-div .unit .mobile-flex-div .title-div .state-div .new { display: none; width: 5rem; height: 5rem; margin-right: 6rem; background-color: #ff4338; border-radius: 50%; } .board-list-type .unit-div .unit .mobile-flex-div .title-div .state-div .attachment { display: none; align-self: center; width: 21rem; height: 21rem; background: url("/common/kr/images/icon-attachment.svg") no-repeat 0 0/contain; } .board-list-type .unit-div .unit .mobile-flex-div .title-div .state-div.update .new { display: block; } .board-list-type .unit-div .unit .mobile-flex-div .title-div .state-div.attached .attachment { display: block; } @media all and (max-width: 1024px) { .board-list-type .unit-div .unit .mobile-flex-div .title-div { justify-content: space-between; align-items: center; width: 100%; margin-right: 0; } } .board-list-type .unit-div .unit .mobile-flex-div .info-div { display: flex; align-items: center; color: #5a6d85; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .date { width: 108rem; margin-right: 20rem; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .view { width: 72rem; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .writer { width: 108rem; overflow: hidden; white-space: normal; text-overflow: ellipsis; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .state { width: 72rem; } @media all and (max-width: 1024px) { .board-list-type .unit-div .unit .mobile-flex-div .info-div { text-align: left; flex-wrap: wrap; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .date { width: -moz-fit-content; width: fit-content; min-width: 86rem; margin-right: 10rem; margin-top: 5rem; padding-left: 21rem; background: url("/common/kr/images/icon-board-date.svg") no-repeat 0 center/contain; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .view { width: -moz-fit-content; width: fit-content; min-width: 43rem; padding-left: 21rem; margin-top: 5rem; background: url("/common/kr/images/icon-board-view.svg") no-repeat 0 center/contain; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .writer { width: -moz-fit-content; width: fit-content; min-width: 43rem; padding-left: 21rem; margin-top: 5rem; background: url("/common/kr/images/icon-board-writer.svg") no-repeat 0 center/contain; margin-right: 10rem; } .board-list-type .unit-div .unit .mobile-flex-div .info-div .state { width: -moz-fit-content; width: fit-content; padding-left: 21rem; margin-top: 5rem; background: url("/common/kr/images/icon-board-state.svg") no-repeat 0 center/contain; } } @media all and (max-width: 1024px) { .board-list-type .unit-div .unit .mobile-flex-div { flex-wrap: wrap; width: calc(100% - 52rem); } } .board-list-type .unit-div .unit:hover .title { text-decoration: underline; } .board-list-type .unit-div.small .mobile-flex-div { width: calc(100% - 72rem); } @media all and (max-width: 1024px) { .board-list-type .unit-div.small .mobile-flex-div { width: calc(100% - 52rem); } } @media all and (max-width: 1024px) { .board-list-type { margin-top: 16rem; } } .board-gallery-type { margin: 56rem 0 80rem; } .board-gallery-type .unit-div { display: flex; flex-wrap: wrap; -moz-column-gap: 20rem; column-gap: 20rem; row-gap: 56rem; } .board-gallery-type .unit-div .unit { display: flex; flex-direction: column; width: calc((100% - 40rem) / 3); } .board-gallery-type .unit-div .unit:nth-of-type(1) { transition-delay: .2s; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit:nth-of-type(1) { transition-delay: unset; } } .board-gallery-type .unit-div .unit:nth-of-type(2) { transition-delay: .2s; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit:nth-of-type(2) { transition-delay: unset; } } .board-gallery-type .unit-div .unit:nth-of-type(3) { transition-delay: .2s; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit:nth-of-type(3) { transition-delay: unset; } } .board-gallery-type .unit-div .unit:hover .title-div .title { text-decoration: underline; } .board-gallery-type .unit-div .unit .thumb-div { width: 100%; height: 412rem; margin-bottom: 24rem; background: url("/common/kr/images/icon-empty-thumb.svg") #eceff2 no-repeat center center/94rem; border-radius: 12rem; overflow: hidden; } .board-gallery-type .unit-div .unit .thumb-div img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit .thumb-div { margin-bottom: 12rem; } } @media all and (max-width: 599px) { .board-gallery-type .unit-div .unit .thumb-div { height: 242rem; background: url("/common/kr/images/icon-empty-thumb.svg") #eceff2 no-repeat center center/64rem; } } .board-gallery-type .unit-div .unit .title-div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rem; } .board-gallery-type .unit-div .unit .title-div .title { display: -webkit-box; height: 58rem; color: #1c222a; text-align: left; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit .title-div .title { height: 48rem; } } .board-gallery-type .unit-div .unit .title-div .state-div { display: flex; margin-left: 3rem; } .board-gallery-type .unit-div .unit .title-div .state-div .new { display: none; width: 5rem; height: 5rem; margin-right: 6rem; background-color: #ff4338; border-radius: 50%; } .board-gallery-type .unit-div .unit .title-div .state-div .attachment { display: none; align-self: center; width: 21rem; height: 21rem; background: url("/common/kr/images/icon-attachment.svg") no-repeat 0 0/contain; } .board-gallery-type .unit-div .unit .title-div .state-div.update .new { display: block; } .board-gallery-type .unit-div .unit .title-div .state-div.attached .attachment { display: block; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit .title-div { margin-bottom: 6rem; } } .board-gallery-type .unit-div .unit .info-div { margin-top: auto; } @media all and (max-width: 1024px) { .board-gallery-type .unit-div .unit { width: calc((100% - 10rem) / 2); } } @media all and (max-width: 1024px) { .board-gallery-type .unit-div { -moz-column-gap: 10rem; column-gap: 10rem; row-gap: 24rem; } } .board-gallery-type.video-type .unit-div .unit .thumb-div { height: 164rem; background: url("/common/kr/images/icon-empty-thumb.svg") #eceff2 no-repeat center center/72rem; } @media all and (max-width: 599px) { .board-gallery-type.video-type .unit-div .unit .thumb-div { height: 96rem; background: url("/common/kr/images/icon-empty-thumb.svg") #eceff2 no-repeat center center/48rem; } } @media all and (max-width: 1024px) { .board-gallery-type { margin: 16rem 0 48rem; } } .board-popup-type { margin: 64rem 0 48rem; } .board-popup-type .unit-title { display: flex; justify-content: space-between; align-items: center; padding: 20rem 0; text-align: center; } .board-popup-type .unit-title .number { width: 72rem; margin-right: 20rem; } .board-popup-type .unit-title .title { width: calc(100% - 92rem); } @media all and (max-width: 1024px) { .board-popup-type .unit-title { display: none; } } .board-popup-type .unit-div { border-top: 1rem solid #1c222a; } .board-popup-type .unit-div .unit { display: flex; padding: 32rem 0; border-bottom: 1rem solid #e2e6eb; } .board-popup-type .unit-div .unit .number { width: 72rem; margin-right: 20rem; color: #5a6d85; text-align: center; } @media all and (max-width: 1024px) { .board-popup-type .unit-div .unit .number { width: 36rem; margin-right: 16rem; } } .board-popup-type .unit-div .unit .mobile-flex-div { width: calc(100% - 92rem); } .board-popup-type .unit-div .unit .mobile-flex-div .title { color: #1c222a; } @media all and (max-width: 1024px) { .board-popup-type .unit-div .unit .mobile-flex-div .title br { display: none; } .board-popup-type .unit-div .unit .mobile-flex-div .title br.show { display: block; } } .board-popup-type .unit-div .unit .mobile-flex-div .btn-wrap { margin-top: 16rem; } @media all and (max-width: 1024px) { .board-popup-type .unit-div .unit .mobile-flex-div .btn-wrap { margin-top: 12rem; } } @media all and (max-width: 1024px) { .board-popup-type .unit-div .unit .mobile-flex-div { flex-wrap: wrap; width: calc(100% - 52rem); } } @media all and (max-width: 1024px) { .board-popup-type .unit-div .unit { padding: 24rem 0; } } @media all and (max-width: 1024px) { .board-popup-type { margin-top: 32rem; } } .no-srch-area { padding: 56rem 0; text-align: center; } .no-srch-area .normal-value { color: #465466; } .no-srch-area .normal-value span { color: #1c222a; } @media all and (max-width: 1024px) { .no-srch-area { padding: 57rem 0; } } .view-con img { max-width: 100%; } .view-con img:first-of-type { margin-bottom: 24rem; } .view-con img:last-of-type { margin-top: 24rem; } .view-con .page-tit { width: 755rem; color: #000; } @media all and (max-width: 1024px) { .view-con .page-tit { width: 100%; } } .view-con .type-div { display: flex; align-items: center; margin-top: 16rem; color: #5a6d85; } .view-con .type-div > p { margin-right: 16rem; } .view-con .type-div > p:last-of-type { margin-right: 0; } .view-con .type-div > p.cate span { color: #465466; font-weight: 700; } .view-con .attatched-file-area { display: flex; flex-direction: column; align-items: flex-start; row-gap: 8rem; margin-top: 40rem; } .view-con .attatched-file-area.empty { margin-top: 0 !important; } .view-con .txt-area { margin-top: 80rem; } .view-con .txt-area img { max-width: 100%; height: auto !important; } .view-con .txt-area .txt-box .txt > span { color: #1c222a; } .view-con pre { margin-top: 80rem; font-family: "NanumSquare", sans-serif; font-size: 16rem; font-weight: 400; color: #465466; line-height: 170%; letter-spacing: -.02em; white-space: normal; } @media all and (max-width: 1024px) { .view-con pre { font-size: 13rem; line-height: 165%; letter-spacing: -.01em; } } .view-con .article-nav-area { margin-top: 80rem; } .view-con .article-nav-area .prev-article, .view-con .article-nav-area .next-article { display: flex; align-items: center; padding: 24rem 0; border-bottom: 1rem solid #e2e6eb; } .view-con .article-nav-area .prev-article .type, .view-con .article-nav-area .next-article .type { width: 72rem; margin-right: 20rem; color: #1c222a; } @media all and (max-width: 1024px) { .view-con .article-nav-area .prev-article .type, .view-con .article-nav-area .next-article .type { width: 36rem; margin-right: 16rem; } } .view-con .article-nav-area .prev-article .title, .view-con .article-nav-area .next-article .title { display: -webkit-box; width: calc(100% - 92rem); color: #465466; text-align: left; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .view-con .article-nav-area .prev-article .title:hover, .view-con .article-nav-area .next-article .title:hover { text-decoration: underline; } @media all and (max-width: 1024px) { .view-con .article-nav-area .prev-article .title, .view-con .article-nav-area .next-article .title { width: calc(100% - 52rem); } } .view-con .article-nav-area .prev-article.empty .title, .view-con .article-nav-area .next-article.empty .title { text-decoration: initial; opacity: .5; cursor: initial; } .view-con .article-nav-area .next-article { border-bottom: none; } .view-con .btn-wrap:not(.for-flex) { display: flex; justify-content: center; margin-top: 40rem; } @media all and (max-width: 1024px) { .view-con .btn-wrap:not(.for-flex) .btn { width: 100%; } } .layer-popup { display: none; position: fixed; left: 0; top: 0; z-index: 200; width: 100%; height: 100%; } .layer-popup .for-center { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .layer-popup .for-center .pop-cont-area { position: relative; z-index: 200; display: flex; flex-direction: column; width: 950rem; height: auto; max-height: 80%; padding: 104rem 0 0 155rem; box-sizing: border-box; background-color: #fff; border-radius: 12rem; } .layer-popup .for-center .pop-cont-area .pop-head { margin-bottom: 24rem; padding-right: 155rem; } .layer-popup .for-center .pop-cont-area .pop-head .title { color: #000; } .layer-popup .for-center .pop-cont-area .pop-head .info-area { display: flex; -moz-column-gap: 16rem; column-gap: 16rem; margin-top: 16rem; color: #5a6d85; } @media all and (max-width: 1024px) { .layer-popup .for-center .pop-cont-area .pop-head { padding-right: 20rem; } } .layer-popup .for-center .pop-cont-area .pop-cont { height: 100%; max-height: 100%; margin-bottom: 80rem; overflow-y: auto; } .layer-popup .for-center .pop-cont-area .pop-cont::-webkit-scrollbar { width: 6rem; } .layer-popup .for-center .pop-cont-area .pop-cont::-webkit-scrollbar-thumb { background-color: #8797ad; border-radius: 20rem 20rem 20rem 20rem; } .layer-popup .for-center .pop-cont-area .pop-cont::-webkit-scrollbar-track { background-color: #eceff2; border-radius: 20rem 20rem 20rem 20rem; } .layer-popup .for-center .pop-cont-area .pop-cont img { max-width: 100%; } .layer-popup .for-center .pop-cont-area .pop-cont .scroll-area { padding-right: 149rem; } .layer-popup .for-center .pop-cont-area .pop-cont .scroll-area .txt-div + .img-div { margin-top: 32rem; } .layer-popup .for-center .pop-cont-area .pop-cont .scroll-area .img-div + .txt-div { margin-top: 32rem; } @media all and (max-width: 1024px) { .layer-popup .for-center .pop-cont-area .pop-cont .scroll-area { padding-right: 20rem; } } .layer-popup .for-center .pop-cont-area .btn-close { position: absolute; top: 16rem; right: 20rem; width: 40rem; height: 40rem; background: url("/common/kr/images/btn-close.svg") no-repeat center center/cover; } @media all and (max-width: 1024px) { .layer-popup .for-center .pop-cont-area .btn-close { width: 32rem; height: 32rem; } } @media all and (max-width: 1024px) { .layer-popup .for-center .pop-cont-area { width: 100%; height: 90%; max-height: 90%; padding: 80rem 0 0 20rem; border-radius: 12rem 12rem 0 0; } } @media all and (max-width: 1024px) { .layer-popup .for-center { align-items: flex-end; } } .layer-popup .dimd { position: absolute; top: 0; left: 0; z-index: 199; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); } .layer-popup.bottom-btn-pop .pop-cont-area { padding-left: 0; } .layer-popup.bottom-btn-pop .pop-cont-area .pop-head { padding-left: 155rem; } @media all and (max-width: 1024px) { .layer-popup.bottom-btn-pop .pop-cont-area .pop-head { padding-left: 20rem; } } .layer-popup.bottom-btn-pop .pop-cont-area .pop-cont { margin-bottom: 0; } .layer-popup.bottom-btn-pop .pop-cont-area .pop-cont .scroll-area { padding: 0 149rem 80rem 155rem; } @media all and (max-width: 1024px) { .layer-popup.bottom-btn-pop .pop-cont-area .pop-cont .scroll-area { padding: 0 20rem 80rem 20rem; } .layer-popup.bottom-btn-pop .pop-cont-area .pop-cont .scroll-area .txt-div br {display: none;} } .layer-popup.bottom-btn-pop .pop-cont-area .fixed-btn-area { padding: 17rem 155rem 32rem; } .layer-popup.bottom-btn-pop .pop-cont-area .fixed-btn-area.shadow { box-shadow: 0 0 40rem rgba(0, 0, 0, .04); } @media all and (max-width: 1024px) { .layer-popup.bottom-btn-pop .pop-cont-area .fixed-btn-area { padding: 17rem 26rem 32rem; } } .layer-popup.video-popup .subtitle { margin-top: 32rem; padding-right: 16rem; height: 150rem; overflow-y: auto; } .layer-popup.video-popup .subtitle::-webkit-scrollbar { width: 6rem; } .layer-popup.video-popup .subtitle::-webkit-scrollbar-thumb { background-color: #8797ad; border-radius: 20rem 20rem 20rem 20rem; } .layer-popup.video-popup .subtitle::-webkit-scrollbar-track { background-color: #eceff2; border-radius: 20rem 20rem 20rem 20rem; } @media all and (max-width: 1024px) { .layer-popup.video-popup .subtitle { height: 200rem; } } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .txt-div .txt:first-child { margin-bottom: 12rem; } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap { display: flex; -moz-column-gap: 8rem; column-gap: 8rem; margin-top: 32rem; } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn span { padding-left: 42rem; } @media all and (max-width: 1024px) { .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn span { padding-left: 0; } } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn.edge { background: url("/common/kr/images/icon-edge-logo.svg") no-repeat center left 40rem/32rem 32rem; } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn.chrome { background: url("/common/kr/images/icon-chrome-logo.svg") no-repeat center left 40rem/32rem 32rem; } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn.firefox { background: url("/common/kr/images/icon-firefox-logo.svg") no-repeat center left 40rem/32rem 32rem; } @media all and (max-width: 1024px) { .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn.edge { background: url("/common/kr/images/icon-edge-logo.svg") no-repeat center left 16rem/32rem 32rem; } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn.chrome { background: url("/common/kr/images/icon-chrome-logo.svg") no-repeat center left 16rem/32rem 32rem; } .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap .btn.firefox { background: url("/common/kr/images/icon-firefox-logo.svg") no-repeat center left 16rem/32rem 32rem; } } @media all and (max-width: 1024px) { .layer-popup#browserPopup .pop-cont-area .pop-cont .scroll-area .btn-wrap { flex-direction: column; row-gap: 12rem; } } .layer-popup .password .f-caption-r { margin-bottom: 40rem; color: #5a6d85; } .layer-popup .password .f-body3-b { color: #1c222a; } .layer-popup .password .f-body3-b span { color: #ff4338; } .layer-popup .password .for-flex { display: flex; gap: 8rem; width: 100%; margin-top: 12rem; } .layer-popup .password .for-flex .form-input { width: 424rem; } #mainPopup { position: fixed; left: 0; top: 0; z-index: 200; display: none; width: 100%; height: 100%; } #mainPopup .for-center { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } #mainPopup .for-center .pop-cont-area { position: relative; } #mainPopup .for-center .pop-cont-area .form-checkbox { position: absolute; left: 40rem; top: 23rem; z-index: 200; } #mainPopup .for-center .pop-cont-area .form-checkbox input + label { padding-left: max(38rem, 30px); } .layer-popup .for-center .pop-cont-area .form-checkbox { position: absolute; left: 40rem; top: 23rem; z-index: 200; } .layer-popup .for-center .pop-cont-area .form-checkbox input + label { padding-left: max(38rem, 30px); } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area { height: calc(100% - 70rem); } #mainPopup .for-center .pop-cont-area .form-checkbox {left: 20rem;} .layer-popup .for-center .pop-cont-area .form-checkbox {left: 20rem;} } #mainPopup .for-center .pop-cont-area .main-popup-swiper { position: relative; z-index: 200; width: 720rem; padding-top: 104rem; box-sizing: border-box; background-color: #fff; border-radius: 12rem 12rem 0 0; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide { max-height: 65vh; padding: 0 40rem 80rem; box-sizing: border-box; background-color: #fff; overflow-y: auto; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide::-webkit-scrollbar { width: 6rem; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide::-webkit-scrollbar-thumb { background-color: #8797ad; border-radius: 20rem 20rem 20rem 20rem; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide::-webkit-scrollbar-track { background-color: #eceff2; border-radius: 20rem 20rem 20rem 20rem; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide img { max-width: 100%; height: auto !important; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .f-tit1 { margin-bottom: 32rem; color: #000; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .f-body2-r { color: #1c222a; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .subtitle { margin-top: 32rem; padding-right: 16rem; height: 150rem; overflow-y: auto; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .subtitle::-webkit-scrollbar { width: 6rem; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .subtitle::-webkit-scrollbar-thumb { background-color: #8797ad; border-radius: 20rem 20rem 20rem 20rem; } #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .subtitle::-webkit-scrollbar-track { background-color: #eceff2; border-radius: 20rem 20rem 20rem 20rem; } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide .subtitle { height: 200rem; } } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper .swiper-slide { height: 100%; padding: 0 20rem 80rem; } } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .main-popup-swiper .swiper-wrapper { height: 100%; } } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .main-popup-swiper { width: 100vw; height: calc(100% - 95rem); padding-top: 80rem; } } #mainPopup .for-center .pop-cont-area .fixed-btn-area { position: relative; z-index: 200; display: flex; justify-content: space-between; align-items: center; padding: 17rem 40rem 32rem; background-color: #fff; border-radius: 0 0 12rem 12rem; } #mainPopup .for-center .pop-cont-area .fixed-btn-area.shadow { box-shadow: 0 0 40rem rgba(0, 0, 0, .04); } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap { position: relative; width: 237rem; height: 40rem; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-button-prev { position: absolute; top: 0; left: 0; width: 40rem; height: 40rem; margin-top: 0; background-color: #fff; border-radius: 50%; transition: background .3s ease; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-button-prev:hover { background-color: #eceff2; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-button-prev::after { content: ""; width: 40rem; height: 40rem; background: url("/common/kr/images/ico-main-arrow-black-prev.svg") no-repeat center center/cover; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-button-next { position: absolute; top: 0; right: 0; width: 40rem; height: 40rem; margin-top: 0; background-color: #fff; border-radius: 50%; transition: background .3s ease; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-button-next:hover { background-color: #eceff2; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-button-next::after { content: ""; width: 40rem; height: 40rem; background: url("/common/kr/images/ico-main-arrow-black-next.svg") no-repeat center center/cover; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-pagination-fraction { position: absolute; bottom: initial; top: 50%; left: 80rem; width: auto; font-weight: 700; font-size: 16rem; line-height: 170%; letter-spacing: -.02em; color: #8e9195; transform: translateY(-50%); } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-pagination-fraction .swiper-pagination-current { color: #1c222a; } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .swiper-pagination-fraction { left: 60rem; } } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap { position: absolute; top: 4rem; left: 125rem; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap a { display: block; width: 32rem; height: 32rem; border-radius: 50%; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap a.pause { background: url("/common/kr/images/ico-pause-black.svg") no-repeat center center/cover; transition: background .3s ease; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap a.pause:hover { background-color: #eceff2; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap a.play { display: none; background: url("/common/kr/images/ico-play-black.svg") no-repeat center center/cover; transition: background .3s ease; } #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap a.play:hover { background-color: #eceff2; } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap .play-btn-wrap { left: 100rem; } } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .fixed-btn-area .swiper-btn-wrap { width: 190rem; } } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .fixed-btn-area { padding: 17rem 20rem 32rem; border-radius: 0; } } #mainPopup .for-center .pop-cont-area .btn-close { position: absolute; top: 16rem; right: 20rem; z-index: 200; width: 40rem; height: 40rem; background: url("/common/kr/images/btn-close.svg") no-repeat center center/cover; } @media all and (max-width: 1024px) { #mainPopup .for-center .pop-cont-area .btn-close { width: 32rem; height: 32rem; } } @media all and (max-width: 1024px) { #mainPopup .for-center { align-items: flex-end; } } #mainPopup .dimd { position: absolute; top: 0; left: 0; z-index: 199; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); } .layer-popup .organiz-tit { margin-bottom: 16rem; color: #1c222a; } .layer-popup .organiz-list li { position: relative; margin-bottom: 12rem; padding-left: 11rem; color: #465466; } .layer-popup .organiz-list li:last-of-type { margin-bottom: 0; } .layer-popup .organiz-list li::before { content: ""; position: absolute; top: 50%; left: 0; width: 3rem; height: 3rem; background-color: #465466; border-radius: 50%; transform: translateY(-50%); } .layer-popup .organiz-list li a { text-decoration: underline; } .layer-popup .organiz-list li a:hover { color: #000; } @media all and (max-width: 1024px) { .layer-popup .organiz-tit { margin-bottom: 12rem; } } .paging { display: flex; justify-content: space-between; align-items: center; width: 554rem; margin: 0 auto; } .paging .page-div { display: flex; justify-content: center; align-items: center; -moz-column-gap: 2rem; column-gap: 2rem; width: 338rem; } .paging .page-div .page { display: flex; justify-content: center; align-items: center; width: 32rem; height: 32rem; border-radius: 50%; color: #5a6d85; transition: all ease-in-out .15s; } .paging .page-div .page:hover { background-color: #eceff2; border-radius: 50%; } .paging .page-div .page.active { background-color: #eceff2; font-weight: 700; color: #1c222a; } @media all and (max-width: 1024px) { .paging .page-div .page:nth-child(n+6) { display: none; } } @media all and (max-width: 1024px) { .paging .page-div { width: 168rem; } } .paging .btn-page { width: 40rem; height: 40rem; border-radius: 50%; transition: all ease-in-out .15s; } .paging .btn-page:hover { background-color: #eceff2; } .paging .btn-first-page { margin-right: 4rem; background: url("/common/kr/images/btn-paging-first.svg") no-repeat center center/contain; } .paging .btn-prev-page { margin-right: 24rem; background: url("/common/kr/images/btn-paging-prev.svg") no-repeat center center/contain; } @media all and (max-width: 1024px) { .paging .btn-prev-page { margin-right: 7rem; } } .paging .btn-next-page { margin-left: 24rem; background: url("/common/kr/images/btn-paging-next.svg") no-repeat center center/contain; } @media all and (max-width: 1024px) { .paging .btn-next-page { margin-left: 7rem; } } .paging .btn-last-page { margin-left: 4rem; background: url("/common/kr/images/btn-paging-last.svg") no-repeat center center/contain; } @media all and (max-width: 1024px) { .paging { width: 350rem; } } .print-div { position: absolute; right: 0; top: 0; } .print-div a { display: block; width: 40rem; height: 40rem; background: url("/common/kr/images/btn-print.svg") center center/cover; border-radius: 50%; transition: background .3s ease; } .print-div a:hover { background: url("/common/kr/images/btn-print.svg") #f6f7f9 center center/cover; } @media all and (max-width: 1024px) { .print-div { display: none; } } @media print { header, footer { display: none; } .member .swiper .wrapper .circle { display: none; } } .regist { border-top: 1px solid #e2e6eb; margin-top: 80rem; padding-top: 24rem; color: #1c222a; } .regist .f-tit4 { margin-bottom: 56rem; } @media all and (max-width: 1024px) { .regist { margin-top: 64rem; padding-top: 16rem; } .regist .f-tit4 { margin-bottom: 40rem; } } .regist .li.for-flex { display: flex; justify-content: space-between; } .regist .li.for-flex > div { width: 424rem; } @media all and (max-width: 1024px) { .regist .li.for-flex { display: block; } .regist .li.for-flex > div { width: 100%; } .regist .li.for-flex > div + div { margin-top: 32rem; } } .regist .li + .li { margin-top: 40rem; } @media all and (max-width: 1024px) { .regist .li + .li { margin-top: 32rem; } } .regist .li .form-input { width: 100%; } .regist .li .f-body3-b { margin-bottom: 12rem; } .regist .li .f-body3-b span { color: #f63b3b; } @media all and (max-width: 1024px) { .regist .li .f-body3-b { margin-bottom: 8rem; } } .regist .li .for-flex { display: flex; justify-content: space-between; } .regist .li .for-flex div:first-of-type { display: flex; } .regist .li .for-flex div:first-of-type .img { width: 132rem; height: 46rem; overflow: hidden; margin-right: 24rem; } .regist .li .for-flex div:first-of-type .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .regist .li .for-flex .form-input { width: 424rem; } @media all and (max-width: 1024px) { .regist .li .for-flex { display: block; } .regist .li .for-flex .form-input { width: 100%; margin-top: 20rem; } } @media all and (max-width: 599px) { .regist .li .for-flex div:first-of-type { justify-content: space-between; } } .regist .agree { border-top: 1px solid #e2e6eb; margin-top: 80rem; padding-top: 24rem; } .regist .agree .f-caption-r { margin-top: 16rem; border: 1px solid #e2e6eb; padding: 24rem; border-radius: 8rem; color: #5a6d85; } .regist .agree .f-caption-r p + p { margin-top: 8rem; } @media all and (max-width: 1024px) { .regist .agree { margin-top: 64rem; padding-top: 16rem; } } .regist-answer .info { display: flex; margin-top: 16rem; } .regist-answer .info .dl { display: flex; } .regist-answer .info .dl + .dl { margin-left: 16rem; } .regist-answer .info .dl .dd { margin-left: 4rem; } .regist-answer .con { margin: 80rem 0; } .regist-answer .answer { background: #f6f7f9; padding: 24rem; border-radius: 8rem; margin-top: 80rem; } @media all and (max-width: 1024px) { .regist-answer .answer { margin-bottom: -40rem; } } .regist-answer .answer .top { display: flex; justify-content: space-between; margin-bottom: 24rem; color: #465466; } .regist-answer .answer .top > p:first-of-type { background: #8797ad; display: inline-block; color: #fff; padding: 0 8rem; border-radius: 4rem; } .regist-answer .answer .top > p:last-of-type span { margin-left: 4rem; } .regist-answer .answer div { word-break: break-all; } .tele-num { margin-top: 120rem; } .tele-num li + li { margin-top: 80rem; } .tele-num li .f-tit2 { color: #000; } .tele-num li .f-tit2 + .form-table { margin-top: 24rem; } .his-intro { position: relative; width: 100%; overflow: hidden; padding: 0 0 320rem !important; } .his-intro .top-area { position: relative; z-index: 5; width: 100vw !important; height: 100vh; padding-top: 310rem; } .his-intro .top-area .tit-warp { width: 910rem; margin: 0 auto; position: relative; } .his-intro .top-area .intro { width: 100%; } .his-intro .top-area .intro .f-body1-r { width: 910rem; margin: 312rem auto 0; } .his-intro .top-area .intro .img { overflow: hidden; width: 910rem; height: 240rem; position: absolute; top: 425rem; left: 50%; transform: translateX(-50%); z-index: -1; background: #000; } .his-intro .top-area .intro .img img { width: 1000rem; height: 670rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (max-width: 1024px) { .his-intro { padding: 0 0 160rem !important; } .his-intro .top-area { padding-top: 197rem; height: auto; } .his-intro .top-area .tit-warp { width: calc(100% - 40rem); } .his-intro .top-area .intro .f-body1-r { width: calc(100% - 40rem); margin: 270rem auto 0; } .his-intro .top-area .intro .img { top: 260rem; background: 0; overflow: hidden; width: 100vw; height: 200rem; } } .his-intro .history .copy { width: 100%; height: 100vh; text-align: center; position: relative; } .his-intro .history .copy .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .his-intro .history .copy .txt p { color: #000 !important; opacity: 0; transform: translateY(70rem); } .his-intro .history .copy .txt p.f-tit3 { margin-top: 24rem; } .his-intro .history .list { width: 1220rem; margin: 0 auto; position: relative; min-height: 300rem; } .his-intro .history .list .left { color: #000; font-size: 120rem; font-weight: 800; line-height: 110%; position: absolute; transition: all .7s; } .his-intro .history .list .left.fixed { position: fixed; top: 240rem; bottom: unset; } @media all and (max-width: 1500px) { .his-intro .history .list .left.fixed {top: 280rem;} } @media all and (max-width: 1400px) { .his-intro .history .list .left.fixed {top: 300rem;} } @media all and (max-width: 1300px) { .his-intro .history .list .left.fixed {top: 320rem;} } @media all and (max-width: 1200px) { .his-intro .history .list .left.fixed {top: 340rem;} } @media all and (max-width: 1100px) { .his-intro .history .list .left.fixed {top: 360rem;} } .his-intro .history .list .left.bot { position: absolute; top: unset; bottom: 240rem; } .his-intro .history .list .left.scale { font-size: 80rem; } .his-intro .history .list ul { width: 600rem; margin-top: 48rem; margin-left: 612rem; position: relative; } .his-intro .history .list ul li { border-top: 1px solid #e2e6eb; padding-top: 48rem; display: flex; } .his-intro .history .list ul li + li { margin-top: 48rem; } .his-intro .history .list ul li > p { margin-right: 31rem; } .his-intro .history .list ul li .div { width: 100%; } .his-intro .history .list ul li .div .dl { display: flex; } .his-intro .history .list ul li .div .dl + .dl { margin-top: 12rem; } .his-intro .history .list ul li .div .dl .dt { width: 50rem; margin-right: 50rem; } .his-intro .history .list ul li .div .dl .dd { width: calc(100% - 100rem); } .his-intro .history .list .dimd { width: 610rem; right: calc((100% - 1220rem) / 2); height: 250rem; background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fff 300.14%); display: block; position: fixed; bottom: 0; opacity: 1; transition: all .3s; } @media all and (max-width: 1024px) { .his-intro .history .copy { height: auto; } .his-intro .history .copy .txt { position: unset; transform: unset; width: calc(100% - 40rem); margin: 160rem auto; text-align: left; } .his-intro .history .copy .txt .f-dp2 { font-size: 26rem; opacity: 1; transform: unset; } .his-intro .history .copy .txt .f-tit3 { display: none; } .his-intro .history .list { width: calc(100% - 40rem); } .his-intro .history .list .left { position: unset; font-size: 56rem; } .his-intro .history .list .left span { display: inline-block; padding-left: 10rem; } .his-intro .history .list .left.scale { font-size: 56rem; } .his-intro .history .list ul { width: 100%; margin-left: 0; margin-top: 64rem; } .his-intro .history .list ul li { padding-top: 33rem; } .his-intro .history .list ul li + li { margin-top: 33rem; } .his-intro .history .list ul li > p { margin-right: 12rem; } .his-intro .history .list ul li .div .dl .dt { width: 40rem; margin-right: 12rem; } .his-intro .history .list ul li .div .dl .dd { width: calc(100% - 52rem); } .his-intro .history .list .dimd { display: none; } } .greeting { margin-top: 64rem; } .greeting .f-tit1 { color: #000; } .greeting .img-area { width: 100%; display: flex; margin-top: 77rem; gap: 20rem; justify-content: center; } .greeting .img-area .img { border-radius: 12rem; overflow: hidden; } .greeting .txt-area { width: 910rem; margin: 60rem auto 0; } .greeting .txt-area .f-tit3 { color: #000; margin-bottom: 32rem; } .greeting .txt-area .f-body2-r { line-height: 170%; color: #465466; letter-spacing: -.04em; } .greeting .txt-area .f-body2-r + .f-body2-r { margin-top: 20rem; } .greeting .txt-area .f-body2-r.for-bot { margin-bottom: 64rem; } .greeting .txt-area .f-body1-b { margin-top: 8rem; color: #000; } @media all and (max-width: 1024px) { .greeting { margin-top: 32rem; } .greeting .f-tit1 br { display: none; } .greeting .img-area { margin-top: 38rem; display: block; width: 100%; border-radius: 8rem; } .greeting .img-area .img { width: 100%; } .greeting .img-area .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .greeting .img-area .img:last-of-type { display: none; } .greeting .txt-area { width: 100%; margin: 30rem auto 0; } .greeting .txt-area .f-tit3 { margin-bottom: 20rem; } .greeting .txt-area .f-body2-r + .f-body2-r { margin-top: 16rem; } .greeting .txt-area .f-body2-r.for-bot { margin-bottom: 40rem; } .greeting .txt-area .f-body1-b { margin-top: 6rem; } } @media all and (max-width: 599px) { .greeting .img-area .img { width: 100%; height: 250rem; } } .organiz { margin-top: 120rem; } .organiz .grphc { width: 100%; text-align: center; padding: 75rem 0 205rem; position: relative; } .organiz .grphc::before { content: ""; width: 200vw; height: 100%; display: block; background: #f6f7f9; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; } .organiz .grphc::after { content: ""; width: 1px; height: 682rem; display: block; background: #ced4dd; position: absolute; top: 74rem; left: 50%; transform: translateX(-50%); z-index: -1; } .organiz .grphc .one { width: 200rem; height: 200rem; border-radius: 100rem; background: url("/common/kr/images/logo-wht.svg") no-repeat 58rem 46rem #2b29af; background-size: 85rem; margin: 0 auto; color: #fff; padding-top: 113rem; } .organiz .grphc .one.top2 { width: 160rem; height: 160rem; background: url("/common/kr/images/logo-wht.svg") no-repeat 50rem 35rem #2995e0; background-size: 60rem; padding-top: 88rem; margin: 40rem auto 40rem; } .organiz .grphc .box { width: 186rem; height: 80rem; background: #fff; border: 1px solid #e2e6eb; display: flex; align-items: center; justify-content: center; border-radius: 8rem; margin: 0 auto; color: #000; position: relative; } .organiz .grphc button.box { position: relative; } .organiz .grphc button.box:hover { border: 1rem solid transparent; border-radius: 8rem; background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #2995e0 0%, #2b29af 100%); background-origin: border-box; background-clip: content-box, border-box; } .organiz .grphc .box.audit { position: absolute; right: 206rem; top: 285rem; background: #eceff2; border: 0; } .organiz .grphc .box.auditr { position: absolute; right: 206rem; bottom: 375rem; background: #eceff2; border: 0; } .organiz .grphc .box.add-network { position: absolute; right: 414rem; bottom: -128rem; } .organiz span.fn { font-size: 14rem; color: #5a6d85; transform: translateY(-4rem) translateX(3rem); font-weight: 400; display: inline-block; } .organiz .grphc div { margin-top: 210rem; display: flex; gap: 20rem; position: relative; } .organiz .grphc div::after { content: ""; width: calc(100% - 186rem); height: 10px; display: block; border: 1px solid #ced4dd; position: absolute; top: -50rem; left: 50%; transform: translateX(-50%); border-bottom: 0; border-radius: 8rem 8rem 0 0; } .organiz .grphc div .box::after { content: ""; width: 1px; height: 50rem; display: block; background: #ced4dd; position: absolute; top: -50rem; left: 50%; transform: translateX(-50%); } .organiz .grphc div .box:first-of-type:after { content: ""; width: 1px; height: 39rem; display: block; background: #ced4dd; position: absolute; top: -40rem; left: calc(50% - 1rem); transform: translateX(-50%); } .organiz .grphc div .box:last-of-type:after { content: ""; width: 1px; height: 39rem; display: block; background: #ced4dd; position: absolute; top: -40rem; left: calc(50% + 1rem); transform: translateX(-50%); } .organiz ul { display: grid; gap: 30rem; grid-template-columns: 1fr 1fr 1fr; margin-top: 160rem; } .organiz ul li { background: #f6f7f9; border-radius: 12rem; padding: 32rem; height: 516rem; } .organiz ul li .f-tit2 { color: #000; } .organiz ul li .f-tit2 span.fn { transform: translateY(-15rem) translateX(-8rem); } .organiz ul li .f-body2-b { margin: 24rem 0 16rem; color: #1c222a; } .organiz ul li div p { display: flex; line-height: 150%; } .organiz ul li div p a { text-decoration: underline; } .organiz ul li div p a:hover { font-weight: 700; } .organiz ul li div p::before { content: ""; width: 3px; height: 3px; background: #465466; display: block; border-radius: 5px; margin-top: 8rem; margin-right: 8rem; } .organiz ul li div p + p { margin-top: 12rem; } @media all and (max-width: 1024px) { .organiz .grphc::before {width: 100vw;} .organiz { margin-top: 64rem; } .organiz .grphc { padding: 48rem 0; } .organiz .grphc::after { height: 425rem; } .organiz .grphc .one { width: 120rem; height: 120rem; background: url("/common/kr/images/logo-wht.svg") no-repeat 40rem 29rem #2b29af; background-size: 40rem; padding-top: 60rem; } .organiz .grphc .one.top2 { width: 120rem; height: 120rem; background: url("/common/kr/images/logo-wht.svg") no-repeat 40rem 29rem #2995e0; background-size: 40rem; padding-top: 60rem; margin: 66rem auto 66rem; } .organiz .grphc .box { width: 160rem; height: 46rem; } .organiz .grphc .box.audit { right: 0; top: 176rem; width: 140rem; } .organiz .grphc .box.auditr { right: 0; top: 360rem; bottom: unset; width: 140rem; } .organiz .grphc .box.add-network { position: relative; right: unset; bottom: unset; } .organiz span.fn { font-size: 12rem; } .organiz .grphc div { display: grid; grid-template-columns: 1fr 1fr; margin-top: 66rem; gap: 12rem 71rem; } .organiz .grphc div::after { top: -33rem; width: 55%; border-radius: 4rem 4rem 0 0; height: 5rem; } .organiz .grphc div .box { width: 140rem; } .organiz .grphc div .box::after { content: ""; width: 1px; height: 12rem; display: block; background: #ced4dd; position: absolute; top: -12rem; left: 50%; transform: translateX(-50%); } .organiz .grphc div .box:nth-of-type(1):after { content: ""; width: 1px; height: 29rem; display: block; background: #ced4dd; position: absolute; top: -29rem; left: calc(50% - .3rem); transform: translateX(-50%); } .organiz .grphc div .box:nth-of-type(2):after { content: ""; width: 1px; height: 29rem; display: block; background: #ced4dd; position: absolute; top: -29rem; left: 50%; transform: translateX(-50%); } .organiz .grphc div .box:last-of-type:after { top: -14rem; height: 14rem; } .organiz ul { margin-top: 64rem; display: block; } .organiz ul li { height: auto; border-radius: 8rem; padding: 24rem; } .organiz ul li + li { margin-top: 20rem; } .organiz ul li .f-tit2 span.fn { transform: translateY(-8rem) translateX(-3rem); } .organiz ul li .f-body2-b { margin: 16rem 0 12rem; } } @media all and (max-width: 599px) { .organiz .grphc div::after { width: calc(60% + 1rem); } .organiz .grphc > div button.box { width: 134rem; } } .ci { margin-top: 64rem; } .ci .f-tit1 { color: #000; } .ci .flex { display: flex; justify-content: center; align-items: center; width: 100%; padding: 94rem 155rem; box-sizing: border-box; border: 1px solid #e2e6eb; border-radius: 12rem; margin-top: 24rem; margin-bottom: 120rem; } .ci .flex .img img { width: 199rem; } .ci .flex .txt { margin-left: 181rem; } .ci .flex .txt .f-caption-b { margin-bottom: 24rem; } .ci .down { width: 100%; height: 408rem; border: 1px solid #e2e6eb; border-radius: 12rem; text-align: center; margin-top: 24rem; margin-bottom: 120rem; } .ci .down .img { width: 642rem; margin: 24rem auto 18rem; } .ci .down .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .ci .f-tit2 { color: #000; } .ci ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30rem; margin-top: 24rem; } .ci ul li { border: 1px solid #e2e6eb; border-radius: 12rem; text-align: center; height: 290rem; } .ci ul li .img { height: 210rem; width: 350rem; display: flex; align-items: center; justify-content: center; margin: 20rem auto 13rem; } .ci ul li .img img { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } @media all and (max-width: 1024px) { .ci { margin-top: 32rem; } .ci .flex { display: block; padding: 32rem 20rem 40rem; margin-bottom: 64rem; } .ci .flex .img img { display: block; width: 99.5rem; margin: 0 auto; } .ci .flex .txt { margin-top: 56.5rem; margin-left: 0; } .ci .down { margin-top: 20rem; margin-bottom: 60rem; height: 234rem; } .ci .down .img { width: 300rem; height: 124rem; } .ci ul { display: grid; grid-template-columns: 1fr; margin-top: 20rem; gap: 20rem; } .ci ul li { height: 262rem; } .ci ul li .img { height: 180rem; width: 300rem; margin: 20rem auto; } } .map-wrap { margin-top: 64rem; } .map-wrap .map { width: 100%; height: 610rem; overflow: hidden; } .map-wrap .map .map-responsive { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; } .map-wrap .map .map-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .map-wrap .map .root_daum_roughmap_landing { width: 100% !important; height: 100% !important; } .map-wrap .map .root_daum_roughmap .wrap_map { height: 100% !important; } .map-wrap .info { margin-top: 120rem; color: #000; } .map-wrap .info dl { display: flex; } .map-wrap .info dl + dl { margin-top: 20rem; } .map-wrap .info dl dt { width: 135rem; margin-right: 40rem; } .map-wrap ul { display: grid; gap: 30rem; grid-template-columns: 1fr 1fr 1fr; margin-top: 120rem; } .map-wrap ul li { border: 1px solid #e2e6eb; border-radius: 12rem; height: 387rem; position: relative; padding: 32rem; } .map-wrap ul li:nth-of-type(1):after { content: ""; width: 40rem; height: 40rem; display: block; background: url("/common/kr/images/ico-subway.svg") no-repeat; background-size: cover; position: absolute; top: 32rem; right: 32rem; } .map-wrap ul li:nth-of-type(2):after { content: ""; width: 40rem; height: 40rem; display: block; background: url("/common/kr/images/ico-station.svg") no-repeat; background-size: cover; position: absolute; top: 32rem; right: 32rem; } .map-wrap ul li:nth-of-type(3):after { content: ""; width: 40rem; height: 40rem; display: block; background: url("/common/kr/images/ico-bus.svg") no-repeat; background-size: cover; position: absolute; top: 32rem; right: 32rem; } .map-wrap ul li .f-tit4 { color: #000; } .map-wrap ul li div { position: absolute; bottom: 32rem; left: 32rem; } .map-wrap ul li div p { color: #000; margin-top: 17rem; } .map-wrap ul li div p span { display: inline-block; padding: 4rem 16rem; background: pink; border-radius: 50rem; font-size: 14rem; color: #fff; } .map-wrap ul li div p span + span { margin-left: 4rem; } .map-wrap ul li div p span.line9 { background: #a49e87; padding: 4rem 14rem; } .map-wrap ul li div p span.line7 { background: #5d6026; padding: 4rem 14rem; } .map-wrap ul li div p span.bundang { background: #ffb314; } .map-wrap ul li div p span.maul { background: #59be0a; } .map-wrap ul li div p span.gansun { background: #1e7bdb; } .map-wrap ul li div p span.jisun { background: #59be0a; } .map-wrap ul li div p span.gong { background: #4fb7ff; } .map-wrap ul li div p span:last-of-type { margin-right: 12rem; } @media all and (max-width: 1024px) { .map-wrap { margin-top: 32rem; } .map-wrap .map { height: 175rem; } .map-wrap .map .root_daum_roughmap .wrap_map { height: 100% !important; } .map-wrap .info { margin-top: 64rem; } .map-wrap .info dl + dl { margin-top: 10rem; } .map-wrap .info dl dt { width: 80rem; margin-right: 20rem; } .map-wrap ul { display: block; margin-top: 64rem; } .map-wrap ul li { padding: 24rem; height: 350rem; } .map-wrap ul li + li { margin-top: 20rem; } .map-wrap ul li:nth-of-type(1):after { content: ""; width: 40rem; height: 40rem; display: block; background: url("/common/kr/images/ico-subway.svg") no-repeat; background-size: cover; position: absolute; top: 24rem; right: 24rem; } .map-wrap ul li:nth-of-type(2):after { content: ""; width: 40rem; height: 40rem; display: block; background: url("/common/kr/images/ico-station.svg") no-repeat; background-size: cover; position: absolute; top: 24rem; right: 24rem; } .map-wrap ul li:nth-of-type(3):after { content: ""; width: 40rem; height: 40rem; display: block; background: url("/common/kr/images/ico-bus.svg") no-repeat; background-size: cover; position: absolute; top: 24rem; right: 24rem; } .map-wrap ul li div { bottom: 24rem; left: 24rem; } .map-wrap ul li div p { margin-top: 12rem; } .map-wrap ul li div p span.line9 { background: #a49e87; padding: 4rem 12rem; } .map-wrap ul li div p span.line7 { background: #5d6026; padding: 4rem 12rem; } } .part-list { margin-top: 120rem; display: grid; grid-template-columns: 1fr 1fr; row-gap: 100rem; -moz-column-gap: 60rem; column-gap: 60rem; } .part-list li { border-bottom: 1px solid #ced4dd; position: relative; padding-bottom: 63rem; } .part-list li p.f-tit2 { color: #000; } .part-list li p:last-of-type { margin: 16rem 0 48rem; height: 82rem; color: #465466; line-height: 170%; letter-spacing: -.05em; word-break: break-all; } .part-list li .logo { position: absolute; right: 0; bottom: 40rem; } .part-list li .logo img { width: 180rem; } @media all and (max-width: 1024px) { .part-list { margin-top: 72rem; display: block; } .part-list li { padding-bottom: 40rem; } .part-list li + li { margin-top: 72rem; } .part-list li p:last-of-type { margin: 14rem 0 30rem; height: auto; } .part-list li .logo { bottom: 26rem; z-index: -1; } .part-list li .logo img { width: 144rem; } } .member { position: relative; padding-top: 720rem; overflow: hidden; } @media all and (max-width: 1024px) { .member { padding-top: 600rem; } } .member .top-area { width: 1220rem; margin: 0 auto; } .member .tit-tab { text-align: center; width: 100%; } .member .tit-tab h2 { display: none; } .member .tit-tab h2.on { display: block; } .member .swiper { position: absolute; top: 47rem; left: 50%; transform: translate(-50%, 0); width: 100vw; height: 120vh; overflow: hidden; } .member .swiper::after { content: ""; display: block; position: absolute; top: calc(50vw + 250rem); left: 0; width: 100%; height: 50vw; background: #fff; z-index: 1; } @media all and (max-width: 599px) { .member .swiper::after { height: 60vw; top: calc(50vw + 90rem); } } .member .swiper .wrapper { position: absolute; z-index: 1; width: 100%; height: 100vw; top: 250rem; left: 0; } .member .swiper .wrapper .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #afbac9; width: 100%; height: 100vw; border-radius: 100vw; } .member .swiper .wrapper .mc { width: 500rem; height: 500rem; position: absolute; top: 50%; left: 50%; margin: -250rem 0 0 -250rem; overflow: hidden; cursor: default; } .member .swiper .wrapper .mc:nth-child(2) { transform: translateY(-50vw); z-index: 10; } .member .swiper .wrapper .mc:nth-child(3) { transform: rotateZ(36deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(4) { transform: rotateZ(72deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(5) { transform: rotateZ(108deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(6) { transform: rotateZ(144deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(7) { transform: rotateZ(180deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(8) { transform: rotateZ(216deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(9) { transform: rotateZ(252deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(10) { transform: rotateZ(288deg) translateY(-50vw); } .member .swiper .wrapper .mc:nth-child(11) { transform: rotateZ(324deg) translateY(-50vw); } .member .swiper .wrapper .mc p { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 250rem; background: #eceff2; transform: scale(.025); transition-duration: .4s; transition-property: transform; } .member .swiper .wrapper .mc p img { position: relative; width: 120rem; opacity: 0; transition-duration: .4s; transition-property: transform, opacity; } .member .swiper .wrapper .mc.active p { background: #f6f7f9; transform: scale(.75); } .member .swiper .wrapper .mc.active p img { width: 360rem; transform: rotateZ(0deg) scale(1.25); opacity: 1; } .member .swiper .wrapper .mc.next p { transform: scale(.25); } .member .swiper .wrapper .mc.next p img { transform: rotateZ(-36deg) scale(2); opacity: 1; } .member .swiper .wrapper .mc.prev p { transform: scale(.25); } .member .swiper .wrapper .mc.prev p img { transform: rotateZ(36deg) scale(2); opacity: 1; } @media all and (max-width: 1024px) { .member .swiper .wrapper .mc { width: 350rem; height: 350rem; margin: -175rem 0 0 -175rem; } .member .swiper .wrapper .mc.prev p, .member .swiper .wrapper .mc.next p { transform: scale(.5); } .member .swiper .wrapper .mc p img { width: 90rem; } .member .swiper .wrapper .mc.active p img { width: 158rem; } } @media all and (max-width: 599px) { .member .swiper .wrapper { top: 100rem; } .member .swiper .wrapper .mc { width: 200rem; height: 200rem; margin: -100rem 0 0 -100rem; } .member .swiper .wrapper .mc.active p { transform: scale(.7); } .member .swiper .wrapper .mc.prev p, .member .swiper .wrapper .mc.next p { transform: scale(.4); } } .member .swiper .arrow { width: 132rem; height: 60rem; position: absolute; top: 557rem; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; justify-content: space-between; } .member .swiper .arrow a { opacity: .4; transition: opacity .3s ease; } .member .swiper .arrow a:hover { opacity: 1; } @media all and (max-width: 1024px) { .member .swiper .arrow { top: 450rem; } } .member .swiper .arrow a { display: block; width: 60rem; height: 60rem; } .member .swiper .arrow a.go-prev { transform: rotate(180deg); } .member .swiper .arrow a img { width: 100%; } @media all and (max-width: 1024px) { .member .swiper .arrow a { width: 50rem; height: 50rem; } } @media all and (max-width: 599px) { .member .swiper .arrow a { width: 40rem; height: 40rem; } } @media all and (max-width: 1024px) { .member .swiper .arrow { width: 120rem; height: 50rem; } } @media all and (max-width: 599px) { .member .swiper .arrow { width: 90rem; height: 40rem; top: 210rem; } } @media all and (max-width: 599px) { .member .swiper { top: 0; } } .member .member-info { position: relative; width: 1220rem; margin: auto; z-index: 2; } @media all and (max-width: 1024px) { .member .member-info { width: 90%; } } .member .member-info .f-tit2 { width: 910rem; margin: auto; color: #000; } @media all and (max-width: 1024px) { .member .member-info .f-tit2 { width: 100%; } } .member .member-info ul { display: none; width: 910rem; margin: 8rem auto 0; } .member .member-info ul:nth-child(1) { display: block; } .member .member-info ul li { display: flex; flex-wrap: nowrap; padding: 32rem 0; border-bottom: 1px solid #e2e6eb; } .member .member-info ul li:last-child { border: 0; } .member .member-info ul li .th { font-size: 16rem; font-weight: 700; color: #1c222a; width: 155rem; line-height: 1.7; } @media all and (max-width: 599px) { .member .member-info ul li .th { width: 100rem; } } .member .member-info ul li .td { font-size: 16rem; font-weight: 400; color: #465466; width: 755rem; line-height: 1.7; } @media all and (max-width: 599px) { .member .member-info ul li .td { width: calc(100% - 100rem); } } @media all and (max-width: 1024px) { .member .member-info ul li { padding: 24rem 0; } } @media all and (max-width: 1024px) { .member .member-info ul { width: 100%; } } .member .member-info .link { position: relative; display: inline-block; padding-right: 20rem; } .member .member-info .link::after { content: ""; position: absolute; top: 0; right: 0; display: block; width: 20rem; height: 20rem; background: url("/common/kr/images/icon-link-grey.svg") no-repeat center center / cover; } @media all and (max-width: 1024px) { .member .member-info .info-list .link { padding-right: 16rem; } .member .member-info .info-list .link::after { width: 16rem; height: 16rem; } } .member .member-info .mem-info-img { position: relative; width: 100%; margin-top: 83rem; } .member .member-info .mem-info-img .imgs { display: none; justify-content: space-between; width: 100%; } .member .member-info .mem-info-img .imgs:nth-child(1) { display: flex; } @media all and (max-width: 599px) { .member .member-info .mem-info-img .imgs { display: block; } } .member .member-info .mem-info-img .imgs p { width: 393rem; height: 262rem; border-radius: 12rem; overflow: hidden; } .member .member-info .mem-info-img .imgs p img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @media all and (max-width: 1024px) { .member .member-info .mem-info-img .imgs p { width: 220rem; height: 147rem; } } @media all and (max-width: 599px) { .member .member-info .mem-info-img .imgs p { width: 100%; height: 238rem; margin-bottom: 16rem; } } .member .member-info .btn-wrap:not(.for-flex) { display: flex; justify-content: center; margin-top: 80rem; } @media all and (max-width: 1024px) { .member .member-info .btn-wrap:not(.for-flex) { margin-top: 40rem; } } @media all and (max-width: 599px) { .member { padding-top: 300rem; } } .busin-intro { margin-top: 64rem; } .busin-intro .li { position: relative; width: 100%; height: 610rem; overflow: hidden; border-radius: 12rem; } .busin-intro .li + div { margin-top: 80rem; } .busin-intro .li:nth-of-type(2) { transform: translateY(-560rem); } .busin-intro .li:nth-of-type(3) { transform: translateY(-1120rem); } .busin-intro .li:nth-of-type(4) { transform: translateY(-1680rem); } .busin-intro .li p { position: absolute; color: #fff; top: 60rem; left: 60rem; font-size: 32rem; text-shadow: 0 5px 20px rgba(0, 0, 0, .24); } .busin-intro .li .btn-wrap { position: absolute; bottom: 260rem; left: 60rem; width: 650rem; display: flex; flex-wrap: wrap; -moz-column-gap: 8rem; column-gap: 8rem; row-gap: 12rem; } .busin-intro .li .btn-wrap a { background: #fff; } .busin-intro .li .img { width: 100%; height: 710rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; } .busin-intro .li .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media all and (max-width: 1024px) { .busin-intro .li { height: auto; padding-top: 412rem; transform: translateY(0) !important; border-radius: unset; } .busin-intro .li + div { margin-top: 40rem; } .busin-intro .li p { top: 40rem; left: 40rem; font-size: 23rem; font-weight: 700; } .busin-intro .li .btn-wrap { position: unset; width: 100%; display: block; } .busin-intro .li .btn-wrap a { margin-top: 12rem; background: #fff; } .busin-intro .li .img { width: 100%; height: 400rem; border-radius: 12rem; overflow: hidden; } } @media all and (max-width: 599px) { .busin-intro .li { padding-top: 250rem; } .busin-intro .li p { top: 24rem; left: 24rem; } .busin-intro .li .img { height: 240rem; border-radius: 8rem; } } .biz-intro .tit-wrap { opacity: 0; } .major-biz { position: relative; width: 100%; padding: 0 !important; overflow: hidden; } .major-biz .top-area { position: fixed; visibility: hidden; } .major-biz .biz-intro { width: 100vw !important; height: 100vh !important; padding-top: 331rem; box-sizing: border-box; } .major-biz .biz-intro .tit-wrap { position: relative; width: 910rem; margin: 0 auto; opacity: 1; } .major-biz .biz-intro .tit-wrap .intro-tit { width: 100%; color: #000; } .major-biz .biz-intro .tit-wrap .intro-tit span { display: block; } @media all and (max-width: 1024px) { .major-biz .biz-intro .tit-wrap { width: 100%; padding: 0 20rem; } } .major-biz .biz-intro .img-wrap { position: absolute; left: 50%; z-index: -1; width: 910rem; height: 240rem; background: #000; transform: translateX(-50%); overflow: hidden; } .major-biz .biz-intro .img-wrap > img { position: absolute; width: 100%; -o-object-fit: cover; object-fit: cover; } @media all and (max-width: 1024px) { .major-biz .biz-intro .img-wrap > img { top: 0; width: 100%; } } .major-biz .biz-intro .img-wrap .circle-wrap { position: relative; width: 100%; height: 100%; } .major-biz .biz-intro .img-wrap .circle-wrap img { width: 100%; -o-object-fit: cover; object-fit: cover; } .major-biz .biz-intro .img-wrap .circle-wrap .circle { position: absolute; transition: transform 1.3s ease; } .major-biz .biz-intro .img-wrap .circle-wrap .circle:first-child { top: -949rem; right: -991rem; width: 1796rem; transform: rotate(500deg); } .major-biz .biz-intro .img-wrap .circle-wrap .circle:nth-child(2) { bottom: -584rem; left: -678rem; width: 1207rem; transform: rotate(140deg); } .major-biz .biz-intro .img-wrap .circle-wrap .circle:last-child { bottom: -1030rem; right: -763rem; width: 1386rem; transform: rotate(120deg); } .major-biz .biz-intro .img-wrap .circle-wrap.on .circle:first-child { transform: rotate(370deg); } .major-biz .biz-intro .img-wrap .circle-wrap.on .circle:nth-child(2) { transform: rotate(380deg); } .major-biz .biz-intro .img-wrap .circle-wrap.on .circle:last-child { transform: rotate(0deg); } .major-biz .biz-intro .img-wrap .circle-wrap.public-service .circle:first-child { top: -687rem; right: -432rem; width: 1529rem; transform: rotate(500deg); } .major-biz .biz-intro .img-wrap .circle-wrap.public-service .circle:nth-child(2) { bottom: -625rem; left: -473rem; width: 951rem; transform: rotate(240deg); } .major-biz .biz-intro .img-wrap .circle-wrap.public-service .circle:last-child { bottom: -488rem; right: -224rem; width: 1013rem; transform: rotate(215deg); } .major-biz .biz-intro .img-wrap .circle-wrap.public-service.on .circle:first-child { transform: rotate(365deg); } .major-biz .biz-intro .img-wrap .circle-wrap.public-service.on .circle:nth-child(2) { transform: rotate(400deg); } .major-biz .biz-intro .img-wrap .circle-wrap.public-service.on .circle:last-child { transform: rotate(360deg); } .major-biz .biz-intro .img-wrap .circle-wrap.tel-facility .circle:first-child { top: -849rem; left: -200rem; width: 2289rem; transform: rotate(300deg); } .major-biz .biz-intro .img-wrap .circle-wrap.tel-facility .circle:nth-child(2) { bottom: -890rem; left: -708rem; width: 1346rem; transform: rotate(180deg); } .major-biz .biz-intro .img-wrap .circle-wrap.tel-facility .circle:last-child { top: -1025rem; right: -378rem; width: 1346rem; transform: rotate(200deg); } .major-biz .biz-intro .img-wrap .circle-wrap.tel-facility.on .circle:first-child { transform: rotate(390deg); } .major-biz .biz-intro .img-wrap .circle-wrap.tel-facility.on .circle:nth-child(2) { transform: rotate(340deg); } .major-biz .biz-intro .img-wrap .circle-wrap.tel-facility.on .circle:last-child { transform: rotate(0deg); } .major-biz .biz-intro .img-wrap .circle-wrap.ict .circle:first-child { top: -610rem; left: -670rem; width: 1721rem; transform: rotate(220deg); } .major-biz .biz-intro .img-wrap .circle-wrap.ict .circle:nth-child(2) { bottom: -740rem; left: 149rem; width: 971rem; transform: rotate(140deg); } .major-biz .biz-intro .img-wrap .circle-wrap.ict .circle:last-child { top: -430rem; right: -148rem; width: 752rem; transform: rotate(510deg); } .major-biz .biz-intro .img-wrap .circle-wrap.ict.on .circle:first-child { transform: rotate(370deg); } .major-biz .biz-intro .img-wrap .circle-wrap.ict.on .circle:nth-child(2) { transform: rotate(0deg); } .major-biz .biz-intro .img-wrap .circle-wrap.ict.on .circle:last-child { transform: rotate(360deg); } @media all and (max-width: 1024px) { .major-biz .biz-intro .img-wrap .circle-wrap { display: none; } } @media all and (max-width: 1024px) { .major-biz .biz-intro .img-wrap { position: initial; width: 100%; height: 200rem; margin-top: 32rem; transform: translateX(0); } } .major-biz .biz-intro > p { width: 910rem; margin: 312rem auto 0; color: #333d4b; } @media all and (max-width: 1024px) { .major-biz .biz-intro > p { width: 100%; margin-top: 40rem; padding: 0 20rem; } } @media all and (max-width: 1024px) { .major-biz .biz-intro { height: auto !important; padding-top: 197rem; } } .major-biz .biz-cont { margin: 126rem auto 0; } .major-biz .biz-cont .major-cont-area, .major-biz .biz-cont .biz-justif-area { width: 1220rem; margin: 0 auto; color: #000; } .major-biz .biz-cont .major-cont-area .tit, .major-biz .biz-cont .biz-justif-area .tit { margin-bottom: 40rem; transform: translateY(70rem); transition-property: transform, opacity; transition-duration: .7s; transition-delay: .2s; opacity: 0; } .major-biz .biz-cont .major-cont-area .tit.active, .major-biz .biz-cont .biz-justif-area .tit.active { transform: translateY(0); opacity: 1; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .tit, .major-biz .biz-cont .biz-justif-area .tit { margin-bottom: 24rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap, .major-biz .biz-cont .biz-justif-area .cont-wrap { transform: translateY(70rem); transition-property: transform, opacity; transition-duration: .7s; transition-delay: .2s; opacity: 0; } .major-biz .biz-cont .major-cont-area .cont-wrap.active, .major-biz .biz-cont .biz-justif-area .cont-wrap.active { transform: translateY(0); opacity: 1; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area, .major-biz .biz-cont .biz-justif-area { width: 100%; padding: 0 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap { display: flex; -moz-column-gap: 24rem; column-gap: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item { padding: 40rem; background-color: #f6f7f9; border-radius: 12rem; } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 { width: 721rem; } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .img-wrap { width: 240rem; height: 240rem; margin-bottom: 80rem; border-radius: 40rem; overflow: hidden; } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .img-wrap img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .img-wrap { width: 180rem; height: 180rem; margin-bottom: 40rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .item-tit { margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .item-tit { margin-bottom: 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item.cont-item1 .item-desc { margin-bottom: 6rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .cont-item { width: 100% !important; padding: 20rem 20rem 25rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap .right { width: calc(100% - 745rem); } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item { display: flex; flex-direction: column; } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item .item-tit { margin-bottom: auto; } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item2 { height: 285rem; margin-bottom: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item2 .item-desc { color: #1c222a; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item2 { height: 230rem; margin-bottom: 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item3 { height: 475rem; background: url("/common/kr/images/img-number-port-mng-07.jpg") no-repeat center center/cover; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.kif .right .cont-item.cont-item3 { background: url("/common/kr/images/img-ict-02.jpg") no-repeat center center/cover; } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item3 .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item3 .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item3 .item-desc { margin-bottom: 6rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .right .cont-item.cont-item3 { height: 350rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap .right { width: 100%; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item { display: flex; flex-direction: column; } .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item1 { width: 475rem; height: 475rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item1 .item-tit { margin-bottom: auto; } .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item1 .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item1 .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item1 .item-desc { margin-bottom: 6rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item1 { height: 350rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item2 { width: 721rem; height: 475rem; background: url("/common/kr/images/img-number-port-mng-03.jpg") no-repeat center center / cover; color: #fff; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ultra-fast .cont-item.cont-item2 { height: 420rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item { display: flex; flex-direction: column; height: 475rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item .item-tit { margin-bottom: auto; } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item .item-desc { margin-bottom: 6rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item1 { width: 475rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item1 { height: 350rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item2 { width: 721rem; background: url("/common/kr/images/img-number-port-mng-04.jpg") no-repeat center center/cover; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item2 .item-desc { margin-bottom: 10rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item2 .item-desc { margin-bottom: 6rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item2 .item-desc br { display: none; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.fnp .cont-item.cont-item2 { height: 420rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call { flex-wrap: wrap; row-gap: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item { display: flex; flex-direction: column; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item1 { width: 721rem; height: 475rem; background: url("/common/kr/images/img-number-port-mng-05.jpg") no-repeat bottom left -200rem/1181rem auto; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item1 .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item1 .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item1 { height: 420rem; background: rgba(0, 0, 0, .4) url("/common/kr/images/img-number-port-mng-05.jpg") no-repeat top left -210rem/923rem auto; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item2 { width: 475rem; height: 475rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item2 .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item2 .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item2 .item-desc { margin-bottom: 6rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item2 { height: 350rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item3 { width: 381rem; height: 341rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item3 { height: 230rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item4 { width: 815rem; height: 341rem; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item4 { background: url("/common/kr/images/img-number-port-mng-08.jpg") no-repeat center center / cover; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item.cont-item4 { height: 230rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call .cont-item .item-tit { margin-bottom: auto; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.ld-call { row-gap: 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium { flex-wrap: wrap; row-gap: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item { display: flex; flex-direction: column; } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item .item-tit { margin-bottom: auto; } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item1, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item1 { width: 475rem; height: 264rem; background: url("/common/kr/images/img-public-service-01.png") #f63b3b no-repeat bottom 40rem right 40rem/80rem auto; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item1 { width: 475rem; height: 264rem; background: #0f5875; color: #fff; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item1 { height: 230rem; background: url("/common/kr/images/img-public-service-01.png") #f63b3b no-repeat bottom 29rem right 30rem/60rem auto; } } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item2 { width: 721rem; height: 264rem; background: url("/common/kr/images/img-public-service-02.jpg") no-repeat center center/cover; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item2 { width: 721rem; height: 264rem; background: url("/common/kr/images/img-ict-03.jpg") no-repeat center center/cover; color: #fff; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item2, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item2 { height: 420rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item3, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item3 { width: 886rem; height: 390rem; margin-bottom: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item3 .item-tit { margin-bottom: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item3 .item-desc { margin-bottom: 8rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item3 .item-desc:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item3 { height: 525rem; margin-bottom: 20rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item3 .item-desc { margin-bottom: 6rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item4 { width: 886rem; height: 264rem; background: url("/common/kr/images/img-public-service-03.jpg") no-repeat center center / cover; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item4 { width: 886rem; height: 264rem; background: url("/common/kr/images/img-ict-04.jpg") no-repeat center center / cover; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item4 .item-tit { margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item4 { height: 525rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item4 .item-tit { margin-bottom: auto; } } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item5, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item5 { width: 310rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item5 > img, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item5 > img { align-self: center; width: 200rem; margin-bottom: auto; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item5 > img, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item5 > img { align-self: flex-start; width: 180rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item5 .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item5 .item-tit { margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item5 .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item5 .item-tit { margin-bottom: 20rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service .cont-item.cont-item5, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium .cont-item.cont-item5 { height: 420rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.public-service, .major-biz .biz-cont .major-cont-area .cont-wrap.venturium { row-gap: 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit { flex-wrap: wrap; row-gap: 24rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item1 { width: 475rem; height: 264rem; background: url("/common/kr/images/img-tel-facility-01.png") #f25700 no-repeat bottom 40rem right 40rem/91rem auto; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item1 { width: 475rem; height: 264rem; background: url("/common/kr/images/img-tel-facility-05.png") #2995e0 no-repeat bottom 30rem right 30rem/100rem auto; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item1 { width: 475rem; height: 264rem; background: url("/common/kr/images/img-tel-facility-09.png") #001d4f no-repeat bottom 30rem right 30rem/100rem auto; color: #fff; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item1, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item1 { height: 230rem; background: url("/common/kr/images/img-tel-facility-01.png") #f25700 no-repeat bottom 29rem right 30rem/69rem auto; } .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item1 { height: 230rem; background: url("/common/kr/images/img-tel-facility-09.png") #001d4f no-repeat bottom 30rem right 30rem/69rem auto; } } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item2, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item2, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item2 { position: relative; width: 721rem; height: 264rem; background: url("/common/kr/images/img-tel-facility-02.jpg") no-repeat bottom left 40%/933rem auto; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item2::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); border-radius: 12rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item2 .item-tit { position: relative; z-index: 1; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item2, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item2 { height: 420rem; background: url("/common/kr/images/img-tel-facility-02.jpg") no-repeat top left 42%/933rem auto; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item2::after { display: none; } } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item3, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item3, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item3 { width: 886rem; height: 390rem; margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item3, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item3, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item3 { height: 525rem; margin-bottom: 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item4, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item4, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item4 { width: 886rem; height: 264rem; background: url("/common/kr/images/img-tel-facility-07.jpg") no-repeat center center / cover; color: #fff; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item4 { background: url("/common/kr/images/img-tel-facility-04.jpg") no-repeat center center / cover; } .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item4 { background: url("/common/kr/images/img-tel-facility-11.jpg") no-repeat center center / cover; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item4 .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item4 .item-tit { margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item4 .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item4 .item-tit { margin-bottom: 20rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item4, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item4, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item4 { height: 525rem; background: url("/common/kr/images/img-public-service-03.jpg") no-repeat 35% 0%/900rem auto; } .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item4 { background: url("/common/en/images/img-tel-facility-07.jpg") no-repeat center right / cover; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item4 { background: url("/common/kr/images/img-tel-facility-04-mob.jpg") no-repeat center center / cover; } .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item4 { background: url("/common/kr/images/img-tel-facility-11.jpg") no-repeat center center / cover; } } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item5, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item5, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item5 { display: flex; flex-direction: column; width: 310rem; } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item5 > img, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item5 > img, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item5 > img { align-self: center; width: 200rem; margin-bottom: auto; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item5 > img, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item5 > img, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item5 > img { align-self: flex-start; width: 180rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item5 .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item5 .item-tit { margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item5 .item-tit, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item5 .item-tit { margin-bottom: 20rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable .cont-item.cont-item5, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item5, .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item5 { height: 420rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap.aerial-cable, .major-biz .biz-cont .major-cont-area .cont-wrap.electrical { row-gap: 20rem; } } .major-biz .biz-cont .major-cont-area .cont-wrap.electrical .cont-item.cont-item2 { background: url("/common/kr/images/img-tel-facility-06.jpg") no-repeat center center/cover; } .major-biz .biz-cont .major-cont-area .cont-wrap.cancelled-circuit .cont-item.cont-item2 { background: url("/common/kr/images/img-tel-facility-10.jpg") no-repeat center center / cover; } @media all and (max-width: 1024px) { .major-biz .biz-cont .major-cont-area .cont-wrap { flex-direction: column; -moz-column-gap: 0; column-gap: 0; row-gap: 20rem; } } .major-biz .biz-cont .biz-justif-area { margin-top: 160rem; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b { display: block; margin-bottom: 16rem; padding: 40rem; background-color: #f6f7f9; border-radius: 12rem; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b:last-child { margin-bottom: 0; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b.link span { position: relative; display: inline-block; padding-right: 20rem; line-height: 180%; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b.download span { position: relative; display: inline-block; padding-right: 30rem; line-height: 180%; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b.link span::after { content: ""; position: absolute; top: 0; right: 0; width: 20rem; height: 20rem; background: url("/common/kr/images/icon-link.svg") no-repeat center center / cover; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b.download span::after { content: ""; position: absolute; top: 50%; right: 0; width: 20rem; height: 20rem; background: url("/common/kr/images/icon-attachment.svg") no-repeat center center / cover; transform: translateY(-50%); } @media all and (max-width: 1024px) { .major-biz .biz-cont .biz-justif-area { margin-top: 80rem; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b { margin-bottom: 12rem; padding: 20rem; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b.link span { padding-right: 16rem; } .major-biz .biz-cont .biz-justif-area .cont-wrap .f-body1-b.link span::after { width: 16rem; height: 16rem; } } .major-biz .biz-cont .data-notice { margin-top: 160rem; padding: 80rem 0; background-color: #f6f7f9; text-align: center; color: #1c222a; } .major-biz .biz-cont .data-notice img { width: 64rem; margin-bottom: 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .data-notice img { margin-bottom: 20rem; } } .major-biz .biz-cont .data-notice .desc { margin: 8rem 0 24rem; } @media all and (max-width: 1024px) { .major-biz .biz-cont .data-notice .desc { margin-bottom: 20rem; } } .major-biz .biz-cont .data-notice .btn-wrap { margin-top: 40rem; } .major-biz .biz-cont .data-notice .btn-wrap .btn { background-color: #fff; } @media all and (max-width: 1024px) { .major-biz .biz-cont .data-notice .btn-wrap { margin-top: 32rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont .data-notice { margin-top: 80rem; padding: 60rem 20rem; } } @media all and (max-width: 1024px) { .major-biz .biz-cont { margin-top: 80rem; } } .main-wrap { height: 100vh; overflow: hidden; position: relative; } .main-wrap .swiper-area { width: 100%; height: 100vh; } .main-wrap .txtSwiper { width: 100%; height: 100vh; position: absolute; z-index: 10; } .main-wrap .txtSwiper .swiper-slide { width: 100%; height: 100%; } .main-wrap .txtSwiper .swiper-slide .txt-area { position: absolute; left: 50rem; top: 50%; transform: translateY(-50%); color: #fff; width: calc(100% - 100rem); text-align: center; } .main-wrap .txtSwiper .swiper-slide .txt-area p { opacity: 0; transform: translateY(30rem); font-family: "GmarketSansBold"; } .main-wrap .txtSwiper .swiper-slide-active .txt-area p { opacity: 1; transition-duration: 1s; transform: translateY(0); } .main-wrap .txtSwiper .swiper-slide .txt-area .btn-wrap { opacity: 0; transform: translateY(20rem); margin-top: 40rem; } .main-wrap .txtSwiper .swiper-slide-active .txt-area .btn-wrap {opacity: 1; transition-duration: 1s; transition-delay: .3s; transform: translateY(0); } .main-wrap .txtSwiper .swiper-slide .bg-area { width: 100%; height: 100%; } .main-wrap .txtSwiper .swiper-slide .bg-area img {width: 100%; height: 100%; object-fit: cover;} .main-wrap .txtSwiper .swiper-slide .bg-area video {width: 100%; height: 100%; object-fit: cover;} .main-wrap .txtSwiper .swiper-slide .txt-area .btn-wrap .btn {background: #fff; border: 1px solid #e2e6eb;} .main-wrap .txtSwiper .utils { position: absolute; width: 237rem; height: 40rem; z-index: 10; bottom: 210rem; left: 50%; transform: translateX(-50%); } .main-wrap .txtSwiper .utils .swiper-button-next { width: 40rem; height: 40rem; border-radius: 500rem; right: 0; top: 0; margin-top: 0; transition: all ease-in-out .15s; z-index: 3; } .main-wrap .txtSwiper .utils .swiper-button-next::after { content: ""; width: 40rem; height: 40rem; background: url("/common/kr/images/ico-main-arrow.svg") no-repeat; background-size: cover; transform: rotate(180deg); } .main-wrap .txtSwiper .utils .swiper-button-prev { width: 40rem; height: 40rem; border-radius: 500rem; left: 0; top: 0; margin-top: 0; transition: all ease-in-out .15s; z-index: 3; } .main-wrap .txtSwiper .utils .swiper-button-prev::after { content: ""; width: 40rem; height: 40rem; background: url("/common/kr/images/ico-main-arrow.svg") no-repeat; background-size: cover; } .main-wrap .txtSwiper .utils .swiper-button-next:hover { background: rgba(0, 0, 0, .4); } .main-wrap .txtSwiper .utils .swiper-button-prev:hover { background: rgba(0, 0, 0, .4); } .main-wrap .txtSwiper .utils .swiper-pagination { z-index: 2; font-size: 16rem; color: #fff; font-family: NanumSquare; font-weight: 700; width: auto; left: 80rem; top: 14rem; } .main-wrap .txtSwiper .utils .play { width: 32rem; height: 32rem; position: absolute; right: 80rem; bottom: 3rem; border-radius: 500rem; transition: all ease-in-out .15s; } .main-wrap .txtSwiper .utils .play:hover { background: rgba(0, 0, 0, .4); } .main-wrap .txtSwiper .utils .play .pause { width: 32rem; height: 32rem; background: url("/common/kr/images/ico-pause.svg") no-repeat; background-size: cover; position: absolute; z-index: 2; top: 0; left: 0; } .main-wrap .txtSwiper .utils .play .start { width: 32rem; height: 32rem; background: url("/common/kr/images/ico-play.svg") no-repeat; background-size: cover; position: absolute; z-index: 2; top: 0; left: 0; display: none; } .main-wrap .kvSwiper { width: 100vw; height: 100vh; position: relative; } .main-wrap .kvSwiper .slide {position: absolute; top: 0; left: 0; z-index: 1; transition: all 1s; opacity: 0; width: 100%; height: 100vh;} .main-wrap .kvSwiper .slide.on {opacity: 1;} .main-wrap .kvSwiper .slide img {width: 100%; height: 100%; object-fit: cover;} .main-wrap .kvSwiper .slide video {width: 100%; height: 100%; object-fit: cover;} .main-wrap .kvSwiper .swiper-slide { width: 100%; height: 100%; } .main-wrap .kvSwiper .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .main-wrap .kvSwiper .swiper-slide video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .main-wrap .links {position: absolute; z-index: 11; bottom: 60rem; left: 0; display: flex; height: 100rem; width: 100%; justify-content: center;} .main-wrap .links a {display: block; width: 360rem; display: flex; color: #fff; text-align: center; align-items: center; justify-content: center; transition-duration: .3s; border: 1px solid transparent; position: relative; border: 1px solid transparent;} .main-wrap .links a::after {content: ""; width: 1px; height: 100rem; display: block; background: rgba(255, 255, 255, .25); position: absolute; right: -1px; transition: all .3s;} .main-wrap .links a:nth-of-type(5)::after {display: none;} .main-wrap .links a:hover::after {opacity: 0;} .main-wrap .links a:first-of-type:hover {border-radius: 8rem; border: 1px solid #2995e0;} .main-wrap .links a:nth-of-type(2):hover {border-radius: 8rem; border: 1px solid #ce842e;} .main-wrap .links a:nth-of-type(3):hover {border-radius: 8rem; border: 1px solid #ee6e50;} .main-wrap .links a:nth-of-type(4):hover {border-radius: 8rem; border: 1px solid #7e82fb;} .main-wrap .links a:nth-of-type(5):hover {border-radius: 8rem; border: 1px solid #29a4a4;} .main-wrap .links a.prev::after {opacity: 0;} .main-wrap .links a span::after {content: ""; display: block; width: 24rem; height: 24rem; background: url("/common/kr/images/ico-main-link.svg") no-repeat; background-size: contain; position: absolute; right: 30rem; top: 50%; transform: translateY(-50%); opacity: 0; transition: all .3s;} .main-wrap .links a:hover span::after {opacity: 1; right: 20rem;} .main-wrap .labels {position: absolute; z-index: 11; right: 0; top: 163rem; display: flex; justify-content: end; flex-wrap: wrap; width: 158rem;} .main-wrap .labels > div {display: flex; justify-content: end; flex-wrap: wrap;} .main-wrap .labels > div > .board {background: #211f86; border-radius: 8rem 0 0 8rem; color: #fff; width: 184rem; height: 56rem; display: flex; align-items: center; padding-left: 24rem; margin-bottom: 16rem;} .main-wrap .labels > div > .board span {margin-right: 10rem; width: 32rem; display: block;} .main-wrap .labels > div > .board span img {width: 100%;} .main-wrap .labels > div > .graph {background: #2b29af; border-radius: 8rem 0 0 8rem; color: #fff; width: 168rem; height: 56rem; display: flex; align-items: center; padding-left: 24rem; position: relative;} .main-wrap .labels > div > .graph span {margin-right: 10rem; width: 32rem; display: block;} .main-wrap .labels > div > .graph span img {width: 100%;} .main-wrap .labels > div > .graph::after {content: ""; width: 20rem; height: 20rem; background: url("/common/kr/images/ico-main-out.svg") no-repeat; display: block; position: absolute; top: 12rem; right: 24rem; background-size: contain;} .main-wrap .labels .layer {width: 500rem; height: 56rem; position: relative;} .main-wrap .labels .layer .news {background: #2995e0; border-radius: 8rem 0 0 8rem; color: #fff; width: 148rem; height: 56rem; position: absolute; right: 0; transition: all .5s;} .main-wrap .labels .layer.on .news {right: 356rem; width: 65rem; background: 0;} .main-wrap .labels .layer .news .ico {display: block; margin-right: -5rem; width: 65rem; height: 56rem;} .main-wrap .labels .layer .news .ico img {width: 100%;} .main-wrap .labels .layer .news .txt {position: absolute; top: 50%; transform: translateY(-50%); right: 25rem; transition: all .3s;} .main-wrap .labels .layer.on .news .txt {opacity: 0;} .main-wrap .labels .layer .box {background: #fff; width: 340rem; max-height: 492rem; border-radius: 8rem; position: absolute; right: -348rem; transition: all .5s;} .main-wrap .labels .layer.on .box {right: 8rem;} .main-wrap .labels .layer .box a {display: block; transition: all .3s; padding: 20rem; border-radius: 8rem; position: relative;} .main-wrap .labels .layer .box a:hover {background: #f6f7f9;} .main-wrap .labels .layer .box a::after {content: ""; width: 280rem; height: 1px; background: #eceff2; display: block; position: absolute; bottom: 0;} .main-wrap .labels .layer .box a:last-of-type:after {content: ""; display: none;} .main-wrap .labels .layer .box a p:first-of-type {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #1c222a; margin-bottom: 10rem; line-height: 170%; letter-spacing: -.032em;} .main-wrap .labels .layer .box a p:first-of-type span {font-weight: 700; color: #000;} .main-wrap .labels .layer .box a p:last-of-type {color: #5a6d85;} .main-wrap .labels .layer .box .tit {display: none;} @media all and (max-width: 1024px) { .main-wrap .swiper-area {height: 90vh;} .main-wrap .links {position: relative; display: block; z-index: 10; bottom: unset; left: 20rem; height: auto; width: calc(100% - 40rem);} .main-wrap .links a {border-radius: 6rem; border: 1px solid rgba(255, 255, 255, .25); width: 100%; height: 90rem; justify-content: flex-start; text-align: left; padding: 20rem;} .main-wrap .links a + a {margin-top: 10rem;} .main-wrap .links a:hover {border: 1px solid rgba(255, 255, 255, .25) !important;} .main-wrap .links a::after {display: none;} .main-wrap .links a span::after {opacity: 1;} .main-wrap .links a span br {display: none;} .main-wrap .labels {position: relative; top: unset; width: calc(100% - 40rem); right: unset; left: 20rem; margin: 20rem 0 80rem; justify-content: center;} .main-wrap .labels > div {justify-content: center; display: grid; gap: 10rem;} .main-wrap .labels > div > .board {width: 170rem; height: 93rem; display: block; text-align: center; border-radius: 6rem; padding-left: 0; padding-top: 16rem;} .main-wrap .labels > div > .board span {margin: 0 auto 8rem;} .main-wrap .labels > div > .graph {width: 170rem; height: 93rem; display: block; text-align: center; border-radius: 6rem; padding-left: 5rem; padding-top: 16rem; margin: 0;} .main-wrap .labels > div > .graph span {margin: 0 auto;} .main-wrap .labels > div > .graph::after {position: unset; display: inline-block; transform: translateY(3rem);} .main-wrap .labels .layer {grid-template-columns: 1fr; width: auto; height: auto; position: unset;} .main-wrap .labels .layer .news {width: 170rem; height: 93rem; display: block; text-align: center; border-radius: 6rem; padding-left: 0; padding-top: 5rem; position: unset; margin-left: 10rem;} .main-wrap .labels .layer.on .news {right: unset; width: 170rem; background: #2995e0;} .main-wrap .labels .layer .news .txt {position: unset;} .main-wrap .labels .layer.on .news .txt {opacity: 1;} .main-wrap .labels .layer .news .ico {margin: 0 auto; transform: translateX(5rem);} .main-wrap .labels .layer .box {position: fixed; right: 0; bottom: -100vh; z-index: 200; width: 100vw; max-height: unset; height: calc(100% - 70rem); padding-top: 70rem; border-radius: 8rem 8rem 0 0;} .main-wrap .labels .layer .box a {padding: 20rem;} .main-wrap .labels .layer .box a::after {width: calc(100% - 40rem);} .main-wrap .labels .layer .box a:hover {background: unset;} .main-wrap .labels .layer.on .box {bottom: 0; right: 0;} .main-wrap .labels .layer .box .tit {display: block; margin-left: 20rem; font-size: 23rem; font-weight: 800; margin-bottom: 20rem; color: #000;} .main-wrap .labels .layer .box .for-scrl {overflow-y: auto; max-height: calc(100% - 100rem);} .main-wrap .labels .layer .box .xbt {display: block; width: 32rem; height: 32rem; background: url("/common/kr/images/btn-close.svg"); position: absolute; top: 16rem; right: 20rem;} .main-wrap .labels .layer .dimd {width: 100vw; height: 100vh; background: rgba(0, 0, 0, .4); display: block; position: fixed; top: 0; left: 0; z-index: 190; display: none;} } @media all and (max-width: 600px) { .main-wrap .labels {display: grid; grid-template-columns: 1fr 1fr; gap: 10rem;} .main-wrap .labels .layer .news {margin-left: 0;} } .main-wrap .info-area { position: absolute; right: 40rem; bottom: 44rem; width: 340rem; z-index: 10; } .main-wrap .info-area .top { display: grid; gap: 8rem; grid-template-columns: 1fr 1fr; } .main-wrap .info-area .top a { border-radius: 12px; border: 1px solid #484848; background: rgba(28, 29, 31, .7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; height: 60rem; padding: 0 24rem; display: flex; align-items: center; } .main-wrap .info-area .top a::after { content: ""; width: 40rem; height: 40rem; background: url("/common/kr/images/ico-main-go.svg") no-repeat; background-size: cover; position: absolute; right: 4rem; opacity: 0; transition: all ease-in-out .15s; } .main-wrap .info-area .top a:hover::after { opacity: 1; } .main-wrap .info-area .box { width: 100%; min-height: 295rem; border-radius: 12px; border: 1px solid #484848; background: rgba(28, 29, 31, .7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; padding: 24rem; } .main-wrap .info-area .box .f-caption-b { margin-bottom: 12rem; opacity: .8; } .main-wrap .info-area .box div a { display: block; padding: 8rem 0 8rem 32rem; border-radius: 8rem; background: 0; position: relative; transition: all ease-in-out .15s; width: calc(100% + 24rem); margin-left: -12rem; } .main-wrap .info-area .box div a:hover { background: #484848; } .main-wrap .info-area .box div a::before { content: ""; width: 8rem; height: 8rem; background: #2995e0; display: block; position: absolute; top: 18rem; left: 14rem; border-radius: 80px; } .main-wrap .info-area .box div a span { display: block; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main-wrap .info-area .box.menu { margin: 10rem 0; } .main-wrap .info-area .box.news div a::before { border: 1px solid #2995e0; background: 0; } .main-wrap .bg { display: none; } @media all and (max-width: 1024px) { .main-wrap { height: auto; background: #000; overflow: hidden; } .main-wrap .txtSwiper .swiper-slide .txt-area { left: 50%; transform: translateX(-50%); top: unset; bottom: 30vh; text-align: center; width: 100%; padding: 0 20rem; } .main-wrap .txtSwiper .swiper-slide .txt-area .btn-wrap { margin-top: 32rem; } .main-wrap .txtSwiper .utils { bottom: 15vh; left: 50%; transform: translateX(-50%); width: 190rem; } .main-wrap .txtSwiper .utils .play { right: 47rem; top: 3rem; } .main-wrap .txtSwiper .utils .swiper-pagination { top: 13rem; left: 60rem; } .main-wrap .kvSwiper { position: fixed; } .main-wrap .info-area { position: relative; z-index: 10; width: calc(100% - 50rem); right: unset; left: 25rem; bottom: unset; padding: 48rem 0 80rem; } .main-wrap .bg { width: 100vw; height: 100vh; background: rgba(0, 0, 0, .7); display: block; position: fixed; top: 0; left: 0; z-index: 1; opacity: 0; transition: all .7s; } } @media all and (max-width: 599px) { .main-wrap .txtSwiper .utils .play { right: 47rem; top: 4rem; } } .main + footer { z-index: 10; background: #fff; } .tele-con { height: 740rem; margin-top: 64rem; padding: 40rem 50rem; border-radius: 12rem; background: url("/common/kr/images/img-tele-con-bg.jpg") no-repeat center center/cover; } .tele-con .sub-tit { margin-bottom: 12rem; color: #000; } .tele-con .desc { margin-bottom: 40rem; color: #1c222a; } @media all and (max-width: 1024px) { .tele-con .desc { margin-bottom: 32rem; } } @media all and (max-width: 1024px) { .tele-con { margin-top: 32rem; padding: 24rem; background: url("/common/kr/images/img-tele-con-bg-mob.jpg") no-repeat bottom 0 right 0/cover; } } @media all and (max-width: 599px) { .tele-con { height: 500rem; } } .related-con { margin-top: 120rem; } .related-con .tel-agency-area { margin-top: 80rem; } @media all and (max-width: 1024px) { .related-con .tel-agency-area { margin-top: 64rem; } } .related-con .sub-tit { margin-bottom: 24rem; color: #000; } .related-con .link-div { display: flex; flex-wrap: wrap; align-items: center; -moz-column-gap: 20rem; column-gap: 20rem; row-gap: 20rem; } .related-con .link-div .link-item { display: flex; flex-direction: column; align-items: center; width: calc((100% - 40rem) / 3); padding: 0 45rem 20rem; border-radius: 12rem; border: 1px solid #e2e6eb; transition: border .3s ease; } .related-con .link-div .link-item img { width: 200rem; } @media all and (max-width: 1024px) { .related-con .link-div .link-item img { width: 120rem; } } .related-con .link-div .link-item .txt { position: relative; padding-right: 20rem; transition: color .3s ease; } .related-con .link-div .link-item .txt::after { content: ""; position: absolute; top: 0; right: 0; width: 20rem; height: 20rem; background: url("/common/kr/images/icon-link-grey.svg") no-repeat center center/cover; transition: background-image .3s ease; } @media all and (max-width: 1024px) { .related-con .link-div .link-item .txt::after { width: 16rem; height: 16rem; } } @media all and (max-width: 1024px) { .related-con .link-div .link-item .txt { padding-right: 16rem; } } .related-con .link-div .link-item:hover { border: 1px solid #5a6d85; } .related-con .link-div .link-item:hover .txt { color: #000; } .related-con .link-div .link-item:hover .txt::after { background-image: url("/common/kr/images/icon-link.svg"); } @media all and (max-width: 1024px) { .related-con .link-div .link-item { width: calc((100% - 10rem) / 2); padding: 0 25rem 10rem; } } @media all and (max-width: 1024px) { .related-con .link-div { -moz-column-gap: 10rem; column-gap: 10rem; row-gap: 10rem; } } @media all and (max-width: 1024px) { .related-con { margin-top: 64rem; } } .error-page { position: absolute; top: 50%; left: 50%; width: 880rem; transform: translate(-50%, -50%); } .error-page .no-srch-area { padding: 0; } .error-page .no-srch-area h2 { color: #000; } .error-page .no-srch-area p { margin: 16rem 0 40rem; } .error-page .no-srch-area p .only-mob { display: none; } @media all and (max-width: 1024px) { .error-page .no-srch-area p .only-mob { display: block; } } @media all and (max-width: 1024px) { .error-page { width: calc(100% - 40rem); } } .privacy-policy-area .article-info-head { margin: 120rem 0 80rem !important; } @media all and (max-width: 1024px) { .privacy-policy-area .article-info-head { flex-direction: column !important; row-gap: 16rem; margin: 64rem 0 40rem !important; } } .privacy-policy-area .privacy-policy-div { margin-bottom: 48rem; } .privacy-policy-area .privacy-policy-div p { margin-bottom: 4rem; } .privacy-policy-area .privacy-policy-div p:last-child { margin-bottom: 0; } .privacy-policy-area .privacy-policy-div .tit { margin-bottom: 20rem; color: #000; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div .tit { margin-bottom: 16rem; } } .privacy-policy-area .privacy-policy-div .desc { margin-bottom: 16rem; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div .desc { margin-bottom: 12rem; } } .privacy-policy-area .privacy-policy-div .sub-w { margin-bottom: 16rem; } .privacy-policy-area .privacy-policy-div .sub-w:last-child { margin-bottom: 0; } .privacy-policy-area .privacy-policy-div .sub-w .sub-tit { margin-bottom: 8rem; } .privacy-policy-area .privacy-policy-div .sub-w .sub-tit:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div .sub-w .sub-tit { margin-bottom: 6rem; } } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div .sub-w { margin-bottom: 12rem; } } .privacy-policy-area .privacy-policy-div .sub-desc { margin-bottom: 8rem; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div .sub-desc { margin-bottom: 6rem; } } .privacy-policy-area .privacy-policy-div .dot { position: relative; margin: 12rem 0 8rem; padding-left: 11rem; } .privacy-policy-area .privacy-policy-div .dot + .dot { margin-top: 8rem; } .privacy-policy-area .privacy-policy-div .dot:last-child { margin-bottom: 0; } .privacy-policy-area .privacy-policy-div .dot::before { content: ""; position: absolute; top: 12rem; left: 0; display: block; width: 3rem; height: 3rem; background-color: #465466; border-radius: 50%; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div .dot { margin: 8rem 0 6rem; padding-left: 0; } .privacy-policy-area .privacy-policy-div .dot::before { top: 9rem; width: 3rem; height: 3rem; } .privacy-policy-area .privacy-policy-div .dot > p:first-of-type { padding-left: 9rem; } } .privacy-policy-area .privacy-policy-div.intro { margin-bottom: 60rem; } .privacy-policy-area .privacy-policy-div.intro .f-body3-b { margin-bottom: 20rem; color: #1c222a; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div.intro .f-body3-b { margin-bottom: 16rem; } } .privacy-policy-area .privacy-policy-div.intro .f-caption-r { color: #5a6d85; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div.intro { margin-bottom: 48rem; } } .privacy-policy-area .privacy-policy-div:last-child { margin-bottom: 0; } @media all and (max-width: 1024px) { .privacy-policy-area .privacy-policy-div { margin-bottom: 32rem; } } .sitemap-area { margin-top: 120rem; color: #000; } .sitemap-area .menu-div { margin-bottom: 120rem; } .sitemap-area .menu-div:last-child { margin-bottom: 0; } .sitemap-area .menu-div .one-depth { padding-bottom: 24rem; border-bottom: 1rem solid #e2e6eb; } @media all and (max-width: 1024px) { .sitemap-area .menu-div .one-depth { position: relative; padding: 20rem 0; cursor: pointer; } .sitemap-area .menu-div .one-depth::after { content: ""; position: absolute; top: 50%; right: 0; display: block; width: 16rem; height: 16rem; background: url("/common/kr/images/ico-acco.svg") no-repeat center center/cover; transform: translateY(-50%); } .sitemap-area .menu-div .one-depth.on::after { transform: translateY(-50%) rotate(180deg); } } .sitemap-area .menu-div .two-depth { display: flex; -moz-column-gap: 20rem; column-gap: 20rem; margin-top: 48rem; } .sitemap-area .menu-div .two-depth a { display: block; } .sitemap-area .menu-div .two-depth > li { width: 224rem; } .sitemap-area .menu-div .two-depth > li .three-depth { margin-top: 20rem; } .sitemap-area .menu-div .two-depth > li .three-depth li { margin-bottom: 16rem; } .sitemap-area .menu-div .two-depth > li .three-depth li:last-of-type { margin-bottom: 0; } .sitemap-area .menu-div .two-depth > li .three-depth li a { display: inline-block; color: #465466; } @media all and (max-width: 1024px) { .sitemap-area .menu-div .two-depth > li .three-depth li a { padding: 8rem 16rem; background-color: #f6f7f9; border-radius: 32rem; } } @media all and (max-width: 1024px) { .sitemap-area .menu-div .two-depth > li .three-depth li { margin-bottom: 12rem; } } @media all and (max-width: 1024px) { .sitemap-area .menu-div .two-depth > li .three-depth { display: none; margin-top: 16rem; padding-bottom: 8rem; } } @media all and (max-width: 1024px) { .sitemap-area .menu-div .two-depth > li { width: 100%; margin-bottom: 16rem; } .sitemap-area .menu-div .two-depth > li:last-child { margin-bottom: 0; } .sitemap-area .menu-div .two-depth > li:last-child .three-depth { padding-bottom: 0; } .sitemap-area .menu-div .two-depth > li .has-three { position: relative; } .sitemap-area .menu-div .two-depth > li .has-three::after { content: ""; position: absolute; top: 50%; right: 0; width: 12rem; height: 12rem; background: url("/common/kr/images/ico-acco-gray.svg") no-repeat center center/cover; transform: translateY(-50%); } .sitemap-area .menu-div .two-depth > li .has-three.on::after { transform: translateY(-50%) rotate(180deg); } } @media all and (max-width: 1024px) and (max-width: 1024px) { .sitemap-area .menu-div .two-depth > li .has-three { cursor: pointer; } } @media all and (max-width: 1024px) { .sitemap-area .menu-div .two-depth { display: none; margin: 32rem 0; } } @media all and (max-width: 1024px) { .sitemap-area .menu-div { margin-bottom: 0; } } @media all and (max-width: 1024px) { .sitemap-area { margin-top: 64rem; } }