/* --------------------- DoosanENC Released 2022.08.08 --------------------- */ /* ----------------------- Published by 4m Creative ------------------------ */ /* popNoti */ .pop_overlay {background: rgba(0, 0, 0, .4);position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;z-index: 99; /* display: none; */} .pop_overlay.on {display: block;} #popNoti {position: fixed;right: 12.5vw;top: 50%;transform: translateY(-50%);box-shadow: 5px 9px 54px 6px rgba(0, 0, 0, 0.2);display: none;} #popNoti.on {display: block;z-index: 100;} #popNoti .pop_img {width: 100%;object-fit: contain;} .pop_close_wrap {display: flex;height: 5rem;} .pop_close_wrap>button {flex:1;font-size: 1.6rem;color: #fff;} .pop_close_wrap>.btn_closeForToday {background: #35383d;} .pop_close_wrap>.btn_close {background: #000;} #popNoti.pop_recruit {max-width: 50rem;} /* =========================================================================== */ /* =============================== Main Page =============================== */ /* =========================================================================== */ /* 공통 */ .fp-viewing-firstPage .header.wht .logo, .fp-viewing-fifthPage .header.wht .logo {background: url(../images/common/logo_w.png) no-repeat;} .fp-viewing-firstPage .header.wht .gnb > ul > li > a, .fp-viewing-fifthPage .header.wht .gnb > ul > li > a, .fp-viewing-firstPage .header.wht .gnb_menu .right_nav ul li a, .fp-viewing-fifthPage .header.wht .gnb_menu .right_nav ul li a {color: #fff;position: relative; } .fp-viewing-firstPage .header.wht .gnb_menu .right_nav ul li a::before, .fp-viewing-fifthPage .header.wht .gnb_menu .right_nav ul li a::before {content:'';display: inline-block;width: 0;height: .1rem;background: #fff;position: absolute;bottom: -.2rem;left: 1.9rem;transition: width .3s;} .fp-viewing-firstPage .header.wht .gnb_menu .right_nav ul li a:hover::before, .fp-viewing-fifthPage .header.wht .gnb_menu .right_nav ul li a:hover::before { width: 60%; } .fp-viewing-firstPage .header.wht .lang_select .lang_current .ico.global, .fp-viewing-fifthPage .header.wht .lang_select .lang_current .ico.global {background: url(../images/common/icon_lang_w.png) 0 0 no-repeat;} .fp-viewing-firstPage .header.wht .gnb_menu .weve_btn a, .fp-viewing-fifthPage .header.wht .gnb_menu .weve_btn a {border: 1px solid #fff;background: url(../images/common/weve_logo_w.png) no-repeat 50% 50%;} .fp-viewing-firstPage .header.wht .gnb_menu .weve_btn a:hover, .fp-viewing-fifthPage .header.wht .gnb_menu .weve_btn a:hover {background: url(../images/common/weve_logo_b.png) no-repeat 50% 50%;border: 0;} .fp-viewing-firstPage .header.wht .gnb_menu .weve_btn a::before, .fp-viewing-fifthPage .header.wht .gnb_menu .weve_btn a::before {content: "";display: block;position: absolute;left: 0;top: 0;bottom: 0;right: 0;transform: scaleX(0);z-index: -1;background-color: #fff;transition:all .2s ease-out;transform-origin:0 50%;} .fp-viewing-firstPage .header.wht .gnb_menu .weve_btn a:hover::before, .fp-viewing-fifthPage .header.wht .gnb_menu .weve_btn a:hover::before {transform:scaleX(1);} .fp-viewing-firstPage .header.wht .gnb_menu .right_nav ul li:first-child a:after, .fp-viewing-fifthPage .header.wht .gnb_menu .right_nav ul li:first-child a:after, .fp-viewing-firstPage .header.wht .top_sitemap button span::before, .fp-viewing-firstPage .header.wht .top_sitemap button span::after, .fp-viewing-fifthPage .header.wht .top_sitemap button span::before, .fp-viewing-fifthPage .header.wht .top_sitemap button span::after { background: #fff; } .container {position: relative;} #rightnavi {position: fixed; top: 50%; right: 5rem; transform: translateY(-50%);text-align: center; transition: opacity ease 1s; } #rightnavi li {position: relative;margin: 3rem 0;width: 2.2rem;text-align: center; padding-bottom: 0; transition: padding-bottom ease .5s;} #rightnavi li a {display: inline-block; position: relative; width: .7rem;height: .7rem;background: #ccc;border-radius: 50%;vertical-align: top; overflow: visible; } #rightnavi li.active a {background: #005eb8;} #rightnavi li a span { position: absolute; left: 0; right: 0; margin: auto; font-size: 1.8rem; font-family: 'Montserrat'; font-weight: 400; color: #005eb8; writing-mode: vertical-rl; height: 0; width: fit-content; overflow: hidden; transition: 2s max-height ease 0s; max-height: 0; white-space: nowrap; } #rightnavi li.active a span { margin-top: 3rem; line-height: 1; height: auto; max-height: 50rem; } #rightnavi li:nth-child(2).active {padding-bottom: 12.5rem; } #rightnavi li:nth-child(3).active {padding-bottom: 9.5rem; } #rightnavi li:nth-child(4).active {padding-bottom: 20rem; } #rightnavi li:nth-child(5).active {padding-bottom: 7.2rem; } #rightnavi li:nth-child(6).active {padding-bottom: 8.5rem; } #rightnavi li:last-child {display: none; } #main #fullpage section {width: 100%; height: 100vh; } #main #fullpage section .center { width: 100%; height: 100%; display: flex; align-items: center; } #main #fullpage section .inner {margin: 0 auto; height: fit-content; width: 100%; position: relative; } #main #fullpage section .sec_tit { font-family: 'Montserrat'; font-size: 6rem; font-weight: 800; color: #000; } #main #fullpage section .sec_tit::before { content:''; display: block; width: 6.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); margin-bottom: 2.5rem; } /* Section01 */ #main #fullpage .section01 { position: relative; } #main #fullpage .section01 .clip-wrap { width: 100%; height: 100%; position: absolute; z-index: 9; background: #fff; overflow: hidden; } #main #fullpage .section01 .clip-css {width: 100%;height: 100vh; transition: all ease .2s; opacity: 0; background: url(../images/main/sec01_bg1.jpg)no-repeat 50% 50%; background-size: cover; z-index: 100; -webkit-clip-path: polygon(0% 75%, 25% 0%, 100% 25%, 75% 100%); clip-path: polygon(0% 75%, 25% 0%, 100% 25%, 75% 100%); position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 66.9rem; height: 65.6rem; object-fit: none; } #main #fullpage .section01.ani .clip-css { animation: intro .8s alternate; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); width: 100%; height: 100%; } #main #fullpage .section01.active .clip-css { transform: translateY(0); } #main #fullpage .section01 .center, #main #fullpage .section01 .center .inner, #main #fullpage .section01 .swiper { width: 100%; height: 100%; } #main #fullpage .section01 .swiper-slide { width: 100%; height: 100%; background-position: center; background-size: auto 100%; overflow: hidden; display: flex; position: relative; z-index: 0;} #main #fullpage .section01 .swiper-slide .slide-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #main #fullpage .section01 .swiper-slide .slide-inner img { transition: transform 6s; } #main #fullpage .section01.active .swiper-slide .slide-inner img { transform: scale(1); width: 100%; height: 100%; object-fit: cover; } #main #fullpage .section01.active .swiper-slide .slide-inner.scaleOn img { transform: scale(1.2); } #main #fullpage .section01 .swiper-slide h2 { font-size: 6.6rem; color: #fff; position: absolute; top: 0; bottom: 0; left: 10%; margin: auto; height: fit-content; transform: translateY(-6rem); font-weight: 150; } #main #fullpage .section01 .swiper-slide h2 span { position: relative; width: 100%; bottom: -30px; opacity: 0; transition: .3s; display: block; line-height: 1.4; } #main #fullpage .section01.active .swiper-slide-active h2 span { bottom: 0px; opacity: 1; transition: .5s 1s; } #main #fullpage .section01.active .swiper-slide-active h2 span:nth-child(2) { transition: .5s 1.3s; } #main #fullpage .section01.active .swiper-slide-active h2 span:nth-child(3) { transition: .5s 1.6s; } #main #fullpage .section01.active .swiper-slide-active h2 span:nth-child(4) { transition: .5s 1.9s; } #main #fullpage .section01 .swiper .sec01_controller { width: 40rem; height: 3rem; position: absolute; display: flex; align-items: center; justify-content: space-between; bottom:30%; left: 10%; z-index: 1; transition: opacity ease 1s; opacity: 0; } #main #fullpage .section01.active .swiper .sec01_controller { opacity: 1; transition-delay: .6s; } #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01 { bottom: unset; right: 0; margin:auto; width: 32.4rem; display: flex; justify-content: space-between; align-items: center; } #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01:after { content: ''; width: 30rem; height: .1rem; background: #fff; position: absolute; opacity: .5; left:0; right:0; margin: auto; } #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01 .swiper-pagination-bullet { background: transparent; width: .5rem; height: .5rem; opacity: 1; padding: 1.35rem; margin: 0; position: relative; } #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01 .swiper-pagination-bullet:after { content: ''; display: block; width: .5rem; height: .5rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: #fff; border-radius: 100%; } #main #fullpage .section01 .swiper .sec01_controller .bullet_hr { width: 2.7rem; height: 2.7rem; border-radius: 100%; display: inline-block; border:.1rem solid #fff; transition: all cubic-bezier(0.645, 0.045, 0.355, 1) .7s; position: absolute; box-sizing: border-box; left: 3.7rem; } #main #fullpage .section01 .swiper .sec01_controller .swiper-button { width: 1rem; height: 2rem; display: block; margin-top:unset; top:unset; background: none; } #main #fullpage .section01 .swiper .sec01_controller .swiper-button-next { content: url(../images/main/sec01_controller_arrowNext.png); right: 0; } #main #fullpage .section01 .swiper .sec01_controller .swiper-button-prev { content: url(../images/main/sec01_controller_arrowPrev.png); left: 0; } /* Section02 */ #main #fullpage .section02 .swiper, #main #fullpage .section02 .swiper-wrapper, #main #fullpage .section02 .swiper-slide { width: 100%; height: 100vh; } #main #fullpage .section02 .swiper { position: relative; } #main #fullpage .section02 .swiper-slide { position: relative; display: flex; align-items: flex-end; } #main #fullpage .section02 h2 { z-index: 1; opacity: 0; width: fit-content; position: absolute; top: 50%; transform: translateY(-100%); left: 20vw; font-family: 'Montserrat'; font-size: 8.8rem; color: #0e1115; font-weight: 450; text-transform: uppercase; letter-spacing: -.088rem; transition: all ease-in-out .4s; } #main #fullpage .section02 .big_img { width: 100%; max-width: 42%; height: 100vh; transform: rotate3d(0, 0, 0, 90deg); overflow: hidden; } #main #fullpage .section02 .big_img img { width: 0; height: 100%; object-fit: cover; object-position: center; transition: width ease-in-out .4s .3s } #main #fullpage .section02 .mov_txt { opacity: 0; font-family: 'Montserrat'; font-size: 32rem; font-weight: 500; color: #005eb8; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; transition: all ease; } #main #fullpage .section02 .right { position: relative; padding-bottom: 4rem; padding-left: 4rem; } #main #fullpage .section02 .right .contents a { display: flex; align-items: flex-start; } #main #fullpage .section02 .right .contents .thumb_img { width:24rem; height:16.6rem; } #main #fullpage .section02 .right .contents .thumb_img img { width:100%; height: 100%; object-fit: cover; } #main #fullpage .section02 .right .contents .con_txt { margin:3rem 0 0 4rem; opacity: 0; transform: translateX(5%); transition: all .4s cubic-bezier(0.470, 0.000, 0.745, 0.715); } #main #fullpage .section02 .right .contents .con_txt dt { font-size: 2.2rem; font-weight: 400; color: #005eb8; letter-spacing: -.05em; } #main #fullpage .section02 .right .contents .con_txt dd { font-size: 1.8rem; color: #555; line-height: 1.66; margin-top: 2rem; } #main #fullpage .section02.active .swiper-slide.swiper-slide .big_img img { width: 100%; transform: scale(1.1); } #main #fullpage .section02.active .swiper-slide.swiper-slide-active .big_img img { animation: scale 6s alternate; } #main #fullpage .section02.active .swiper-slide.swiper-slide-active .mov_txt { opacity: .08; z-index: -1; animation: sec02_txt 12s .2s; } #main #fullpage .section02.active .swiper-slide.swiper-slide-active h2 { opacity: 1; left: 29vw; line-height: 1.1; text-shadow: 1px 2px 9.5px rgba(0, 0, 0, 0.2); text-transform: uppercase; } #main #fullpage .section02.active .swiper-slide.swiper-slide-active .con_txt { opacity: 1; transform: translateX(0); } #main #fullpage .section02 .moving_tab { overflow: hidden; max-width: 92rem; width: calc(100% - (48% + 4rem)); height: 9rem; position: absolute; top: 50%; left: calc(42% + 4rem); transform: translateY(14rem); z-index: 11; display: flex; justify-content: space-between; align-items: flex-end; } #main #fullpage .section02 .swiper-pagination-sec02 { display: flex; width: 100%; position: relative; bottom: 2rem; max-width: 500rem; height: fit-content; opacity: 1; transition-property: transform; transition-duration: .3s; } #main #fullpage .section02 .swiper-button { width: 6rem; height: 7rem; background-size: 1rem 1.5rem; border: 1px solid #ccdff1; position: absolute; top: 0; cursor: pointer; box-shadow: -.2rem .2rem .7rem 0px rgba(34, 34, 34, 0.1); } #main #fullpage .section02 .swiper2-button-next { background: #fff url(../images/common/arrow_r_13x21.png) no-repeat 50% 50%; right: 0; z-index: 13; } #main #fullpage .section02 .swiper2-button-prev { display: none; background: #fff url(../images/common/arrow_l_13x21.png) no-repeat 50% 50%; left: 0; } #main #fullpage .section02 .swiper2-button-next.disabled, #main #fullpage .section02 .swiper2-button-next.disabled { opacity: 0; } #main #fullpage .section02 .swiper-pagination-bullet { position: relative; width: calc((100% - 6rem) / 3 - 4rem); max-width: 30rem; height: auto; text-align: left; border-radius: 0; opacity: 1; margin-right: 4rem; margin-left: 0; background-color: transparent; flex-shrink: 0; } #main #fullpage .section02 .swiper-pagination-bullet em { display: inline-block; font-family: 'Montserrat'; font-size: 2rem; font-weight: 700; letter-spacing: -0.08rem; color: #0e1115; padding-bottom: 2rem; } #main #fullpage .section02 .swiper-pagination-bullet i { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: .1rem; background-color: #005eb8; opacity: .2; } #main #fullpage .section02 .swiper-pagination-bullet b { position: absolute; bottom: 0; left: 0; z-index: 2; width: 0%; height: .2rem; background-color: #005eb8; } #main #fullpage .section02 .swiper-pagination-bullet-active { background-color: transparent; } #main #fullpage .section02.active .swiper-pagination-bullet-active b { animation-name: countingBar; animation-duration: 5s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate ; animation-fill-mode:forwards; } /* Section03 */ #main #fullpage .section03 .inner { max-width: 147.5rem; margin: 5rem auto 0; transform: translateX(-1.75rem); position: relative; transition: opacity .3s 1s; } #main #fullpage .section03 .sec_tit { margin-left: 3.5rem; position: absolute; top: 0; } #main #fullpage .section03 .bus_swiper > .swiper-wrapper > .swiper-slide { display: flex; align-items: flex-start; height: fit-content; padding-bottom: 4rem; padding-top: 1.8rem; } #main #fullpage .section03 .bus_swiper .left { width: 46rem; min-height: 55.4rem; height: fit-content;background: #fff;border: 1px solid #005eb8; box-shadow: 5px 4px 20px 0px rgba(54, 63, 72, 0.5); padding: 3rem 3rem 7rem; transform: translate(-40%, 8.5rem); opacity: 0; transition: all ease-in-out .3s; margin-left: 3.5rem; margin-top: 3.5rem; position: relative; } #main #fullpage .section03 .bus_swiper .left .img { width: 38rem; height: fit-content; overflow: hidden; } #main #fullpage .section03 .bus_swiper .left .img img { transition: transform 1s } #main #fullpage .section03 .bus_swiper .left .tit { font-weight: 450; font-size: 2.4rem; color: #0e1115; letter-spacing: -.06rem; margin: 3rem 0; } #main #fullpage .section03 .bus_swiper .left ul li { display: flex; } #main #fullpage .section03 .bus_swiper .left ul li+li { margin-top: 1.5rem; } #main #fullpage .section03 .bus_swiper .left ul li b::before { content:''; display: inline-block; width: .5rem; height: .5rem; background: #d9dfe9; vertical-align: middle; margin-right: 1.5rem; position: absolute; top: 50%; left: 0; transform: rotate(15deg)translateY(-50%); } #main #fullpage .section03 .bus_swiper .left ul li b { font-size: 1.6rem; color: #0e1115; font-weight: 400; letter-spacing: -.032rem; display: inline-block; width: 10rem; flex-shrink: 0; position: relative; padding-left: 2rem; } #main #fullpage .section03 .bus_swiper .left ul li span { font-weight: 300; font-size: 1.6rem; color: #777; letter-spacing: -.032rem; } #main #fullpage .section03 .bus_swiper .left ul li:last-child span { font-family: 'Montserrat'; } #main #fullpage .section03 .bus_swiper .left ul li span.narrow { letter-spacing: -0.096rem; } #main #fullpage .section03 .bus_swiper .left > a { display:block; width: 100%; height: 7.5rem; line-height: 7.5rem; padding: 0 6rem; font-family: 'Montserrat'; font-size: 1.4rem; color: #222; position: absolute; bottom: 0; left: 0; margin-top: 5rem; background: rgba(0, 94, 184,.05); } #main #fullpage .section03 .bus_swiper .left > a::after { content:''; display: inline-block; width: .9rem; height: 1.5rem; background: url(../images/main/sec06_arrow.png) no-repeat; position: absolute; top: 50%; right: 10rem; transform: translateX(4rem); margin-top: -.75rem; } #main #fullpage .section03 .bus_swiper .left:hover {background: #005eb8;} #main #fullpage .section03 .bus_swiper .left:hover .img img { transform: scale(1.1); } #main #fullpage .section03 .bus_swiper .left:hover .tit, #main #fullpage .section03 .bus_swiper .left:hover ul li b, #main #fullpage .section03 .bus_swiper .left:hover ul li span { color: #fff; } #main #fullpage .section03 .bus_swiper .left:hover > a { color: #fff; border-top: .1rem solid rgba(255, 255, 255, .5); } #main #fullpage .section03 .bus_swiper .left:hover > a::after { background: url(../images/common/arrow_9x15_w.png) no-repeat; animation: arrwRight 1.2s ease-in-out infinite; } #main #fullpage .section03 .bus_swiper .right { width: calc(100% - 42rem); margin-left: 10rem; z-index: -1; opacity: 0; transition: all ease-in-out .5s .2s; } #main #fullpage .section03 .bus_swiper .right .swiper-slide { width: 100%; height: fit-content; overflow: hidden; } #main #fullpage .section03 .bus_swiper .right .swiper-slide.mob-slide { display: none; } #main #fullpage .section03 .bus_swiper .right .swiper-slide img { transition: transform .6s } #main #fullpage .section03.active .bus_swiper .swiper-slide-active .right .swiper-slide/* .swiper-slide-active */ img { transform: scale(1.1); transition: transform 6s } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 { width: auto; float: right; transform: translateY(100%); opacity: 0; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > .swiper-pagination-bullet { opacity: 1; border-radius: 0; margin-right: 4rem; background: transparent; height: fit-content; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span::after { content:''; display: block; width: 100%; height: .1rem; background: rgba(0, 94, 184,.2); } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span.swiper-pagination-bullet-active::after { background: rgba(0, 94, 184,1); height: .2rem; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(1) { width: 24rem; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(2) { width: 24rem; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(3) { width: 28rem; margin-right: 0; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span > em { text-align: center; display: inline-block; width: 100%; padding-bottom: 2rem; font-size: 1.4rem; font-weight: 400; color: #222; position: relative; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span > em::after { content:''; display: inline-block; font-family: 'Montserrat'; font-weight: 200; margin-left: 1rem; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span.swiper-pagination-bullet-active > em { color: #005eb8; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(1) > em::after { content:'Building real value'; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(2) > em::after { content:'Creating new space'; } #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(3) > em::after { content:'Better Connected to the world'; } #main #fullpage .section03.active .bus_swiper .left { transform: translate(0, 8.5rem); opacity: 1; } #main #fullpage .section03 .bus_swiper .right { margin-left: -4rem; opacity: 1; overflow: hidden; } #main #fullpage .section03.active .bus_swiper .swiper-pagination-sec03 { transform: translateY(0); opacity: 1; transition: all ease-in-out .5s .7s; } #main #fullpage .section03 .inner_swiper { position: relative; } #main #fullpage .section03 .inner_swiper, #main #fullpage .section03 .inner_swiper .swiper-wrapper, #main #fullpage .section03 .inner_swiper .swiper-slide { width: 100%; height: 100%; } #main #fullpage .section03 .inner_swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform ease-in-out 1s; } #main #fullpage .section03 .inner_swiper .swiper-slide.swiper-slide-active .img img { transform: scale(1.2); } #main #fullpage .section03 .inner_swiper .swiper-pagination { width: auto; position: absolute; left: 9rem; bottom: 4rem; } #main #fullpage .section03 .inner_swiper .swiper-pagination > span { width: .7rem; height: .7rem; opacity: 1; background: #fff; margin-right: 3rem; position: relative; } #main #fullpage .section03 .inner_swiper .swiper-pagination > span::before { content:''; display: inline-block; width: 2.6rem; height: 2.6rem; border: 1px solid #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } #main #fullpage .section03 .inner_swiper .swiper-pagination > span.swiper-pagination-bullet-active::before { opacity: 1; } /* Section04 */ #main #fullpage .section04 { position: relative; } #main #fullpage .section04 .inner { max-width: 164rem; } #main #fullpage .section04 .sec_tit { padding: 23.6vh 0 4.6rem; left: 22vw; opacity: 0; position: relative; top: 0; transition: all ease 1s; } #main #fullpage .section04.active .sec_tit { opacity: 1; left: 15vw; } #main #fullpage .section04 .card { bottom: 0; left: 0; right: 0; width: 100%; height: 54vh; max-width: 144rem; margin: auto; display: flex; } #main #fullpage .section04 .card li { height: 100%; width: calc(100% / 4); position: relative; transform: translateY(10%); opacity: 0; } #main #fullpage .section04 .card li p, #main #fullpage .section04 .card li h3 { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; display: inline-table; } #main #fullpage .section04 .card li p { font-size: 2rem; transform: translateY(5.6rem); color: #222; font-weight: 350; } #main #fullpage .section04 .card li h3 { transform: translateY(8.6rem); color: #fff; overflow: hidden; font-weight: 350; } #main #fullpage .section04 .card li h3 span { font-family: 'Montserrat'; font-weight: 350; overflow: hidden; } #main #fullpage .section04 .card li h3 span:first-child { /* text-indent: 100%; */ font-size: 6rem; text-align: center; } #main #fullpage .section04 .card li h3 span:last-child { text-indent: 0; font-family: 'Pretendard'; font-size: 1.8rem; margin-top: -1rem; position: relative; top: 1rem; opacity: 0; margin-left: .5rem;} #main #fullpage .section04 .card li h3 span:last-child.on { opacity: 1; top: 0; transition: all ease .3s 1s; } #main #fullpage .section04 .card li .bg { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: all ease .3s; } #main #fullpage .section04 .card li .icon, #main #fullpage .section04 .card li .icon_white { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; transform: translateY(-4rem); } #main #fullpage .section04 .card li .icon_white { display: none; } #main #fullpage .section04 .card li:hover { flex-direction: column-reverse; } #main #fullpage .section04 .card li:hover .bg { opacity: 1; box-shadow: .8rem .6rem 2rem 0 rgba(0, 0, 0, 0.4); } #main #fullpage .section04 .card li:hover p { color: #fff; transform: translateY(-15.7rem); } #main #fullpage .section04.active .card li { opacity: 1; transform: translateY(0); transition: all ease 1s .5s; } #main #fullpage .section04.active .card li:nth-child(2) { transition-delay: .6s; } #main #fullpage .section04.active .card li:nth-child(3) { transition-delay: .7s; } #main #fullpage .section04.active .card li:nth-child(4) { transition-delay: .8s; } #main #fullpage .section04.active .card li:nth-child(5) { transition-delay: .9s; } /* Section05 */ #main #fullpage .section05 { background: linear-gradient(to bottom, #000 50%, #fff 50%); } #main #fullpage .section05 .inner { max-width: 144rem; transform:translateY(2.6vh); position: relative; } #main #fullpage .section05 .sec_tit { font-family: 'Montserrat'; font-size: 6rem; font-weight: 800; color: #fff; position: absolute; top: 0; } #main #fullpage .section05 .link { position: absolute; right: 1rem; top: 7.3rem; display: flex; } #main #fullpage .section05 .link li:last-child { margin-left: 5rem; } #main #fullpage .section05 .link li a { color: #fff; font-size: 2rem; display: flex; align-items: center; transition: all ease .5s; font-weight: 400; } #main #fullpage .section05 .link li a img { margin-left: 2rem; transition: all ease .5s; } #main #fullpage .section05 .link li a:hover img { transform: rotate3d(1, -1, 0, 180deg); } #main #fullpage .section05 .link li:first-child a:hover { color: #00a5d7; } #main #fullpage .section05 .link li:last-child a:hover { color: #00ad83; } #main #fullpage .section05 .interview_box { display: flex; justify-content: space-between; padding-top: 15vh; } #main #fullpage .section05 .interview_box li { width: calc(50% - 4rem); position: relative; } #main #fullpage .section05 .interview_box li .interview_wrap { position: relative; width: 100%; height:42rem; transition: all ease .3s; } #main #fullpage .section05 .interview_box li .interview_wrap .border { display: block; position: absolute; z-index: 1; transition: position .3s; z-index: 2; } #main #fullpage .section05 .interview_box li .interview_wrap .bdt { background-image: linear-gradient(to right, #00ad83, #00a9ab); top:0; left: 0; } #main #fullpage .section05 .interview_box li .interview_wrap .bdr { background-image: linear-gradient(to bottom, #00a9ab, #00a5d7); top:0; right:0; } #main #fullpage .section05 .interview_box li .interview_wrap .bdb { background-image: linear-gradient(to left, #00a5d7, #00a9af); bottom:0; right:0; } #main #fullpage .section05 .interview_box li .interview_wrap .bdl { background-image: linear-gradient(to top, #00a9af, #00ad83); bottom:0; left:0; } #main #fullpage .section05 .interview_box li .interview_wrap .bdt, #main #fullpage .section05 .interview_box li .interview_wrap .bdb { width: 0; height: 0.4rem; } #main #fullpage .section05 .interview_box li .interview_wrap .bdl, #main #fullpage .section05 .interview_box li .interview_wrap .bdr { width: 0.4rem; height: 0; } #main #fullpage .section05 .interview_box li .interview_wrap .interview_thumb { width: 100%; height: 100%; position: relative; transition: opacity ease .2s; } #main #fullpage .section05 .interview_box li .interview_wrap .interview_thumb img:first-of-type { width: 100%; height: 100%; object-fit: cover; } #main #fullpage .section05 .interview_box li .interview_wrap .interview_thumb img.btn_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; opacity: 0; transition: opacity ease .3s; } #main #fullpage .section05 .interview_box li .interview_wrap .interview_thumb a { width: 100%; height: 100%; display: block; position: absolute; top: 0; } #main #fullpage .section05 .interview_box li:hover .interview_wrap { box-shadow: .3rem .3rem 1rem 0 rgba(0, 0, 0, 0.1); } #main #fullpage .section05 .interview_box li:hover .interview_wrap .bdt, #main #fullpage .section05 .interview_box li:hover .interview_wrap .bdb { width: 100%; transition: width .3s; } #main #fullpage .section05 .interview_box li:hover .interview_wrap .bdl, #main #fullpage .section05 .interview_box li:hover .interview_wrap .bdr { height: 100%; transition: height .3s; } #main #fullpage .section05 .interview_box li:hover .interview_wrap .interview_thumb img.btn_play { opacity: 1; } #main #fullpage .section05 .interview_box li .interview_thumb { width: 100%; height: 100%; overflow: hidden; } #main #fullpage .section05 .interview_box li .interview_thumb > img { transition: transform ease-in-out; transition-duration: .3s; } #main #fullpage .section05 .interview_box li:hover .interview_thumb > img { transform: scale(1.1); transition-duration: .8s; } #main #fullpage .section05 .interview_box li dl { margin-top: 4.6rem; } #main #fullpage .section05 .interview_box li dl dt { font-size: 2.2rem; color: #222222; font-weight: 400; } #main #fullpage .section05 .interview_box li dl dd { padding-top: 1.4rem; font-size: 1.6rem; color: #888888; display: flex; align-items: center; line-height: 1; font-weight: 300; } #main #fullpage .section05 .interview_box li dl dd span { color: #000; } #main #fullpage .section05 .interview_box li dl dd span:before { content: ''; display: inline-block; width: .1rem; height: 1.4rem; background: #cccccc; margin: 0 2rem; vertical-align: top; } /* Section06 */ #main #fullpage .section06 .inner { max-width: 144rem; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } #main #fullpage .section06 .left .sub_tit { font-size: 3rem; color: #555; line-height: 1.53; margin: 1.5rem 0 7rem; font-weight: 150; } #main #fullpage .section06 .left .viewmore { display: block; width: 13.6rem; font-family: 'Montserrat'; font-size: 1.4rem; color: #222; position: relative; } #main #fullpage .section06 .left .viewmore::after { content:''; display: block; width: 100%; height: .1rem; background: #000; margin-top: 1rem; transition: all .3s; } #main #fullpage .section06 .left .viewmore:hover::after { width: 0; } #main #fullpage .section06 .left .viewmore > span { display: inline-block; width: 1.2rem; height: .1rem; background: #000; position: absolute; right: 0; bottom: 2rem; } #main #fullpage .section06 .left ul { width: 34rem; display: flex; justify-content: space-between; margin-top: 10rem; } #main #fullpage .section06 .left ul li .pg_name { font-size: 1.6rem; color: #222; text-align: center; margin-top: 2rem; font-weight: 300; } #main #fullpage .section06 .left ul li .icon { transition: all ease .3s; } #main #fullpage .section06 .left ul li:hover .icon { transform: rotate3d(0, 1, 0, 180deg); } #main #fullpage .section06 .left ul li:hover .pg_name { color: #005EB8; font-weight: 400; } #main #fullpage .section06 .left ul li:nth-child(2):hover .pg_name { color: #00A5D7; } #main #fullpage .section06 .left ul li:nth-child(3):hover .pg_name { color: #00AD83; } #main #fullpage .section06 .right { width: 84rem; position: relative; } #main #fullpage .section06 .right .tab { display: flex; justify-content: flex-end; width: 21.4rem; margin-left: auto; margin-bottom: 4rem; } #main #fullpage .section06 .right .tab li { text-align: right; } #main #fullpage .section06 .right .tab li:nth-child(2) { padding-left: 4.8rem; } #main #fullpage .section06 .right .tab li a { font-family: 'Montserrat'; font-size: 1.8rem; font-weight: 400; position: relative; color: #d1d1d1; cursor: pointer; } #main #fullpage .section06 .right .tab li a::before { content:''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #d1d1d1; position: absolute; left: -1.5rem; top: .8rem; } #main #fullpage .section06 .right .tab li:nth-child(1).on a::before { background: #005eb8; } #main #fullpage .section06 .right .tab li:nth-child(2).on a::before { background: #00ad83; } #main #fullpage .section06 .right .tab li:nth-child(1).on a { color: #005eb8; } #main #fullpage .section06 .right .tab li:nth-child(2).on a { color: #00ad83; } #main #fullpage .section06 .right .contents { position: relative; } #main #fullpage .section06 .right .contents > ul { height: 54.8rem; position: absolute; top:0; right: -15rem; opacity: 0; z-index: -1; /* display: none; */ } #main #fullpage .section06 .right .contents > ul.on { /* display: block; */ position: relative; right: 0; opacity: 1;transition: all .8s; z-index: 1;} #main #fullpage .section06 .right .contents > ul li { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 3.6rem 0; } #main #fullpage .section06 .right .contents > ul li:last-child { margin-top: -1px; } #main #fullpage .section06 .right .contents > ul li .img { box-shadow: .2rem .3rem 2rem 0 rgba(0, 0, 0, 0.2); width: 32rem; height: 20rem; overflow: hidden; flex-shrink: 0; } #main #fullpage .section06 .right .contents > ul li .img > img { transition: transform ease-in-out; transition-duration: .3s; width: 100%; height: 100%; object-fit: cover; } #main #fullpage .section06 .right .contents > ul.on li:hover { border-color: #005eb8; z-index: 10; position: relative; } #main #fullpage .section06 .right .contents > ul.on li:hover .img > img { transform: scale(1.1); transition-duration: .8s; } #main #fullpage .section06 .right .contents > .sns.on li:hover { border-color: #00ad83; } #main #fullpage .section06 .right .contents .tag { font-family: 'Montserrat'; font-size: 1.6rem; font-weight: 400; color: #005eb8; } #main #fullpage .section06 .right .contents .sns .tag { color: #00ad83; } #main #fullpage .section06 .right .contents .tag > .date { font-weight: 300; color: #999; } #main #fullpage .section06 .right .contents .tag > .date::before { content:''; display: inline-block; width: .1rem; height: 1rem; background: #ccc; margin: 0 2rem; } #main #fullpage .section06 .right .contents > ul li .txt p { font-weight: 400; color: #222; font-size: 2.2rem; letter-spacing: -.055rem; margin: 2.5rem 0 3.8rem; line-height: 1.6; min-height: 70.38px; padding-right: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #main #fullpage .section06 .right .contents > ul li .txt a { display: block; width: 13.5rem; font-family: 'Montserrat'; font-size: 1.4rem; color: #222; position: relative; } #main #fullpage .section06 .right .contents > ul li .txt a::after { content:''; display: inline-block; width: .9rem; height: 1.5rem; background: url(../images/main/sec06_arrow.png) no-repeat; position: absolute; top: 50%; right: 4rem; transform: translateX(4rem); margin-top: -.75rem; } #main #fullpage .section06 .right .contents > ul li .txt a:hover::after { animation: arrwRight 1.2s ease-in-out infinite; } /* =========================================================================== */ /* ================================ Sub Page =============================== */ /* =========================================================================== */ /* 공통 */ #wrap, .container { width: 100%; } .title_area { padding: 10rem 0; text-align: center; } .title_area .con_tit { font-family: 'Montserrat','Pretendard'; font-size: 6rem; font-weight: 450; color: #0b0f14; letter-spacing: -.15rem; padding-bottom: 3rem; position: relative; } .title_area .eng_tit { font-weight: 400; } .title_area.single .con_tit { padding-bottom: 0; } .title_area .con_tit.pb0 { padding-bottom: 0; } .title_area .con_tit > em { color: #888; } .title_area .con_tit > span { display: inline-block; width: 1rem; height: 2rem; vertical-align: middle; position: relative; margin: 0 3.5rem; } .title_area .con_tit > span::after { content:''; display: inline-block; width: 0; height: 0; border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; border-left: 1rem solid #1d1f1e; position: absolute; top: -.5rem; left: 0; } .title_area .sub_tit { font-size: 3.4rem; font-weight: 400; color: #0b0f14; letter-spacing: -.085rem; padding-bottom: 3rem; } .title_area .sub_tit > b { font-family: 'Montserrat'; font-size: 3.6rem; font-weight: 350; color: #005eb8; } .title_area .sub_txt { font-size: 2rem; font-weight: 150; color: #555; letter-spacing: -.05rem; line-height: 1.8; position: relative; } .title_area .download_btn { display: inline-block; width: 23.2rem; font-size: 1.6rem; color: #000; margin-top: 8rem; } .title_area .download_btn > i { display: inline-block; width: 1.9rem; height: 2rem; background: url(../images/common/icon_download.png) no-repeat; margin-left: 4rem; vertical-align: baseline; } .title_area .download_btn::after { content:''; display: block; width: 100%; height: 0.1rem; background: #000; margin-top: 2rem; transition: width .3s; } .title_area .download_btn:hover::after { width: 0; } .tab_box ul { display: flex; } .tab_box ul li { flex: 1; height: 7rem; display: table; background: #fff; border: 1px solid #e8e8e8; transition: all .2s; } .tab_box ul li:not(:first-child) { margin-left: -1px; } .tab_box ul li a { font-size: 1.8rem; color: #222; display: table-cell; vertical-align: middle; text-align: center; transition: all .2s; } .tab_box ul li.on { background: #005eb8; border-color: #005eb8; box-shadow: 0px 0px 32px 8px rgba(34, 34, 34, 0.2); } .tab_box ul li.on a { color: #fff; } .tab_box .control { display: none; } .tab_small { border-bottom: .1rem solid #e8e8e8; position: relative; } .tab_small ul { max-width: 144rem; margin: auto; display: flex; justify-content: center; position: relative; } .tab_small ul li { text-align: center; font-size: 1.8rem; color: #222222; } .tab_small ul li button { width: 100%; padding-bottom: 3.2rem; } .tab_small .bar { height: .4rem; background: #005eb8; position: absolute; bottom: 0; left: 0; transform: skew(-45deg); transition: all ease .6s; } .tab_small ul li:hover, .tab_small ul li.active { color: #005eb8; } /* ================================ Channel =============================== */ /* 공통 */ .channel .sub_visual { background-image: url(../images/channel/channel_bg.jpg); } /* News */ .channel .news { padding-bottom: 20rem; } .channel .news .news_list { width: 100%; } .channel .news .news_list .search { width: 44.7rem; margin: -4rem auto 0; } .channel .news .news_list .search .input_search { width: 100%; border-bottom: 2px solid #222; } .channel .news .news_list .search .input_search input { width: calc(100% - 6rem); height: 6rem; font-size: 2.4rem; color: #222; font-weight: 400; } .channel .news .news_list .search .input_search a { width: 6rem; height: 6rem; background: url(../images/common/icon_search_blk.png) no-repeat 50% 50%; background-size: 2.4rem; } .channel .news .news_list .total {font-size: 1.6rem; font-weight: 150; width: 44.7rem; margin: 2rem auto 0; padding-left: 2rem; } .channel .news .news_list .total b.blue {color: #005eb8;font-weight: 350;} .channel .news .news_list .null { width: 100%; background: #f9f9f9; font-size: 1.6rem; color: #222; padding: 24rem 0; text-align: center; margin-top: 4rem; } .channel .news .news_list ul { width: 100%; height: fit-content; display: flex; flex-wrap: wrap; margin-top: 4rem; } .channel .news .news_list ul li { position: relative; width: calc((100% - 10rem) / 3); height: 44.8rem; margin-bottom: 5rem; overflow: hidden; } .channel .news .news_list ul li:nth-of-type(3n+2) { margin: 0 5rem; } .channel .news .news_list ul li:nth-last-child(n+1):nth-last-child(-n+3) { margin-bottom: 0; } .channel .news .news_list ul li .img { height: 31rem; overflow: hidden; } .channel .news .news_list ul li .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .channel .news .news_list ul li .txt_box { padding: 2.5rem 3rem 3rem; background: #fff; } .channel .news .news_list ul li .txt_box .tit { font-size: 2rem; font-weight: 350; color: #222; line-height: 1.5; letter-spacing: -.1rem; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .channel .news .news_list ul li .txt_box .date { font-family: 'Montserrat'; font-size: 1.4rem; color: #999; letter-spacing: -.07rem; margin-top: 1.4rem; } .channel .news .news_list ul li .border { position: absolute; z-index: 1; transition: all .1s; } .channel .news .news_list ul li .bdt, .channel .news .news_list ul li .bdb { width: 0; height: .4rem; } .channel .news .news_list ul li .bdt { background: #007aee; top: 0; left: 0; } .channel .news .news_list ul li .bdb { background: #005eb8; right: 0; bottom: 0; } .channel .news .news_list ul li .bdl, .channel .news .news_list ul li .bdr { width: .4rem; height: 0; background: linear-gradient(to bottom, #007aee 0, #005eb8 100%); } .channel .news .news_list ul li .bdl { bottom: 0; left: 0; } .channel .news .news_list ul li .bdr { top: 0; right: 0; } .channel .news .news_list ul li:hover { box-shadow: 8px 14px 21px 0px rgba(4, 0, 0, 0.16); } .channel .news .news_list ul li:hover .bdt { width: 100%; transition-delay: .1s; } .channel .news .news_list ul li:hover .bdr { height: 100%; transition-delay: .2s; } .channel .news .news_list ul li:hover .bdb { width: 100%; transition-delay: .3s; } .channel .news .news_list ul li:hover .bdl { height: 100%; transition-delay: .4s; } .channel .news .news_list ul li:hover .img img { transform: scale(1.1); } .channel .news .news_list .btn_box { margin-top: 13rem; } .channel .news .news_list .btn_line { width: 29.6rem; height: 7.4rem; line-height: 7.4rem; } .channel .news .news_list .btn_line a { border-radius: 3.7rem; font-family: 'Montserrat'; font-size: 2rem; font-weight: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 5rem 0 6rem; } .channel .news .news_list .btn_line a span { display: inline-block; width: 2.1rem; height: 2.2rem; background: url(../images/common/icon_plus_21x22.png) no-repeat 50% 50%; background-size: contain; transition:all .2s ease-out; } .channel .news .news_list .btn_line a:hover span { background: url(../images/common/icon_plus_w_21x22.png) no-repeat 50% 50%; background-size: contain; } .channel .news.detail_pg { font-family: 'NS';background: #f9f9f9; } /* 상세페이지 공통 */ .detail_pg { padding-top: 10rem; } .detail_pg .inner { max-width: 124rem; } .tb_view {position: relative;background: #fff;padding: 8rem 10rem; } .tb_view .tb_row.row_head {width: 100%;border-bottom: .1rem solid #e8e8e8;} .tb_view .tb_row.row_head .tit {font-size: 4rem;font-weight: 400;color: #222;} .tb_view .tb_row.row_head .date {font-size: 1.6rem;font-weight: 200;color: #777;padding: 3rem 0;} .tb_view .view_box {position: relative;} .tb_view .view_box .view_info {min-height: 20rem; padding:5rem 0 10rem;font-size: 1.8rem;color: #222;line-height: inherit; /* letter-spacing: -.45px; */ } .tb_view .view_box .view_info::after { content:'';display: block;clear: both; } .tb_view .view_box .view_info img.left { margin: 0; } .tb_view .view_box .view_info .blue { font-size: 1.6rem; color: #005eb8; line-height: 2.4; padding: .5rem 0; display: block; letter-spacing: -.05rem; text-align: center; } .tb_view .view_box .view_info .blue.left {text-align: left;} .tb_view .view_box .file_box {padding: 9rem 0 11rem;} .tb_view .view_box .file_box .file_download:first-child {margin-top: 0;} .tb_view .view_box .file_box .file_download a {display: inline-block;padding: .5rem 0 .5rem 3.5rem;background: url(../images/common/icon_download.png) 0 50% no-repeat;background-size: 1.9rem 2rem;font-size: 1.8rem;font-weight: 400;color: #005eb8;cursor: pointer;} .tb_view .view_nav {position: relative;border-top: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;} .tb_view .view_nav dl {display: flex;align-items: center;height: 7.2rem;} .tb_view .view_nav dl:first-of-type {border-bottom: 1px solid #e8e8e8;} .tb_view .view_nav dl dt {width: 10rem;font-family: 'Montserrat';font-size: 1.5rem;font-weight: 400;letter-spacing: -.0375rem;} .tb_view .view_nav dl dd {width: calc(100% - 10rem);} .tb_view .view_nav dl dd a {display: block;width: 100%;font-size: 1.5rem;color: #222;letter-spacing: -.0375rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .tb_view .btn_box {margin-top: 6rem;} .tb_view .btn_line {width:28.3rem;height: 6.4rem;line-height: 6.4rem;} .tb_view .btn_line a {border-radius: 3.2rem;} /* SNS */ .channel .sns { padding-bottom: 20rem; } .channel .sns .sns_tit { font-size: 3.4rem; font-weight: 450; color: #222; letter-spacing: -.17rem; } .channel .sns .list { width: 100%; } .channel .sns .sns_lists { width: 100%; height: fit-content; display: flex; flex-wrap: wrap; } .channel .sns .sns_lists li { width: calc((100% - 10rem) / 3); margin-right: 5rem; } .channel .sns .sns_lists li:nth-child(3n) { margin-right: 0; } .channel .sns .sns_lists li a { display: block; width: 100%; height: 38.8rem; position: relative; } .channel .sns .sns_lists .border { position: absolute; z-index: 1; } .channel .sns .sns_lists .border.bdt, .channel .sns .sns_lists .border.bdb { width: 0; height: .4rem; transition: width .3s; } .channel .sns .sns_lists .border.bdl, .channel .sns .sns_lists .border.bdr { height: 0; width: .4rem; transition: height .3s; } .channel .sns .sns_lists:not(.youtube) li:hover a { box-shadow: 8px 14px 21px 0px rgba(4, 0, 0, 0.16); } .channel .sns .sns_lists li:hover .border.bdt, .channel .sns .sns_lists li:hover .border.bdb { width: 100%; } .channel .sns .sns_lists li:hover .border.bdl, .channel .sns .sns_lists li:hover .border.bdr { height: 100%; } .channel .sns .sns_lists .border.bdt { background: linear-gradient(to right, #007aee ,#007aee); top:0; left:0; } .channel .sns .sns_lists .border.bdr { background: linear-gradient(to bottom, #007aee ,#005eb8); bottom:0; right:0; } .channel .sns .sns_lists .border.bdb { background: linear-gradient(to left, #005eb8 ,#005eb8); bottom:0; right:0; } .channel .sns .sns_lists .border.bdl { background: linear-gradient(to top, #005eb8 ,#0079ee); top:0; left:0; } .channel .sns .sns_lists .img { overflow: hidden; height: 28rem; position: relative; } .channel .sns .sns_lists.youtube .img { height: 25.2rem; } .channel .sns .sns_lists .img img { width: 100%; height: 100%; object-fit: cover; object-position: 50%; transition: transform .8s ease-in-out; } .channel .sns .sns_lists .img .btn_play { width: fit-content; height: fit-content; object-fit: contain; transition: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .channel .sns .sns_lists:not(.youtube) li:hover .img img { transform: scale(1.1); } .channel .sns .sns_lists .txt { padding: 2.5rem 2rem 0; } .channel .sns .sns_lists .txt p { font-size: 2rem; color: #222; font-weight: 350; letter-spacing: -.1rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .channel .sns .btn_line { display: block; width: 29.6rem; height: 7.4rem; line-height: 7.4rem; margin: 10rem auto 0; } .channel .sns .view_more { font-family: 'Montserrat'; display: flex; justify-content: center; align-items: center; font-size: 2rem; border-radius: 3.7rem; border: 1px solid #222; } .channel .sns .view_more i { display: inline-block; width: 2.1rem; height: 2.1rem; background: url(../images/common/icon_plus_21x22.png); margin-left: 4.5rem; transition: transform .3s; } .channel .sns .view_more:hover i { background: url(../images/common/icon_plus_w_21x22.png); transform: rotate(180deg); } .channel .sns .sns_wrap+.sns_wrap { margin-top: 12rem; } .channel .sns .go_sns { float: right; margin-top: -4rem; margin-bottom: 3rem; display: flex; align-items: center; width: 31.1rem; height: 4.8rem; border: 1px solid #000; border-radius: 2.3rem; padding: 0 3rem; line-height: 4.6rem; font-size: 1.6rem; transition: all .3s; } .channel .sns .go_sns:hover { background: #000; color: #fff; } .channel .sns .go_sns::before { content:''; display: inline-block; margin-right: 10px; } .channel .sns .go_insta:before { width: 20px; height: 20px; background: url(../images/channel/sns_icon_insta.png) no-repeat 50% 50%; background-size: contain; } .channel .sns .go_fb:before { width: 19px; height: 19px; background: url(../images/channel/sns_icon_fb.png) no-repeat 50% 50%; background-size: contain; } .channel .sns .go_yt:before { width: 26px; height: 19px; background: url(../images/channel/sns_icon_yt.png) no-repeat 50% 50%; background-size: contain; } .channel .sns .go_sns b { font-weight: 400; line-height: 4.8rem; } .channel .sns .go_sns::after { content:''; display: block; width: 1.5rem; height: 1.5rem; background: url(../images/common/icon_plus_15x15.png) 50% 50%; margin-left: auto; background-size: 100%; } .channel .sns .go_sns:hover::after { background: url(../images/common/icon_plus_w_15x15.png) 50% 50%; background-size: 100%; } .channel .sns .popup { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8); z-index: 1000; opacity: 0; visibility: hidden; transition:all ease .6s; } .channel .sns .popup.on { opacity: 1; visibility: visible; } .channel .sns .popup .pop_close { position: absolute; width: 70px; height: 70px; right: -110px; top: 50%; margin-top: -35px; transition: transform ease .3s; cursor: pointer; } .channel .sns .popup .pop_close img { width: 100%; object-fit: contain; } .channel .sns .popup .pop_close:hover { transform: rotate(90deg); } .channel .sns .popup .pop_wrap { width: 900px; height: fit-content; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .channel .sns .popup .pop_cont iframe { width: 100%; } /* 자료실 */ .channel .reference { position: relative; overflow: hidden; } .channel .reference .video_ad { background: #005eb8; padding: 10rem 0 12rem; } .channel .reference .video_ad .tit { font-size: 5rem; font-weight: 400; color: #fff;letter-spacing: -.125rem;text-align: center; } .channel .reference .video_ad .video { max-width: 120rem; margin: 5rem auto 0; } .channel .reference .brochure { background: #f9f9f9; padding: 12rem 0; } .channel .reference .brochure > img { position: absolute; bottom: -20.2rem; right: 2.6rem; } .channel .reference .brochure .inner { display: flex; justify-content: space-between; padding: 0 12rem; } .channel .reference .brochure .inner .left { width: 50%; } .channel .reference .brochure .sec_tit { font-size: 5rem; font-weight: 450; letter-spacing: -.125rem; margin-top: 6rem; } .channel .reference .brochure .sec_tit::before { content:''; display: block; width: 6.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); margin-bottom: 2rem; } .channel .reference .brochure .sec_tit b { color: #005eb8; } .channel .reference .brochure .sub { font-size: 2.8rem; color: #222; font-weight: 350; letter-spacing: -.07rem; margin: 3rem 0 2rem; } .channel .reference .brochure p { font-size: 1.8rem; color: #555; font-weight: 150; line-height: 1.66; letter-spacing: -.045rem; } .channel .reference .brochure .img { position: relative; } .channel .reference .brochure .img img { box-shadow: 7px 12px 27px 0px rgba(0, 0, 0, 0.35); } .channel .reference .brochure .btn_wrap { display: flex; align-items: center; margin-top: 15.5rem; } .channel .reference .brochure .btn_wrap a { display: block; width: 23.2rem; height: 6rem; line-height: 6rem; font-size: 1.6rem; color: #000; text-indent: 1rem; position: relative; } .channel .reference .brochure .btn_wrap a:first-of-type { margin-right: 3rem; } .channel .reference .brochure .btn_wrap a i { display: inline-block; width: 1.9rem; height: 2rem; background: url(../images/common/icon_download.png) no-repeat; position: absolute; right: 1rem; top:50%; transform: translateY(-50%); } .channel .reference .brochure .btn_wrap a::after { content:''; display: block; width: 100%; height: .1rem; background: #000; transition: width .3s; } .channel .reference .brochure .btn_wrap a:hover::after { width: 0; } /* CI/BI */ .channel .cibi .sec_tit { font-family: 'Montserrat'; font-size: 5rem; font-weight: 400; text-align: center; } .channel .cibi .blue { font-family: 'Montserrat'; font-size: 2.6rem; font-weight: 350; color: #005eb8; text-align: center; letter-spacing: -.13rem; } .channel .cibi .download { display: block; width: 23.2rem; height: 6rem; line-height: 6rem; font-size: 1.6rem; color: #000; text-indent: 1rem; text-align: left; position: relative; } .channel .cibi .download i { display: inline-block; width: 1.9rem; height: 2rem; background: url(../images/common/icon_download.png) no-repeat; position: absolute; right: 1rem; top:50%; transform: translateY(-50%); } .channel .cibi .download::after { content:''; display: block; width: 100%; height: .1rem; background: #000; transition: width .3s; } .channel .cibi .download:hover::after { width: 0; } .channel .cibi .logo_wrap { max-width: 144rem; margin: 0 auto; } .channel .cibi .section01 { background: #f9f9f9; text-align: center; padding: 9rem 0 10rem; } .channel .cibi .section01 h3 { font-size: 4rem; font-weight: 400; color: #222; } .channel .cibi .section01 .line { display: inline-block; width: 0.1rem; height: 4rem; background: #ccc; margin: 4rem auto 3rem; } .channel .cibi .section01 > p { font-size: 2rem; color: #555; line-height: 2; margin: 2.5rem 0 5.5rem; } .channel .cibi .section01 .download { margin: 0 auto; } .channel .cibi .section01 .logo_wrap ul { display: flex; justify-content: space-between; align-items: center; margin-top: 10rem; } .channel .cibi .section01 .logo_wrap ul li { width: calc(50% - 1.5rem); height: 26rem; background-image: url(../images/channel/cibi_linebg.png); display: flex; align-items: center; justify-content: center; } .channel .cibi .section01 .logo_wrap ul li:first-child { background: #fff url(../images/channel/cibi_linebg_g.png) repeat 50% 50%; border: 1px solid #ededed; } .channel .cibi .section01 .logo_wrap ul li:last-child { background: #004098 url(../images/channel/cibi_linebg_w.png) repeat 50% 50%; } .channel .cibi .section02 { padding: 11rem 0 20rem; } .channel .cibi .section02 .logo_wrap { margin-top: 10rem; } .channel .cibi .section02 .logo_wrap > div { display: flex; } .channel .cibi .section02 .logo_wrap > div > div { width: 50%; } .channel .cibi .section02 .logo_wrap .weve { padding-bottom: 10rem; border-bottom: 1px solid #e8e8e8; } .channel .cibi .section02 .logo_wrap .zenith { padding-top: 10rem; } .channel .cibi .section02 .logo_wrap > div .logo { display: flex; align-items: center; justify-content: center; height: 36rem; margin-right: 1.5rem; background: #fff url(../images/channel/cibi_linebg_g.png) repeat 50% 50%; border: 1px solid #ededed; } .channel .cibi .section02 .logo_wrap .txt { padding: 0 12rem 0 9rem; } .channel .cibi .section02 .logo_wrap .txt .name { font-size: 3.6rem; font-weight: 400; color: #222; margin: 1.5rem 0; } .channel .cibi .section02 .logo_wrap .txt p { font-size: 1.8rem; color: #555; line-height: 1.89; margin-bottom: 4rem; } /* ================================ 고객센터 =============================== */ /* 공통 */ .customer .sub_visual { background-image: url(../images/customer/customer_bg.jpg); } /* 고객문의 */ .customer .customer_inquiry .inner { max-width: 120rem; } .customer .customer_inquiry .section1 { background: #f9f9f9; padding: 11.5rem 0 12rem; } .customer .customer_inquiry .section1 .sec_tit { font-size: 3.4rem; color: #222; font-weight: 450; } .customer .customer_inquiry .section1 .cont_box { background: #fff; border: 1px solid #e8e8e8; margin: 3rem 0 2rem; } .customer .customer_inquiry .section1 .cont_box > div { font-size: 1.6rem; color: #222; line-height: 1.625; padding: 4.5rem 7rem; height: 19.4rem; overflow-y: scroll; } .customer .customer_inquiry .section1 ul { font-size: 1.4rem; color: #777; line-height: 1.71; letter-spacing: -.0014rem; margin-bottom: 3.5rem; } .customer .customer_inquiry .section1 ul li { position: relative; padding-left: 1.2rem; } .customer .customer_inquiry .section1 ul li span { position: absolute; top: 0; left: 0; } .customer .customer_inquiry .section1 .agree_row { display: flex; position: relative; } .customer .customer_inquiry .section2 { padding: 12rem 0 20rem; } .customer .customer_inquiry .section2 p { font-size: 1.6rem; color: #222; margin-bottom: 2rem; } .customer .customer_inquiry .section2 .es { color: #005eb8; } .customer .customer_inquiry .section2 .row { width: 100%; display: flex; align-items: center; } .customer .customer_inquiry .section2 .row.cont_row { align-items: flex-start; } .customer .customer_inquiry .section2 .row.cont_row .tit_cell { margin-top: 20px; } .customer .customer_inquiry .section2 .row.row_short { max-width: 68.2rem; } .customer .customer_inquiry .section2 .row+.row { margin-top: 2rem; } .customer .customer_inquiry .section2 .row .tit_cell { font-size: 1.8rem; color: #222; width: 13rem; flex-shrink: 0; } .customer .customer_inquiry .section2 .row .ipt_cell { width: 100%; } .customer .customer_inquiry .section2 .row .ipt_cell.email_cell { display: flex; align-items: center; } .customer .customer_inquiry .section2 .row .ipt_cell.email_cell label { color: #b2b2b2; } .customer .customer_inquiry .section2 .row .ipt_cell.email_cell span { font-family: 'Montserrat'; font-size: 1.6rem; color: #222; margin: 0 .7rem; } .customer .customer_inquiry .section2 .row .ipt_cell.email_cell .select_row { margin-left: 2rem; } .customer .customer_inquiry .section2 .file_row .upload_name { width: calc(100% - 18.2rem); } .customer .customer_inquiry .section2 .file_row+.info { font-size: 1.6rem; color: #777; margin-top: 2rem; margin-bottom: 2rem; display: block; } .customer .customer_inquiry .section2 .btn_box { margin-top: 12rem; } .customer .customer_inquiry .section2 .btn_blk { width:28.3rem;height: 6.4rem;line-height: 6.4rem; } .customer .customer_inquiry .section2 .btn_blk a { border-radius: 3.2rem; } /* 공지사항 */ .customer .notice { padding-bottom: 10rem; font-family: 'NS'; } .customer .notice .tb_top { position: relative;margin-top: -4rem; } .customer .notice .tb_top .search { width: 44.7rem; margin: -4rem auto 0; } .customer .notice .tb_top .search .input_search { width: 100%; border-bottom: 2px solid #222; } .customer .notice .tb_top .search .input_search input { width: calc(100% - 6rem); height: 6rem; font-size: 2.4rem; color: #222; font-weight: 400; } .customer .notice .tb_top .search .input_search a { width: 6rem; height: 6rem; background: url(../images/common/icon_search_blk.png) no-repeat 50% 50%; background-size: 2.4rem; } .customer .notice .tb_top .total {font-size: 1.6rem; font-weight: 150; width: 44.7rem; margin: 2rem auto 0; padding-left: 2rem; } .customer .notice .tb_top .total b {color: #005eb8;font-weight: 350;} .customer .notice .tb_box {position: relative;margin-top: 3rem;} .customer .notice .tb_box .tb_row {display: table;table-layout: fixed;width: 100%;} .customer .notice .tb_box .tb_row.row_head {border-top: .2rem solid #000;border-bottom: .1rem solid #e8e8e8;} .customer .notice .tb_box .tb_row.row_body {border-bottom: .1rem solid #e8e8e8;} .customer .notice .tb_box .tb_row>div {display: table-cell;height: 7rem;line-height: 7rem;vertical-align: middle;text-align: center;} .customer .notice .tb_box .tb_row.row_head>div {font-size: 1.8rem;color: #222;font-weight: 400;} .customer .notice .tb_box .tb_row.row_body>div {font-size: 1.6rem;font-weight: 200;color: #222;} .customer .notice .tb_box .tb_row .num {width: 13%;} .customer .notice .tb_box .tb_row.row_body .num {font-family: 'Montserrat';} .customer .notice .tb_box .tb_row .tit {width: 70%;} .customer .notice .tb_box .tb_row.row_body .tit a {display: block;width: 100%;padding-left: 4rem;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .customer .notice .tb_box .tb_row .view b {display: none;padding-right: .5rem;font-weight: 300;} .customer .notice .tb_box .tb_row .date {width: 17%;} .customer .notice .tb_box .tb_row .date b {display: none;padding-right: .5rem;font-weight: 300;} .customer .notice .tb_box .tb_row.none {display: none;} .customer .notice .tb_box .tb_row.null {font-size: 1.6rem;color: #222;text-align: center;padding: 24rem 0;} .customer .notice .tb_view { padding: 1rem 0 10rem; } /* 사이버 감사실 */ .customer .pb0 { padding: 10rem 0 12rem; } .customer .pb0 .guide { background: #f9f9f9; max-width: 116rem; margin: 7rem auto 4rem; padding: 5rem 18rem; letter-spacing: -.05rem; } .customer .pb0 .guide dt { font-size: 2.4rem; font-weight: 400; color: #222222; padding-bottom: 2rem; } .customer .pb0 .guide dd { text-align: left; font-size: 1.6rem; color: #666666; white-space: nowrap; line-height: 2; } .customer .btn_wrap { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; } .customer .btn_wrap02 { padding-bottom: 5rem; } .customer .btn_wrap span { display: block; width: 100%; text-align: center; padding-bottom: 2.7rem; font-size: 1.4rem; color: #666666; } .customer .btn_wrap a { display: flex; align-items: center; justify-content: center; width: 34rem; height: 10rem; border-radius: 5rem; text-align: left; font-size: 2rem; color: #005eb8; letter-spacing: -.05rem; } .customer .btn_wrap a:first-of-type { background: rgba(0, 94, 184,.05); margin-right: 4rem; } .customer .btn_wrap a:first-of-type .icon { width: 4.6rem; height: 4.2rem; margin-right: 2rem; background: url(../images/customer/audit_call_icon.png) no-repeat 50% 50%; background-size: contain; } .customer .btn_wrap a:first-of-type .txt > div:first-child { color: #005eb8; } .customer .btn_wrap a:first-of-type .txt > div:first-child em { font-family: 'Montserrat', sans-serif; font-size: 1.9rem; } .customer .btn_wrap a:first-of-type .txt > div:last-child { font-family: 'Montserrat'; font-size: 2.6rem; font-weight: 400; } .customer .btn_wrap a:last-of-type { border: 1px solid #005eb8; transition: all .2s; } .customer .btn_wrap a:last-of-type .icon { width: 7.5rem; height: 4.9rem; margin-right: 2rem; background: url(../images/customer/audit_weve_icon.png) no-repeat 50% 50%; background-size: contain; } .customer .btn_wrap a:last-of-type .txt > div:first-child { font-weight: 400; } .customer .btn_wrap a:last-of-type:hover { background: #005eb8; color: #fff; } .customer .btn_wrap a:last-of-type:hover .icon { background: url(../images/customer/audit_weve_icon_w.png) no-repeat 50% 50%; } .customer .cyber_audit { padding: 0 0 20rem 0; } .customer .cyber_audit .section1 { background: linear-gradient(to bottom, #f9f9f9, #f9f9f9 71.3rem, #fff 61.4rem, #fff 100% ); } .customer .cyber_audit section .inner { background: #fff; } .customer .cyber_audit h2 { font-size: 3.8rem; color: #222; font-weight: 400; text-align: center; letter-spacing: -.095rem; padding: 10rem 0; } .customer .cyber_audit h3 { font-size: 3.8rem; color: #222; font-weight: 400; text-align: center; letter-spacing: -.085rem; padding: 10rem 0 6rem; } .customer .cyber_audit .cont { width: 100%; max-width: 120rem; margin: 0 auto ; } .customer .cyber_audit .cont ul { width: 100%; max-width: 90rem; display: flex; flex-wrap: wrap; margin: 0 auto; } .customer .cyber_audit .cont ul li { transition: all .2s; width: calc(100% / 3); height: 21rem; border: 1px solid #e8e8e8; display: flex; flex-direction: column; justify-content: center; align-items: center; } .customer .cyber_audit .cont ul li:not(:nth-child(3n)) { border-right: 0; } .customer .cyber_audit .section1 .cont, .customer .cyber_audit .section2 .cont { border-bottom: 1px solid #e8e8e8; } .customer .cyber_audit .section1 .cont ul, .customer .cyber_audit .section2 .cont ul { padding-bottom: 10rem; } .customer .cyber_audit .section1 .cont ul li:nth-last-child(n+1):nth-last-child(-n+3) { border-top: 0; } .customer .cyber_audit .section3 .cont ul { max-width: 120rem; flex-wrap: nowrap; } .customer .cyber_audit .section3 .cont ul li { width: calc(100% / 4); } .customer .cyber_audit .section3 .cont ul li:last-child { border-right: 1px solid #e8e8e8; border-left: 0; } .customer .cyber_audit .cont ul li .tit { font-size: 1.8rem; font-weight: 300; color: #222; letter-spacing: -.045rem; text-align: center; margin-top: 2.5rem; } .customer .cyber_audit .cont ul li a { display: none; align-items: center; justify-content: center; width: 14rem; height: 4rem; box-sizing: border-box; border-radius: 2rem; border: 1px solid rgba(255, 255, 255,.5); font-size: 1.4rem; letter-spacing: .07rem; color: #fff; } .customer .cyber_audit .cont ul li a span { transition: transform .3s; display: inline-block; width: 1.3rem; height: 1.3rem; background: url(../images/common/icon_plus_w_15x15.png) 50% 50%; background-size: 100% 100%; margin-left: 1.5rem; } .customer .cyber_audit .cont ul li a:hover span { transform: rotate(180deg); } .customer .cyber_audit .cont ul li:hover { background: #005eb8; box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.23); border-color: #005eb8; } .customer .cyber_audit .cont ul li:hover .icon { display: none; } .customer .cyber_audit .cont ul li:hover .tit { font-size: 2.4rem; font-weight: 400; color: #fff; } .customer .cyber_audit .cont ul li:hover a { display: flex; margin-top: 1.6rem; } /* 제보하기 */ .customer .cyber_report .section1 { background: #f9f9f9; padding: 11.5rem 0 12rem; } .customer .cyber_report .section1 .sec_tit { font-size: 3.4rem; color: #222; font-weight: 450; } .customer .cyber_report .section1 .cont_box { background: #fff; border: 1px solid #e8e8e8; margin: 3rem 0 4rem; } .customer .cyber_report .section1 .cont_box > div { font-size: 1.6rem; color: #222; line-height: 1.625; padding: 4.5rem 7rem; height: 19.4rem; overflow-y: scroll; } .customer .cyber_report .section1 ul { font-size: 1.4rem; color: #777; line-height: 1.71; letter-spacing: -.0014rem; margin-bottom: 3.5rem; } .customer .cyber_report .section1 ul li { position: relative; padding-left: 1.2rem; } .customer .cyber_report .section1 ul li span { position: absolute; top: 0; left: 0; } .customer .cyber_report .section1 .agree_row { display: flex; position: relative; } .customer .cyber_report .section2 { padding: 12rem 0 20rem; } .customer .cyber_report .section2 p { font-size: 1.6rem; color: #222; margin-bottom: 2rem; } .customer .cyber_report .section2 .es { color: #005eb8; } .customer .cyber_report .section2 .row { width: 100%; display: flex; align-items: center; } .customer .cyber_report .section2 .row.alignTop { align-items: flex-start; } .customer .cyber_report .section2 .row.alignTop .tit_cell { margin-top: 20px; } .customer .cyber_report .section2 .row.row_short { max-width: 72rem; } .customer .cyber_report .section2 .row+.row { margin-top: 2rem; } .customer .cyber_report .section2 .row .tit_cell { font-size: 1.8rem; color: #222; width: 13rem; flex-shrink: 0; } .customer .cyber_report .section2 .row .ipt_cell { width: calc(100% - 13rem); } .customer .cyber_report .section2 .txt_row { font-size: 1.8rem; display: flex; align-items: center; height: 6rem; } .customer .cyber_report .section2 .txt_row b { font-weight: 400; } .customer .cyber_report .section2 .row .ipt_cell.name_cell .input_row { width: 55rem; } .customer .cyber_report .section2 .row .ipt_cell.name_cell .checkbox_row { display: inline-block; width: calc(100% - 60rem); margin-left: 4rem; } .customer .cyber_report .section2 .row .ipt_cell.name_cell .checkbox_row input[type="checkbox"] + label { margin-right: 0; } .customer .cyber_report .section2 .row .ipt_cell.name_cell .info { display: inline-block; font-size: 1.4rem; color: #f00; letter-spacing: -.014rem; margin-top: 1.5rem; } .customer .cyber_report .section2 .row .ipt_cell.email_cell { display: flex; align-items: center; } .customer .cyber_report .section2 .row .ipt_cell.email_cell label { color: #b2b2b2; } .customer .cyber_report .section2 .row .ipt_cell.email_cell span { font-family: 'Montserrat'; font-size: 1.6rem; color: #222; margin: 0 .7rem; } .customer .cyber_report .section2 .row .ipt_cell.email_cell .select_row { margin-left: 2rem; } .customer .cyber_report .section2 .row .ipt_cell.email_cell > .select_row::after { content:''; width: 0; height: 0; border: .5rem solid transparent; border-bottom-width: 0; border-top-color: #777; } .customer .cyber_report .section2 .row .ipt_cell.phone_cell { display: flex; align-items: center; } .customer .cyber_report .section2 .row .ipt_cell.phone_cell > span { font-size: 1.8rem; color: #222; margin: 0 1.7rem; } .customer .cyber_report .section2 .file_row .upload_name { width: calc(100% - 18.2rem); } .customer .cyber_report .section2 .file_row+.info { font-size: 1.6rem; color: #777; line-height: 1.5; margin-top: 1rem; margin-bottom: 2rem; display: block; } .customer .cyber_report .section2 .btn_box { margin-top: 12rem; } .customer .cyber_report .section2 .btn_blk { width:28.3rem;height: 6.4rem;line-height: 6.4rem; } .customer .cyber_report .section2 .btn_blk a { border-radius: 3.2rem; } /* ================================ 사업영역 =============================== */ /* 마스터피스 - 개요 */ /* 공통 */ .masterpiece .sub_visual { width: 100%;height: 100vh; } /* .masterpiece .sub_visual { height: 100vh; background-size: auto 120%; } */ /* .masterpiece .sub_visual.ani { height: 100vh; background-size: auto 100%; } */ .masterpiece .sub_visual_inner { width: 100%;height: 100%;position: relative;overflow: hidden; } .masterpiece .sub_visual_inner>img { width: 100%;height: 100%;object-fit: cover;transform: scale(1.2);transition: transform 1.2s ease-out; } .masterpiece .sub_visual.ani .sub_visual_inner>img { transform: scale(1); } .masterpiece .masterpiece_menu { width: 100%; height: fit-content; position: absolute; bottom:0; background: rgba(0,0,0,.5); } .masterpiece .masterpiece_menu.fixed { position: fixed; top: 0; left: 0; z-index: 999; } .masterpiece .masterpiece_menu ul { display: flex; max-width: 144rem; margin: 0 auto; } .masterpiece .masterpiece_menu ul li { flex: 1; display: table; height: 8rem; padding-left: 4rem; } .masterpiece .masterpiece_menu ul li a { display: table-cell; height: 8rem; vertical-align: middle; color: rgba(255, 255, 255,.5); font-size: 2rem; font-weight: 400; transition: color .2s; } .masterpiece .masterpiece_menu ul li a b { margin-right: 2rem; } .masterpiece .masterpiece_menu ul li.on { background: #005eb8; } .masterpiece .masterpiece_menu ul li.on a, .masterpiece .masterpiece_menu ul li:hover a { color: rgba(255, 255, 255,1); } .masterpiece .masterpiece_menu ul li.mb { display: none; } .masterpiece .outline { padding-top: 16rem; } .masterpiece .outline .interviewBtn { height: 7.4rem; border: 2px solid #005eb8; border-radius: 3.65rem; background: #fff; position: fixed; bottom: 8rem; right: 8rem; z-index: 10; display: none; } .masterpiece .outline .interviewBtn.on { position: absolute; } .masterpiece .outline .interviewBtn a { display: flex; width: 100%; height: 100%; align-items: center; padding: 0 3rem; } .masterpiece .outline .interviewBtn .icon { width: 3.8rem; height: 3.6rem; background: url(../images/business/icon_interview.png) no-repeat 50% 50%; background-size: contain; margin-right: .8rem; } .masterpiece .outline .interviewBtn p { font-size: 1.4rem; font-weight: 350; color: #222; } .masterpiece .outline .interviewBtn span { font-family: 'Montserrat'; font-size: 2rem; font-weight: 350; color: #005eb8; letter-spacing: -.02rem; } .masterpiece .outline .section0 .tit_area { opacity: 0; transform: translateY(7rem); transition-duration: .3s; transition-timing-function: ease-in-out; transition-property: opacity, transform; } .masterpiece .outline .section0 .tit_area .tit_blue { font-size: 2rem; font-weight: 400; color: #005eb8; } .masterpiece .outline .section0 .tit_area h2 { font-size: 8rem; color: #000; font-weight: 400; margin: 1.5rem 0; } .masterpiece .outline .section0 .tit_area p { font-size: 2rem; color: #777; line-height: 1.7; } .masterpiece .outline .section0 .cont_area { border-top: 1px solid #222; border-bottom: 1px solid #e8e8e8; padding: 3.5rem 0 4rem; margin: 7.5rem 0 8rem; opacity: 0; transform: translateY(7rem); transition-duration: .3s; transition-timing-function: ease-in-out; transition-property: opacity, transform; } .masterpiece .outline .section0 .cont_area ul { display: flex; align-items: center; } .masterpiece .outline .section0 .cont_area ul li { position: relative; flex-grow: 1; padding-left: 6rem; } .masterpiece .outline .section0 .cont_area ul li:first-child { padding-left: 4rem; } .masterpiece .outline .section0 .cont_area ul li::after { content:''; display: inline-block; width: 1px; height: 6rem; background: #e8e8e8; position: absolute; right:0rem; top:0; } .masterpiece .outline .section0 .cont_area ul li:last-child::after { display: none; } .masterpiece .outline .section0 .cont_area .tit_blue { font-size: 1.8rem; font-weight: 400; color: #005eb8; } .masterpiece .outline .section0 .cont_area p { font-size: 1.8rem; color: #777; margin-top: 1rem; } .masterpiece .outline .section0 .cont_area .corp {font-size: 1.4rem;letter-spacing: -0.064rem;vertical-align: middle;} .masterpiece .outline .section0.active .tit_area, .masterpiece .outline .section0.active .cont_area { opacity: 1;transform: translateY(0rem); } .masterpiece .outline .section0.active .cont_area { transition-delay: .2s; } .masterpiece .outline .section { display: flex; align-items: center; } .masterpiece .outline section .line { width: 6.5rem; height: .6rem; background: #000; transform: skew(-45deg); margin-bottom: 3.5rem; } .masterpiece .outline section p { font-size: 2rem; color: #555; line-height: 1.7; } .masterpiece .outline section .left h3, .masterpiece .outline section .left p { padding-right: 2rem; } .masterpiece .outline section .right h3, .masterpiece .outline section .right p { padding-left: 2rem; } .masterpiece .outline section h3 { font-size: 6rem; font-weight: 400; color: #222; margin-bottom: 6rem; } .masterpiece .outline section h3 em { font-family: 'Montserrat'; } .masterpiece .outline section .img { overflow: hidden; } .masterpiece .outline section .img img { transition: transform ease 1s; } .masterpiece .outline section .img img:hover { transform: scale(1.1); } .masterpiece .outline section .img+span { font-size: 1.6rem; color: #222; margin-top: 2rem; display: inline-block; } .masterpiece .outline .wide-img { width: 100%; } .masterpiece .outline .wide-img img { width: 100%; object-fit: contain; } .masterpiece .outline .bg-blue { background: #f5f6fa; } .masterpiece .outline .bg-green { background: #f2faf6; } .masterpiece .outline .bg-gray { background: #faf5f2; } /* 해운대 */ /* .mp01 .sub_visual { background-image: url(../images/business/masterpiece01_outline_visual.jpg); } */ .mp01 .outline .bg-blue { padding: 12rem 0; } .mp01 .outline .section .right { margin-left: auto; } .mp01 .outline section h3 span { position: relative; width: fit-content; display: inline-block; } .mp01 .outline section h3 span::before { content:''; display: inline-block; width: 100%; height: 1.7rem; background: rgba(237, 28, 36,.15); position: absolute; bottom: 0; left: 0; } .mp01 .outline .section0, .mp01 .outline .section1 { margin-bottom: 12rem; } .mp01 .outline .section1 .left p { padding-right: 15rem; } .mp01 .outline .section2 .right { padding-right: 4rem; padding-left: 12rem; } .mp01 .outline .section3 .right { margin-right: -6rem; } .mp01 .outline .section3 { margin-top: 5rem; } .mp01 .outline .section3 .left { padding-left: 6rem; padding-right: 20rem; } .mp01 .outline .section4 { margin-top: 12rem; } .mp01 .outline .section5 { margin: 10rem 0 13rem; } .mp01 .outline .section5 .left { width: 40%; } .mp01 .outline .section5 .right { width: 60%; } .mp01 .outline .section6 { margin: 11rem 0 9rem; } .mp01 .outline .section6 h3 { text-align: center; } .mp01 .outline .section6 .cont_area { display: flex; align-items: center; justify-content: space-between; } .mp01 .outline .section6 .cont_area p { font-size: 2rem; color: #555; line-height: 1.7; padding: 0 4rem; } .mp01 .outline .section7 { padding-bottom: 20rem; } /* 분당두산타워 */ /* .mp02 .sub_visual { background-image: url(../images/business/masterpiece02_outline_visual.jpg); } */ .mp02 .outline .section1 { margin: 10rem 0 13.5rem; } .mp02 .outline .section1 .right { padding-left: 12rem; } .mp02 .outline .section2 { margin: 15rem 0 11rem; } .mp02 .outline .section2 h3 { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-left: 4rem; margin-bottom: 2rem; } .mp02 .outline .section2 h3::after { content:''; display: block; width: 50%; height: 1px; background: #222; } .mp02 .outline .section2 p { padding-left: 29%; } .mp02 .outline .section3 { align-items: flex-start; } .mp02 .outline .section3 .left p { margin-top: 15.5rem; } .mp02 .outline .section3 .right { margin-top: 8.3rem; } .mp02 .outline .section3 .right p { margin-top: 11rem; } .mp02 .outline .bg-green { padding: 14rem 0; margin-top: 13rem; border-top: 1px solid #e8e8e8; background: linear-gradient(to bottom, #f2faf6 1336px, #fff 1337px, #fff 100%); } .mp02 .outline .section5 { align-items: flex-start; margin-top: 9rem; } .mp02 .outline .section5 .left { width: 50%; padding-left: 4rem; } .mp02 .outline .section5 .right { width: 50%; padding-left: 6rem; } .mp02 .outline .section6 { align-items: flex-end; margin-top: 5rem; position: relative; } .mp02 .outline .section6 p { position: absolute; top: 14rem; left: 50%; padding-left: 6rem; } .mp02 .outline .section6 .right { padding-left: 12rem; } .mp02 .outline .section7 { border-top: 1px solid #e8e8e8; padding-top: 11rem; text-align: center; } .mp02 .outline .section7 h3 { margin-bottom: 4rem; } .mp02 .outline .section8 { padding: 7.5rem 0 20rem; } /* 신분당선 */ /* .mp03 .sub_visual { background-image: url(../images/business/masterpiece03_outline_visual.jpg); } */ .mp03 .outline .section { justify-content: space-between; } .mp03 .outline .bg-green { background: #f7faf2; border-top: 1px solid #e8e8e8; padding: 11rem 0 20rem; } .mp03 .outline .bg-gray { padding: 45rem 0 12.5rem; margin-top: -36rem; } .mp03 .outline .section1 h3 { padding-left: 4rem; margin-bottom: -2rem; width: 100%; display: flex; justify-content: space-between; white-space: nowrap; } .mp03 .outline .section1 h3::after { content:''; display: block; width: 50%; height: 1px; margin-top: 3.5rem; background: #222; } .mp03 .outline .section1 .cont_area { display: flex; flex-wrap: wrap; } .mp03 .outline .section1 p:first-of-type { padding-left: 22%; } .mp03 .outline .section1 p:last-of-type { padding-left: 9rem; } .mp03 .outline .section1 ul { display: flex; justify-content: space-between; width: 100%; margin-top: 13rem; } .mp03 .outline .section3 { margin: 12rem 0 6rem; } .mp03 .outline .section3 .right { width: 41%; } .mp03 .outline .section4 .left { width: 43%; } .mp03 .outline .section5 { margin: 8rem 0 12rem; } .mp03 .outline .section6 .left p { padding-right: 13rem; } .mp03 .outline .section7 { margin: 12rem 0 10rem; } .mp03 .outline .section7 .right { padding-left: 8rem; } /* 마스터피스 - 인터뷰 - 공통 */ .interview .sub_visual h1 { /* font-family: 'Montserrat', sans-serif; */ font-size: 7rem; font-weight: 350; line-height: 1.3; text-align: center; right: 0; transform: translateY(calc(-50% + .4rem)); letter-spacing: -.1rem; } .interview .sub_visual h1 span { display: block; font-size: 3.8rem; font-weight: 100; letter-spacing: 1rem; line-height: 1; letter-spacing: .5rem; margin-top: 1.5rem; } .interview .sub_visual ul { max-width: 136rem; width: 100%; height: 21rem; margin: auto; position: absolute; left: 0; right: 0; bottom: -10.5rem; display: flex; box-shadow: .5rem .9rem 4.3rem 0 rgba(0, 0, 0, .34); z-index: 9; transform: translateY(10rem); opacity: 0; transition: opacity,transform 1s; } .interview .sub_visual.ani ul { opacity: 1; transform: translateY(0); } .interview .sub_visual ul li:first-child { width: 70%; position: relative; } .interview .sub_visual ul li:first-child::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; backdrop-filter: blur(.4rem); background: rgba(0, 0, 0, .4); } .interview .sub_visual ul li:first-child p { position: absolute; z-index: 1; right: 0; left: 0; top: 0; bottom: 0; margin: auto; width: fit-content; height: fit-content; } .interview .sub_visual ul li:first-child p em { font-size: 3.6rem; color:#fff; font-weight: 350; line-height: 1.5; display: inline-block; } .interview .sub_visual ul li:last-child { width: 30%; background: #005eb8; position: relative; } .interview .sub_visual ul li:last-child p { color: #fff; font-size: 2.6rem; line-height: 1.2; font-weight: 100; width: fit-content; height: fit-content; position: absolute; left: 4rem; right: auto; top: 5.5rem; bottom: auto; margin: auto; } .interview .sub_visual ul li:last-child p span { font-size: 2rem; } .interview .sub_visual ul li:last-child p::before { content: ''; display: block; width: 2rem; height: .6rem; background: #fff; position: relative; top: 0; left: .5rem; transform: skew(-45deg); margin-bottom: 2.5rem; } .interview .contents { position: relative; overflow: hidden; padding: 22rem 0 20rem; } .interview .contents:before { content: 'INTERVIEW'; font-family: 'Montserrat', sans-serif; font-size: 68.4rem; font-weight: 450; writing-mode: vertical-lr; position: absolute; left: -9rem; top: -11.5rem; letter-spacing: -3rem; line-height: .7; white-space: nowrap; color: #f9f9f9; } .interview .contents .wrap { max-width: 136rem; width: 100%; margin: auto; } .interview .contents .wrap .left { float: left; } .interview .contents .wrap .right { float: right; } .interview .contents .wrap .img { width: calc(50% - 3rem); overflow: hidden; margin-top: .5rem; margin-bottom: 3rem; } .interview .contents .wrap .img img { width: 100%; transition: all ease 1s; } .interview .contents .wrap .img:hover img { transform: scale(1.1); } .interview .contents .wrap .dl50 { width: calc(50% - 3rem); } .interview .contents .wrap .dl100 { width: 100%; } .interview .contents .wrap dl { padding-left: 6.7rem; position: relative; height: fit-content; margin-bottom: 6.5rem; } .interview .contents .wrap dl dt { font-size: 2.6rem; font-weight: 400; color: #222222; white-space: normal; line-height: 1.5; } .interview .contents .wrap dl dt span { display: inline-block; position: absolute; left: 0; line-height: 1.2; font-family: 'Montserrat', sans-serif; font-size: 3.2rem; font-weight: 450; color: #005eb8; } .interview .contents .wrap dl dd { font-size: 2rem; color: #777777; margin-top: 1rem; line-height: 1.8; letter-spacing: -.125rem; } .interview .contents .wrap dl dd span { font-size: 1.6rem; color: #005eb8; display: block; line-height: 2.25; margin-top: 1rem; } .interview .contents .wrap a { float: left; transition: all ease .3s; position: relative; left: 50%; transform: translateX(-50%); width: 29.6rem; height: 7.4rem; line-height: .7; margin-top: 5rem; text-align: right; padding: 3rem 6rem; font-family: 'Montserrat', sans-serif; font-size: 2rem; color: #000000; border: .1rem solid #000000; border-radius: 3.7rem; } .interview .contents .wrap a:before { content: url(../images/common/interview_arrow_13x21.png); width: 1.2rem; height: 2.1rem; position: absolute; left: 6rem; transform: translateY(-.5rem); } .interview .contents .wrap a:hover { background: #000000; color: #fff; } .interview .contents .wrap a:hover:before { content: url(../images/common/interview_arrow_13x21_w.png); animation: infinite 1.2s interviewArrow; } /* 마스터피스 - 인터뷰 - 해운대두산위브더제니스 */ .haeundae .sub_visual { background-image: url(../images/business/haeundae_visual.jpg); } .haeundae .sub_visual ul li:first-child { background: url(../images/business/haeundae_visual.jpg) 71% 31% no-repeat; background-size: 240%; } .haeundae .sub_visual ul li:first-child::after { backdrop-filter: blur(.5rem); background: rgba(0, 0, 0, .3); } .haeundae .sub_visual ul li:first-child p em:nth-of-type(3) { padding-left: 16rem; } .haeundae .contents .wrap dl.custom { margin-bottom: 12rem; } /* 마스터피스 - 인터뷰 - 분당두산타워 */ .bundang .sub_visual { background-image: url(../images/business/bundang_visual.jpg); } .bundang .sub_visual ul li:first-child { background: url(../images/business/bundang_visual.jpg) 0% 25% no-repeat; background-size: 223%; } .bundang .sub_visual ul li:first-child p em:last-child { padding-left: 8.5rem; } /* 마스터피스 - 인터뷰 - 신분당선 */ .shinbundangline .sub_visual { background-image: url(../images/business/shinbundangline_visual.jpg); } .shinbundangline .sub_visual ul li:first-child { background: url(../images/business/shinbundangline_visual_s.png) 0% 0% no-repeat; } .shinbundangline .sub_visual ul li:first-child p em:nth-of-type(3) { padding-left: 11rem; } /* 사업소개 */ .civil_engineer .sub_visual { background-image: url(../images/business/business_bg.jpg); } .civil_engineer .tab_box { padding: 4.5rem 0 0; background: #f9f9f9; } .civil_engineer.bus_outline .tab_box { padding: 10rem 0; } .civil_engineer .outline .section { /* padding: 10rem 0 11rem; */ position: relative; /* height: auto; */ } .civil_engineer .outline .section:nth-of-type(2n)::after { content:''; display: block; width: 100%; height: 100%; background: #f9f9f9; position: absolute; top: 0; left: 0; z-index: -2; } .civil_engineer .section_nav.on { left: 6.35vw; opacity: 1; } .civil_engineer .section_nav { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 50%; left: -2rem; opacity: 0; transition: all ease-in-out .2s; transform: translateY(-50%); z-index: 2; height: 55rem; /* position: absolute; top: 10rem; */ width: 2rem; text-align: center; margin: 0 auto; } .civil_engineer .section_nav .button.prev { padding-bottom: 6rem; cursor: pointer; } .civil_engineer .section_nav .fraction { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .civil_engineer .section_nav .current_page { font-family: 'Montserrat'; font-size: 3rem; font-weight: 300; color: #005eb8; } .civil_engineer .section_nav .page_name { width: 25rem; display: block; font-family: 'Pretendard'; font-size: 2rem; font-weight: 400; color: #005eb8; transform: rotate(270deg) translate(-100%,-445%); position: absolute;top: 0;left: -35%; } .civil_engineer .section01 .section_nav .current_page > span { width: 10rem; margin-top: 15rem; } .civil_engineer .section02 .section_nav .current_page > span { width: 23rem; margin-top: 28rem; } .civil_engineer .section03 .section_nav .current_page > span { width: 23rem; margin-top: 28rem; } .civil_engineer .section04 .section_nav .current_page > span { width: 13rem; margin-top: 18rem; } .civil_engineer .section_nav .total_page { font-family: 'Montserrat'; font-size: 1.8rem; font-weight: 300; } .civil_engineer .section_nav .total_page::before { content:''; display: block; width: 0.1rem; height: 3.7rem; background: #999; margin: 0 0 2rem 1rem; } .civil_engineer .section_nav .button.next { padding-top: 6rem; cursor: pointer; } .civil_engineer .outline .section .graybx { background: #f9f9f9; position: absolute; width: 18rem; height: 100%; } .civil_engineer .outline .section .graybx.right { right: 0; } .civil_engineer .outline .section .inner { padding: 10rem 4rem 11rem; } .civil_engineer .outline .section04 .inner { padding-bottom: 19rem; } .civil_engineer .outline .section .tit { font-size: 3.8rem; font-weight: 450; color: #222; padding: 7rem 0 2rem; } .civil_engineer .outline .section p { display: flex; justify-content: space-between; } .civil_engineer .outline .section p > span { font-size: 2rem; font-weight: 150; color: #555; line-height: 1.8; } .civil_engineer .outline .section p .btn { width: auto; height: 6.4rem; border: 1px solid #000; color: #000; border-radius: 3.2rem; font-size: 1.6rem; font-weight: 150; text-align: center; letter-spacing: -.04rem; display: flex; align-items: center; padding: 0 4rem; transition: all .2s; position: relative; overflow: hidden; } .civil_engineer .outline .section p .btn:before {content: "";display: block;position: absolute;left: 0;top: 0;bottom: 0;right: 0;transform: scaleX(0);z-index: -1;background-color: #000;transition:all .2s ease-out;transform-origin:0 50%;} .civil_engineer .outline .section p .btn > i { display: inline-block; width: 2rem; height: 0.1rem; background: #000; margin-left: 4rem; transition: all .2s; } .civil_engineer .outline .section p .btn:hover { color: #fff;z-index: 3; } .civil_engineer .outline .section p .btn:hover:before { transform:scaleX(1) } .civil_engineer .outline .section p .btn:hover > i { background: #fff; } .civil_engineer .outline .section .swiper .img { width: 100%; height: 100%; } .civil_engineer .outline .section .swiper .img img { width: 100%; height: 100%; object-fit: contain; transition: all ease .8s; } .civil_engineer .outline .section .swiper .img:hover img { transform: scale(1.1); } .civil_engineer .outline .section .swiper { position: relative; overflow: hidden; } .civil_engineer .outline .section .swiper .swiper-nav { width: 26.2rem; display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 4rem; right: 5rem; z-index: 10; } .civil_engineer .outline .section .swiper .swiper-nav > div { font-family: 'Montserrat'; font-size: 1.4rem; font-weight: 400; color: #fff; letter-spacing: .28rem; cursor: pointer; } .civil_engineer .outline .section .swiper .swiper-nav > div i { vertical-align: middle; margin: 0 2rem; } .civil_engineer .outline .section .swiper .swiper-nav > div:first-of-type::after { content: ''; display: inline-block; width: 0.1rem; height: 1.4rem; background: #fff; opacity: .4; margin-left: 3rem; } /* 사업소개 리스트 */ .civil_engineer .top { background: #f9f9f9; } .civil_engineer .search { text-align: center; padding-top: 6.5rem; } .civil_engineer .search .input_search { width: 44.7rem; border-bottom: 2px solid #222; } .civil_engineer .search .input_search input { width: calc(100% - 6rem); height: 6rem; font-size: 2.4rem; color: #222; font-weight: 400; background: #f9f9f9; } .civil_engineer .search .input_search a { width: 6rem; height: 6rem; background: url(../images/common/icon_search_blk.png) no-repeat 50% 50%; background-size: 2.4rem; } .civil_engineer .total {font-size: 1.6rem; font-weight: 150; text-align: center; } .civil_engineer .total > span { display: block; width: 44.7rem; margin: 0 auto; text-align: left; padding: 2rem 0 0 2rem; } .civil_engineer .total b.blue {color: #005eb8;font-weight: 350;} .civil_engineer .business_lists { background: #f9f9f9; padding-top: 8rem; padding-bottom: 20rem; } .civil_engineer .business_lists .null { font-size: 1.6rem; text-align: center; padding: 5rem 0; } .civil_engineer .business_lists ul { display: flex; flex-wrap: wrap; width: 100%; } .civil_engineer .business_lists ul > li { cursor: pointer; margin-bottom: 10rem; width: calc(100% / 3); max-width: 42rem; height: fit-content; } .civil_engineer .business_lists ul > li:nth-child(3n-1) { margin: 0 9rem; } .civil_engineer .business_lists .list_img { width: 100%; height: 100%; position: relative; } .civil_engineer .business_lists .list_img img { width: 100%; height: 100%; object-fit: contain; } .civil_engineer .business_lists .list_cont, .civil_engineer .business_lists .list_cont ol, .civil_engineer .business_lists .list_cont ol li { width: 100%; } .civil_engineer .business_lists .list_cont .name { font-size: 2.4rem; font-weight: 400; letter-spacing: -.024rem; color: #222; padding: 2.5rem 0 1rem; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .civil_engineer .business_lists .list_cont .date { font-family: 'Montserrat'; font-size: 1.8rem; font-weight: 300; color: #999; } .civil_engineer .business_lists .list_more { display: block; width: 29.6rem; height: 7.4rem; line-height: 7.4rem; border: 1px solid #222; border-radius: 3.7rem; font-family: 'Montserrat'; font-size: 2rem; padding-left: 6rem; position: relative; margin: 0 auto; } .civil_engineer .business_lists .list_more::after { content:''; display: inline-block; width: 2.1rem; height: 2.1rem; background: url(../images/business/list_plus.png) no-repeat; position: absolute; right: 5rem; top: 50%; transform: translateY(-50%); transition: transform .3s; } .civil_engineer .business_lists .list_more:hover::after { transform: translateY(-50%) rotate(90deg); } .civil_engineer .business_lists .list_img .list_hover { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 90%; opacity: 0; background: rgba(0, 0, 0, 0.8);position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: -1; align-items: center; transition: all ease .3s; } .civil_engineer .business_lists .list_img .list_hover .name { color: #fff; font-size: 3rem; font-weight: 400; width: 100%; text-align: center; } .civil_engineer .business_lists .list_img .list_hover .name::before { content:''; display: block; width: 0; height: 0.6rem; background: #005eb8; margin: 0 auto 4.5rem; transform: skew(-40deg); transition: width .3s; } .civil_engineer .business_lists .list_img:hover .list_hover { width: 100%; height: 100%; opacity: 1; z-index: 1; } .civil_engineer .business_lists .list_img:hover .list_hover .name::before { width: 6.5rem; } .civil_engineer .business_lists .list_img .list_hover .date { font-family: 'Montserrat'; color: #fff; opacity: .8; font-size: 2.2rem; font-weight: 300; margin-top: 1rem; overflow: hidden; transition: all ease .2s; } .civil_engineer .business_lists .view_more { display: block; width: 17rem; height: 5rem; line-height: 5rem; border: 1px solid rgba(255, 255, 255,.5); border-radius: 2.5rem; font-family: 'Montserrat'; font-size: 1.4rem; color: #fff; padding: 0 2.8rem; margin: 4.5rem auto 0; position: relative; } .civil_engineer .business_lists .view_more::after { content:''; display: inline-block; width: 1.3rem; height: 1.3rem; background: url(../images/business/list_plus_w.png) no-repeat; margin-left: 1.7rem; position: absolute; top: 50%; margin-top: -.65rem; transition: transform .3s; } .civil_engineer .business_lists .view_more:hover::after { transform: rotate(90deg); } /* 사업소개 팝업 */ .card_popup {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background:rgba(0,0,0,0.8);z-index: 1003; cursor: none; } .card_popup .popup_inner {position:absolute;top:50%;left:50%;max-width: 136rem;width: calc(100% - 4rem);height: 84rem;transform:translate(-50%, -50%);z-index: 1004; cursor: auto;} .card_popup .pop_close { /* position: fixed; top: 0; left: 0; width: 7rem; height: 7rem; transform: scale(0); cursor: none; transition: transform ease .3s; */ position: absolute; top: 2rem; right: 2rem; } .card_popup .popup_inner .pop_close img { width: 100%; object-fit: contain; } .card_popup .popup_inner .pop_cont { max-width: 136rem;width: 100%;height:100%;background: linear-gradient(to right, #f5f5f5, #f5f5f5 50%, #fff 50.1%, #fff 100%); /* background: #f5f5f5; *//* padding: 6rem 10rem 6rem 6rem; */display: flex;justify-content: space-between;align-items: center; } .card_popup .popup_inner .pop_cont .inner_box {width: 50%;height: auto;/* background: #f5f5f5; */padding: 6rem;overflow: hidden;} .card_popup .popup_inner .pop_cont .inner_box .inner_slider { width: 100%; } .card_popup .popup_inner .pop_cont .inner_box .list {width: 100%; height: 72rem; overflow: hidden; } .card_popup .popup_inner .pop_cont .inner_box .list > img {transition: transform .8s; width: 100%; height: 100%; object-fit: cover;} .card_popup .popup_inner .pop_cont .inner_box .list:hover > img {transform: scale(1.1);} .card_popup .popup_inner .pop_cont .txt_box {width: 50%;height: 100%; padding: 6rem 10rem 6rem 6rem;background: #fff; overflow-y: auto;} .card_popup .popup_inner .pop_cont .txt_box .card_tit {font-size: 4rem;font-weight: 400;color: #222;letter-spacing: -.1rem;margin-bottom: 2rem;} .card_popup .popup_inner .pop_cont .txt_box .card_tit:before {content:'';display: block;width: 6.5rem;height: .6rem;background: #005eb8;transform: skew(-40deg);margin-bottom: 2.5rem;} .card_popup .popup_inner .pop_cont .txt_box .card_des {width: 100%;overflow-y: scroll;font-size: 1.6rem;font-weight: 150; color: #555;line-height: 1.875;letter-spacing: -.04rem;height: 14.4rem;} .card_popup .popup_inner .pop_cont .txt_box .card_des::-webkit-scrollbar {width: .5rem;} .card_popup .popup_inner .pop_cont .txt_box .card_des::-webkit-scrollbar-thumb {background: #e1e1e1;} .card_popup .popup_inner .pop_cont .txt_box .card_mark {display: flex;flex-wrap: wrap;justify-content: flex-start; align-items: center;padding: 5rem 0; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li { position: relative; /* margin-right: 4rem; */ margin-bottom: 1rem; width: calc(100% / 3); } .card_popup .popup_inner .pop_cont .txt_box .card_mark li img { position: absolute; top: 0; left: 0; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li .txt { background: #fff; width: auto; height: auto; padding: .5rem; margin: 1.2rem 0 0 2rem; position: relative; z-index: 1; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li .txt b { text-transform: uppercase; font-family: 'Montserrat'; font-weight: 450; font-size: 1.2rem; letter-spacing: -.06rem; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li.green .txt b { color: #00ad83; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li.skyblue .txt b { color: #00a5d7; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li.blue .txt b { color: #005eb8; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li.pink .txt b { color: #d21a79; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li.yellow .txt b { color: #ff9c00; } .card_popup .popup_inner .pop_cont .txt_box .card_mark li .txt p { font-size: 1.2rem; color: #555; letter-spacing: -.03rem; width: fit-content; } .card_popup .popup_inner .pop_cont .txt_box .card_tb::before {content:'';display: block;width: 100%;height: .1rem;background: #000;position: relative;z-index: 10;} .card_popup .popup_inner .pop_cont .txt_box .card_tb tr {border-bottom: 1px solid #e8e8e8;} .card_popup .popup_inner .pop_cont .txt_box .card_tb th {background: #f9f9f9;width: 27%;font-size: 1.5rem;color: #222;} .card_popup .popup_inner .pop_cont .txt_box .card_tb td {font-size: 1.5rem;color: #777;padding: 1.2rem 0 1.2rem 3.2rem;line-height: 1.66;} .card_popup .popup_inner .pop_cont .inner_nav {width: 39rem;display: flex;justify-content: space-between;align-items: center;margin: 7rem auto 0;} .card_popup .popup_inner .pop_cont .inner_nav .arrow {position: relative;vertical-align: middle;cursor: pointer;font-family: 'Montserrat';font-size: 1.4rem;font-weight: 400;letter-spacing: .28rem;} .card_popup .popup_inner .pop_cont .inner_nav .arrow:after {position: absolute;top:0;content:'';width: 1.2rem;height: 1.2rem;border-top: 2px solid #000;border-right: 2px solid #000;} .card_popup .popup_inner .pop_cont .inner_nav .arrow.on:after {border-color: #005eb8;} .card_popup .popup_inner .pop_cont .inner_nav .arrow.prev:after {transform: rotate(225deg);left:-2rem;} .card_popup .popup_inner .pop_cont .inner_nav .arrow.next:after {transform: rotate(45deg);right:-2rem;} .card_popup .popup_inner .pop_cont .inner_nav .counter_slider {font-family: 'Montserrat';font-size: 1.8rem;font-weight: 300;text-align: center;} .card_popup .popup_inner .pop_cont .inner_nav .counter_slider .swiper-pagination-current {color: #005eb8;} .card_popup .popup_inner .pop_cont .inner_nav .counter_slider .cur_num {color: #005eb8;font-weight: 300;} /* ================================ 기술개발 =============================== */ /* 공통 */ .technology .sub_visual { background-image: url(../images/technology/tech_bg.jpg); } .technology .con_tit { padding-bottom: 0; } .competence .title_area { position: relative; } .competence .title_area .sub_tit { font-size: 3rem; line-height: 1.53; padding-top: 5rem; } .competence .title_area::after { content: ''; background: url(../images/social/board_dot.png) 50% 50% no-repeat; width: 12.4rem; height: 0.8rem; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; } .competence .title_area .sub_tit span { color: #005eb8; position: relative; } .competence .title_area .sub_tit span:after { content: ''; width: 100%; height: 1.5rem; background-color: #005eb8; opacity: .08; display: block; position: absolute; bottom: 0; left: 0; } /* 기술역량 */ .technology .competence #tech_top { display: block; padding-bottom: 10rem; margin-top: -10rem; } .technology .competence { /* padding-bottom: 20rem; */ margin-top: 9rem; } .technology .competence .love_motion { width: auto; height: fit-content; position: relative; height: 63.5rem; margin-bottom: 12.3rem; } .technology .competence .love_motion em { color: #005EB8; font-style: normal; } .technology .competence .love_motion .box { max-width: 164rem; height: 63.5rem; background: transparent; position: absolute; margin: auto; top: auto; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; } .technology .competence .love_motion .box > li { background: #fff; width: 32.8rem; height: 32.8rem; border-radius: 100%; position: absolute; opacity: 0; border: 1rem solid #005EB8; } .technology .competence .love_motion .box > li > ul { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; position: absolute; } .technology .competence .love_motion .box > li > ul > li { text-align: center; position: relative; } .technology .competence .love_motion .box > li > ul > li svg { width: 7.4rem; height: 7.4rem; } .technology .competence .love_motion .box > li > ul > li svg:not(:first-child), .technology .competence .love_motion .box > li > ul > li p:not(:first-child) { position: absolute; left: 0; right: 0; margin: auto; top: 0; opacity: 0; } .technology .competence .love_motion .box > li > ul > li p { font-family: 'Montserrat'; } .technology .competence .love_motion .box > li > ul > li:nth-child(2) p { font-size: 1.6rem; padding: 3.5rem 0 0; font-weight: 300; line-height: 1; } .technology .competence .love_motion .box > li > ul > li:nth-child(2) a { display: none; color: #fff; font-weight: 150; font-size: 1.6rem; position: absolute; z-index: 1; left: 0; right: 0; top: 2.5rem; line-height: 1; padding: 1rem; bottom: 0; margin: auto; } .technology .competence .love_motion .box > li > ul > li:nth-child(2) a:after { content: ''; background: url(../images/common/icon_plus_w_15x15.png) 50% 50% no-repeat; background-size: cover; width: 1.5rem; height: 1.5rem; display: inline-block; position: relative; margin-left: 2rem; top: .1rem; transition: all ease .3s; } .technology .competence .love_motion .box > li > ul > li:nth-child(2) a:hover:after { transform: rotate(90deg); } .technology .competence .love_motion .box > li > ul > .slogan p { font-size: 4.8rem; padding: 1.5rem 0 0; line-height: 1; font-weight: 400; } .technology .competence .love_motion .box > .four { z-index: 0; } .technology .competence .love_motion .box > .four ul:first-child .slogan p:last-child { left: 50%; transform: translateX(-50%); line-height: 1; } .technology .competence .love_motion .box > li .motion_menu { opacity: 0; } .technology .competence .love_motion .box > li .motion_menu li p { padding: 0; } .technology .competence .love_motion .box > li .motion_menu li:nth-child(2) { width: 2.2rem; height: .5rem; transform: translateX(-50%) skew(-45deg); background: #000; left: 50%; margin: 4rem 0; } .technology .competence .love_motion .box > li .motion_menu li:nth-child(3) p { font-family: 'Pretendard'; font-size: 2.2rem; color: #0c1014; font-weight: 200; padding: 0 4rem; letter-spacing: -.1rem; line-height: 1.5; } .technology .competence .love_motion .love { font-family: 'Montserrat'; font-weight: 400; letter-spacing: .15rem; font-size: 13.7rem; width: 100%; height: 100%; color: #fff; margin: auto; z-index: 9; position: relative; } .technology .competence .love_motion .love span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; line-height: 1.2; z-index: 10; width: fit-content; height: fit-content; opacity: 0; } .technology .competence .love_motion .love span:last-child { height: 8rem; line-height: .4; overflow: hidden; top: 3rem; opacity: 0; } .technology .competence .love_motion .line { margin: auto; left: 0; right: 0; top: 10rem; bottom: auto; width: fit-content; position: absolute; opacity: 0; } .technology .competence .love_motion .line img { width: 100%; } .technology .competence .love_motion > h2 { color: #555555; letter-spacing: -.15rem; font-size: 2.2rem; line-height: 1; font-weight: 350; text-align: center; margin: auto; left: 0; right: 0; top: 15rem; bottom: auto; width: fit-content; position: absolute; opacity: 0; } .technology .competence .love_motion .box > li.on { transition: all ease .3s; box-shadow: 0px 13px 40px 0px rgba(0, 0, 0, 0.28); } .technology .competence .love_motion .box > li.on ul svg, .technology .competence .love_motion .box > li.on ul svg .st0 { fill:#fff; } .technology .competence .love_motion .box > li.on ul .sub { order: 1; } .technology .competence .love_motion .box > li.on ul .sub a { display: block; } .technology .competence .love_motion .box > li.on ul .slogan { order: 0; margin-top: 1rem;} .technology .competence .love_motion .box > li.on ul .slogan p, .technology .competence .love_motion .box > li.on ul .slogan p em { color: #fff; font-weight: 350; } .technology .competence .love_motion .swiper-btn { display: none; } .technology .competence .weve_motion { margin-bottom: 12rem; } .technology .competence .weve_motion .inner { width: 100%; max-width: 136rem!important; height: 55.2rem!important; background-image: radial-gradient(rgba(15, 178, 138,.4) 20%, transparent 0); background-repeat: repeat; background-size: 8px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .technology .competence .weve_motion .weve { display: flex; } .technology .competence .weve_motion .weve span { font-size: 15rem; font-weight: 400; font-family: 'Montserrat'; letter-spacing: -.9rem; } .technology .competence .weve_motion .transform-box { width: 3.4rem; height: 3.4rem; background: #005eb8; transform: rotate(31.8deg) translate(0rem, 2.5rem); transform-origin: center; position: relative; } .technology .competence .weve_motion .transform-box .left, .technology .competence .weve_motion .transform-box .right { width: 11rem; height: 11rem; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; opacity: 0; } .technology .competence .weve_motion .transform-box .left::after, .technology .competence .weve_motion .transform-box .right::after { content:''; display: block; width: 5.5rem; height: 100%; box-sizing: border-box; position: absolute; } .technology .competence .weve_motion .transform-box .left::after { top: 2.7rem; border-left: 2rem solid #005eb8; border-top: 2rem solid #005eb8; border-bottom: 2rem solid #005eb8; transform: rotate(-90deg) translate(0, 2.7rem); transform-origin: 50%; } .technology .competence .weve_motion .transform-box .right::after { bottom: 2.7rem; border-right: 2rem solid #005eb8; border-top: 2rem solid #005eb8; border-bottom: 2rem solid #005eb8; transform: rotate(-90deg) translate(0, 2.7rem); transform-origin: 50%; } .technology .competence .weve_motion .ha { opacity: 0; width:0; } .technology .competence .weve_motion .we { margin-right: 1.5rem; } .technology .competence .weve_motion .ve { margin-left: 1.7rem; } .technology .competence .weve_motion .txt { font-size: 3.4rem; font-weight: 400; text-align: center; margin-top: 2rem; line-height: 1.52; } .technology .competence .weve_motion .txt span { color: #005eb8; } .technology .competence .section_nav.on { left: 4.32vw; opacity: 1; } .technology .competence .section_nav { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 50%; left: -2rem; opacity: 0; transition: all ease-in-out .2s; transform: translateY(-50%); z-index: 2; height: 55rem; /* position: absolute; top: 10rem; */ width: 2rem; text-align: center; margin: 0 auto; } .technology .competence .section_nav .button.prev { padding-bottom: 5rem; cursor: pointer; } .technology .competence .section_nav .fraction { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .technology .competence .section_nav .current_page { font-family: 'Montserrat'; font-size: 3rem; font-weight: 300; color: #005eb8; } .technology .competence .section_nav .page_name { width: 25rem; height: fit-content; display: block; font-family: 'Pretendard'; font-size: 2rem; white-space: nowrap; font-weight: 400; color: #005eb8; transform: rotate(270deg) translate(-100%,-445%); position: absolute;top: 0;left: -35%; } .technology .competence .section_nav .total_page { font-family: 'Montserrat'; font-size: 1.8rem; font-weight: 300; } .technology .competence .section_nav .total_page::before { content:''; display: block; width: 0.1rem; height: 3.7rem; background: #999; margin: 0 0 2rem 1rem; } .technology .competence .section_nav .button.next { padding-top: 5rem; cursor: pointer; } .technology .competence section h3 { font-family: 'Montserrat','Pretendard'; font-size: 3.8rem; font-weight: 400; letter-spacing: -.095rem; } .technology .competence section .txt > span { font-size: 2.6rem; line-height: 1.4; font-weight: 400; color: #005eb8; padding-top: .6rem; display: block; white-space: nowrap; } .technology .competence section.section5 h3 { letter-spacing: -.152rem; } .technology .competence section h3::before { content:''; display: block; width: 6.5rem; height: 0.6rem; background: #005eb8; transform: skew(-45deg); margin-bottom: 2rem; } .technology .competence section h3 span { font-family: 'Montserrat'; font-size: 4rem; font-weight: 450; letter-spacing: 0; } .technology .competence section h3 em { font-family: 'Montserrat'; font-size: 2.2rem; font-weight: 350; color: #555; letter-spacing: -.055rem; } .technology .competence section { padding: 12rem 0; } .technology .competence section:nth-of-type(2n-1) { background: #f9f9f9; } .technology .competence section:not(.section6) .inner { display: flex; justify-content: space-between; padding: 0 4rem; } .technology .competence section:nth-of-type(2n) .inner { flex-direction: row-reverse; } .technology .competence section:nth-of-type(2n-1) .txt { padding-right: 6rem; } .technology .competence section:nth-of-type(2n) .txt { padding-left: 6rem; } .technology .competence section .inner > div { width: calc(50% - 2rem); } .technology .competence section .txt p { font-size: 2rem; font-weight: 150; color: #555; letter-spacing: -.05rem; line-height: 1.8; padding: 1.5rem 0; } .technology .competence section .txt ul li { font-size: 1.8rem; font-weight: 300; line-height: 2; position: relative; display: flex; } .technology .competence section .txt ul li span { flex-shrink: 0; } .technology .competence section .txt ul li::before { content:''; display: inline-block; flex-shrink: 0; width: 0.5rem; height: 0.5rem; background: #000; transform: rotate(15deg); margin: 1.4rem 1rem 0 0; } .technology .competence section .txt .btn { display: block; width: 28.3rem; height: 6.4rem; line-height: 6.4rem; border-radius: 3.2rem; border: 1px solid #000; padding: 0 4rem; margin-top: 4rem; font-size: 1.6rem; font-weight: 150; letter-spacing: -.04rem; position: relative; transition: all .2s; overflow: hidden; } .technology .competence section .txt .btn:before {content: "";display: block;position: absolute;left: 0;top: 0;bottom: 0;right: 0;transform: scaleX(0);z-index: -1;background-color: #000;transition:all .2s ease-out;transform-origin:0 50%;} .technology .competence section .txt .btn i { display: inline-block; width: 1.9rem; height: 1.9rem; background: url(../images/common/icon_plus_21x22.png) 50% 50%; position: absolute; top: 50%; right: 4rem; transform: translateY(-50%); transition: all .2s; } .technology .competence section .txt .btn:hover { color: #fff;z-index: 3; } .technology .competence section .txt .btn:hover:before { transform:scaleX(1) } .technology .competence section .txt .btn:hover > i { background: url(../images/common/icon_plus_w_21x22.png) 50% 50%; } .technology .competence section .img img { width: 100%; object-fit: contain; } .technology .competence section:nth-of-type(2n).section6 { background: #fff; /* padding-bottom: 0; */ } .technology .competence .section6 { padding-bottom: 20rem; } .technology .competence .section6 h3::before { display: none; } .technology .competence .section6 ul { border-top: .3rem solid #000; border-bottom: .3rem solid #000; margin-top: 3.5rem; } .technology .competence .section6 ul li a { display: flex; align-items: center; height: 8rem; padding: 0 4rem; } .technology .competence .section6 ul li+li { border-top: 1px solid #ccc; } .technology .competence .section6 ul li .num { font-size: 2.2rem; font-weight: 450; letter-spacing: -.022rem; padding-right: 3rem; } .technology .competence .section6 ul li .tit { width: 100%; font-size: 2rem; font-weight: 300; letter-spacing: -.02rem; } .technology .competence .section6 ul li .viewmore { display: flex; align-items: center; width: 11rem; background: url(../images/common/icon_plus_21x22.png) no-repeat 100% .15rem; background-size: 1.5rem; margin-left: auto; position: relative; } .technology .competence .section6 ul li .viewmore span { font-size: 1.6rem; color: #fff; font-weight: 150; opacity: 0; } .technology .competence .section6 ul li:hover .viewmore span { opacity: 1; } .technology .competence .section6 ul li:hover { background: #000; transition: all .2s; } .technology .competence .section6 ul li:hover .num, .technology .competence .section6 ul li:hover .tit { color: #fff; } .technology .competence .section6 ul li:hover .viewmore { background: url(../images/common/icon_plus_w_21x22.png)no-repeat 100% .15rem; background-size: 1.5rem; } /* 지식재산권 */ .technology .ipr { padding-top: 10rem; padding-bottom: 20rem; } .technology .ipr .tb_box { position: relative; } .technology .ipr .tb_box .tb_row { display: table; table-layout: fixed; width: 100%; } .technology .ipr .tb_box .tb_row.row_head { border-top: .2rem solid #000; border-bottom: .1rem solid #e8e8e8; background: #f9f9f9; } .technology .ipr .tb_box .tb_row.row_body {border-bottom: .1rem solid #e8e8e8;} .technology .ipr .tb_box .tb_row>div { display: table-cell; height: 7rem; border-right: .1rem solid #e8e8e8; vertical-align: middle; text-align: center; } .technology .ipr .tb_box .tb_row.row_head>div { font-size: 1.6rem; color: #222; font-weight: 400; } .technology .ipr .tb_box .tb_row.row_body>div { font-size: 1.6rem; color: #222; } .technology .ipr .tb_box .tb_row.row_body .tit { text-align: left; padding-left: 5rem; } .technology .ipr .tb_box .tb_row .download a { display: inline-block; width: 1.5rem; height: 1.7rem; background: url(../images/common/icon_download2.png) no-repeat 50% 50%; background-size: contain; } .technology .ipr .tb_box .tb_row .mob { display: none; } .technology .ipr .tb_box .tb_row .ord { width: 8%; } .technology .ipr .tb_box .tb_row .class { width: 11%; } .technology .ipr .tb_box .tb_row .num { width: 11%; } .technology .ipr .tb_box .tb_row .cert { width: 8%; border-right: 0; } .technology .ipr .tb_box .tb_row .patent_num { width: 20%; } .technology .ipr .tb_box .tb_row .date { width: 12%; } .technology .ipr .tb_box .tb_row .download { width: 8%; border-right: 0; } .technology .ipr .tb_box .tb_row .cell07 { border-right: 0; } .technology .ipr .tb_box .tb_row.row_body .cell07 { text-align: left; padding-left: 5rem; } .technology .ipr.ipr03 .tb_box .tb_row .cell01 { width: 10%; } .technology .ipr.ipr03 .tb_box .tb_row .cell02 { width: 35%; } .technology .ipr.ipr03 .tb_box .tb_row .cell03 { width: 15%; } .technology .ipr.ipr03 .tb_box .tb_row .cell04 { width: 40%; } .technology .ipr.ipr04 .tb_box .tb_row .cell01 { width: 8%; } .technology .ipr.ipr04 .tb_box .tb_row .cell02 { width: 14%; } .technology .ipr.ipr04 .tb_box .tb_row .cell03 { width: 10%; } .technology .ipr.ipr04 .tb_box .tb_row .cell04 { width: 15%; } .technology .ipr.ipr04 .tb_box .tb_row .cell05 { width: 10%; } .technology .ipr.ipr04 .tb_box .tb_row .cell06 { width: 15%; } .technology .ipr.ipr04 .tb_box .tb_row .cell07 { width: 28%; } /* 기술연구소 */ #sub .technology .iot, #sub .technology .iot .inner { max-width: 100%; } .technology .iot { padding: 2rem 0 4rem; } .technology .iot .inner > div.inner_wrap { max-width: 144rem; margin: auto; } .technology .iot .inner .sub_tit { text-align: center; font-size: 3.8rem; line-height: 1; } .technology .iot .inner:first-child { padding-bottom: 12rem; } .technology .iot .inner:first-child .sub_par { text-align: center; font-size: 2rem; font-weight: 150; color: #555555; padding-top: 5.5rem; line-height: 1.8; } .technology .iot .inner:first-child .statistics { display: flex; margin-top: 8.5rem; } .technology .iot .inner:first-child .statistics li { width: calc(100% / 3); display: flex; justify-content: center; padding: 3rem 0; } .technology .iot .inner:first-child .statistics li:not(:last-child) { border-right: .1rem solid #e8e8e8; } .technology .iot .inner:first-child .statistics li img { object-fit: scale-down; } .technology .iot .inner:first-child .statistics li div { padding-left: 4.5rem; } .technology .iot .inner:first-child .statistics li div h4 { font-size: 1.8rem; font-weight: 150; color: #666666; line-height: 1; } .technology .iot .inner:first-child .statistics li div h4 span { font-family: 'Montserrat', sans-serif; font-size: 5rem; font-weight: 450; color: #005eb8; margin-right: 1rem; } .technology .iot .inner:first-child .statistics li div > span { color: #222222; font-size: 2rem; font-weight: 150; padding-top: 1rem; display: block; } .technology .iot .inner:nth-child(2) { background: #f9f9f9; padding: 10rem 0; } .technology .iot .inner:nth-child(2) > div.inner_wrap { max-width: 120rem; display: flex; justify-content: space-between; padding: 10rem 0; } .technology .iot .inner:nth-child(2) .sec2_le h3 { padding-top: 4.5rem; position: relative; font-size: 4rem; font-weight: 450; color: #000000; line-height: 1.35; } .technology .iot .inner:nth-child(2) .sec2_le h3::before { content: ''; position: absolute; top: 0; left: .3rem; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); } .technology .iot .inner:nth-child(2) .sec2_le p { font-size: 1.8rem; font-weight: 150; color: #555555; line-height: 1.8; padding-top: 3.5rem; } .technology .iot .inner:nth-child(2) .sec2_le a { font-size: 1.6rem; color: #000; line-height: 1; padding: 2rem 1rem; width: 25rem; margin-top: 3.5rem; display: flex; justify-content: space-between; align-items: center; position: relative; } .technology .iot .inner:nth-child(2) .sec2_le a::after { content: ''; width: 100%; background: #000000; height: .1rem; display: block; position: absolute; bottom: 0; left: 0; transition: all ease .3s; } .technology .iot .inner:nth-child(2) .sec2_le a:hover::after { width: 0; } .technology .iot .inner:nth-child(2) .sec2_ri { display: none; } .technology .iot .inner:nth-child(2) .sec2_ri img { box-shadow: 0 1.4rem 2.7rem 0 rgba(0, 0, 0, 0.35); } .technology .iot .inner:nth-child(2) .sec2_ri span { display: block; position: relative; padding-left: 1.5rem; color: #fe961c; font-size: 1.6rem; font-weight: 300; margin-top: 3rem; } .technology .iot .inner:nth-child(2) .sec2_ri span::before { content: ''; width: .5rem; height: .5rem; transform: rotate(15deg); background: #fe961c; display: inline-block; position: absolute; top: .6rem; left: 0; margin: auto; } .technology .iot .inner:last-child { padding: 12rem; } .technology .iot .inner:last-child .inner_wrap > ul > li { margin-top: 8rem; background: linear-gradient(to bottom, #f9f9f9 51.7rem, #fff 1rem); padding: 8rem 0 4rem; } .technology .iot .inner:last-child .inner_wrap > ul > li h4 { line-height: 1; font-size: 3rem; font-weight: 350; color: #222222; text-align: center; } .technology .iot .inner:last-child .inner_wrap > ul > li h4 span { margin:0 auto 3rem; display: block; width: 4.1rem; height: 4.1rem; background: #005eb8; font-family: 'Montserrat', sans-serif; font-size: 2.2rem; color: #fff; font-weight: 350; border-radius: 100%; text-align: center; line-height: 4.1rem; } .technology .iot .inner:last-child .inner_wrap .card { display: flex; justify-content: center; margin-top: 8rem; } .technology .iot .inner:last-child .inner_wrap .card li { border-top: .4rem solid #005eb8; background: #fff; width: 38rem; height: 53.3rem; text-align: center; padding-top: 6rem; box-shadow: 0 1.4rem 2.7rem 0 rgba(0, 0, 0, 0.05); } .technology .iot .inner:last-child .inner_wrap .card li:nth-child(2) { margin: 0 3rem; } .technology .iot .inner:last-child .inner_wrap .card li h5 { padding-top: 5rem; color: #222222; font-size: 2rem; font-weight: 400; } .technology .iot .inner:last-child .inner_wrap .card li p { padding-top: 2rem; font-weight: 150; color: #777777; font-size: 1.8rem; line-height: 1.7; } /* ================================ 회사소개 =============================== */ /* 공통 */ .company .sub_visual { background-image: url(../images/company/company_bg.jpg); } .company .contents { max-width: 144rem; width: 100%; margin: auto; } .company .btn_mob { display: none; } /* 경영이념 */ .company .philosophy { max-width: 100%; background: #f9f9f9; position: relative; padding: 12rem 0 20rem; } .company .philosophy .inner > ul > li:first-child { text-align: center; padding-bottom: 13rem; border-bottom: .1rem solid #cccccc; } .company .philosophy .inner > ul > li:first-child h1 { font-size: 7rem; padding-top: 4.3rem; position: relative; line-height: 1.34; font-weight: 400; } .company .philosophy .inner > ul > li:first-child h1::before { content: ''; display: block; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); position: absolute; top: 0; left: 0; right: 0; margin: auto; } .company .philosophy .inner > ul > li:first-child h1 span { color: #005eb8; } .company .philosophy .inner > ul > li:first-child p { font-size: 2.4rem; font-weight: 150; color: #555555; line-height: 1.75; padding-top: 3.5rem; } .company .philosophy .inner > ul > li:last-child { padding-top: 14rem; } .company .philosophy .inner > ul > li:last-child h2 { font-size: 3.8rem; font-weight: 400; color: #000; text-align: center; line-height: 1; } .company .philosophy .inner > ul > li:last-child ul { display: flex; height: 45.2rem; position: relative; margin-top: 8rem; } .company .philosophy .inner > ul > li:last-child ul li { width: calc(50% + .1rem); border: .1rem solid #dcdcdc; background: #fff; position: relative; display: flex; justify-content: center; top: 0; align-items: center; flex-direction: column; transition: all ease .3s; } .company .philosophy .inner > ul > li:last-child ul li::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url(../images/company/mp_bg01.png) 50% 50% no-repeat; opacity: 0; transition: all ease .6s; z-index: -1;} .company .philosophy .inner > ul > li:last-child ul li:last-child::after { background: url(../images/company/mp_bg02.png) 50% 50% no-repeat; } .company .philosophy .inner > ul > li:last-child ul li:last-child { right: .1rem; } .company .philosophy .inner > ul > li:last-child ul li div { position: relative; } .company .philosophy .inner > ul > li:last-child ul li div img:last-of-type { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; } .company .philosophy .inner > ul > li:last-child ul li h4 { font-size: 3rem; font-weight: 400; color: #222222; line-height: 1; margin-top: 3rem; padding-top: 3rem; position: relative; } .company .philosophy .inner > ul > li:last-child ul li h4::before { content: ''; display: block; width: 2.2rem; height: .5rem; background: #000000; transform: skew(-45deg); position: absolute; top: 0; left: 0; right: 0; margin: auto; } .company .philosophy .inner > ul > li:last-child ul li p { font-size: 2.2rem; font-weight: 300; color: #fff; line-height: 1.6; padding-top: 2.5rem; text-align: center; transition: all ease .3s; display: none; } .company .philosophy .inner > ul > li:last-child ul li:hover { top: -3rem; box-shadow: -1.3rem 1.8rem 3.724rem .076rem rgba(0, 0, 0, 0.31); border: none; z-index: 1; } .company .philosophy .inner > ul > li:last-child ul li:hover::after { opacity: 1; } .company .philosophy .inner > ul > li:last-child ul li:hover div img { opacity: 0; visibility: hidden; } .company .philosophy .inner > ul > li:last-child ul li:hover div img:last-of-type { opacity: 1; visibility: visible; } .company .philosophy .inner > ul > li:last-child ul li:hover h4 { color: #fff; } .company .philosophy .inner > ul > li:last-child ul li:hover h4::before { background: #fff; } .company .philosophy .inner > ul > li:last-child ul li:hover p { display: block; } /* 대표이사 인사말 */ .company .greeting { max-width: 100%; background: linear-gradient(to bottom, #f9f9f9, #f9f9f9 89.7rem, #fff 89.8rem, #fff 100%); position: relative; padding: 12rem 0 20rem; } .company .greeting .inner { max-width: 168rem!important; margin: 0!important; } .company .greeting .tit { font-size: 4rem; font-weight: 400; line-height: 1.4; letter-spacing: -.1rem; width: fit-content; position: relative; margin-left: 32rem; margin-bottom: 6rem; } .company .greeting .tit span { font-family: 'Montserrat'; font-size: 4.3rem; font-weight: 400; opacity: .3; position: absolute; } .company .greeting .tit span:first-of-type { top: -1.3rem; left: -2.6rem; } .company .greeting .tit span:last-of-type { bottom: 0rem; right: 12.7rem; } .company .greeting .txt { font-size: 1.8rem; color: #555; line-height: 1.89; letter-spacing: -.045rem; } .company .greeting .txt:first-of-type { margin-left: 32rem; } .company .greeting .txt:last-of-type { margin-top: 50rem; width: fit-content; margin-left: auto; } .company .greeting .picture { position: absolute; top: 19.3rem; left: 0; } .company .greeting .sign { width: fit-content; margin-left: auto; margin-top: 6rem; } .company .greeting .sign p { font-size: 1.6rem; color: #222; letter-spacing: -.04rem; } .company .greeting .sign b { font-size: 2.4rem; display: inline-block; margin: 1.5rem 1.5rem 0 0; font-weight: 400; } /* 연혁 */ .company .history { margin-top: 14rem; overflow: hidden; position: relative; } .company .HMhistory { display: flex; justify-content: flex-end; padding-bottom: 18rem; position: absolute; width: 100%; opacity: 0; visibility: hidden; top: 0; } .company .HMhistory.active { position: relative; opacity: 1; visibility: visible; transition: .3s; } .company .HMhistory .year { display: flex; font-family: 'Montserrat', sans-serif; font-weight: 400; height: fit-content; line-height: .75; position: absolute; top: 0; left: 0; } .company .HMhistory .year .century { color: #222222; font-size: 16rem; height: fit-content; } .company .HMhistory .year ul { transition: all ease .3s; } .company .HMhistory .year ul li { color: #efefef; font-size: 10rem; } .company .HMhistory .year ul li:not(:last-child) { padding-bottom: 6rem; } .company .HMhistory .year ul li.active { font-size: 16rem; color: #005eb8; width: fit-content; transition: all ease .3s; } .company .HMhistory .line { width: .1rem; background: #cccccc; margin: 0 11rem 0 16rem; position: relative; } .company .HMhistory .line span { position: absolute; width: 2.3rem; height: 2.3rem; border: .5rem solid #005eb8; background: #fff; border-radius: 100%; left: 50%; transform: translateX(calc(-50% + .1rem)); } .company .HMhistory .list { width: 76rem; } .company .HMhistory .list > li:not(:last-child) { background-image: linear-gradient(to right, #e8e8e8 50%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 5px 1px; background-repeat: repeat-x; padding-bottom: 6.4rem; } .company .HMhistory .list > li:not(:first-child) { padding-top: 6.4rem; } .company .HMhistory .list > li dl { display: flex; font-size: 2rem; line-height: 2; } .company .HMhistory .list > li dl:not(:first-of-type) { margin-top: 5rem; } .company .HMhistory .list > li dl dt { font-weight: 400; width: 7rem; flex-shrink: 0; } .company .HMhistory .list > li dl dt span { font-family: 'Montserrat', sans-serif; } .company .HMhistory .list > li dl dd p { color: #777777; } .company .HMhistory .list > li dl dd p:not(:first-child), .company .HMhistory .list > li dl dd img { margin-top: 2rem; } .company .HMhistory .list > li.active dl dt { color: #005eb8; } .company .greybox { width: 100%; background: #f9f9f9 url(../images/company/greybox_bg.png) 100% 100% no-repeat; padding: 13rem 0; } .company .greybox .pop_close { display: none; } .company .greybox .wrap { max-width: 120rem; width: 100%; height: fit-content; display: flex; margin: auto; } .company .greybox .wrap > * { width: 50%; } .company .greybox .wrap .section01 { padding-top: 6rem; } .company .greybox .wrap .section01 h2 { font-size: 5rem; font-weight: 450; line-height: 1; padding-top: 3.5rem; position: relative; } .company .greybox .wrap .section01 h2::before { content: ''; position: absolute; top: 0; left: .3rem; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); } .company .greybox .wrap .section01 h2 span { color: #005eb8; } .company .greybox .wrap .section01 p { padding-top: 4rem; font-size: 1.8rem; font-weight: 150; line-height: 1.7; } .company .greybox .wrap .section01 div { padding-top: 12rem; display: flex; } .company .greybox .wrap .section01 div a { padding: 2rem 1rem; width: 23.2rem; position: relative; display: flex; justify-content: space-between; font-size: 1.6rem; margin-right: 3rem; overflow: hidden; } .company .greybox .wrap .section01 div a::after { content: ''; width: 100%; height: .1rem; background: #000; position: absolute; bottom: 0; left: 0; transition: all ease .3s; } .company .greybox .wrap .section01 div a:hover { font-weight: 450; } .company .greybox .wrap .section01 div a:hover::after { left: -100%; } .company .greybox .wrap .section02 { padding: 0 0 7rem 8rem; } .company .greybox .wrap .section02 img { box-shadow: 0 1.4rem 2.7rem 0 rgba(0, 0, 0, .35); } /* 투자정보 - 이사회 */ #sub .company .bod, #sub .company .bod .inner { max-width: 100%; } .company .bod .inner > div.inner_wrap { max-width: 144rem; margin: auto; } .company .bod .inner > div.inner_wrap > h3 { font-size: 3.8rem; color: #0b0f14; text-align: center; font-weight: 400; padding-bottom: 4rem; line-height: 1; } .company .bod .inner > div.inner_wrap > p { font-size: 2rem; font-weight: 150; color: #555555; text-align: center; line-height: 1; padding-bottom: 4.6rem; } .company .bod .inner:first-child > div.inner_wrap > ul { display: flex; flex-wrap: wrap; padding-bottom: 12rem; } .company .bod .inner:first-child > div.inner_wrap > ul > li { width: calc((100% - 8rem) / 3); height: 29.2rem; border: .1rem solid #eeeeee; box-shadow: 0 1.2rem 2.7rem 0 rgba(0, 0, 0, .08); margin-top: 4rem; padding: 4rem; transition: all ease .2s; } .company .bod .inner:first-child > div.inner_wrap > ul > li:nth-child(3n + 2) { margin: 4rem 4rem 0; } .company .bod .inner:first-child > div.inner_wrap > ul > li:hover { background: #005eb8; } .company .bod .inner:first-child > div.inner_wrap > ul > li > h4 { position: relative; font-size: 2.6rem; color: #005eb8; line-height: 1; padding-bottom: 3rem; background-image: linear-gradient(to right, #005eb8 .3rem, rgba(255,255,255,0) 0%); background-position: bottom left; background-size: 8px 1px; background-repeat: repeat-x; } .company .bod .inner:first-child > div.inner_wrap > ul > li > h4 span { display: block; font-size: 1.6rem; font-weight: 150; color: #666666; padding-bottom: 1rem; } .company .bod .inner:first-child > div.inner_wrap > ul > li .info { padding-top: 3rem; height: calc(100% - 8.2rem); display: flex; flex-direction: column; justify-content: space-between; } .company .bod .inner:first-child > div.inner_wrap > ul > li .info li { padding-left: 2rem; position: relative; font-size: 1.6rem; font-weight: 350; color: #222222; display: flex; justify-content: space-between; } .company .bod .inner:first-child > div.inner_wrap > ul > li .info li::before { content: ''; width: .5rem; height: .5rem; transform: rotate(15deg); background: #d9dfe9; display: inline-block; position: absolute; top: .5rem; left: 0; margin: auto; } .company .bod .inner:first-child > div.inner_wrap > ul > li .info li span { font-weight: 150; color: #666666; text-align: right; } .company .bod .inner:first-child > div.inner_wrap > ul > li .info li.hidden { display: none; } .company .bod .inner:first-child > div.inner_wrap > ul > li .info .hidden span { line-height: 1.9; margin-top: -.5rem; } .company .bod .inner:first-child > div.inner_wrap > ul > li > h4::before, .company .bod .inner:first-child > div.inner_wrap > ul > li > h4::after { content: ''; display: inline-block; width: 1.6rem; height: .1rem; background: #005eb8; position: absolute; right: 0; top: .7rem; margin: auto; transition: all ease .2s; } .company .bod .inner:first-child > div.inner_wrap > ul > li > h4::before { width: .1rem; height: 1.6rem; right: .7rem; top: 0; } .company .bod .inner:first-child > div.inner_wrap > ul > li:hover > h4 { background-image: linear-gradient(to right, #fff .3rem, rgba(255,255,255,0) 0%); color: #fff; } .company .bod .inner:first-child > div.inner_wrap > ul > li:hover > h4 span, .company .bod .inner:first-child > div.inner_wrap > ul > li:hover .info > li, .company .bod .inner:first-child > div.inner_wrap > ul > li:hover .info > li span { color: #fff; } .company .bod .inner:first-child > div.inner_wrap > ul > li:hover > h4::before { transform: rotate(90deg); opacity: 0; } .company .bod .inner:first-child > div.inner_wrap > ul > li:hover > h4::after, .company .bod .inner:first-child > div.inner_wrap > ul > li:hover > h4::before { background-color: #fff; } .company .bod .inner:first-child > div.inner_wrap > ul > li:hover .info .hidden { display: flex; } .company .bod .inner:first-child > div.inner_wrap ul > li:hover .info li:not(.hidden) { display: none; } .company .bod .inner:last-child { background: #f9f9f9; padding: 12rem 0 20rem; } .company .bod .inner:last-child > div.inner_wrap > h3 { padding-bottom: 8rem; } .company .bod .inner:last-child .inner_wrap .tab_le { width: 34rem; } .company .bod .inner:last-child .inner_wrap .tab_le li { font-family: 'Montserrat', sans-serif; font-size: 5.2rem; font-weight: 400; color: #cccccc; line-height: .8; display: flex; align-items: center; cursor: pointer; transition: all ease .3s; } .company .bod .inner:last-child .inner_wrap .tab_le li.on { font-size: 8.2rem; font-weight: 450; color: #005eb8; } .company .bod .inner:last-child .inner_wrap .tab_le li.on::before { content: ''; width: 1.4rem; height: 1.4rem; display: inline-block; margin-right: 3rem; background: #005eb8; border-radius: 100%; } .company .bod .inner:last-child .inner_wrap .tab_le li:not(:first-child) { margin-top: 5rem; } .company .bod .inner:last-child .inner_wrap .acordion_wrap { display: flex; flex-wrap: wrap; position: relative; } .company .bod .inner:last-child .inner_wrap .accordion { width: calc(100% - 34rem); border-top: .3rem solid #000000; position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; } .company .bod .inner:last-child .inner_wrap .accordion.on { position: relative; opacity: 1; visibility: visible; transition: opacity ease 1s; } .company .bod .inner:last-child .inner_wrap .accordion .band{ cursor: pointer; background: #fff; transition: all ease .3s; } .company .bod .inner:last-child .inner_wrap .accordion .band:not(:first-child) { margin-top: 3rem; } .company .bod .inner:last-child .inner_wrap .accordion .band h4 { display: flex; justify-content: space-between; font-size: 1.6rem; font-weight: 200; color: #222222; padding: 3.5rem 4rem; position: relative; } .company .bod .inner:last-child .inner_wrap .accordion .band h4 span { font-size: 1.6rem; color: #999999; position: relative; display: flex; align-items: center; padding-right: 1.5rem; } .company .bod .inner:last-child .inner_wrap .accordion .band h4 span::after { content: ''; height: 100%; width: .1rem; background: #cdcdcd; display: inline-block; margin: 0 4rem; } .company .bod .inner:last-child .inner_wrap .accordion .band h4::before, .company .bod .inner:last-child .inner_wrap .accordion .band h4::after { content: ''; display: inline-block; width: 1.5rem; height: .1rem; background: #000000; position: absolute; right: 4rem; top: 0; bottom: 0; margin: auto; transition: all ease .2s; } .company .bod .inner:last-child .inner_wrap .accordion .band h4::before { width: .1rem; height: 1.5rem; right: 4.7rem; top: 0; } .company .bod .inner:last-child .inner_wrap .accordion .bind { display: none; overflow: hidden; font-size: 1.6rem; background-color: #fff; padding: 1rem 4rem 3rem; } .company .bod .inner:last-child .inner_wrap .accordion .bind .bind_tit { color: #222222; display: flex; align-items: center; padding: 3rem 0 2rem; border-bottom: .1rem solid #e8e8e8; } .company .bod .inner:last-child .inner_wrap .accordion .bind .bind_tit::before { display: inline-block; content: ''; width: .5rem; height: .5rem; border-radius: 100%; background: #005eb8; margin-right: 1rem; } .company .bod .inner:last-child .inner_wrap .accordion .bind ol { counter-reset: var-count; } .company .bod .inner:last-child .inner_wrap .accordion .bind ol li { font-weight: 150; line-height: 1.9; display: flex; } .company .bod .inner:last-child .inner_wrap .accordion .bind ol li::before { counter-increment: var-count; content: counter(var-count) "."; width: 1.6rem; } .company .bod .inner:last-child .inner_wrap .accordion .bind ol li:first-child { padding-top: 1.5rem; } .company .bod .inner:last-child .inner_wrap .accordion .bind ol span { font-weight: 400; color: #005eb8; margin-left: auto; padding-left: 1rem; } .company .bod .inner:last-child .inner_wrap .accordion .band.on { background: #005eb8; } .company .bod .inner:last-child .inner_wrap .accordion .band.on h4, .company .bod .inner:last-child .inner_wrap .accordion .band.on h4 span { color: #fff; } .company .bod .inner:last-child .inner_wrap .accordion .band.on h4 span::after { background: rgba(255, 255, 255, .6) } .company .bod .inner:last-child .inner_wrap .accordion .band.on h4::before { transform: rotate(90deg); opacity: 0; } .company .bod .inner:last-child .inner_wrap .accordion .band.on h4::after, .company .bod .inner:last-child .inner_wrap .accordion .band.on h4::before { background: #fff; } /* 투자정보 - 재무정보 - Custom Chart */ .company .financial { margin-top: 4rem; } .company #HMchart { width: 100%; height: fit-content; display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 15rem; } .company #HMchart > li { width: calc(50% - 2.5rem); height: 50.5rem; margin-bottom: 5rem; border: .1rem solid #e8e8e8; padding: 4.5rem 0; position: relative; } .company #HMchart > li h2 { font-weight: 400; color: #222222; font-size: 3rem; line-height: 1; text-align: center; } .company #HMchart > li .graph { position: relative; width: fit-content; margin: auto; height: 100%; overflow: hidden; } .company #HMchart > li .graph > span { width: 100%; display: block; text-align: right; color: #999999; font-size: 1.4rem; } .company #HMchart > li .graph .graph_bg { font-family: 'Montserrat'; display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding-bottom: 8.5rem; position: relative; } .company #HMchart > li .graph .graph_bg li { line-height: 1; font-size: 1.6rem; color: #666666; display: flex; flex-direction: row-reverse; align-items: center; } .company #HMchart > li .graph .graph_bg li span { display: block; text-align: right; padding-right: 1rem; } .company #HMchart > li .graph .graph_bg li:before { content: ''; width: 52.8rem; height: .1rem; display: inline-block; background: #e8e8e8; } .company #HMchart > li .graph .graph_bar { position: absolute; width: 52.8rem; height: calc(100% - 7.5rem); right: 0; display: flex; justify-content: center; align-items: flex-end; } .company #HMchart > li .graph .graph_bar li { width: 7rem; height: 0%; border-radius: 1.5rem 1.5rem 0 0; margin:0 1.65rem; position: relative; } .company #HMchart > li .graph .graph_bar li > span { font-family: 'Montserrat'; font-size: 1.4rem; width: 8.5rem; line-height: 3.3rem; height: 3.6rem; color: #999999; border-radius: 1.75rem; background: #fff; position: absolute; text-align: center; transform: translateX(50%); right: 50%; top: -5.1rem; box-shadow: 0 .6rem 1.8rem 0 rgba(4, 0, 0, 0.17); } .company #HMchart > li .graph .graph_bar li > p { display: none; font-size: 1.6rem; color: #222222; text-align: center; position: absolute; transform: translateX(50%); right: 50%; bottom: -5.4rem; } .company #HMchart > li .graph .graph_bar li > p span { font-size: 1.3rem; color: #666666; } .company #HMchart > li .graph .graph_bar .minus { transform:scale(-1, -1) translateY(-100%); } .company #HMchart > li .graph .graph_bar .minus > p, .company #HMchart > li .graph .graph_bar .minus > span { transform: translate(50%, 0) scale(-1, -1); } /* 투자정보 - 전자공고 */ .company .tab_box { padding: 0 0 6rem 0; } .company .announce { padding-bottom: 10rem; font-family: 'NS'; } .company .announce .tb_top { position: relative; } .company .announce .tb_top .total { padding: 2rem 0 0 3rem; font-size: 1.6rem; font-weight: 150; text-align: center; } .company .announce .tb_top .total b { font-weight: 350; color: #005eb8; } .company .announce .tb_top .search { text-align: center; } .company .announce .tb_top .search .select_row { width: 18rem; height: 6rem; margin-right: 3rem; border: 0; border-bottom: 2px solid #222; } .company .announce .tb_top .search .select_row::after { right: 2rem; background: url(../images/common/select_arrow_blk.png) no-repeat 50% 50%; } .company .announce .tb_top .search .select_row label { font-size: 2rem; color: #777; font-weight: 300; text-align: left; } .company .announce .tb_top .search .input_search { width: 45rem; height: 6rem; border-bottom: 2px solid #222; } .company .announce .tb_top .input_search input { width: 39rem; height: 6rem; font-size: 2.4rem; font-weight: 400; color: #222; } .company .announce .tb_top .input_search a { width: 6rem; height: 6rem; background: url(../images/common/icon_search_blk.png) no-repeat 50% 50%; background-size: 2.4rem;} .company .announce .tb_box {position: relative;margin-top: 4.5rem;} .company .announce .tb_box .tb_row {display: table;table-layout: fixed;width: 100%;} .company .announce .tb_box .tb_row.row_head {border-top: .2rem solid #000;border-bottom: .1rem solid #e8e8e8;} .company .announce .tb_box .tb_row.row_body {border-bottom: .1rem solid #e8e8e8;} .company .announce .tb_box .tb_row>div {display: table-cell;height: 7rem;line-height: 7rem;vertical-align: middle;text-align: center;} .company .announce .tb_box .tb_row.row_head>div {font-size: 1.8rem;color: #222;font-weight: 400;} .company .announce .tb_box .tb_row.row_body>div {font-size: 1.6rem;font-weight: 200;color: #222;} .company .announce .tb_box .tb_row .tit {width:68%;} .company .announce .tb_box .tb_row .date {width: 13%;} .company .announce .tb_box .tb_row .period {width: 19%;} .company .announce .tb_box .tb_row.row_body .date, .company .announce .tb_box .tb_row.row_body .period {font-family: 'Montserrat';} .company .announce .tb_box .tb_row.row_body .tit a {display: block;width: 100%;padding-left: 4rem;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .company .announce .tb_box .tb_row .date b, .company .announce .tb_box .tb_row .period b {display: none;padding-right: .5rem;font-weight: 300;} .company .announce .tb_box .tb_row.none {display: none;} .company .announce .tb_box .tb_row.null {font-size: 1.6rem;color: #222;text-align: center;padding: 24rem 0;} .company .announce.detail_pg { padding-top: 3rem; } .company .announce.detail_pg .tb_view { padding: 4rem 0 10rem; } .company .announce.detail_pg .tb_view .view_box .view_info { padding-bottom: 0; } /* 오시는 길 */ #sub .company .location .inner { max-width: 120rem; } .company .location { max-width: 100%; background: linear-gradient(to bottom, #fff 35rem, #f9f9f9 0); padding-bottom: 20rem; } .company .location .map_loader > div, .company .location .map_loader > iframe { width: 100%; } .company .location .map_loader > div .wrap_map, .company .location .map_loader > iframe { height: 55rem; } .company .location .map_loader .wrap_btn_zoom, .company .location .map_loader .wrap_controllers, .company .location .map_loader .wrap_map .map > div:nth-child(2) { display: none; } .company .location ul { display: flex; margin-top: 10rem; } .company .location ul li:first-child { width: calc(50% - 7.3rem); border-right: .1rem solid #e8e8e8; } .company .location ul li:first-child h2 { padding-top: 3.5rem; font-size: 5rem; font-weight: 150; color: #222222; line-height: 1.4; position: relative; } .company .location ul li:first-child h2 span { font-weight: 350; color: #005eb8; } .company .location ul li:first-child h2 span::before { content: ''; display: block; position: absolute; top: 0; left: .6rem; transform: skew(-45deg); background: #005eb8; width: 5.5rem; height: .6rem; } .company .location ul li:first-child a { display: block; margin-top: 7.5rem; width: 23rem; height: 5.5rem; text-align: center; line-height: 5.5rem; border: .1rem solid #000000; border-radius: 2.8rem; font-size: 1.6rem; color: #222222; font-weight: 150; transition: all ease-out .2s; } .company .location ul li:first-child a:hover { background: #000000; color: #fff; } .company .location ul li:first-child a::after { content: ''; background: url(../images/common/arrow_9x15.png)50% 50% no-repeat; vertical-align: middle; transform: translateY(-.1rem); display: inline-block; margin-left: 5.2rem; width: .9rem; height: 1.5rem; } .company .location ul li:first-child a:hover::after { background: url(../images/common/arrow_9x15_w.png)50% 50% no-repeat; } .company .location ul li:last-child { padding-left: 8rem; } .company .location ul li:last-child div { position: relative; padding-left: 3.2rem; } .company .location ul li:last-child div:not(:first-child) { margin-top: 3.5rem; } .company .location ul li:last-child div h3 { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.8rem; color: #222222; line-height: 1; display: flex; align-items: center; } .company .location ul li:last-child div h3 img { position: absolute; left: 0; } .company .location ul li:last-child div p { font-size: 1.6rem; font-weight: 150; color: #555555; line-height: 1.875; padding-top: 1rem; } .company .location ul li:last-child div p i { font-size: 1.3rem; color: #cccccc; position: relative; bottom: .1rem; padding: 0 1rem; } .company .location ul li:last-child div em { font-weight: 400; font-size: 1.8rem; color: #222222; display: flex; align-items: center; padding-top: 1.5rem; } .company .location ul li:last-child div em span { display: inline-block; text-align: center; line-height: 2.6rem; border-radius: 100%; width: 2.5rem; height: 2.5rem; margin-right: 1.6rem; background: #697215; color: #fff; font-size: 1.6rem; } /* ================================ 사회책임경영 =============================== */ /* 공통 */ #pc .sr .social_mob_img { display: none; } #pc .sr .social_pc_img { display: block; } .sr .sub_visual { background-image: url(../images/social/sr_bg.jpg); } .sr .contents { max-width: 144rem; width: 100%; margin: auto; } .sr .btn_mob { display: none; } .sr section > h3 { text-align: center; font-size: 3.8rem; font-weight: 450; padding-bottom: 6rem; } .sr .board { max-width: 120rem; width: 100%; margin: 0 auto 12rem; box-shadow: .2rem .3rem 5rem 0 rgba(41, 41, 41, 0.2); border-top: .8rem solid #005eb8; padding: 9.8rem 0 8rem; background: #fff; } .sr .board .paragraph { text-align: center; padding-bottom: 6rem; margin-bottom: 6rem; position: relative; } .sr .board .paragraph::after { content: ''; background: url(../images/social/board_dot.png) 50% 50% no-repeat; width: 12.4rem; height: .8rem; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; } .sr .board .paragraph h3 { font-size: 4.4rem; font-weight: 450; color: #005eb8; line-height: 1; } .sr .board .paragraph p { font-size: 2rem; color: #555555; line-height: 1.8; padding-top: 3rem; } .sr .board .sign { text-align: center; font-size: 2.2rem; font-weight: 400; line-height: 1; } .sr .board .sign p:nth-child(2) { color: #555555; display: flex; align-items: center; justify-content: center; } .sr .board .sign p:last-child { font-size: 3rem; color: #222222; font-weight: 450; } .sr .board_inner { margin: 0 6rem 6rem; } .sr .board_inner li { padding: 6rem 0rem 6rem 2.2rem; margin: 0 6rem; display: flex; font-size: 1.8rem; color: #000000; align-items: center; line-height: 1.9; } .sr .board_inner li:not(:last-child) { background-image: linear-gradient(to right, #e8e8e8 100%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 6px 1px; background-repeat: repeat-x; } .sr .board_inner li p { width: 53%; margin-left: auto; } .sr .board_inner li p > span { color: #005eb8; } .sr .board_inner li > h4 { font-size: 2.4rem; font-weight: 450; } .sr .board_inner li > span { font-size: 1.6rem; font-family: 'Montserrat', sans-serif; margin-right: 2.2rem; font-weight: 450; } .sr .certList ul { margin: auto; max-width: 144rem; height: auto; width: 100%; } .sr .certList ul li { display: flex; background: #fff; } .sr .certList ul li:not(:last-child) { margin-bottom: 4rem; } .sr .certList ul li > * { width: 50%; } .sr .certList ul li div { text-align: center; padding: 6rem 0; display: flex; justify-content: center; align-items: baseline; background-image: linear-gradient(to bottom, #e8e8e8 .5rem, rgba(255,255,255,0) .1rem); background-position: right; background-size: 1px 6px; background-repeat: repeat-y; } .sr .certList ul li dl { padding: 12rem; } .sr .certList ul li dl dt { font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 400; color: #000000; position: relative; padding-top: 3.9rem; line-height: 1; margin-bottom: 1.5rem; } .sr .certList ul li dl dt::before { content: ''; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); position: absolute; top: 0; left: .5rem; } .sr .certList ul li dl dt p { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 150; color: #555555; line-height: 1.9; padding-top: 2rem; } .sr .certList ul li dl dd:not(:last-child) { font-size: 1.8rem; font-weight: 150; line-height: 2; } .sr .certList ul li dl dd:not(:last-child)::before { content: ''; background: url(../images/social/single_dot.png) 50% 50% no-repeat; width: .6rem; height: .6rem; display: inline-block; margin: -.2rem 1rem 0 0; vertical-align: middle; } .sr .certList ul li dl dd:last-child { margin-top: 7rem; } .sr .certList ul li dl dd:last-child a { display: block; width: 21rem; height: 6rem; line-height: 6rem; font-size: 1.6rem; color: #000; text-indent: 1rem; letter-spacing: 0; text-align: left; position: relative; } .sr .certList ul li dl dd:last-child a i { display: inline-block; width: 1.9rem; height: 2rem; background: url(../images/common/icon_download.png) no-repeat; position: absolute; right: 2rem; top:50%; transform: translateY(-50%); } .sr .certList ul li dl dd:last-child a::after { content:''; display: block; width: 100%; height: .1rem; background: #000; transition: width .3s; } .sr .certList ul li dl dd:last-child a:hover::after { width: 0; } /* 프롤로그(사회책임경영 원칙) */ .sr .prologue { height: auto; box-shadow: 2px 3px 50px 0px rgba(41, 41, 41, 0.2); margin-bottom: 20rem; } .sr .prologue .banner { background: linear-gradient(60deg, #C1BAB3 40%, #CBC6C2 60%); padding: 13.2rem 13.6rem 0; height: 40rem; position: relative; overflow-x: clip; } .sr .prologue .banner h2 { text-transform: uppercase; color: #ffffff; font-size: 6rem; font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: .8; } .sr .prologue .banner p { font-size: 2rem; color: #fff; line-height: 1.8; padding-top: 3.5rem; } .sr .prologue .banner img { position: absolute; right: 0; bottom: 0; } .sr .prologue .board_inner { margin: 0 12rem 0; padding-bottom: 4rem; } .sr .prologue .board_inner li { padding: 6rem 0; margin: 0; font-size: 2rem; font-weight: 400; line-height: 1.7; } .sr .prologue .board_inner li:not(:last-child) { background-image: linear-gradient(to right, #e8e8e8 83%, rgba(255,255,255,0) 0%); } .sr .prologue .board_inner li p { width: 100%; } .sr .prologue .board_inner li > span { margin-right: 4.5rem; font-weight: 400; } /* 안전보건경영 */ .sr .hsm { max-width: 100%; background: #f9f9f9; padding-top: 12rem; } .sr .hsm .section01 .board_inner { background: rgba(0, 94, 184, .02); } .sr .hsm .section01.board .sign p:nth-child(2) { padding: 1rem 0; } .sr .hsm .section01.board .sign p:nth-child(2) span { font-family: 'Montserrat', sans-serif; margin-right: 1rem; text-transform: uppercase; } .sr .hsm .section01.board .sign p:nth-child(2) img { margin-left: 2.2rem; } .sr .hsm .section02 { background: #fff; padding: 11rem 0 12rem; } .sr .hsm .section02 ul { max-width: 144rem; height: auto; margin: auto; width: 100%; display: flex; border: 1rem solid #f5f5f5; position: relative; } .sr .hsm .section02 ul li { width: fit-content; display: flex; flex-direction: column; align-items: center; height: 48.8rem; position: relative; } .sr .hsm .section02 ul li:first-child { padding: 8rem 12rem 0; } .sr .hsm .section02 ul li:nth-child(2) { padding: 8rem 11rem 0; } .sr .hsm .section02 ul li:last-child { padding-left: 8rem; padding-top: 8rem; } .sr .hsm .section02 ul li:not(:last-child)::after { content: ''; width: .1rem; height: calc(100% - 17rem); display: inline-block; position: absolute; right: 0; top: 8rem; background-image: linear-gradient(to bottom, #e8e8e8 .5rem, rgba(255,255,255,0) .1rem); background-position: right; background-size: 1px 6px; background-repeat: repeat-y; } .sr .hsm .section02 ul li dl { text-align: left; margin-top: 2.4rem; position: relative; } .sr .hsm .section02 ul li:first-child dl { width: 19.5rem; } .sr .hsm .section02 ul li:last-child dl { width: 27.5rem; } .sr .hsm .section02 ul li dl dt { font-size: 2.6rem; font-weight: 450; color: #222222; line-height: 1; padding-bottom: 2rem; } .sr .hsm .section02 ul li dl dd { position: relative; padding-left: 1.5rem; font-size: 1.8rem; color: #555555; line-height: 2; white-space: nowrap; } .sr .hsm .section02 ul li dl dd::before { content: ''; width: .5rem; height: .5rem; transform: rotate(15deg); background: #d9dfe9; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .sr .hsm .section03 { padding: 12rem 0 20rem; } /* 환경경영 */ .sr .em { max-width: 100%; background: #f9f9f9; } .sr .em .section01 { padding-top: 10rem; } .sr .em .section01 .emInfo { height: 46.5rem; max-width: 120rem; margin: auto; position: relative; margin-bottom: 8rem; } .sr .em .section01 .emInfo li { width: 32rem; height: 32rem; border-radius: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; mix-blend-mode: multiply; } .sr .em .section01 .emInfo li:after { content: ''; background: url(../images/social/em_info_circle.png) 50% 50% no-repeat; background-size: cover; width: 35rem; height: 35rem; position: absolute; } .sr .em .section01 .emInfo li span { color: rgba(255, 255, 255, .6); font-family: 'Montserrat', sans-serif; font-size: 1.6rem; font-weight: 350; line-height: 1; padding-bottom: 3rem; } .sr .em .section01 .emInfo li p { font-size: 2.6rem; font-weight: 400; color: #fff; line-height: 1.4; text-align: center; } .sr .em .section01 .emInfo li:nth-child(1) { background: #00a5d7; transform: translate(-41.5rem, -2.6rem); } .sr .em .section01 .emInfo li:nth-child(2) { background: #00ad83; transform: translate(-14rem, 5.8rem); } .sr .em .section01 .emInfo li:nth-child(3) { background: #005eb8; transform: translate(12.8rem, -5.2rem); } .sr .em .section01 .emInfo li:nth-child(4) { background: #56a14a; transform: translate(41.5rem, 2rem); } .sr .em .section01 .board { border-top: .8rem solid #00a5d7; padding: 9.8rem 0 7rem; } .sr .em .section01 .board .paragraph h3 { color: #00a5d7; } .sr .em .section01 .board_inner { background: rgba(0, 165, 215, .03); } .sr .em .section01 .board .sign p:nth-child(2) { padding: 3rem 0; align-items: end; } .sr .em .section01 .board .sign p:nth-child(2) span { margin-right: 1rem; letter-spacing: .25rem; } .sr .em .section01 .board .sign p:nth-child(2) img { margin-left: 1.2rem; } .sr .em .section02 { background: #fff; padding: 12rem 0; } .sr .em .section02 > h3 { padding-bottom: 3rem; } .sr .em .section02 > p { font-size: 2rem; line-height: 1.8; color: #555555; text-align: center; padding-bottom: 5rem; } .sr .em .section02 ul { padding: 8rem 12.5rem; max-width: 136rem; width: 100%; margin: auto; border: .1rem solid #e8e8e8; display: flex; justify-content: center; position: relative; } .sr .em .section02 ul li { width: calc(100%/ 3); text-align: center; display: flex; flex-direction: column; align-items: center; mix-blend-mode: multiply; } .sr .em .section02 ul li h4 { font-size: 2.2rem; font-weight: 400; color: #fff; line-height: 1; padding: 2.5rem 0; width: 40rem; border-radius: 3.5rem; } .sr .em .section02 ul li:nth-child(1) h4 { background: #00ad83; } .sr .em .section02 ul li:nth-child(2) h4 { background: #005eb8; } .sr .em .section02 ul li:nth-child(3) h4 { background: #00a5d7; } .sr .em .section02 ul li p { font-size: 1.8rem; color: #777777; line-height: 1.7; margin-top: 6rem; width: 100%; padding-bottom: 1.3rem; } .sr .em .section02 ul li:not(:last-child) p { background-image: linear-gradient(to bottom, #e8e8e8 .5rem, rgba(255,255,255,0) .1rem); background-position: right; background-size: 1px 6px; background-repeat: repeat-y; } .sr .em .section03 { padding: 12rem 0 20rem; } .sr .em .certList ul li dl { padding: 6rem 12rem; } .sr .em .certList ul li dl dd:last-child { margin-top: 4rem; } /* 품질경영 */ .sr .qm { max-width: 100%; background: #f9f9f9; } .sr .qm .section01 { padding-top: 10rem; } .sr .qm .section01 > p { max-width: 154rem; width: 100%; text-align: center; margin: auto; padding: 3.6rem 4rem 9rem; border-bottom: .1rem solid #999999; position: relative; font-size: 2.6rem; font-weight: 400; line-height: 1.7; } .sr .qm .section01 > p em { color: #005eb8; } .sr .qm .section01 > p span { display: block; color: #555555; font-size: 2.4rem; font-weight: 200; padding-top: 1rem; } .sr .qm .section01 > p::before { content: ''; display: block; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); position: absolute; left: 0; right: 0; top: 0; margin: auto; } .sr .qm .section01 > h3 { padding-top: 12rem; } .sr .qm .section01 .qmInfo { padding: 4.6rem 0 14.7rem; display: flex; justify-content: center; align-items: center; } .sr .qm .section01 .qmInfo li { display: flex; flex-direction: column; justify-content: space-between; padding: 0 7rem; position: relative; } .sr .qm .section01 .qmInfo li:not(.infoCenter)::before { content: ''; width: .1rem; height: calc(100% - 12rem); background-image: linear-gradient(to bottom, #555555 5px, rgba(255,255,255,0) 1px); background-size: 1px 6px; background-repeat: repeat-y; position: absolute; top: 0; bottom: 0; margin: auto; } .sr .qm .section01 .qmInfo li:not(.infoCenter)::after { content: ''; width: 5rem; height: .1rem; background: #555555; position: absolute; top: 0; bottom: 0; margin: auto; } .sr .qm .section01 .qmInfo li p { background: #4b6167; color: #fff; border-radius: 4rem; font-size: 2rem; font-weight: 350; text-align: center; margin: 2rem 0; line-height: 1.4; width: 24rem; height: 8rem; display: flex; justify-content: center; align-items: center; } .sr .qm .section01 .qmInfo li p::before { content: ''; position: absolute; } .sr .qm .section01 .qmInfo li p::after { content: ''; width: 4.7rem; height: .1rem; position: absolute; } .sr .qm .section01 .qmInfo li:first-child::after { right: -5rem; } .sr .qm .section01 .qmInfo li:first-child::before { right: 0; } .sr .qm .section01 .qmInfo li:first-child p::before { right: 4.7rem; width: .3rem; height: .3rem; border: .2rem solid #555555; border-radius: 100%; } .sr .qm .section01 .qmInfo li:first-child p::after { right: 0; background-image: linear-gradient(to right, #555555 5px, rgba(255,255,255,0) 1px); background-size: 6px 1px; background-repeat: repeat-x; } .sr .qm .section01 .qmInfo li:last-child::after { left: -5rem; } .sr .qm .section01 .qmInfo li:last-child p::before { left: 4.7rem; height: 0; border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; border-left: .5rem solid #555; } .sr .qm .section01 .qmInfo li:last-child::before, .sr .qm .section01 .qmInfo li:last-child p::after { left: 0; background: #555555; } .sr .qm .section01 .qmInfo .infoCenter { margin: 0 10rem; padding: 0; width: 46rem; height: 46rem; display: flex; flex-direction: row; flex-wrap: wrap; z-index: 1; letter-spacing: 0; position: relative; } .sr .qm .section01 .qmInfo .infoCenter::before, .sr .qm .section01 .qmInfo .infoCenter::after { content: ''; height: 0; border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; position: absolute; top: 0; bottom: 0; margin: auto; } .sr .qm .section01 .qmInfo .infoCenter::before { border-left: .5rem solid #555; left: -5rem; } .sr .qm .section01 .qmInfo .infoCenter::after { border-right: .5rem solid #555; right: -5rem; } .sr .qm .section01 .qmInfo .infoCenter span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #fff; margin: auto; width: 18rem; height: 18rem; display: flex; font-size: 2.2rem; font-weight: 400; display: flex; align-items: center; justify-content: center; } .sr .qm .section01 .qmInfo .infoCenter span:not(.center)::before { content: ''; width: 100%; height: 100%; position: absolute; transform: rotate(45deg); border-radius: 3rem; z-index: -1; } .sr .qm .section01 .qmInfo .infoCenter span:not(.center)::after { content: ''; position: absolute; width: 7rem; height: 7rem; z-index: -1; } .sr .qm .section01 .qmInfo .infoCenter .center { width: 14.1rem; height: 14.1rem; border-radius: 100%; background: #fff; color: #000; box-shadow: 0 0 1.6rem .4rem rgba(34, 34, 34, 0.2); } .sr .qm .section01 .qmInfo .infoCenter .center:before { content: ''; width: 46rem; height: 46rem; position: absolute; background: #f5f5f5; border-radius: 6rem; z-index: -2; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(1) { right: auto; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(1)::before { background: #00ad83; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(1)::after { background: url(../images/social/qm_info_arrow01.png)50% 50% no-repeat; top: -11rem; left: 3.8rem; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(2) { bottom: auto; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(2)::before { background: #00a5d7; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(2)::after { background: url(../images/social/qm_info_arrow02.png)50% 50% no-repeat; right: -11.5rem; top: 3.5rem; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(3) { left: auto; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(3)::before { background: #005eb8; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(3)::after { background: url(../images/social/qm_info_arrow03.png)50% 50% no-repeat; right: 3rem; bottom: -11.3rem; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(4) { top: auto; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(4)::before { background: #004098; } .sr .qm .section01 .qmInfo .infoCenter span:nth-child(4)::after { background: url(../images/social/qm_info_arrow04.png)50% 50% no-repeat; left: -11rem; bottom: 3.2rem; } .sr .qm .section01 .board { border-top: .8rem solid #00ad83; padding: 10rem 0 8rem; } .sr .qm .section01 .board .paragraph h3 { color: #00ad83; } .sr .qm .section01 .board_inner { background: rgba(0, 173, 131, .03); } .sr .qm .section01 .board_inner li { margin: 0; padding: 6rem; text-align: center; color: #555555; font-size: 2rem; line-height: 1.8; justify-content: center; letter-spacing: -.05rem; } .sr .qm .section01 .board .sign p:nth-child(2) { padding: 3rem 0; align-items: end; letter-spacing: .05rem; } .sr .qm .section01 .board .sign p:nth-child(2) span { margin-right: 1rem; letter-spacing: .15rem; } .sr .qm .section01 .board .sign p:nth-child(2) img { margin-left: 2.2rem; } .sr .qm .section02 { background: #fff; padding: 12rem 0; } .sr .qm .section02 .qmInfo2 { max-width: 136rem; width: 100%; height: auto; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; } .sr .qm .section02 .qmInfo2 li { position: relative; width: calc(100% / 4 - 6rem); height: 22rem; margin-right: 8rem; border: .1rem dashed #bfbfbf; border-radius: 2rem; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; } .sr .qm .section02 .qmInfo2 li:nth-child(3n + 4) { margin-right: 0; } .sr .qm .section02 .qmInfo2 li:nth-child(n + 5) { margin-top: 5rem; } .sr .qm .section02 .qmInfo2 li:last-child { border: .2rem solid #005eb8; } .sr .qm .section02 .qmInfo2 li:not(:first-child)::before { content: ''; background: url(../images/social/qm_info2_arrow.png)50% 50% no-repeat; width: 3rem; height: 2.3rem; margin: auto; position: absolute; top: 0; bottom: 0; left: -5.5rem; } .sr .qm .section02 .qmInfo2 li h4 { padding-top: 4rem; font-size: 2rem; font-weight: 400; color: #0b0f14; line-height: 1.5; text-align: center; } .sr .qm .section02 .qmInfo2 li img { padding-top: 5rem; } .sr .qm .section03 { padding: 12rem 0 20rem; } .sr .qm .section03 ul li dl { padding: 9rem 12rem 0; } .sr .qm .section03 ul li dl dd:last-child { margin-top: 4rem; } /* 상생경영 */ .sr .ww { max-width: 100%; } .sr .ww section { padding: 12rem 0; position: relative; } .sr .ww .section01 { padding: 10rem 0 0; background: #f9f9f9; } .sr .ww .section01 > h2 { max-width: 154rem; width: 100%; text-align: center; margin: auto; padding: 3.6rem 4rem 9rem; position: relative; font-size: 2.6rem; font-weight: 400; line-height: 1.7; } .sr .ww .section01 > h2 em { color: #005eb8; } .sr .ww .section01 > h2 span { display: block; color: #555555; font-size: 2.4rem; font-weight: 200; padding-top: 1rem; } .sr .ww .section01 > h2::before { content: ''; display: block; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); position: absolute; left: 0; right: 0; top: 0; margin: auto; } .sr .ww .section02 { text-align: center; } .sr .ww .section02 > .social_pc_img { width: 144rem; margin: auto; } .sr .ww .section02 > h3 { padding-bottom: 6rem; } .sr .ww .section03 { background: #f9f9f9; } .sr .ww .section03 > h3 { padding-bottom: 3.5rem} .sr .ww .section03 > p { text-align: center; font-size: 2rem; color: #555555; line-height: 1.8; } .sr .ww .section03 .ww_info2 { width: 144rem; margin: 5.5rem auto 0; } .sr .ww .section03 .ww_info2 > .social_pc_img { margin-left: 2rem; } .sr .ww .section04 { max-width: 144rem; width: 100%; margin: auto; padding: 12rem 0 13rem; } .sr .ww .section04 > ul { display: flex; justify-content: space-between; } .sr .ww .section04 > ul > li { width: calc(100% / 3 - 2rem); position: relative; border: .1rem solid #cccccc; } .sr .ww .section04 > ul > li::before { content: ''; width: calc(100% + .2rem); height: .6rem; background: url(../images/social/ww_info3_bar.png)50% 50% no-repeat; position: absolute; top: -.1rem; left: -.1rem; } .sr .ww .section04 > ul > li > div { background: #f9f9f9; padding: 6rem 7rem; display: flex; flex-direction: column; } .sr .ww .section04 > ul > li > div span { font-size: 1.6rem; font-weight: 400; color: #555555; line-height: 1; padding-bottom: 4.3rem; } .sr .ww .section04 > ul > li > div img { width: fit-content; } .sr .ww .section04 > ul > li > div h3 { font-size: 2.8rem; font-weight: 450; color: #222222; padding-top: 3rem; } .sr .ww .section04 > ul > li .block2 { padding: 1.5rem 6rem; } .sr .ww .section04 > ul > li .block2 li { padding: 3rem 0 3rem 1rem; font-size: 1.8rem; color: #555555; display: flex; line-height: 1.7; } .sr .ww .section04 > ul > li .block2 li:not(:first-child) { background-image: linear-gradient(to left, #cccccc 5px, rgba(255,255,255,0) 1px); background-size: 6px 1px; background-repeat: repeat-x; } .sr .ww .section04 > ul > li .block2 li span { width: 12rem; display: inline-block; color: #222222; font-weight: 400; } .sr .ww .section05 { padding: 11rem 0 20rem; background: linear-gradient(to bottom, #f9f9f9 88.3rem, #fff 1rem); } .sr .ww .section05 > ul { display: flex; position: relative; justify-content: space-between; padding-bottom: 7.2rem; } .sr .ww .section05 > ul > li { width: calc(50% - 2rem); } .sr .ww .section05 > ul > .info { position: absolute; bottom: 0; right: 4rem; width: 74rem; height: 38.7rem; background: #005eb8; padding: 5rem 9rem 6rem; } .sr .ww .section05 > ul > .info > ul { position: relative; } .sr .ww .section05 > ul > .info li { color: rgba(255, 255, 255, .8); line-height: 1.5; padding: 2.5rem 0 2.5rem 14rem; font-size: 1.8rem; display: flex; white-space: nowrap; } .sr .ww .section05 > ul > .info li:not(:first-child) { background-image: linear-gradient(to left, rgba(204,204,204, .5) 5px, rgba(255,255,255,0) 1px); background-size: 6px 1px; background-repeat: repeat-x; } .sr .ww .section05 > ul > .info li span { display: block; position: absolute; left: 0; font-size: 2rem; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 350; } .sr .ww .section05 > ul > .info > span { padding-top: .5rem; color: #fc9f35; font-size: 1.5rem; white-space: nowrap; display: block; letter-spacing: -.07rem; } .sr .ww .section05 > ul > .info > span:first-of-type { padding-top: 2.5rem; } .sr .ww .section05 > ul > li p { padding-top: 3.5rem; margin: 6rem 0 0 6rem; position: relative; font-size: 2.8rem; font-weight: 400; line-height: 1.64; } .sr .ww .section05 > ul > li p em { color: #005eb8; } .sr .ww .section05 > ul > li p span { display: block; color: #777777; font-size: 2rem; font-weight: 200; padding-top: 2rem; line-height: 1.7; } .sr .ww .section05 > ul > li p::before { content: ''; display: block; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); position: absolute; left: .4rem; top: 0; margin: auto; } /* 윤리경영 */ .sr .etm { max-width: 100%; } .sr .etm h3 { max-width: 136rem; margin: auto; } .sr .etm img { margin: auto; } .sr .etm section { width: 100%; padding: 12rem 0; position: relative; text-align: center; } .sr .etm .section01, .sr .etm .section03 { background: #f9f9f9; } .sr .etm .section01 > p { max-width: 136rem; margin: auto; font-size: 2rem; color: #555555; line-height: 1.8; background: #fff; padding: 6rem 0; border: .1rem dashed #cccccc; } .sr .etm .section01 img { margin-top: 6rem; } .sr .etm .section02 p span { display: block; font-size: 2.2rem; font-weight: 400; color: #222222; line-height: 1.63; padding-bottom: 1rem; } .sr .etm .section02 p { font-size: 2rem; color: #555555; line-height: 1.8; padding-top: 2.5rem; } .sr .etm .section03 { padding: 12rem 0 20rem; } .sr .etm .section03 h3 { padding-bottom: 2.5rem; } .sr .etm .section03 p { font-size: 2rem; color: #555555; line-height: 1.8; } .sr .etm .section03 img { margin-top: 5.5rem; } /* 사회공헌 */ .sr .sc { max-width: 100%; } .sr .sc .section01 { background: linear-gradient(to bottom, #f9f9f9, #f9f9f9 46rem, #fff 46.1rem, #fff 100%); padding-top: 10rem; } .sr .sc .section01 ul { max-width: 144rem; width: 100%; margin: 0 auto; display: flex; } .sr .sc .section01 ul li { flex: 1; height: 46rem; background: #fff; border: 1px solid #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all .3s; } .sr .sc .section01 ul li:not(:first-child) { margin-left: -1px; } .sr .sc .section01 ul li:nth-child(2n) { margin-top: 6rem; } .sr .sc .section01 ul li .num { display: flex; align-items: flex-end; } .sr .sc .section01 ul li .count { font-family: 'Montserrat'; font-size: 8.6rem; font-weight: 450; color: #005eb8; line-height: 7.4rem; } .sr .sc .section01 ul li .num span { font-size: 2rem; font-weight: 450; color: #0b0f14; } .sr .sc .section01 ul li .tit { font-size: 2.2rem; font-weight: 450; color: #0b0f14; margin: 5rem 0 2rem; } .sr .sc .section01 ul li .date { font-size: 1.8rem; font-weight: 150; color: #555; } .sr .sc .section01 ul li .date::before { content:''; display: inline-block; margin-right: 1rem; width: 1.4rem; height: 1.4rem; background: url(../images/social/contri_icon_clock.png) no-repeat; background-size: contain; } .sr .sc .section01 ul li:hover { background: url(../images/social/contri_onbg.png) no-repeat 50% 50%; } .sr .sc .section01 ul li:hover .count, .sr .sc .section01 ul li:hover .num span, .sr .sc .section01 ul li:hover .tit, .sr .sc .section01 ul li:hover .date { color: #fff; } .sr .sc .section01 ul li:hover .date::before { background: url(../images/social/contri_icon_clock_w.png) no-repeat; background-size: contain; } .sr .sc .top { padding: 15rem 0 0; } .sr .sc .top h3 { font-size: 3.8rem; font-weight: 450; color: #0b0f14; text-align: center; } .sr .sc .top p { font-size: 2rem; color: #555; line-height: 1.8; text-align: center; margin-top: 2.5rem; } .sr .sc .section { max-width: 164rem; margin: 0 auto; } .sr .sc .section .box_wrap { display: flex; margin-top: 5rem; } .sr .sc .section .box_wrap .box { width: 50%; min-height: 99.5rem; padding: 10rem 12rem; display: flex; flex-direction: column; justify-content: space-between; } .sr .sc .section .box_wrap .box .tit { font-size: 2.8rem; font-weight: 400; color: #222; } .sr .sc .section .box_wrap .box p { font-size: 2rem; font-weight: 150; color: #555; line-height: 1.7; letter-spacing: -.1rem; margin-top: 2rem; } .sr .sc .section .box_wrap .box .img { width: 100%; } .sr .sc .section .box_wrap .box .img img { width: 100%; object-fit: contain; } .sr .sc .section02 .box_wrap .box:first-of-type { background: #f9f9f9; padding: 10rem 12rem 10rem 14rem; } .sr .sc .section02 .box_wrap .box:last-of-type { background: #f4f3ec; } .sr .sc .section03 .box_wrap .box:first-of-type { background: #edf3f7; } .sr .sc .section03 .box_wrap .box:last-of-type { background: #f7f8fa; padding: 10rem 12rem 10rem 14rem; } .sr .sc .section04 { background: #f9f9f9; padding-bottom: 20rem; padding-top: 15rem; position: relative; margin-top: 14rem; } .sr .sc .section04 h3 { font-size: 3.8rem; font-weight: 450; color: #0b0f14; text-align: center; } .sr .sc .section04 p { font-size: 2rem; color: #555; line-height: 1.8; text-align: center; margin-top: 2.5rem; } .sr .sc .section04 .box_wrap { width: 80rem; height: 35rem; border-radius: 16.45rem; margin: 3rem auto 0; padding: 4rem 0 6rem; background: #fff; box-shadow: 3px 5px 9.5px 0.5px rgba(0, 0, 0, 0.05); } .sr .sc .section04 .box_wrap .tit { font-size: 2rem; color: #222; text-align: center; font-weight: 400; } .sr .sc .section04 .box_wrap ul { width: 62rem; margin: 3rem auto 0; position: relative; } .sr .sc .section04 .box_wrap ul li { width: 33rem; height: 20rem; border-radius: 10rem; position: absolute; top: 0; box-shadow: 3px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; } .sr .sc .section04 .box_wrap ul li:first-child { background: rgba(0,165,215,.8); left: 0; } .sr .sc .section04 .box_wrap ul li:last-child { background: rgba(0,129,214,.8); right: 0; } .sr .sc .section04 .box_wrap ul li .txt { font-size: 1.8rem; color: #fff; font-weight: 350; margin-top: 2rem; } /* ================================ 인재채용 =============================== */ /* 공통 */ .recruit { overflow: hidden; } .recruit .sub_visual { background-image: url(../images/recruit/recruit_bg.jpg); } .recruit .contents { max-width: 144rem; width: 100%; margin: auto; } .recruit .tab_small { margin-bottom: 6rem; } .recruit .banner { max-width: 144rem; background: #f7f8f9 url(../images/recruit/job_list_banner_img02.png)100% 100% no-repeat; padding: 9.3rem 13.6rem 0; height: 42rem; margin: 12rem auto; position: relative; overflow: visible; } .recruit .banner h2 { text-transform: uppercase; font-size: 6rem; color: #222222; font-weight: 450; line-height: 1.3; padding-top: 3rem; position: relative; } .recruit .banner h2:before { content: ''; display: block; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); position: absolute; top: 0; margin-left: .5rem; } .recruit .banner p { font-size: 2rem; color: #555555; line-height: 1.8; padding-top: 2rem; } .recruit .banner img { position: absolute; right: -7.7rem; top: -2.5rem; } .recruit .pu_br { display: none; } /* 팝업 */ .recruit .popup { cursor: none; width: 100%; padding: 0 3rem; overflow: auto; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); z-index: 1000; display: none; } .recruit .popup .pu_br { display: block; } .recruit .popup .pop_close { position: fixed; top: 0; left: 0; width: 7rem; height: 7rem; transform: scale(0); cursor: none; transition: transform ease .3s; } .recruit .popup .pop_close img { width: 100%; } .recruit .popup .pu_indent { display: none; } .recruit .popup ul { cursor: auto; width: 136rem; height: fit-content; background: #fff; position: relative; margin: 10rem auto; letter-spacing: -.15rem; } .recruit .popup ul li:first-child { display: flex; justify-content: space-between; height: 56rem; overflow: hidden; position: relative; background: #fbfbfb; } .recruit .popup .pop_title { padding: 9rem 0 8.5rem 12rem; display: flex; flex-direction: column; justify-content: space-between; } .recruit .popup .pop_title dt { font-size: 5rem; color: #222222; line-height: 1.32; font-weight: 450; padding: 5.5rem 0; width: fit-content; position: relative; } .recruit .popup .pop_title dt::before, .recruit .popup .pop_title dt::after { content: ''; width: 4.5rem; height: 3.5rem; display: block; position: absolute; } .recruit .popup .pop_title dt::before { background: url(../images/recruit/quotation_start.png) 50% 50% no-repeat; top: 0; } .recruit .popup .pop_title dt::after { background: url(../images/recruit/quotation_end.png) 50% 50% no-repeat; bottom: 0; right: 0; } .recruit .popup .pop_title dd { font-size: 2.2rem; font-weight: 350; color: #005eb8; line-height: 1; } .recruit .popup .pop_title dd i { content: '|'; display: inline-block; width: .1rem; height: 1.7rem; background: #005eb8; margin: 0 1rem; } .recruit .popup .pop_title dd span { display: block; font-weight: 100; color: #000000; font-size: 1.6rem; padding-top: 2rem; } .recruit .popup .img { position: absolute; width: 100%; height: 100%; top: 0; right: 0; } .recruit .popup .img::before { content: ''; display: block; background: #005eb8; width: 42rem; height: 100%; position: absolute; transform: skew(-29deg); right: 17.5rem; } .recruit .popup .img::after { content: ''; display: block; background: #fbfbfb; width: 42rem; height: 100%; position: absolute; transform: skew(-29deg); right: -24.5rem; } .recruit .popup .img span { width: 9rem; display: block; position: absolute; transform: skew(-29deg); } .recruit .popup .img span:first-of-type{ height: 16rem; z-index: 10; right: 47.5rem; top: 3rem; background: linear-gradient(20deg, #005eb8 15%, #84c3ff); opacity: .5; } .recruit .popup .img span:last-of-type{ height: 30rem; z-index: 10; right: 19rem; bottom: 0; background: linear-gradient(0deg, #005eb8 10%, #fff); opacity: .4; } .recruit .popup .img img { position: absolute; right: 0; bottom: 0; transition: all ease .6s; } .recruit .popup .article { padding: 4rem 6rem; } .recruit .popup .article dl { padding: 8rem 6rem; position: relative; } .recruit .popup .article dl:not(:last-child) { border-bottom: .1rem solid #e8e8e8; } .recruit .popup .article dl dt { font-size: 2.6rem; font-weight: 400; color: #222222; } .recruit .popup .article dl dt span { position: absolute; left: 0; font-family: 'Montserrat', sans-serif; font-weight: 450; font-size: 3rem; color: #005eb8; line-height: 1; } .recruit .popup .article dl dd { line-height: 1.8; font-size: 2rem; color: #777777; padding-top: 2rem; } /* 인재상 */ .recruit .type { padding: 10rem 0 20rem; } .recruit .type ul { display: flex; flex-wrap: wrap; } .recruit .type ul li { width: 50%; padding: 7rem; } .recruit .type ul li:nth-child(2) { background-image: linear-gradient(to bottom, #e8e8e8 40%, white 60%); background-position: left top; background-repeat: repeat-y; background-size: 1px 13px; } .recruit .type ul li:nth-child(3), .recruit .type ul li:nth-child(5) { background-image: linear-gradient(to right, #e8e8e8 40%, white 60%); background-position: left top; background-repeat: repeat-x; background-size: 13px 1px; } .recruit .type ul li:nth-child(4), .recruit .type ul li:nth-child(6) { background-image: linear-gradient(to right, #e8e8e8 40%, white 60%), linear-gradient(to bottom, #e8e8e8 40%, white 60%); background-position: left top; background-repeat: repeat-x, repeat-y; background-size: 13px 1px, 1px 13px; } .recruit .type ul li:nth-child(6) .icon img { margin-left: .2rem; } .recruit .type .icon { width: 11.2rem; height: 11.2rem; border-radius: 50%; background: #f9f9f9; margin-bottom: 5rem; display: flex; align-items: center; justify-content: center; } .recruit .type .eng_tit { font-family: 'Montserrat'; font-size: 1.8rem; font-weight: 400; color: #005eb8; letter-spacing: -.045rem; } .recruit .type .tit { font-size: 2.4rem; font-weight: 450; color: #222; letter-spacing: -.06rem; padding: 1rem 0 2rem; } .recruit .type p { font-size: 1.6rem; font-weight: 150; color: #666; line-height: 2; letter-spacing: -.08rem; } /* 직무소개 - 목록 */ .recruit .contents.job { padding-bottom: 20rem; max-width: 148rem; } .recruit .job ul li { width: calc(100% / 3 - 4rem); height: 63.5rem; border: .1rem solid #e8e8e8; display: block; padding: 5rem 0; margin: 4rem 2rem 0; transition:background ease .3s; } .recruit .job ul li > h3 { padding: 0 4rem; font-size: 2.2rem; font-weight: 350; color: #005eb8; line-height: 1; } .recruit .job ul li > h3 i { content: '|'; display: inline-block; width: .1rem; height: 1.7rem; background: #005eb8; margin: 0 1rem; } .recruit .job ul li > h3 span { display: block; font-weight: 100; color: #000000; font-size: 1.6rem; padding-top: 1.4rem; } .recruit .job ul li > p { font-size: 2rem; font-weight: 350; text-align: center; color: #555555; line-height: 1.6; padding-top: 4rem; } .recruit .job ul li > div { width: 33rem; height: 38.3rem; margin: auto; padding-top: 5.4rem; mask-image: url(../images/recruit/mask_frame.png); -webkit-mask-image: url(../images/recruit/mask_frame.png); position: relative; overflow: hidden; } .recruit .job ul li > div.mask04 { mask-image: url(../images/recruit/mask_frame04.png); -webkit-mask-image: url(../images/recruit/mask_frame04.png); } /* 손가락까지 마스킹 */ .recruit .job ul li > div.mask08 { mask-image: url(../images/recruit/mask_frame08.png); -webkit-mask-image: url(../images/recruit/mask_frame08.png); } /* 팔 마스킹 풀기 */ .recruit .job ul li > div:after { content: ''; width: 33rem; height: 33rem; position: absolute; bottom: 0; background: #f4ebe2; display: block; border-radius: 100%; z-index: 0; } .recruit .job ul li > div img { position: absolute; bottom: -14.8rem; margin: auto; transition: all ease .6s; z-index: 1; } .recruit .job ul li > div img.posr { right: 0; } .recruit .job ul li > a { display: none; margin: 5rem auto 0; width: 17rem; height: 5rem; color: #ffffff; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; align-items: center; justify-content: center; border: .1rem solid rgba(255, 255, 255, .6); border-radius: 2.5rem; } .recruit .job ul li > a img { margin-left: 1.7rem; transition: all ease .3s; } .recruit .job ul li > a:hover img { transform: rotate(90deg); } .recruit .job ul li > article { display: none; } .recruit .job ul li:hover { background: #005eb8; box-shadow: 10px 12px 21px 0px rgba(4, 0, 0, 0.16); } .recruit .job ul li:hover > div img { bottom: -10rem; } .recruit .job ul li:hover > h3, .recruit .job ul li:hover > h3 span { color: #ffffff;} .recruit .job ul li:hover > p { display: none; } .recruit .job ul li:hover > h3 i { background-color: #ffffff; } .recruit .job ul li:hover > a { display: flex; } /* 인사제도 */ .recruit .personnel { max-width: 100%; background: #f9f9f9; padding: 14rem 0 20rem; } .recruit .personnel .inner { display: flex; align-items: center; } .recruit .personnel .step01 .box { width: 26.6rem; height: 20.8rem; background: #4b675b; border-radius: 1rem; text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 3rem; margin-left: 20rem; } .recruit .personnel .step01 .box:last-of-type { background: #4c6067; position: relative; margin-top: 7rem; } .recruit .personnel .step01 .box:last-of-type::before { content:''; display: block; width: 24.3rem; height: 7rem; background: url(../images/recruit/personnel_line01.png) no-repeat 50% 50%; background-size: contain; position: absolute; top: -7rem; left: 50%; } .recruit .personnel .step01 .box .tit { font-size: 3rem; font-weight: 350; } .recruit .personnel .step01 .box p { font-size: 1.8rem; font-weight: 150; letter-spacing: -.045rem; line-height: 1.55; margin-top: 2rem; opacity: .8; } .recruit .personnel .step02 { width: 31.8rem; height: 34.6rem; background: url(../images/recruit/personnel_ellipse.png) no-repeat 50% 50%; background-size: contain; position: relative; margin-left: 11rem; } .recruit .personnel .step02 .tit { font-size: 3rem; font-weight: 350; color: #0b0f14; position: absolute; top: 50%; left: -1.4rem; transform: translateY(-50%); width: 100%; text-align: center;} .recruit .personnel .arrows > div { width: 4rem; height: 3rem; } .recruit .personnel .arrows > div > span { display: block; position: relative; } .recruit .personnel .arrows > div > span::after { position: absolute; content:''; width: 1.1rem; height: 1rem; border-bottom: .5rem solid #000; border-right: .5rem solid #000; transform: rotate(-67.1deg); } .recruit .personnel .arrows > div > span:nth-of-type(1):after { border-color: #f1f1f1; left: 0; top: 1rem; } .recruit .personnel .arrows > div > span:nth-of-type(2):after { border-color: #eaeaea; left: 1.3rem; top: 0.5rem; } .recruit .personnel .arrows > div > span:nth-of-type(3):after { border-color: #dcdcdc; left: 2.5rem; top: 0; } .recruit .personnel .arrows > div:last-of-type { margin-top: 13rem; } .recruit .personnel .arrows > div:last-of-type > span::after { transform: rotate(-22deg); } .recruit .personnel .arrows > div:last-of-type > span:nth-of-type(1):after { top: 0; } .recruit .personnel .arrows > div:last-of-type > span:nth-of-type(2):after { top: .5rem; } .recruit .personnel .arrows > div:last-of-type > span:nth-of-type(3):after { top: 1rem; } .recruit .personnel .step03 .circle { width: 16.4rem; height: 16.4rem; background: #005eb8; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; margin-left: 1.6rem; } .recruit .personnel .step03 .circle:first-of-type .icon { width: 3.6rem; height: 5.9rem; background: url(../images/recruit/personnel_icon01.png) no-repeat 50% 50%; background-size: contain; } .recruit .personnel .step03 .circle:last-of-type { background: #00b083; margin-top: 6rem; } .recruit .personnel .step03 .circle:last-of-type .icon { width: 5.1rem; height: 5.7rem; background: url(../images/recruit/personnel_icon02.png) no-repeat 50% 50%; background-size: contain; } .recruit .personnel .step03 .circle .txt { font-size: 2rem; font-weight: 350; color: #fff; margin-top: 1.6rem; } .recruit .personnel .step03 .circle::after { content:''; display: block; width: 4.3rem; height: 0.8rem; background: url(../images/recruit/personnel_line02.png) 50% 50%; position: absolute; right: -4.3rem; } .recruit .personnel .step04 .box { width: 21rem; height: 11.6rem; background: #fff; border: 1px solid #e8e8e8; border-radius: 1rem; display: flex; flex-direction: column; justify-content: center; text-align: center; margin-left: 6.3rem; } .recruit .personnel .step04 .box p { font-size: 1.8rem; font-weight: 350; color: #555; } .recruit .personnel .step04 .box:last-of-type { margin-top: 10.9rem; } /* 복리후생 */ .recruit .benefits { margin: 0 auto 20rem; } .recruit .benefits ul { display: flex; flex-wrap: wrap; width: 100%; box-shadow: 0px 10px 49.5px 0.5px rgba(0, 0, 0, 0.1); } .recruit .benefits ul li { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8.6rem 0; } .recruit .benefits ul li:nth-child(1), .recruit .benefits ul li:nth-child(4), .recruit .benefits ul li:nth-child(5), .recruit .benefits ul li:nth-child(8) { background: rgba(0, 94, 184, .05); } .recruit .benefits ul li .num { font-family: 'Montserrat'; font-size: 4rem; font-weight: 400; color: #bbb; letter-spacing: -.1rem; line-height: 1; margin-left: -13.5rem; } .recruit .benefits ul li .tit { font-size: 3rem; font-weight: 350; color: #005eb8; margin: 3rem 0 2rem; letter-spacing: -.075rem; } .recruit .benefits ul li p { font-size: 1.8rem; font-weight: 150; text-align: center; color: #555; line-height: 1.66; letter-spacing: -.045rem; } .recruit .benefits ul li:nth-child(3) .icon { margin-top: -1rem; } .recruit .benefits ul li:nth-child(4) .icon { margin-top: -1.5rem; } .recruit .benefits ul li:nth-child(5) .icon { margin-top: -1.5rem; } .recruit .benefits ul li:nth-child(6) .icon { margin-top: -1.5rem; } .recruit .benefits ul li:nth-child(7) .icon { margin-top: -1rem; } .recruit .benefits ul li:nth-child(8) .icon { margin-top: -1.5rem; } /* 개인정보처리방침 */ .graybox { background: #f9f9f9; padding-top: 14rem; } .graybox .policy > .inner { position: relative; } .graybox .policy > .inner .tab_inner ul { display: flex; max-width: 57.6rem; margin: 0 auto 8rem; } .graybox .policy > .inner .tab_inner ul li { flex: 1; display: table; height: 7rem; line-height: 7rem; border: 1px solid #e8e8e8; text-align: center; } .graybox .policy > .inner .tab_inner ul li a { display: table-cell; width: 100%; height: 100%; font-size: 1.8rem; color: #222; } .graybox .policy > .inner .tab_inner ul li.on { background: #005eb8; border-color: #005eb8; box-shadow: 0px 0px 32px 8px rgba(34, 34, 34, 0.2); } .graybox .policy > .inner .tab_inner ul li.on a { color: #fff; } .graybox .policy > .inner .select_wrap { position: absolute; top:1rem; right: 0; z-index: 10; } .graybox .policy > .inner .terms_site { width: 26.8rem; /* display: none; */ } /* .graybox .policy > .inner .terms_site.active { display: block; } */ .graybox .policy > .inner .terms_site.select02 { width: 34rem; } .graybox .policy > .inner .terms_site .site_selected { font-size: 16px; width: 100%; line-height: 48px; color: #222; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #222; } .graybox .policy > .inner .terms_site .site_selected::after { content: ''; display: inline-block; width: 0; height: 0; border-top: 5px solid #222; border-left: 5px solid transparent; border-right: 5px solid transparent; transition: transform ease .3s;} .graybox .policy > .inner .terms_site.open .site_selected::after { transform: rotate3d(1, 0, 0, 180deg);} .graybox .policy > .inner .terms_site .site_list {display: block; overflow: hidden;width: 100%; min-width:215px; height: 0; box-sizing: border-box; transition: height .3s;} .graybox .policy > .inner .terms_site.open .site_list {height: auto;background: rgba(34, 34, 34, 0.4);} .graybox .policy > .inner .terms_site .site_list li a {display: block;font-size: 16px;font-weight: 300;color: #fff;padding: 10px 20px; } .graybox .policy > .inner .terms_site .site_list li a:hover { background: #222; color: #fff; } .graybox .policy .box { background: #fff; max-width: 144rem; margin: 0 auto 20rem; padding: 8rem 10rem; color: #0b0f14; position: relative; } .graybox .policy .box h3 { font-size: 2.4rem; margin-bottom: 5rem; } .graybox .policy .box ol > li+li { margin-top: 5rem; } .graybox .policy .box ol > li:not(:last-child) { border-bottom: 1px solid #e8e8e8; padding-bottom: 5rem; } .graybox .policy .box ol > li .tit { font-size: 2rem; font-weight: 400; } .graybox .policy .box ol > li > p { font-size: 1.6rem; font-weight: 150; color: #555; line-height: 1.875; letter-spacing: -.04rem; margin-top: 1rem; } .graybox .policy .box ol > li > p.gray { color: #999; } .graybox .policy .box ol > li > p b { font-weight: 350; display: block; } .graybox .policy .box ol > li .sub_tit { font-size: 1.8rem; font-weight: 400; color: #000; } .graybox .policy .box ol > li > p+.sub_tit, .graybox .policy .box ol > li > ul+.sub_tit { margin-top: 2rem; } .graybox .policy .box ol > li > .sub_tit+ul { margin-top: 1rem; } .graybox .policy .box ol > li > ul > li { position: relative; padding-left: 1rem; font-size: 1.6rem; font-weight: 150; color: #555; line-height: 1.875; letter-spacing: -.04rem; } .graybox .policy .box ol > li > ul > li::before { content:'-'; display: block; position: absolute; top: -.2rem; left: 0; } .graybox .policy .box ol > li > ul.bold > li { font-weight: 350; } .graybox .policy .box ol > li > ul > li .corp {font-family: 'NS';} .graybox .policy .box ol > li dl { font-size: 1.6rem; font-weight: 150; color: #555; line-height: 1.875; letter-spacing: -.04rem; } .graybox .policy .box ol > li dl dt, .graybox .policy .box ol > li dl dd { display: inline-block; } .graybox .policy .box ol > li .download { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 2rem 1rem; font-size: 1.6rem; color: #005eb8; width: 23.2rem; position: relative; margin-top: 3rem; } .graybox .policy .box ol > li .download i { display: inline-block; width: 1.9rem; height: 2rem; background: url(../images/common/icon_download_b.png) no-repeat 50% 50%; background-size: contain; } .graybox .policy .box ol > li .download::after { content:''; display: block; width: 100%; height: 0.1rem; background: #005eb8; position: absolute; bottom: 0; left: 0; transition: width .3s; } .graybox .policy .box ol > li .download:hover::after { width: 0; } /* .graybox .policy .box .box_cont { display: none;} .graybox .policy .box .box_cont.on { display: block; } */ .graybox .privacy .box .privacy01 ol > li > .tit+p:first-of-type { margin-bottom: 3rem; } .graybox .privacy .box .privacy01 ol > li:first-child > .tit+p:first-of-type { margin-bottom: 0; } .graybox .privacy .box .privacy02 ol > li > p+ul { margin-top: 1rem; } /* error */ .error { height: 100vh; } .error .contents { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .error h2 { font-size: 4rem; font-weight: 400; color: #222; margin: 5rem 0 3rem; } .error p { font-size: 1.8rem; font-weight: 150; color: #555; line-height: 1.89; text-align: center; } .error a { display: block; position: relative; overflow: hidden; margin-top: 5.5rem; width: 23.2rem; height: 5rem; border-radius: 2.5rem; border: 1px solid #888; background: #f9f9f9; z-index: 1; color: #222; text-align: center; font-size: 1.6rem; font-weight: 150; line-height: 5rem;transition:all .2s; } .error a::before { content: "";display: block;position: absolute;left: 0;top: 0;bottom: 0;right: 0;transform: scaleX(0);z-index: -1;background-color: #888;transition:all .2s ease-out;transform-origin:0 50%; } .error a:hover::before { transform:scaleX(1); } .error a:hover { color: #fff; } /* =========================================================================== */ /* =============================== Animation =============================== */ /* =========================================================================== */ @keyframes scrollDwn { 0% { bottom: -5.3rem; } 75% { bottom: -6.5rem; } 100% { bottom: -5.3rem; } } @keyframes intro { 0% { -webkit-clip-path: polygon(0% 75%, 25% 0%, 100% 25%, 75% 100%); clip-path: polygon(0% 75%, 25% 0%, 100% 25%, 75% 100%); width: 66.9rem; height: 65.6rem; } 30% { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); width: 66.9rem; height: 65.6rem; } /* 70% { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); width: 100%; height: 100%; } */ 100% { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); width: 100%; height: 100%; } } @keyframes sec02_txt { 0% { left: 100%; } 95% { opacity: .08; } 100% { left: 40%; opacity: 0; } } @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes scaleDown { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes countingBar { 0% {width: 0;} 100% {width:100%;} } @keyframes sec04_cardDescription { 80% { text-indent: 0%; } 100% { text-indent: 0%; } } @keyframes arrwRight { 0% { transform: translateX(4rem); } 65% { transform: translateX(6rem); } 100% { transform: translateX(4rem); } } @keyframes interviewArrow { 0% { left: 6rem; } 50% { left: 8rem; } 100% { left: 6rem; } } /* ================================ 두산건설 We've 골프단 - 2023.03.28 =============================== */ /* ================================ 골프단 티저 =============================== */ /* 공통 */ .golf #rightnavi { right: 0; left: 5rem; width: fit-content; } .golf #rightnavi li.active { padding-bottom: 7.5rem; } .golf #rightnavi li a span { font-family: 'Pretendard'; letter-spacing: -.1rem; } .golf .section1 .scroll_down { font-family: 'Montserrat'; font-size: 1.8rem; color: #fff; display: block; writing-mode: vertical-rl; letter-spacing: .18rem; position: absolute; right: 8rem; bottom: 13.3rem; z-index: 1; } .golf .section1 .scroll_down::after { content:''; display: block; width: 2.3rem; height: 3rem; background: url(../images/common/visual_scroll_arrow.png) no-repeat; position: absolute; bottom: -5.3rem; left: 0; margin-left: .2rem; animation: scrollDwn 1s infinite; } /* 티저메인 */ .golfTeaser .players { position: relative; margin: auto; opacity: 0; transform: translateX(30rem); bottom: -20vh; } .golf .golfTeaser .section:not(.footer) { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .golf .golfTeaser .section1 { background: linear-gradient(to bottom, #C5CED5 1%, #DDE6EB); } .golf .golfTeaser .section1 article { width: fit-content; height: fit-content; position: absolute; left: 0; right: 0; margin: auto; transform: translate(-43rem, 3rem); letter-spacing: -.25rem; display: flex; flex-direction: column; } .golf .golfTeaser .section1 article p { font-weight: 400; font-size: 3.2rem; line-height: 1; } .golf .golfTeaser .section1 article p:last-of-type { background: url(../images/golf/icon_open.png) 0% 50% no-repeat; font-size: 3.8rem; height: 6.5rem; display: flex; align-items: flex-end; margin-top: 6rem; padding-left: 9rem; } .golf .golfTeaser .section1 article p:last-of-type b:first-child { font-family: 'Montserrat'; font-size: 6.2rem; font-weight: 350; color: #005eb8; line-height: .7; margin-right: .2rem; } .golf .golfTeaser .section1 article p:last-of-type b:last-child { font-size: 6rem; color: #005eb8; font-weight: 500; line-height: .8; margin-left: 1rem; } .golf .golfTeaser .section1 article p:last-of-type::before { content: ''; animation: 1s wide ease-in-out; width: 0; height: .1rem; background-color: #999999; display: block; top: -4rem; left: 0; position: absolute; transition: width ease 0s; } .golf .golfTeaser .section1 article h2 { position: relative; right: .5rem; display: inline-flex; align-items: center; font-family: 'Montserrat'; letter-spacing: -.35rem; font-weight: 500; font-size: 13.4rem; line-height: 1; background-image: -webkit-linear-gradient(left, #00A5D7, #0061BA); -webkit-text-fill-color: transparent; -webkit-background-clip: text; filter: drop-shadow(.2rem .3rem .5rem rgba(47, 48, 53, .3)); } .golf .golfTeaser .section1 article h2:first-of-type::before { content: ''; background: url(../images/golf/ball.png) 50% 50% no-repeat; width: 10.4rem; height: 10.4rem; display: inline-block; border-radius: 100%; position: absolute; left: 10rem; } .golf .golfTeaser .section1 article h2 i { opacity: 0; } .golf .golfTeaser .section1 article * { transform: translateY(5rem); opacity: 0; } .golf .golfTeaser .section1.ani .players { opacity: 1; bottom: -16vh; transition: .6s all ease .3s; } .golf .golfTeaser .section1.ani article * { animation: .4s fadeUp .6s ease-in-out; animation-fill-mode: forwards; } .golf .golfTeaser .section1.ani article *:nth-child(2) { animation-delay: 1s; } .golf .golfTeaser .section1.ani article *:nth-child(2)::before { animation:1s jump 1.8s; animation-iteration-count: 3; } .golf .golfTeaser .section1.ani article *:nth-child(3) { animation-delay: 1.2s; } .golf .golfTeaser .section1.ani article *:nth-child(4) { animation-delay: 1.4s; } .golf .golfTeaser .section1.ani article *:nth-child(4)::before { animation-delay: 1.6s; animation-fill-mode: forwards; } .golf .golfTeaser .section2 article { text-align: center; font-family: 'Montserrat'; overflow: hidden; } .golf .golfTeaser .section2 article p { font-size: 4rem; color: #005eb8; font-weight: 350; } .golf .golfTeaser .section2 article p span { font-family: 'Pretendard'; font-weight: 400; } .golf .golfTeaser .section2 article h2 { font-style: italic; font-size: 10rem; color: #005EB8; font-weight: 450; margin: .5rem 1rem 0; } .golf .golfTeaser .section2 article ul { display: flex; justify-content: center; font-weight: 500; font-size: 4rem; color: #999999; align-items: center; line-height: 1; padding-top: 5rem; } .golf .golfTeaser .section2 article ul li:nth-child(even) { width: .6rem; height: .6rem; background: #999999; transform: translateY(.3rem) rotate(15deg); margin: 0 2.4rem; opacity: 0; } .golf .golfTeaser .section2 article ul li:nth-child(odd) { transform: scaleY(0); transform-origin: 0 100%; font-weight: 400; } .golf .golfTeaser .section2 article > *:not(ul) { opacity: 0; transform: translateY(5rem); } .golf .golfTeaser .section2.ani article > * { animation: fadeUp .4s ease-in-out; animation-fill-mode: forwards; } .golf .golfTeaser .section2.ani article > *:nth-child(2) { animation-delay: .4s; } .golf .golfTeaser .section2.ani article ul li:nth-child(odd) { animation: .4s fadeUp ease-in-out; animation-fill-mode: forwards; } .golf .golfTeaser .section2.ani article ul li:nth-child(even) { animation: .4s opacity ease-in-out; animation-fill-mode: forwards; } .golf .golfTeaser .section2.ani article ul li:nth-child(1) { animation-delay: .8s; } .golf .golfTeaser .section2.ani article ul li:nth-child(2) { animation-delay: 1s; } .golf .golfTeaser .section2.ani article ul li:nth-child(3) { animation-delay: 1.2s; } .golf .golfTeaser .section2.ani article ul li:nth-child(4) { animation-delay: 1.4s; } .golf .golfTeaser .section2.ani article ul li:nth-child(5) { animation-delay: 1.6s; } .golf .golfTeaser .section2.ani article ul li:nth-child(6) { animation-delay: 1.8s; } .golf .golfTeaser .section2.ani article ul li:nth-child(7) { animation-delay: 2s; } .golf .golfTeaser .section2.ani article ul li:nth-child(8) { animation-delay: 2.2s; } .golf .golfTeaser .section2.ani article ul li:nth-child(9) { animation-delay: 2.4s; } .golf .golfTeaser .section2.ani article ul li:nth-child(10) { animation-delay: 2.6s; } .golf .golfTeaser .section:not(.section1, .section2, .footer) { background: #eff4fb; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article { width: fit-content; position: absolute; margin: auto; left: 0; right: 0; transform: translateX(-39rem); } .golf .golfTeaser .section:not(.section1, .section2, .footer) article h2 { font-size: 11rem; font-family: 'Montserrat'; font-style: italic; font-weight: 450; line-height: .8; margin-left: -1.5rem; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article h2::before { content: ''; display: block; width: 5.5rem; height: .6rem; background: #005eb8; transform: skew(-45deg); margin-bottom: 2.7rem; margin-left: 1.5rem; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article h2 span { color: #005eb8; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article p { font-size: 2rem; color: #555555; line-height: 1.8; padding-top: 3rem; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article p b { color: #005eb8; font-weight: 400; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article h3 { width: 18.1rem; height: 5rem; display: flex; align-items: center; justify-content: center; background: #fff; margin-top: 5.5rem; font-weight: 200; border-radius: 2.5rem; font-size: 2.2rem; color: #555555; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article h3 span { color: #005eb8; font-size: 2.7rem; font-weight: 400; display: inline-block; padding-right: .5rem; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article:last-child { position: relative; height: 100%; display: flex; align-items: center; transform: translateX(35rem); } .golf .golfTeaser .section:not(.section1, .section2, .footer) article:last-child::after { content: ''; width: 55rem; height: 55rem; border-radius: 100%; background: #fff; display: block; transform: translateY(6.4rem); } .golf .golfTeaser .section:not(.section1, .section2, .footer) article:last-child img { z-index: 1; position: absolute; top: auto; bottom: -2rem; left: 0; right: 0; margin: auto; } .golf .golfTeaser .section:not(.section1, .section2, .footer) article > * { opacity: 0; transform: translateY(5rem); } .golf .golfTeaser .section:not(.section1, .section2, .footer).ani article > * { animation: .6s fadeUp ease-in-out; animation-fill-mode: forwards; } .golf .golfTeaser .section:not(.section1, .section2, .footer).ani article > *:nth-child(2) { animation-delay: .6s; } .golf .golfTeaser .section:not(.section1, .section2, .footer).ani article:last-child > *:nth-child(2) { animation-delay: .4s; } .golf .golfTeaser .section:not(.section1, .section2, .footer).ani article > *:nth-child(3) { animation-delay: .8s; } /* ================================ 골프단 메인 =============================== */ /* 공통 */ .golf .golfMain .section:not(.footer) { overflow: hidden; } .golf .golfMain .section:not(.footer) .title_box h1 { color: #000000; font-size: 4.4rem; font-weight: 400; line-height: 1; } .golf .golfMain .section:not(.footer) .title_box p { color: #555555; font-size: 2rem; font-weight: 150; padding-top: 3.5rem; letter-spacing: -.05rem; } .golf .golfMain .section:not(.footer) .border_frame { transition: all ease .3s; } .golf .golfMain .section:not(.footer) .border_frame .border { position: absolute; z-index: 1; transition: all .1s; } .golf .golfMain .section:not(.footer) .border_frame .bdt, .golf .golfMain .section:not(.footer) .border_frame .bdb { width: 0; height: .4rem; } .golf .golfMain .section:not(.footer) .border_frame .bdt { background: #007aee; top: 0; left: 0; } .golf .golfMain .section:not(.footer) .border_frame .bdb { background: #005eb8; right: 0; bottom: 0; } .golf .golfMain .section:not(.footer) .border_frame .bdl, .golf .golfMain .section:not(.footer) .border_frame .bdr { width: .4rem; height: 0; background: linear-gradient(to bottom, #007aee 0, #005eb8 100%); } .golf .golfMain .section:not(.footer) .border_frame .bdl { bottom: 0; left: 0; } .golf .golfMain .section:not(.footer) .border_frame .bdr { top: 0; right: 0; } .golf .golfMain .section:not(.section4, .footer) .border_frame:hover { box-shadow: 8px 14px 21px 0px rgba(4, 0, 0, 0.16); } .golf .golfMain .section:not(.footer, .section1) { display: flex; justify-content: center; flex-direction: column; } .golf .golfMain .section:not(.footer) .border_frame:hover .bdt { width: 100%; transition-delay: .1s; } .golf .golfMain .section:not(.footer) .border_frame:hover .bdr { height: 100%; transition-delay: .2s; } .golf .golfMain .section:not(.footer) .border_frame:hover .bdb { width: 100%; transition-delay: .3s; } .golf .golfMain .section:not(.footer) .border_frame:hover .bdl { height: 100%; transition-delay: .4s; } .golf .golfMain .section:not(.footer) .golf_search { position: absolute; right: 0; top: -10rem; border-bottom: .2rem solid #222222; display: flex; align-items: center; padding: 2rem; width: 33rem; } .golf .golfMain .section:not(.footer) .golf_search input { border: none; background: transparent; font-size: 2.4rem; font-weight: 400; color: #222222; width: 100%; padding-right: 1rem; } .golf .golfMain .section:not(.footer) .golf_search input::placeholder { color: #b2b2b2; } .golf .golfMain .section:not(.footer) .golf_search button[type="reset"] { width: 2rem; height: 2rem; margin-right: .8rem; } .golf .golfMain .section:not(.footer) .golf_search button[type="reset"] img { width: 100%; } .golf .golfMain .section:not(.footer) ol { display: flex; justify-content: center; } .golf .golfMain .section:not(.footer) ol li:not(.golf_pagination) { width: 2.9rem; height: 2.9rem; display: flex; justify-content: center; align-items: center; } .golf .golfMain .section:not(.footer) ol li:not(.golf_pagination) { margin: 0 .55rem; } .golf .golfMain .section:not(.footer) ol li:not(.golf_pagination) button { width: 100%; height: 100%; } .golf .golfMain .section:not(.footer) ol .golf_pagination { margin: 0 1.45rem; } .golf .golfMain .section:not(.footer) ol .golf_pagination li { margin: 0 .85rem; font-size: 1.5rem; font-family: 'Montserrat'; position: relative; } .golf .golfMain .section:not(.footer) ol .golf_pagination li.on { font-weight: 400; font-size: 1.6rem; color: #005eb8; border: .1rem solid #005eb8; border-radius: .2rem; } .golf .golfMain .section:not(.footer) ol .golf_pagination li.disable { pointer-events: none; } .golf .golfMain .section:not(.footer) ol .golf_pagination li button { display: block; width: 100%; height: 100%; } .golf .golfMain .section:not(.footer) .null { min-width: 100%; width: 100%; text-align: center; font-size: 1.6rem; margin-bottom: 0 !important; } /* 배너 */ .golf .golfMain .section1 article { position: absolute; bottom: 10rem; left: 0; right: 0; margin: auto; max-width: 144rem; width: 100%; z-index: 1; display: flex; flex-wrap: wrap; flex-direction: column; } .golf .golfMain .section1 article * { color: #fff; } .golf .golfMain .section1 article h2 { font-size: 6rem; display: block; overflow: hidden; order: 1; font-weight: 200; line-height: 1.3; } .golf .golfMain .section1 article h2 span { position: relative; top: 0; bottom: 0; left: 0; right: auto; margin: auto; transition: top ease-in-out .3s; } .golf .golfMain .section1 article h2 span i { font-weight: 100; } .golf .golfMain .section1 article h2:last-of-type span { transition-delay: .15s; } .golf .golfMain .section1 article h2 span.slideUp { top: -10rem; } .golf .golfMain .section1 article p { font-size: 3.2rem; order: 0; font-weight: 450; margin-bottom: 2rem; color: #005fb8; } .golf .golfMain .section1 article div { order: 2; } .golf .golfMain .section1 article div * { font-size: 1.4rem; font-weight: 400; font-family: 'Montserrat'; letter-spacing: .25rem; position: relative; right: unset; left: unset; top: unset; margin-top: 10.2rem; display: inline-flex; background: none; height: fit-content; width: fit-content; padding: 0 3.5rem; } .golf .golfMain .section1 article div *:after { content: ''; background: url("../images/common/arrow_9x15_w.png") 50% 50% no-repeat; width: .9rem; height: 1.5rem; display: inline-block; position: absolute; } .golf .golfMain .section1 article div .swiper-button-prev:after { left: 0; transform: scaleX(-1); } .golf .golfMain .section1 article div .swiper-button-next:after { right: 0; } .golf .golfMain .section1 article div .swiper-button-next:before { content: ''; display: inline-block; width: .1rem; height: 1.4rem; background: #fff; opacity: .4; position: absolute; left: 0; } .golf .golfMain .section1 .swiper-slide { height: 100vh; overflow: hidden; } .golf .golfMain .section1 .swiper-slide img { position: relative; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; object-fit: cover; } /* 선수소개 */ .golf .golfMain .section2 { background: #f5f6fa; } .golf .golfMain .section2 .title_box { max-width: 148rem; width: 100%; height: fit-content; margin: 12.3rem auto 0; padding-left: 2rem; } .golf .golfMain .section2 .seciton2_cursor { width: 9.2rem; height: 9.2rem; display: flex; justify-content: center; flex-direction: column; align-items: center; background: rgba(34, 34, 34, .4); border-radius: 100%; position: absolute; z-index: 1; transform: scale(0); transition: transform ease .3s; cursor:none; pointer-events: none; } .golf .golfMain .section2 .seciton2_cursor span { color: #ffffff; font-family: 'Montserrat'; font-size: 1.4rem; font-weight: 300; text-align: center; letter-spacing: .1rem; margin-bottom: 1rem; } .golf .golfMain .section2 .controller { position:absolute; top: -14.8rem; right: 12.5vw; z-index: 2; height: fit-content; } .golf .golfMain .section2 .controller .splide__arrows { overflow:hidden; display:flex; width: fit-content; height: fit-content; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .golf .golfMain .section2 .controller .splide__arrows button { display:block; position:relative; padding: 2rem 1.35rem; left: unset; right: unset; transform: translate(0); background: none; opacity: 1; } .golf .golfMain .section2 .controller .splide__arrows button:hover { opacity: .7; } .golf .golfMain .section2 .controller .splide__arrows button span { text-indent: -9999px; display: block; } .golf .golfMain .section2 .controller .splide__arrows button:after {content:""; display:block; width: 0; height: 0; position:absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-style: solid; } .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--prev { padding-left: 5rem; } .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--next { padding-right: 5rem; } .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--prev:after { border-width: 6px 10.4px 6px 0; border-color: transparent #005fb8 transparent transparent; left: auto; margin-right: .9rem; } .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--next:after { border-width: 6px 0 6px 10.4px; border-color: transparent transparent transparent #005fb8; right: auto; margin-left: .9rem; } .golf .golfMain .section2 .controller .splide__arrows button svg { display: none; } .golf .golfMain .section2 .controller .text_circle { animation: rotate 20s linear infinite; fill: currentColor; height: auto; max-width: 23rem; transform-origin: center; width: 100%; font-weight: 300; color: #005eb8; position: relative; } .golf .golfMain .section2 .splide { position: relative; margin: 6rem auto 0; width: 100%; max-width: 177rem; height:fit-content; } .golf .golfMain .section2 .splide .splide__track { overflow-y: visible; overflow-x: clip; } .golf .golfMain .section2 .splide .splide__list { max-height: 52rem; min-height: 41.5rem; height: 27.1vw; display: flex; align-items: center; margin: 5rem 0; } .golf .golfMain .section2 .splide .splide__list .splide__slide { position: relative; min-height: 36.8rem; height: 23.96vw; max-height: 95%; width: calc(20% - 3rem); margin-right: 3rem; background: #ffffff; transition: all ease .3s; } .golf .golfMain .section2 .splide .splide__list .splide__slide:after { content:''; display: block; position: absolute; bottom: -.1rem; width: 100%; height: 26.5%; background: linear-gradient(to top, #014099, transparent); z-index: 0; opacity: 0; pointer-events: none; transition: all ease .3s; } .golf .golfMain .section2 .splide .splide__list .splide__slide .openPopup { pointer-events: none; cursor:none; } .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle { display: flex; position: relative; align-items: center; flex-direction: column; background: #eeeef0; height: 100%; overflow: hidden; clip-path: circle(33% at 50% 37%); transition: all ease .6s; } .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle:after { content:''; transition: all ease .3s; width: 100%; height: 100%; background: url("../images/golf/sec02_hover_bg.png") 50% 50% no-repeat; display: block; z-index: -1; position: absolute; top: 0; left: 0; opacity: 0; background-size: cover; } .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle img { position: absolute; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; } .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle h2 { font-size: 4.6rem; font-weight: 400; color: #fff; position: relative; top: 13%; transform: translateY(-50%); line-height: 1; opacity: 0; transition: all ease .3s; font-family: 'Montserrat'; } .golf .golfMain .section2 .splide .splide__list .splide__slide h3, .golf .golfMain .section2 .splide .splide__list .splide__slide h4 { position: absolute; top: auto; margin: auto; left: 0; right: 0; transform: translateY(-50%); text-align: center; transition: all ease .3s; } .golf .golfMain .section2 .splide .splide__list .splide__slide h3 { bottom: 15%; width: 9rem; height: 3.2rem; background: #e3ecf5; color: #005eb8; line-height: 3.2rem; border-radius: 1.6rem; font-family: 'Montserrat'; font-size: 1.6rem; } .golf .golfMain .section2 .splide .splide__list .splide__slide h4 { bottom: 4%; font-size: 3rem; font-weight: 400; line-height: 1; color: #222222; display: flex; align-items: center; justify-content: center; z-index: 1; } .golf .golfMain .section2 .splide .splide__list .splide__slide h4 span { font-family: 'Montserrat'; color: #999999; font-weight: 300; font-size: 1.8rem; padding-left: 7%; position: relative; transition: all ease .3s; } .golf .golfMain .section2 .splide .splide__list .splide__slide h4 span:before { content:''; display: inline-block; width: .1rem; height: 1.6rem; background: #999999; vertical-align: top; position: relative; right: 9%; } .golf .golfMain .section2 .splide .splide__slide.is-active { box-shadow: 13px 11px 24px 0px rgba(4, 0, 0, 0.2); cursor: none; } .golf .golfMain .section2 .splide .splide__slide.is-active .openPopup { pointer-events: auto; } .golf .golfMain .section2 .splide .splide__slide.is-active { height: 100%; max-height: 100%; } .golf .golfMain .section2 .splide .splide__slide.is-active:after { opacity: .7; transition-delay: .3s; } .golf .golfMain .section2 .splide .splide__slide.is-active h3 { opacity: 0; } .golf .golfMain .section2 .splide .splide__slide.is-active h4, .golf .golfMain .section2 .splide .splide__slide.is-active h4 span{ color: #ffffff; } .golf .golfMain .section2 .splide .splide__slide.is-active h4 span:before { background: #ffffff; } .golf .golfMain .section2 .splide .splide__slide.is-active .mask_circle { clip-path: circle(100% at 50% 37%); } .golf .golfMain .section2 .splide .splide__slide.is-active .mask_circle:after, .golf .golfMain .section2 .splide .splide__slide.is-active .mask_circle h2 { opacity: 1; } /* 골프단 소식 */ .golf .golfMain .section3 .title_box { max-width: 148rem; width: 100%; height: fit-content; margin: 16.3rem auto 0; padding-left: 2rem; } .golf .golfMain .section3 .golf_news { max-width: 144rem; margin: 6rem auto 0; position: relative; width: 100%; } .golf .golfMain .section3 .golf_news ul { display: flex; flex-wrap: wrap; position: absolute; opacity: 0; visibility: hidden; } .golf .golfMain .section3 .golf_news ul.active { position: relative; opacity: 1; visibility: visible; } .golf .golfMain .section3 .golf_news ul li { width: calc(100% / 3 - 3.4rem); height: 44.8rem; position: relative; overflow: hidden; } .golf .golfMain .section3 .golf_news ul li:nth-child(3n - 1) { margin: 0 5rem; } .golf .golfMain .section3 .golf_news ul li img { width: 100%; height: calc(100% - 13.8rem); object-fit: cover; } .golf .golfMain .section3 .golf_news ul li a { display: block; width: 100%; height: 100%; overflow: hidden; } .golf .golfMain .section3 .golf_news ul li a img { transform: scale(1); transition: all ease .8s; } .golf .golfMain .section3 .golf_news ul li a:hover img { transform: scale(1.1); } .golf .golfMain .section3 .golf_news ul li .txt_box { height: 13.8rem; padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; background: #ffffff; } .golf .golfMain .section3 .golf_news ul li .txt_box p { font-weight: 350; font-size: 2rem; line-height: 1.5; color: #222222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .golf .golfMain .section3 .golf_news ul li .txt_box span { display: block; font-family: 'Montserrat'; font-size: 1.4rem; color: #999999; line-height: 1; } .golf .golfMain .section3 .golf_pagination_wrap {margin-top: 8rem; } .golf .golfMain .section3 .null { line-height: 44.8rem; } /* 골프단 갤러리 */ .golf .golfMain .section4 { background: #f5f6fa; } .golf .golfMain .section4 .border_frame:hover .img { box-shadow: 8px 14px 21px 0px rgba(4, 0, 0, 0.16); } .golf .golfMain .section4 .title_box { max-width: 138rem; width: 100%; height: fit-content; margin: 12rem auto 0; padding-left: 2rem; } .golf .golfMain .section4 .golf_tab { position: absolute; top: -5.1rem; font-size: 1.8rem; color: #888888; display: flex; } .golf .golfMain .section4 .golf_tab button { margin-right: 3rem; position: relative; } .golf .golfMain .section4 .golf_tab button.on { font-weight: 400; color: #005eb8; } .golf .golfMain .section4 .golf_tab button:hover { color: #005eb8; } .golf .golfMain .section4 .golf_tab button:not(:last-of-type):after { content: ''; display: inline-block; width: .1rem; height: 1.3rem; background: #bfbfbf; right: -1.5rem; top: 0; bottom: 0; margin: auto; position: absolute; } .golf .golfMain .section4 .golf_gallery { max-width: 134rem; width: 100%; margin: 7.8rem auto 0; position: relative; } .golf .golfMain .section4 .golf_gallery .gallery_frame { position: relative; height: 61.8rem;} .golf .golfMain .section4 .golf_gallery .gallery_frame > li { position: absolute; width: 100%; top: 0; opacity: 0; visibility: hidden; transition: all ease .2s; pointer-events: none; } .golf .golfMain .section4 .golf_gallery .gallery_frame > li.active { position: relative; opacity: 1; visibility: visible; pointer-events: auto } .golf .golfMain .section4 .golf_gallery .gallery_inner { display: flex; flex-wrap: wrap; } .golf .golfMain .section4 .golf_gallery .gallery_inner li { width: calc(100% / 3 - 5.35rem); position: relative; margin-bottom: 3rem; } .golf .golfMain .section4 .golf_gallery .gallery_inner li a { display: block; } .golf .golfMain .section4 .golf_gallery .gallery_inner li a .img { position: relative; height: 22.2rem; overflow: hidden; transition: box-shadow ease .3s; } .golf .golfMain .section4 .golf_gallery .gallery_inner li a .img img { width: 100%; height: 100%; object-fit: cover; } .golf .golfMain .section4 .golf_gallery .gallery_inner li a .img.video .btn_play { display: block; } .golf .golfMain .section4 .golf_gallery .gallery_inner li a .img .btn_play { width: fit-content; height: fit-content; object-fit: contain; transition: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } .golf .golfMain .section4 .golf_gallery .gallery_inner li h3 { width: 100%; padding: 1.6rem 1rem 2rem; font-size: 1.8rem; color: #222222; text-align: center; background: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .golf .golfMain .section4 .golf_gallery .gallery_inner li:nth-child(3n - 1) { margin: 0 8rem 3rem; } .golf .golfMain .section4 .null { height: 61.8rem; line-height: 61.8rem; } /* 팝업 */ .golf .golfMain .popup { cursor: none; width: 100%; padding: 0 3rem; overflow: auto; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); z-index: 1000; display: none; } .golf .golfMain .popup::-webkit-scrollbar {width: 1rem; background: rgba(0, 0, 0, .3); } .golf .golfMain .popup::-webkit-scrollbar-thumb {background: #ffffff; border-radius: 1rem; } .golf .golfMain .popup .pop_close { position: fixed; top: 0; left: 0; width: 7rem; height: 7rem; transform: scale(0); cursor: none; transition: transform ease .3s; } .golf .golfMain .popup .pop_close img { width: 100%; } .golf .golfMain .popup .pop_players { cursor: auto; width: 128rem; height: calc(100vh - 9.2rem); overflow: hidden; background: #fff; position: relative; margin: 4.6rem auto; letter-spacing: -.15rem; display: none; } .golf .golfMain .popup .pop_players > li { height: 100%; overflow: hidden; } .golf .golfMain .popup .pop_players .tab { width: 50%; position: relative; display: flex; flex-direction: column; } .golf .golfMain .popup .pop_players .tab .img { width: 100%; height: calc(100% - 8rem); } .golf .golfMain .popup .pop_players .tab .img img { width: 100%; height: 100%; object-fit: cover; } .golf .golfMain .popup .pop_players .tab .video { width: 100%; height: calc(100% - 8rem); position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; visibility: hidden; cursor: pointer; background: #000; transition: all ease .3s; } .golf .golfMain .popup .pop_players .tab .video.on { opacity: 1; visibility: visible; } .golf .golfMain .popup .pop_players .tab .video iframe { width: 100%; height: 100%; } .golf .golfMain .popup .pop_players .tab .video #btn-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 100%; transition: all ease .2s; z-index: 1; } .golf .golfMain .popup .pop_players .tab .video #btn-play:active { width: 70px; height: 70px; } .golf .golfMain .popup .pop_players .tab .video #btn-play img { width: 100%; } .golf .golfMain .popup .pop_players .tab .tab_container { position: relative; background: #005eb8; bottom: 0; left: 0; width: 100%; display: flex; z-index: 2; height: 8rem; } .golf .golfMain .popup .pop_players .tab .tab_container::before { content: ''; display: block; position: absolute; height: 2.6rem; width: .1rem; background: #fff; opacity: .5; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .golf .golfMain .popup .pop_players .tab .tab_container button { width: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 400; opacity: .5; } .golf .golfMain .popup .pop_players .tab .tab_container button.on { opacity: 1; } .golf .golfMain .popup .pop_players .tab .tab_container button span { font-weight: 200; padding: 0 .5rem 0 2rem; } .golf .golfMain .popup .pop_players .desc { width: 50%; } .golf .golfMain .popup .pop_players .desc .desc_inner { height: calc(100% - 10.2rem); position: relative; padding: 6rem 4rem 0; } .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child h1 { font-size: 1.8rem; color: #222222; font-family: 'Montserrat'; line-height: 1; } .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child h2 { transform: translateY(5rem); opacity: 0; font-size: 4.6rem; font-weight: 400; color: #005eb8; line-height: 1; margin-top: 1.5rem; border-bottom: 1px solid #e1e1e1; padding-bottom: 2rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child h2 span { font-size: 2rem; font-family: 'Montserrat'; color: #555555; font-weight: 300; vertical-align: bottom; display: inline-block; padding-left: 2.3rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child p { transform: translateY(5rem); opacity: 0; font-size: 2.2rem; color: #555555; line-height: 1.5; height: 12rem; overflow-y: auto; margin: 2.5rem 0 2rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child p::-webkit-scrollbar {width: .5rem; background: #f5f5f5; } .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child p::-webkit-scrollbar-thumb {background: #e1e1e1; border-radius: 0; } .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) { background: rgba(0, 94, 184, .05); padding: 2rem 2.8rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p { font-size: 1.6rem; line-height: 1; padding: .8rem 0; display: flex; overflow: hidden; } .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p b { font-weight: 400; color: #005eb8; display: flex; align-items: center; width: 14.2rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p b::before { content: ''; display: inline-block; width: .5rem; height: .5rem; background: #005eb8; border-radius: 100%; margin-right: 1.2rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p span { transform: translateY(5rem); opacity: 0; display: inline-block; color: #555555; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child { margin-top: 4rem; position: relative; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child h3 { border-bottom: 1px solid #005eb8; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child h3 span { width: fit-content; display: block; background: #005eb8; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: 1; padding: .8rem 1.8rem; letter-spacing: 0; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history { transform: translateY(5rem); opacity: 0; overflow-y: auto; margin-top: 2rem; height: 15.7rem; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history::-webkit-scrollbar {width: .5rem; background: #f5f5f5; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history::-webkit-scrollbar-thumb {background: #e1e1e1; border-radius: 0; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p { font-size: 1.6rem; color: #777777; line-height: 2; padding-left: 7rem; position: relative; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p span { font-family: 'Montserrat'; color: #222222; font-weight: 400; height: fit-content; display: inline-block; padding-left: 1.5rem; position: absolute; left: 0; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p b { font-weight: 200; color: #005eb8; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p span::before { content: ''; background: #d2d2d2; width: .5rem; height: .5rem; border-radius: 100%; display: inline-block; left: 0; position: absolute; top: 0; bottom: 0; margin: auto; } .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p span i { font-family: 'Pretendard' } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap { height: 9.2rem; display: flex; justify-content: center; align-items: center; font-family: 'Montserrat'; } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap li a { font-size: 1.4rem; font-weight: 400; letter-spacing: .2rem } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_pagination.prev { background: url("../images/golf/pop1_arrow_prev.png") 0% 50% no-repeat; padding-left: 3rem; } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_pagination.next { background: url("../images/golf/pop1_arrow_next.png") 100% 50% no-repeat; padding-right: 3rem; } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_number { padding: 0 10rem; font-size: 1.8rem; font-weight: 300; color: #000000; } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_number span { color: #005eb8; } .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_pagination.disable { pointer-events: none; } .golf .golfMain .popup .pop_players .desc.on .desc_inner li:first-child h2, .golf .golfMain .popup .pop_players .desc.on .desc_inner li:first-child p, .golf .golfMain .popup .pop_players .desc.on .desc_inner li:nth-child(2) p span, .golf .golfMain .popup .pop_players .desc.on .desc_inner li:last-child .history { animation: fadeUp alternate .8s; animation-fill-mode: forwards; } .golf .golfMain .popup .pop_players .desc.on .desc_inner li:first-child p { animation-delay: .2s } .golf .golfMain .popup .pop_players .desc.on .desc_inner li:nth-child(2) p:first-child span { animation-delay: .3s } .golf .golfMain .popup .pop_players .desc.on .desc_inner li:nth-child(2) p:nth-child(2) span { animation-delay: .4s } .golf .golfMain .popup .pop_players .desc.on .desc_inner li:nth-child(2) p:nth-child(3) span { animation-delay: .5s } .golf .golfMain .popup .pop_players .desc.on .desc_inner li:last-child .history { animation-delay: .6s; } .golf .golfMain .popup .pop_news { cursor: auto; width: 134rem; height: fit-content; overflow: hidden; background: #fff; position: relative; margin: 4.6rem auto; display: none; } .golf .golfMain .popup .pop_news .title { padding: 6rem 0 0; } .golf .golfMain .popup .pop_news .title h2 { width: 100%; font-size: 4rem; font-weight: 400; color: #222222; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } .golf .golfMain .popup .pop_news .title span { display: block; width: 100%; padding: 3.3rem 0 3.8rem; border-bottom: .1rem solid #e8e8e8; line-height: 1; font-size: 1.6rem; color: #777777; } .golf .golfMain .popup .pop_news .ck-content { width: calc(100% - 10rem); margin: 0 auto; } .golf .golfMain .popup .pop_news .editor { padding: 5rem 0 11rem; /* font-size: 1.8rem; line-height: 2.1; */ color: #222222; } .golf .golfMain .popup .pop_news .editor::after { content:''; display: block; clear: both; } .golf .golfMain .popup .pop_news .editor .editor_test_span { font-size: 1.6rem; margin: auto; display: block; text-align: center; color: #222222; margin-top: 1rem; } .golf .golfMain .popup .pop_news .editor .editor_test_title { line-height: 1.8; font-size: 2.4rem; color: #222222; font-weight: 400; } .golf .golfMain .popup .pop_news .pagination { padding: 0 4rem 6rem; position: relative; } .golf .golfMain .popup .pop_news .pagination div { width: 100%; border-bottom: .1rem solid #e8e8e8; border-top: .1rem solid #e8e8e8; } .golf .golfMain .popup .pop_news .pagination div:last-child { margin-top: -.1rem; } .golf .golfMain .popup .pop_news .pagination div button { width: 100%;display: flex;align-items: center;padding: 3rem 0; font-size: 1.5rem; font-family: 'Montserrat'; font-weight: 400; color: #000000; } .golf .golfMain .popup .pop_news .pagination div button span { font-weight: 200; font-family: 'Pretendard'; padding-left: 6rem;display: block;width: calc(100% - 10rem);font-size: 1.5rem;color: #222;text-align: left;letter-spacing: -.0375rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } .golf .golfMain .popup .pop_news .pagination div button:hover span { color: #005eb8; } .golf .golfMain .popup .pop_gallery { width: 134rem; margin: auto; height: 100vh; position: relative; display: none; align-items: center; justify-content: space-between; padding: 0 6rem; } .golf .golfMain .popup .pop_gallery .bg { display: block; position: absolute; width: 100%; height: 100%; background: #fff; z-index: 0; left: 0; } .golf .golfMain .popup .pop_gallery > * { position: relative; cursor: auto; width: fit-content; overflow: hidden; z-index: 1; } .golf .golfMain .popup .pop_gallery #loader { width: 50px;height: 50px;border-radius: 100%;margin: 0 auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);overflow: visible; } .golf .golfMain .popup .pop_gallery #loader:before, .golf .golfMain .popup .pop_gallery #loader:after{ content: "";position: absolute;top: -10px;left: -10px;width: 100%;height: 100%;border-radius: 100%;border: 10px solid transparent;border-top-color: #005eb8; } .golf .golfMain .popup .pop_gallery #loader:before{ z-index: 100; animation: rotate 1s infinite; } .golf .golfMain .popup .pop_gallery #loader:after{ border: 10px solid #ccc; } .golf .golfMain .popup .pop_gallery .img { display: flex; flex-direction: column; max-width: 85rem; max-height: 100vh; min-width: 36rem; align-items: center; margin: auto; } .golf .golfMain .popup .pop_gallery .img img { width: fit-content; height: fit-content; max-width: 100%; object-fit: cover; } .golf .golfMain .popup .pop_gallery .img iframe { max-width: 100rem; max-height: 100vh; transition: all ease .3s; } .golf .golfMain .popup .pop_gallery .img h2 { text-align: center; font-size: 2rem; font-weight: 400; color: #222222; padding-top: 2rem; } /* .golf .golfMain .popup .pop_gallery .img h2.on { display: block; } */ .golf .golfMain .popup .pop_gallery > div:not(.img) { font-size: 1.4rem; position: absolute; z-index: 9; font-family: 'Montserrat'; font-weight: 400; transition: all ease .2s; color: #000; border: .1rem solid rgba(0, 0, 0, .3); border-radius: 2rem; width: 13rem; height: 4rem; } .golf .golfMain .popup .pop_gallery > div:not(.img, .disabled):hover { transform: scale(1.1); } .golf .golfMain .popup .pop_gallery > div:not(.img).disabled { cursor: auto; opacity: .5; } .golf .golfMain .popup .pop_gallery > div:not(.img).disabled button { pointer-events: none; } .golf .golfMain .popup .pop_gallery > div button { width: 100%; height: 100%; letter-spacing: .3rem; display: flex; align-items: center; justify-content: center; } .golf .golfMain .popup .pop_gallery > div:first-of-type { left: 8rem; } .golf .golfMain .popup .pop_gallery > div:first-of-type button img { margin-right: 2rem; transform: scale(-1); } .golf .golfMain .popup .pop_gallery > div:last-of-type { right: 8rem; } .golf .golfMain .popup .pop_gallery > div:last-of-type button img { margin-left: 2rem; } @keyframes rotate{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} } .m_about .slide_wrap .slide_ctn .item.slick_now{padding-top: 0;} .m_about .slide_wrap .slide_ctn .item.slick_now .img_box h3:not(.on){transform:translateY(140%)} .m_about .slide_wrap .slide_ctn .item.slick_now .img_box .on{transform:translateX(0)} .m_about .slide_wrap .slide_ctn .item.slick_now .down_txt{transform:translateY(0);} @keyframes jump{ 50% { margin-top: -20rem; -webkit-animation-timing-function: ease-in; transform: rotate(90deg); } 90% { margin-top: -2rem; height: 10.4rem; -webkit-animation-timing-function:ease-out; transform: rotate(270deg); } 95% { margin-top: 1rem; height: 9.8rem; border-radius:70% / 60%; -webkit-animation-timing-function:ease-in; transform: rotate(360deg); } 100% { margin-top:0; -webkit-animation-timing-function:ease-in; transform: rotate(360deg); } } @keyframes fadeUp{ 0% { transform: translateY(5rem); opacity: 0;} 100% { transform: translateY(0); opacity: 1; } } @keyframes opacity{ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes wide{ 0% { width: 0; } 100% { width: 50rem; } } /* ckeditor custom */