@charset "utf-8"; /* ******************************************************* * filename : content.css * description : 서브페이지 컨텐츠 CSS * date : 2021-11-30 ******************************************************** */ /* ======================================================== * ABOUT :: Corporate Profile ======================================================== */ /* ****************** ABOUT :: Corporate Profile :: Number ********************** */ .company-number-inner-container{display:flex; align-items:flex-end; justify-content:space-between; flex-direction:row-reverse;} /* -------- Corporate Profile Top :: Left -------- */ .company-number-container{width:920px;} /* Title */ .company-number-tit-con {margin-bottom:3.06em;} .company-number-tit-con p{color:#aaa; font-size:1.33em; line-height:1.6; font-weight:300; margin-top:1em;} /* Number */ .company-number-con{display:flex; margin-bottom:3.6em; } .company-number-con dl{opacity:0;} .company-number-con dl:nth-child(1){width:220px;} .company-number-con dl:nth-child(2){width:185px;} .company-number-con dl:nth-child(3){width:220px;} .company-number-con dd{position:relative; font-size:4em; color:#92d050; letter-spacing:-0.08333em; margin-left:-3px;} .company-number-con dd sup{position:absolute; top:-15px; margin-left:5px; font-weight:500;} .company-number-con dt{color:#252525; font-size:1.3333em; letter-spacing:-0.025em; margin-top:1em;} /* License */ .company-license-con ul{} .company-license-con li{display:table; width:100%; border-bottom:1px solid #ebebeb; font-size:1.3333em; letter-spacing:-0.025em; color:#999; font-weight:300; opacity:0;} .company-license-con li:first-child{border-top:1px solid #ebebeb;} .company-license-con li dl {display:table-row; } .company-license-con li dl dd{display:table-cell; vertical-align:middle; width:110px; padding:0.6666em 0; padding-left:10px; color:#ff8500;font-weight:700;} .company-license-con li dl dt{display:table-cell; vertical-align:middle; color:#999; } /* -------- Corporate Profile Top :: Diagram -------- */ /* Diagram :: Layout */ .company-image-container{position:relative; width:454px; } .company-image-container .corpor-diagram-svg{} .company-image-container .corpor-diagram-svg * { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: all 5s ease; } .company-image-container .corpor-diagram-svg svg{width:100%; height:100%;} .animated.company-image-container .corpor-diagram-svg *{ stroke-dashoffset: 0; } /* Diagram :: Icon */ .corporate-diagram-icons li{position:absolute; border-radius:50%; width:98px; height:98px; } .corporate-diagram-icons li .icon{display:block; /* width:64px; */ width:57.6px; height:100%; margin:3px auto 0} .corporate-diagram-icons li .icon svg{width:100%; height:100%; display:none;} .corporate-diagram-icons li .icon svg *{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px; stroke:url(#linear-gradient);} .corporate-diagram-icons li.diagram-icon2 .icon svg *{stroke-width:2.2px} .corporate-diagram-icons li.diagram-icon3 .icon svg *, .corporate-diagram-icons li.diagram-icon4 .icon svg *{stroke-width:2.8px} .corporate-diagram-icons .diagram-icon1{/* top:4.8979vw; left:13.1021vw; width:5.8693vw; height:5.8693vw; */ left:177px; top:37px; } .corporate-diagram-icons .diagram-icon2{left:2px; top:135px; } .corporate-diagram-icons .diagram-icon3{left:2px; top:339px; } .corporate-diagram-icons .diagram-icon4{left:177px; top:442px; } .corporate-diagram-icons .diagram-icon5{right:2px; top:339px; } .corporate-diagram-icons .diagram-icon6{right:2px; top:135px; } .corporate-diagram-icons li .icon svg * { stroke-dasharray: 400; stroke-dashoffset: 400; transition: all 0s ease; } .animated .corporate-diagram-icons li .icon svg *{ stroke-dashoffset: 0; transition: all 10s ease 0.4s; } /* Diagram :: Logo */ .corporate-diagram-center-logo{position:absolute; top:50%; left:50%; width:202px; height:202px; transform:translate(-50%,-50%) scale(0); transition:all 1s 0.5s; border-radius:50%; } .animated .corporate-diagram-center-logo{transform:translate(-50%,-50%) scale(1); } .corporate-diagram-center-logo .logo{position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:Center; background: #92d050; border-radius:50%;} .corporate-diagram-center-logo .logo svg{width:64%} .corporate-diagram-center-logo .logo svg *{fill:#fff;} .company-diagram-img-con{display:none;} .ie-browser .company-diagram-con{display:none;} .ie-browser .company-diagram-img-con{display:block;} /* ****************** ABOUT :: Corporate Profile :: Intro ********************** */ #corporateIntroContent{height:100%;} .corporate-intro-container{display:flex; height:100%;} /* Intro :: 좌측 */ .intro-left-photo-con{overflow:hidden; width:42%; } .intro-left-photo-con .photo-img{width:100%; height:100%; display:block; background:url(/images/content/corporate_intro_left_img.jpg) no-repeat 50% 50%; background-size:cover; transform:scale(1.1); transition:opacity 0.8s ease, transform 1s ease-in-out 0.3s; opacity:0;} .animated .intro-left-photo-con .photo-img{transform:scale(1); opacity:1;} /* Intro :: 우측 */ .intro-right-txt-con{overflow:hidden;display:flex; align-items:center; position:relative; width:58%; background-color:#f8f8f8; box-sizing:border-box; /* padding:120px 88px */ padding:0 88px; } .intro-right-txt-con .intro-bg{position:absolute; width:377px; height:641px; opacity:0.8; background:url(/images/content/company_intro_bg_object.png) no-repeat} .intro-right-txt-con .intro-right-txt-bg1{top:-382px; right:7px; } .intro-right-txt-con .intro-right-txt-bg2{top:-257px; right:-214px; } .intro-right-txt-con .intro-left-txt-bg1{bottom:-63px; left:-168px; } .intro-right-txt-con .intro-left-txt-bg2{bottom:-289px; left:-131px; } /* .intro-right-txt-con:before{position:absolute; left:0px; bottom:0px; width:245px; height:581px; background:url(/images/content/corporate_intro_bottom_bg.jpg) no-repeat; content:"";} .intro-right-txt-con:after{position:absolute; right:0px; top:0px; width:311px; height:385px; background:url(/images/content/corporate_intro_top_bg.jpg) no-repeat; content:"";} */ .intro-right-txt-con .intro-right-txt-inner-con{position:relative; z-index:1; /* width:630px; */ width:775px; } .intro-right-txt-con .intro-right-txt-inner-con .intro-right-tit{margin-bottom:0.39em;} .intro-right-txt-con .intro-right-txt-inner-con .intro-right-txt{color:#252525; font-size:1.3333em; line-height:1.6; font-weight:300; margin-top:0.65em} .intro-right-txt-con .intro-right-txt-inner-con .green-txt{color:#6fb639; font-size:1.6em; font-weight:300; letter-spacing:-0.0125em; line-height:1.4; font-weight:400;} /* ****************** ABOUT :: Corporate Profile :: Global ********************** */ #corporateGlobalContent{overflow:hidden; position:relative; box-sizing:border-box; height:100%; background-color:#ecf4e7; padding-top:143px} #corporateGlobalContent .corporate-tit-con{position:relative; z-index:2;} .corporate-tit-con p{color:#aaa; font-size:1.33em; line-height:1.6; font-weight:300; margin-top:1em;} /* Global :: 맵 */ .corporate-map-container{/* position:relative; */ position:absolute; left:0; right:0; bottom:0; padding:70px 25px 200px; box-sizing:border-box} .corporate-map-container:before{position:absolute; top:0px; left:50%; top:0; width:200vw; height:200vh; transform:translateX(-50%); background-color:#fff; content:""; border-radius:50%;} .corporate-map-inner-con{position:relative;} .corporate-map-inner-con svg{position:relative; overflow:visible; padding:5.8vw 0 4vw} .corporate-map-inner-con .corporate-map-bg{position:absolute; top:0px; left:0px; width:100%; height:100%; background:url(/images/content/corporate_global_map_img.svg) no-repeat; background-size:100% auto; } /* Global :: 퍼지는영역 */ .nation-circle{position:absolute; left:36.8667vw; top:8.7417vw; display:inline-block; width:8.3333vw; height:1.8229vw; } .nation-circle > span { background-color:rgb(54 179 74 / 30%); border-radius: 50%; position: absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height: 100%; -webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite both; animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite both; } .nation-circle > span:nth-child(2) {-webkit-animation-delay: 1s; animation-delay: 1s; } .nation-circle > span:nth-child(3) {-webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .nation-circle > span:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s; } .nation-circle > span:nth-child(5) {-webkit-animation-delay: 2.5s; animation-delay: 2.5s; } @keyframes nation-circle { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.5; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* Global :: 리스트 */ .corporate-global-list-warpper{position:absolute; left:50%; right:120px; bottom:80px; z-index:2; } .corporate-global-list-inner{box-sizing:border-box; display:flex; justify-content:space-between;} .corporate-global-item{} .corporate-global-item .corporate-global-tit{font-size:2.048em; color:#ff9937; letter-spacing:-.01em; font-weight:700; margin-top:2em; margin-bottom:0.2em} .corporate-global-item .corporate-global-tit:first-of-type{margin-top:0} .corporate-global-item ul{margin-left:5px; } .corporate-global-item ul li {line-height:1.15; } .corporate-global-item ul li .global-over-btn {display:inline-block; position:relative; cursor:pointer; color:#252525; font-size:1.333em; padding:0.25em 0; font-weight:300; transition:all 0.3s; } .corporate-global-item ul li .global-over-btn:before{position:absolute; bottom:0px; left:0px; width:100%; height:3px; background-color:#36b34a; content:""; transition:all 0.3s; transform-origin:0 0; transform:scaleX(0);} .corporate-global-item ul li .hq-mark{position:relative; top:-1px; font-size:0.7em; padding:2px 3px; background-color:#36b34a; color:#fff; font-weight:400;} .corporate-global-item ul li .global-over-btn:hover, .corporate-global-item ul li .global-over-btn.over{color:#36b34a} .corporate-global-item ul li .global-over-btn:hover:before, .corporate-global-item ul li .global-over-btn.over:before{transform:scaleX(1); opacity:1; } body:not(.ie-browser) .corporate-map-inner-con .temp{display:none;} body.ie-browser .corporate-map-container{padding:70px 0 0 0} body.ie-browser .corporate-map-container:before, body.ie-browser .corporate-map-inner-con .corporate-map-bg{display:none;} body.ie-browser .corporate-map-inner-con{} body.ie-browser .corporate-map-inner-con svg{display:none;} body.ie-browser .corporate-map-inner-con .temp{display:block; position:relative; /* left:50%; margin-left:-950px; */ padding-bottom:150px; background-color:#fff;} body.ie-browser .corporate-map-inner-con .temp{max-width:100%;} /* ****************** ABOUT :: Corporate Profile :: Value ********************** */ #corporateValueContent{overflow:hidden; position:relative; overflow:hidden; } .corporate-value-container{position:relative; z-index:1;} /* Value :: 원형 텍스트 */ .corporate-circle-txt-con{position:absolute; top:0px; right:0px; width:749px; height:749px; transform:translate(192px, -334px)} .circle-big-txt-box, .circle-small-txt-box{position:absolute; top:0; left:0; transform:scale(1.2); transition:all 2s 0.5s } .animated .circle-big-txt-box, .animated .circle-small-txt-box{transform:scale(1.0)} .circle-small-txt-box .small-txt-img{display:block; /* animation: spin 20s linear infinite; */ border-radius:50%;} .circle-big-txt-box img, .circle-small-txt-box img, .circle-small-txt-box:before{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .animated .circle-big-txt-box img{display:block; animation: rotate 60s linear infinite; animation-delay:1.5s} .animated .circle-small-txt-box img{display:block; animation: rotate_reverse 30s linear infinite; animation-delay:1.5s} @keyframes rotate { to { transform: rotate(360deg) } } @keyframes rotate_reverse { to { transform: rotate(-360deg) } } /* Value :: 타이틀 */ .value-tit .mark{position:relative; } .value-tit .mark:after{position:absolute; bottom:0px; height:30px; left:0; right:0; background-color:#def1ca; content:""; transition:transform .8s ease 0.2s; transform:scaleX(0); transform-origin:0 0} .value-tit.animated .mark:after{transform:scaleX(1)} .value-tit .mark em{position:relative; z-index:1; font-weight:inherit;} .value-sub-tit{color:#aaa; font-size:1.33em; line-height:1.6; font-weight:300; margin-top:1em;} /* Value :: 리스트 */ .coporate-value-list-con{display:flex; margin-top:8.6em;} .coporate-value-list-con li{width:25%; opacity:0;} .coporate-value-list-con li .icon{display:block; width:80px; height:74px} .coporate-value-list-con .icon * { stroke-dasharray: 400; stroke-dashoffset: 400; transition: all 0s ease 0s; } .coporate-value-list-con .icon svg{width:100%; height:100%; /* display:none; */} .coporate-value-list-con .icon svg g *{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px; stroke:url(#linear-gradient);} .animated.coporate-value-list-con .icon *{ stroke-dashoffset: 0; transition: all 10s ease 0.4s; } .coporate-value-list-con li .value-term-con dt{color:#252525; font-size:2em; font-weight:700; letter-spacing:-0.3px; margin:1em 0 0.7em} .coporate-value-list-con li .value-term-con dd{color:#888; font-weight:300; font-size:1.33em; line-height:1.6} /* ****************** ABOUT :: Corporate Profile :: Ranking(2022-04-26 추가) ********************** */ .wheel-corporate-raking-container{background-color:#f7f7f7} .corporate-ranking-tit-txt{color:#aaa; font-size:1.33em; line-height:1.6; font-weight:300; margin-top:1em;} .global-ranking-list-con{display:flex; margin-top:3rem;} .global-ranking-list-con:first-of-type{margin-top:3rem} .global-ranking-list-con dt{width:220px; padding-right:50px;} .global-ranking-list-con dt span{position:relative; display:block; width:100%; height:0; padding-top:100%; background-color:#fff;} .global-ranking-list-con dd{width:calc(100% - 270px); } .global-ranking-list{margin:0 -15px;} .global-ranking-list li{float:left; width:calc(33.33% - 30px); margin:0 15px; } .global-ranking-list li .global-ranking-tit{display:block; color:#252525; font-size:1.8em; font-weight:700; letter-spacing:-0.3px; margin-bottom:0.5em; padding-bottom:0.3em; border-bottom:1px solid #c5c5c5; margin-right:30px} .global-ranking-list li .global-ranking-tit small{color:#888; font-weight:300; font-size:12px; margin-left:0.5em;} .global-ranking-list li .global-ranking-img{position:relative;} .global-ranking-list li .global-ranking-img img{max-width:100%} .global-ranking-list li .global-ranking-num{position:absolute; bottom:-2px; right:20px; font-size:15px; color:#ff8400} .global-ranking-list li .global-ranking-num em{font-size:48px; font-weight:700;} /* ****************** ABOUT :: Corporate Profile :: History ********************** */ #corporateHistoryContent{background-color:#f7f7f7} .history-wrapper{display:flex; justify-content:space-between;} /* History :: Tab */ .history-tab-con{width:200px; position:sticky; top:100px; height: 250px;} .history-tab-con .history-con-tit{margin-bottom:1.09em;} .history-tab-con .history-select-year-con ul li{margin-top:10px;} .history-tab-con .history-select-year-con ul li:first-child{margin-top:0;} .history-tab-con .history-select-year-con ul li a{display:flex; height:50px; border:1px solid #ebebeb; justify-content:center; align-items:center; color:rgba(37,37,37,0.3); font-size:1.33em; border-radius:30px; transition:all 0.3s} .history-tab-con .history-select-year-con ul li a:hover{border-color:#92d050; color:#92d050; } .history-tab-con .history-select-year-con ul li.selected a{background-color:#92d050; border-color:#92d050; color:#fff;} /* History :: Content */ .history-content-wrapper {width:calc(100% - 360px);} .history-content-year-item{margin-top:3.33em;} .history-content-year-item:first-child{margin-top:0;} .history-content-year-item .history-year{font-size:3.2em; color:#92d050; font-weight:700; letter-spacing:-0.0444em; margin-bottom:0.4em} .history-content-year-item .history-list-con li{border-bottom:1px solid #ccc; color:#252525; font-size:1.3333em; line-height:1.2; padding:0.9em 0; } .history-content-year-item .history-list-con li:first-child{border-top:1px solid #ccc;} /* ======================================================== * ABOUT :: 리더십 ======================================================== */ /* ****************** ABOUT :: 리더십 리스트 ********************** */ #leadershipContent{padding:80px 0 100px; background-color:#f7f7f7} /* -------- 리더십 :: 배너영역 -------- */ #leadershipBannerCon{/* height:400px; */ height:200px; display:flex; align-items:center; position:relative; box-sizing:border-box; padding:0 4.6875vw; margin-bottom:60px} #leadershipBannerCon:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#92d050; content:""; transition:transform 1s; transform-origin:0 0; transform:scaleX(0); } #leadershipBannerCon .leadership-banner-txt{position:relative; z-index:1; color:#fff; font-size:2.66em; letter-spacing:-0.25px; line-height:1.35; font-weight:600; } #leadershipBannerCon .leadership-banner-img{position:absolute; bottom:0px; right:0px; width:100%; height:100%; background:url(/images/content/leadership_top_banner_img.png) no-repeat 100% 100%; opacity:0; transition:all 0.8s ease 0.3s} #leadershipBannerCon.animated:before{ transform:scaleX(1)} #leadershipBannerCon.animated .leadership-banner-img{opacity:1.0; transition-delay:0.7s;} /* -------- 리더십 :: 임원진리스트 -------- */ #leadershipListCon{} .executive-list-container .executive-list-con{/* overflow:hidden; */ margin:0 -6.5px} .executive-item{float:left; width:calc(16.666% - 13px); margin:0 6.5px 29px; box-sizing:border-box; } .executive-item:first-child{z-index:1;} .executive-item .executive-item-inner{display:block; background-color:#f7f7f7; transition:all 0.3s ease-in-out} .executive-item .executive-item-thumb{position:relative; height:0; padding-top:147.82%; background-color:#fff; transition:all 0.3s ease-in-out} .executive-item .executive-item-thumb.no-thumb{background:#fff url(/images/content/excutive_no_thumb.png) no-repeat 50% 100%; background-size:100% auto} .executive-item .executive-item-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; filter: grayscale(100%); object-fit:cover; transition:all .65s ease-in-out; opacity:0.7; } .executive-item .excutive-info-con{padding-top:1.33em; } .executive-item .excutive-info-con .excutive-name{color:#252525; font-size:1.33em; margin-bottom:0.5em; line-height:1.1; font-weight:500; letter-spacing:-0.4px;} .executive-item .excutive-info-con .excutive-team{min-height:2.76em; color:#999; letter-spacing:-0.25px; font-size:0.866em; line-height:1.38em; } .executive-item .executive-item-inner:hover{transform:translate(0, -5px); } .executive-item .executive-item-inner:hover .executive-item-thumb{box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.28);} .executive-item .executive-item-inner:hover .executive-item-thumb img{filter:grayscale(0); opacity:1.0;} /* ****************** ABOUT :: 리더십 뷰 ********************** */ #leadershipViewContainer{position:relative; max-width:1440px; margin:50px auto; max-height:calc(100vh - 100px); padding-right:5.2083vw; box-sizing:border-box; font-size:15px; background-color:#fff;} .leadership-view-container{box-sizing:border-box; height:100%; padding:3.125vw; } .leadership-view-inner-container{position:relative; display:flex; height:calc(100vh - 100px - 6.25vw); background-color:#fff; overflow-y:auto; overflow-x:hidden; } .leadership-view-inner-container::-webkit-scrollbar{width: 5px;} .leadership-view-inner-container::-webkit-scrollbar-thumb{background-color:#333;border-radius:5px;transition:all 0.5s;} .leadership-view-inner-container::-webkit-scrollbar-track{background-color:#eee; border-radius:5px;} /* -------- 임원진 :: 사진 -------- */ .excutive-left-photo-con{/* width:460px; width:38%; */ margin-right:3.125vw; position:sticky; height:100%; top:0; transition:width 0.3s} .excutive-left-photo-con .photo-thumb{/* position:relative; display:block; height:0; padding-top:147.82%; */ } .excutive-left-photo-con .photo-thumb img{/* position:absolute; top:0px; left:0px; */ max-width:100%; max-height:100%;} /* -------- 임원진 :: 상세 -------- */ .excutive-right-info-con{width:calc(100% - 38% - 3.125vw); padding-top:1.925vw; padding-right:1.925vw; color:#252525; transition:width 0.3s} .excutive-right-info-con .name{font-size:2.666em; letter-spacing:-1px; margin-bottom:0.5em; font-weight:600;} .excutive-right-info-con .team{font-size:1.333em; letter-spacing:-0.25px; font-weight:300;} .excutive-right-info-con .excutive-name-con{margin-bottom:58px;} /* 임원진 :: 상세 :: 스펙 */ .excutive-spec-list-con .excutive-spec-item {margin-top:2em;} .excutive-spec-list-con .excutive-spec-item:first-child{margin-top:0;} .excutive-spec-list-con .excutive-spec-item h4{color:#92d050; font-size:1.2333em; font-weight:600; margin-bottom:1em;} .excutive-spec-list-con .excutive-spec-item li{font-size:1.2333em; color:#252525; font-weight:300; line-height:1.2; margin-top:0.66em; letter-spacing:-0.25px;} .excutive-spec-list-con .excutive-spec-item li:first-child{margin-top:0;} /* 임원진 :: 상세 :: 컨트롤바 */ .excutive-controls-bar{position:absolute; top:0px; right:0px; height:100%; width:5.2083vw; background-color:#f7f7f7;} .excutive-controls-bar a, .excutive-controls-bar button{display:block; width:5.2083vw; height:5.2083vw; text-align:center; line-height:5.2083vw; font-size:1.66vw; color:#252525; letter-spacing:-0.3px; transition:all 0.3s} .excutive-controls-bar a:not(.no-list):hover, .excutive-controls-bar button:hover{color:#92d050} .excutive-prev-next-btns{position:absolute; bottom:0px; left:0px; right:0px;} .excutive-prev-next-btns .no-list{color:#ccc; cursor:default;} /* ======================================================== * ABOUT :: News ======================================================== */ /* ****************** ABOUT :: News :: 리스트 ********************** */ #newsListContent{background-color:#f7f7f7; } /* -------- 뉴스 :: 헤드라인 -------- */ #newsHeadlineContent{margin-bottom:120px;} #newsHeadlineContent .cm-sub-con-tit{margin-bottom:1.25em; } .headline-list-con{position:relative;} .headline-list-con .news-headline-item{width:31.94%; } .headline-list-con .news-headline-item:first-child{/* margin-bottom:1.66%; */ margin-bottom:1.3%} .headline-list-con .large-headline-item{position:absolute; top:0px; right:0px; height:100%; width:65.97%; } .headline-list-con .large-headline-item .news-tit{width:440px; } .headline-list-con .large-headline-item .news-date{bottom:auto; top:1.5625vw; right:1.5625vw; } /* -------- 뉴스 :: 리스트 :: 검색 -------- */ #newsSearchBox{position:relative; z-index:11; display:flex; justify-content:space-between; margin-bottom:50px; border-bottom:1px solid #e5e5e5; padding-bottom:49px;} /* 뉴스 :: 검색 :: 왼 */ .news-search-left-box{width:480px; } .news-search-select-con{display:flex; justify-content:space-between; margin-bottom:15px;} .news-search-select{width:46.8%; } /* 뉴스 :: 검색 :: 우 */ .news-search-right-box{width:calc(100% - 570px);} .news-recommend-box dt{color:#252525; font-size:1.33em; font-weight:700; margin-bottom:1.5em; } .recommend-keyword-list-con {margin:-5px;} .recommend-keyword-list-con li{float:left; margin:5px;} .recommend-keyword-list-con li a{display:block; display:flex; align-items:center; height:58px; /* border:1px solid #ebebeb; */ background-color:#ffe6cb; color:#252525; font-size:1.3333em; padding:0 0.95em; border-radius:30px; letter-spacing:-0.3px; transition:all 0.3s} .recommend-keyword-list-con li.selected a, .recommend-keyword-list-con li a:hover{background-color:#fff; border-color:#fff; } #news2depFilterCon{margin-bottom:50px;} #news2depFilterCon ul{display:none;} /* -------- 뉴스 :: 리스트(헤드라인공통) -------- */ .news-list-con{margin: 0 -7.5px;} .news-list-con * { box-sizing: border-box; } .news-list-con .news-list-item{ width:calc(33.33333% - 15px); margin:0 7.5px 15px; } .news-list-item a{display:block; position:relative; overflow:hidden; transition:all 0.3s ease-in-out; } .news-list-item .news-thumb-con{position:relative; overflow:hidden; /* padding-top:80%; */ padding-top:60%; height:0; background-color:#000; } .news-list-item .news-thumb-con.thumb-wrap{background-color:#000 !important;} .news-list-item .news-thumb-con.thumb-wrap:after{ position:absolute; top:0px; left:0; width:100%; height:100%; content:""; z-index:1; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); opacity:0.3; } .news-list-item .news-thumb-con img{ position:absolute; top:0px; left:0px; height:100%; width:100%; -webkit-transition: all .5s ease; transition: all .5s ease; opacity:0.5; object-fit:cover; } .news-list-item .news-info-con{position:absolute; top:0; left:0; width:100%; height:100%; padding:1.5625vw; color:#fff; transition:all 0.3s ease-in-out; z-index:2; box-sizing:border-box;} .news-list-item .news-category{position:relative; display:block; font-size:0.86666em; font-weight:500; letter-spacing:-0.35px; margin-bottom:1.47em; padding-left:10px; text-transform:uppercase;} .news-list-item .news-category .bullet{position:absolute; top:4px; left:0px; width:4px; height:4px; background-color:#fff; content:""; border-radius:50%;} .news-list-item .news-category .nation-check{display:inline-block; position:relative; padding-left:15px; opacity:0.8; text-transform:capitalize; letter-spacing:-0.01em;} .news-list-item .news-category .nation-check:before{position:absolute; top:2px; left:7px; width:1px; bottom:2px; content:""; background-color:#fff; opacity:0.8;} .news-list-item .news-tit{height:4.0em; font-size:2em; letter-spacing:-0.0133em; line-height:1.33; font-weight:500;} .news-list-item .news-date{position:absolute; bottom:1.5625vw; letter-spacing:-0.25px; } .news-list-item .list-more-plus-icon{position:absolute; right:1.6vw; bottom:0px; padding-top:1.76em; transform:translateY(100%); transition:all 0.5s;} .news-list-item .list-more-plus-icon:before{display:block; width:5px; height:0px; background-color:#fff; content:""; transition:height 0.35s 0.1s} .news-list-item .list-more-plus-icon i{position:absolute; top:0px; left:50%; font-size:1.3em; margin-left:-0.5em; transition:all 0.5s; color:#fff;} /* hover */ .news-list-item a:hover{transform:translate(0, -5px); box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.28);} .news-list-item a:hover .news-thumb-con img{ transform:scale(1.05); -webkit-filter: blur(2px); filter: blur(2px); } .news-list-item a:hover .news-thumb-con:before{opacity:1.0; visibility:visible;} .news-list-item a:hover .list-more-plus-icon{transform:translateY(0)} .news-list-item a:hover .list-more-plus-icon:before{height:40px;} .news-list-item a:hover .list-more-plus-icon i{transform:rotate(180deg)} /* Bg */ /* .news-category-competition .news-thumb-con, .news-category-competition .news-category:before{background-color:#ffe345} .news-category-media .news-thumb-con, .news-category-media .news-category:before{background-color:#234785;} .news-category-awards .news-thumb-con, .news-category-awards .news-category:before{background-color:#ff8500} .news-category-contract .news-thumb-con, .news-category-contract .news-category:before{background-color:#92d050} .news-category-notice .news-thumb-con, .news-category-notice .news-category:before{background-color:#333333} */ /* No Thumb */ .no-thumb-item .news-category .bullet{background-color:#fff !important;} /* No Thumb :: black style */ .no-thumb-item .news-category .bullet{background-color:#fff !important;} .font-black-style.no-thumb-item .headline-info-con, .font-black-style.no-thumb-item .news-info-con, .font-black-style.no-thumb-item .list-more-plus-icon i{color:#252525} .font-black-style.no-thumb-item .news-category .bullet, .font-black-style.no-thumb-item .list-more-plus-icon:before{background-color:#252525 !important;} .font-black-style.no-thumb-item .news-category .nation-check:before{background-color:#000; opacity:0.5} /* -------- 관련 뉴스 -------- */ .related-news-list-con .news-list-con{margin:0} .related-news-list-con .news-list-con .news-list-item{margin:0; margin-right:12px;} .related-news-list-con .news-list-con .news-list-item .news-category{font-size:12px;} .related-news-list-con .news-list-con .news-list-item .news-tit{font-size:1.333em;} .related-news-list-con .news-list-con .news-list-item .news-date{font-size:12px;} .related-news-list-con .news-list-item .news-thumb-con .swiper-lazy{opacity:0; } .related-news-list-con .news-list-item .news-thumb-con .swiper-lazy-loaded{opacity:0.7;} @media all and (min-width:1921px){ .news-list-item .news-info-con, .news-headline-item .headline-info-con{padding:30px;} .news-list-item .list-more-plus-icon{right:30px;} .news-headline-item a:hover .headline-info-con{padding-left:50px; padding-right:10px;} } /* ****************** ABOUT :: News :: Detail ********************** */ /* -------- News Detail :: Contents -------- */ #newsDetailContent{position:relative;} /* News Detail :: 상단 */ .board-detail-tit-wrapper{/* position:fixed; top:0px; left:0px;*/ width:100%; height:100vh; box-sizing:border-box; } .board-detail-tit-wrapper .cm-scroll-icon{bottom:auto; top:100vh; transform:translateY(-100%)} .board-detail-tit-wrapper .scroll-down-txt-box{position:absolute; left:0; right:0; top:95vh; transform:translateY(-100%); opacity:0; text-align:center;} .board-detail-tit-wrapper .scroll-down-txt-box .scroll-down-txt{margin-right:-5px} .board-detail-tit-wrapper .news-detail-scroll-icon{overflow:hidden; display:block; position:relative; background-color:#fff; width:60px; height:60px; margin:10px auto 0; border-radius:50%;} .board-detail-tit-wrapper .news-detail-scroll-icon .cm-list-more-btn-inner{width:100%; height:100%;} .board-detail-tit-wrapper .news-detail-scroll-icon .cm-list-more-btn-icon{font-size:1em;} .board-detail-tit-wrapper .news-detail-scroll-icon .cm-list-more-btn-icon i{} .news-detail-tit-con{position:relative; padding-top:250px;} .news-detail-tit-inner-con{position:relative; border-bottom:1px solid #000; opacity:0; /* max-width:1200px; */ padding-bottom:3.2em} .news-detail-tit-inner-con .board-detail-tit{padding-right:230px;} .news-detail-sub-tit{color:#282828; font-size:1.333em; font-weight:300; line-height:1.6; margin:1.5em 0 0 0} /* News Detail :: 대표사진 */ .news-detail-photo-con{/* padding-top:100vh; */ position:relative; z-index:1; text-align:center; max-width:1200px; margin:0px auto; /* margin-bottom:95px */} .news-detail-photo-con .news-large-photo{/* min-height:658px */ position:relative; min-height:100vh; } .news-detail-photo-con .news-large-photo img{position:absolute; left:0; right:0; bottom:0; top:0; max-height:100%; max-width:100%; margin:auto; box-shadow:4px 3px 20px 0px rgb(0,0,0,0.25);} /* News Detail :: 상세 */ .news-detail-sepc-wrapper{padding-bottom:120px;} .news-detail-spec-con{padding:210px 0; /* background-color:#ffe344; */ color:#000; margin-top:-115px;} .news-detail-spec-con.font-black-style{color:#000;} .news-detail-spec-inner{max-width:1200px; margin:0px auto;} .news-detail-outline-box{display:flex; justify-content:space-between;} .news-detail-outline-box .news-detail-tit{width:480px; padding-right:5%; box-sizing:border-box; /* font-size:4.666em; font-weight:700; */ font-size: 2em; letter-spacing: -0.0133em; line-height: 1.33; font-weight: 500;} .news-detail-outline-box .news-detail-tit + .news-detail-outline-con{width:720px;} .outline-detail-list-con li{font-size:1.333em; margin-top:0.6em} .outline-detail-list-con li dl{display:flex; align-items:center; /* font-weight:300; */ line-height:1.55em} .outline-detail-list-con li dl dt{/* font-weight:500; margin-right:0.3em */} .outline-detail-list-con li dl dd, .outline-detail-list-con li dl dd *{font-size:20px !important; letter-spacing:0px !important;font-family:'Roboto','NanumSquare','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif !important;} /* News Detail :: 하단 */ .board-bottom-controls.board-notice-controls{margin-top:0; border-top:0; padding:75px 0;} /* IE Cross browsing */ body.ie-browser .news-detail-tit-inner-con{opacity:1.0;} body.ie-browser .outline-detail-list-con *{color:#000 !important;} /* -------- News Detail :: 하단 관련뉴스 -------- */ #newsRelatedCon{/* background-color:#f7f7f7; */ padding-top:0;} body.ie-browser #newsRelatedCon{background-color:#f7f7f7; padding-top:120px;} #newsRelatedCon .news-detail-related-tit{color:#92d050; font-size:2em; letter-spacing:-0.013em; font-weight:300; margin-bottom:1.43em;} .news-detail-related-list-container{position:relative;} .news-detail-related-list-container .related-news-list-con{padding-bottom:55px;} .related-news-list-con.swiper-container-horizontal > .swiper-scrollbar{left:0; right:0; width:auto; border-radius:0; background-color:#ddd;} .related-news-list-con .swiper-scrollbar-drag{background-color:#000; cursor:pointer;} /* arrow */ .related-news-detail-prev-btn, .related-news-detail-next-btn{position:absolute; top:50%; z-index:1; width:120px; color:#000; font-size:3.2em; margin-top:-1.5em; } .related-news-detail-prev-btn{left:-135px; text-align:left;} .related-news-detail-next-btn{right:-135px; text-align:right;} .related-news-detail-prev-btn.swiper-button-disabled, .related-news-detail-next-btn.swiper-button-disabled{color:#ccc} /* hover */ .related-news-detail-item a:hover .related-news-detail-info:before{transform:translateY(0%) skewY(0deg)} /* ======================================================== * ABOUT :: PR :: PR material ======================================================== */ /* ****************** ABOUT :: PR :: PR material ********************** */ /* -------- PR material :: 공통 -------- */ #materialContent{padding:80px 0 25px; } /* -------- 공통 :: Layout -------- */ .material-cm-container{display:flex; aling-items:center; justify-content:space-between;} /* Layout :: 왼쪽 탭 */ .material-cm-container .material-sub-tab{width:360px;} .material-cm-container .material-sub-tab li{margin-top:2.86em} .material-cm-container .material-sub-tab li:first-child{margin-top:0;} .material-cm-container .material-sub-tab li a{display:block; font-size:64px; ont-size:4.26666em; letter-spacing:-0.03125em; line-height:1.12em; font-weight:700; color:#eee; transition:color 0.5s} .material-cm-container .material-sub-tab li.selected a{color:#252525;} .material-cm-container .material-sub-tab li a:hover{color:#252525;} /* Layout :: 우측 영역 */ .material-detail-container{width:960px;} .material-detail-container .material-con-tit{display:none;} /* -------- PR material :: Brochure -------- */ #materialBrochureContent{margin-top:0px} .brochure-list-conatiner{position:relative; } .brochure-list-items{position:relative; padding-right:160px;} /* Brochure :: List */ .brochure-item{border-bottom:1px solid #e5e5e5; } .brochure-item:first-child{border-top:1px solid #e5e5e5} .brochure-item .brochure-inner-con{display:flex; align-items:center; justify-content:space-between; padding:2em 0} .brochure-item .brochure-inner-con .brochure-thumb-con{width:140px;} .brochure-item .brochure-inner-con .brochure-thumb-con .thumb{position:relative; height:0; display:block; padding-top:114.28%; } .brochure-item .brochure-inner-con .brochure-thumb-con .thumb.no-thumb{background:#92d050 url(/images/common/logo_w.png) no-repeat 50% 50%; background-size:55% auto} .brochure-item .brochure-inner-con .brochure-info-con{display:flex; align-items:center; justify-content:space-between; width:calc(100% - 40px - 140px);} .brochure-item .brochure-inner-con .brochure-info-con dl {width:calc(100% - 180px)} .brochure-item .brochure-inner-con .brochure-info-con dl dt{margin-bottom:1.73em;} .brochure-item .brochure-inner-con .brochure-info-con dl dt .tit{display:inline-block; vertical-align:middle; color:#92d050; font-size:1.5em; font-weight:600; letter-spacing:-0.5px;} .brochure-item .brochure-inner-con .brochure-info-con dl dt .lang{display:inline-block; vertical-align:middle; height:20px; line-height:20px; margin-left:1em; color:#fff; font-size:13px; letter-spacing:-0.2px; font-weight:600; background-color:#92d050; padding:0 9px; border-radius:20px;} .brochure-item .brochure-inner-con .brochure-info-con .brochure-detail-txt{font-size:1.33em; line-height:1.2; color:#252525; margin-bottom:1em;} .brochure-item .brochure-inner-con .brochure-info-con .brochure-detail-spec{color:#aaa; font-size:1em; letter-spacing:-0.2px;} .brochure-item .brochure-inner-con .brochure-info-con .brochure-download-btn{display:flex; align-items:center; justify-content:space-between; width:180px; height:50px; text-align:left; line-height:50px; background-color:#eee; border-radius:30px; padding:0 25px; font-size:1.06em; color:#222; transition:all 0.3s} .brochure-item .brochure-inner-con .brochure-info-con .brochure-download-btn:hover{background-color:#92d050; color:#fff} .brochure-item.en .brochure-inner-con .brochure-info-con .brochure-download-btn:hover{background-color:#92d050; color:#fff;} .brochure-item.en .brochure-inner-con .brochure-thumb-con .thumb.no-thumb{background-color:#ffc000; } .brochure-item.en .brochure-inner-con .brochure-info-con dl dt .tit{color:#ff8500;} .brochure-item.en .brochure-inner-con .brochure-info-con dl dt .lang{background-color:#ff8500} .brochure-item.en .brochure-inner-con .brochure-info-con .brochure-download-btn:hover{background-color:#ff8500;} /* Brochure :: 우측버튼 */ .brochure-list-conatiner .brochure-controls-btns{position:absolute; top:50%; right:0%; transform:translateY(-50%)} /* .brochure-list-conatiner .brochure-controls-btns button{display:block; width:100px; height:100px; border:1px solid #e5e5e5; color:#000; font-size:1.6em; border-radius:50%;} */ .brochure-list-conatiner .brochure-controls-btns .brochure-prev-btn{margin-bottom:10px;} /* -------- PR material :: Identity -------- */ #materialIdentityContent{background-color:#f9f9f9;} /* Logo Download */ .logo-download-btns{display:none;} .material-side-btns{margin-top:81px;} .material-side-btns a{display:block; max-width:270px; height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 1.25em; background-color:#252525; color:#fff; border-radius:30px; margin-top:10px; font-size:1.33em; letter-spacing:-0.01em; font-weight:300;} .material-side-btns a:first-child{margin-top:0;} .material-side-btns a i{font-size:1.1em; margin-left:0.7em} .material-side-btns a em{font-weight:300;} /* Logo Image Style */ .logo-img-con{height:220px; max-height:220px; height:20.3704vh; margin-bottom:1.33em; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; border:1px solid #e5e5e5; background:url(/images/content/material_identity_bg.jpg) repeat } .logo-img-con:last-child{height:230px; max-height:230px; height:24.54vh;} .logo-img-con .logo-min-margin-txt{color:#252525; letter-spacing:-0.15px; font-size:0.93333em; margin-top:1.4em; } .logo-img-wrapper{margin-bottom:4.333em;} .logo-img-wrapper img{width:100%;} /* Logo Color Style */ .logo-color-style-con{display:flex; margin-bottom:4.333em;} .logo-color-style-con li{height:112px; max-height:112px; height:10.3704vh; width:25%; border:1px solid #e5e5e5; background-color:#fff; margin-left:-1px; display:flex; align-items:center; justify-content:center; } .logo-color-style-con li:first-child{margin-left:0;} .logo-color-style-con li .logo-svg{display:block; width:157px; height:46px;} .logo-color-style-con .white-style-logo, .logo-color-style-con .color-style-logo{background-color:#231f20; border-color:#231f20} .logo-color-style-con .color-style-logo{border-left-color:#3c3839} .logo-color-style-con .black-style-logo svg{fill:#231f20;} .logo-color-style-con .gray-style-logo svg{fill:#9fa0a0;} .logo-color-style-con .white-style-logo svg{fill:#fff;} .logo-color-style-con .color-style-logo svg{fill:#fff;} .logo-color-style-con .color-style-logo svg .st0{fill:#59ca47} /* Logo Color System */ .logo-color-system-con{display:flex;} .logo-color-system-item{width:33.33%; display:flex;} .logo-color-system-item .color-icon{display:block; width:80px; height:80px; border-radius:50%; margin-right:20px;} .logo-color-system-detail{width:calc(100% - 80px - 30px);} .logo-color-system-detail dt{color:#252525; font-size:1.46em; font-weight:500; margin-bottom:0.72em; letter-spacing:-0.009em;} .logo-color-system-detail ul{display:flex; align-items:center; margin-top:0.66em} .logo-color-system-detail ul:first-child{margin-top:0;} .logo-color-system-detail ul .color-number{width:25%; color:#999; } .logo-color-system-detail ul .color-number strong{color:#252525; margin-right:0.3em} /* -------- PR material :: Brand Film -------- */ .brand-film-video-con{position:relative; height:0; padding-top:52.083%; box-shadow:0px 30px 40px 0px rgba(0, 0, 0, 0.1); margin-bottom:30px;} .brand-film-video-con iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;} .brand-film-etc-btn{display:flex; align-items:center; justify-content:flex-end;} .brand-film-etc-btn a{height:50px; display:flex; align-items:center; justify-content:center; padding:0 1em; background-color:#252525; color:#fff; border-radius:30px; margin-left:10px; font-size:1.33em; letter-spacing:-0.01em; font-weight:300;} .brand-film-etc-btn a:first-child{margin-left:0;} .brand-film-etc-btn a i{font-size:1.2em; margin-right:0.7em;} .brand-film-etc-btn a .txt{font-weight:300;} /* ======================================================== * ABOUT :: PR :: Newsletter ======================================================== */ /* ****************** ABOUT :: PR :: Newsletter ********************** */ #newsLetterContent{padding:80px 0; } /* -------- Newsletter :: 이달의 뉴스레터 -------- */ #thisMonthContent .cm-sub-con-tit{margin-bottom:1.25em; box-sizing:Border-box; padding-right:350px; } .this-month-container{position:relative; background-color:#f7f7f7; padding:100px 0;} .this-month-wrapper{position:relative;} /* 이달의 뉴스레터 :: 이달의 뉴스레터 썸네일 */ .this-month-newsletter-thumb{overflow:hidden; position:absolute; transform:translateY(-50%); margin-top:-100px; /* right:120px; */ right:50%; margin-right:-600px; width:300px;} .this-month-newsletter-thumb .newsletter-thumb{display:block; position:relative; height:0; padding-top:133.333%; background-color:#000;} .this-month-newsletter-thumb .newsletter-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0.8} .this-month-newsletter-thumb .newsletter-this-month{position:absolute; top:30px; left:30px; top:1.5625vw; left:1.5625vw; color:#fff;} .this-month-newsletter-thumb .newsletter-this-month .year, .this-month-newsletter-thumb .newsletter-this-month .month{display:block; font-weight:500;} .this-month-newsletter-thumb .newsletter-this-month .year{font-size:1.866em; margin-bottom:0.1em; } .this-month-newsletter-thumb .newsletter-this-month .month{font-size:3.733em; letter-spacing:-0.053em; } /* 이달의 뉴스레터 :; 이달의 뉴스레터 설명 */ .this-month-newsletter-detail-con{padding-right:350px} .this-month-newsletter-detail-con dl{display:flex; align-items:center;} .this-month-newsletter-detail-con dl dt{width:200px;} .this-month-newsletter-detail-con dl dd{width:calc(100% - 200px);} .this-month-newsletter-detail-con .newsletter-detail-txt{margin-bottom:1.8em;} .this-month-newsletter-detail-con .newsletter-detail-txt dt{width:200px;} .this-month-newsletter-detail-con .newsletter-detail-txt .month-year-tit, .this-month-newsletter-detail-con .newsletter-detail-txt .newsletter-vol-txt{display:block; color:#252525;} .this-month-newsletter-detail-con .newsletter-detail-txt .month-year-tit{font-size:2em; letter-spacing:-0.013em; font-weight:600; margin-bottom:0.5em;} .this-month-newsletter-detail-con .newsletter-detail-txt .newsletter-vol-txt{font-size:1.333em; letter-spacing:-0.006em; font-weight:300;} .this-month-newsletter-detail-con .newsletter-detail-txt dd{color:#888; font-size:1.3333em; line-height:1.6; font-weight:300;} .newsletter-view-detail-list dt{font-size:1.3333em; font-weight:600; letter-spacing:-0.2px; color:#92d050;} .newsletter-view-detail-list dt i{position:relative; top:2px; font-size:1.28em;} .newsletter-view-detail-list .this-month-newsletter-lang-list{margin:0 -5px;} .newsletter-view-detail-list .this-month-newsletter-lang-list li{float:left; margin:3px 5px } .newsletter-view-detail-list .this-month-newsletter-lang-list li a{display:block; display:flex; align-items:center; height:50px; border:1px solid #ebebeb; color:rgba(37,37,37,0.3); font-size:1.3333em; padding:0 1.1em; border-radius:30px; letter-spacing:-0.3px; transition:all 0.3s} .newsletter-view-detail-list .this-month-newsletter-lang-list li a:hover{background-color:#92d050; border-color:#92d050; color:#fff; } .newsletter-view-detail-list .this-month-newsletter-lang-list li a i{margin-right:0.5em; position:relative; top:1px;} /* -------- Newsletter :: 뉴스레터 Sort / Application 영역 -------- */ #newsletterSortBox{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; margin-bottom:60px;} .newsletter-sort-list-con{width:430px; position:relative; display:flex; justify-content:space-between;} .newsletter-sort-select{width:46.51%; } /* Newsletter :: 뉴스레터 Application 영역 */ .newsletter-application-con{/* width:800px; */} .newsletter-application-inner{display:flex; overflow:hidden; align-items:center; justify-content:space-between; height:50px; box-sizing:border-box; background-color:#f7f7f7; border-radius:50px;} .newsletter-application-inner .newsletter-tit{width:185px; padding-left:13px; font-size:1.333em; color:#92d050; box-sizing:Border-box;} .newsletter-application-inner .newsletter-tit i{display:inline-block; font-size:1.2em; vertical-align:middle; margin-right:0.375em; } .newsletter-application-inner .newsletter-tit em{display:inline-block; vertical-align:middle; font-weight:700; letter-spacing:-0.35px;} .newsletter-application-inner .newsletter-address{height:30px; width:calc(100% - 540px); border:0; background-color:transparent; color:#333; font-size:1.333em; letter-spacing:-0.0175em; font-weight:300;} .newsletter-application-inner .newsletter-address::placeholder{color:#aaa;} .newsletter-application-inner .application-agree-box{display:flex; align-items:center; justify-content:space-between; width:370px; background-color:#92d050; height:100%; box-sizing:border-box; padding:10px; padding-left:18px; border-radius:30px;} .newsletter-application-inner .application-agree-txt label{position:relative; color:#fff; font-size:1.2333em; letter-spacing:-0.35px; padding-left:30px;} .newsletter-application-inner .application-agree-txt label:before{position:absolute; top:1px; left:0px; content: "\e92c"; font-family:"xeicon"; font-size:1.21em; } .newsletter-application-inner .application-agree-txt input{display:none; position:absolute; top:0px; left:-9999px;} .newsletter-application-inner .application-agree-txt input:checked + label:before{content: "\e92b";} .newsletter-application-inner .application-agree-txt .view-privacy-btn{color:#fff; font-size:1.21em; margin-left:0.1em} .newsletter-application-inner .application-agree-txt .view-privacy-btn i{position:relative; top:1px;} .newsletter-application-inner .application-btn{background-color:#fff; width:160px; height:30px; color:#92d050; border-radius:30px; font-size:1.222em; font-weight:700; } .newsletter-list-application-con{float:right; } .newsletter-list-application-btn{display:flex; height:2.5em; justify-content:space-between; align-items:center; background-color:#92d050; color:#fff; border-radius:30px; font-size:1.3333em; font-weight:700; box-sizing:border-box; padding:0 1.75em 0 1.25em; border:2px solid #92d050;} .newsletter-list-application-btn i{position:relative; top:1px;} .newsletter-list-application-btn em{display:inline-block; letter-spacing:-0.0175em; margin-left:1.5em } .newsletter-list-application-btn:hover{background-color:#fff; color:#92d050} /* -------- Newsletter :: 뉴스레터 :: 리스트 영역 -------- */ .newsletter-list-con{margin:0 -30px;} .newsletter-list-item{float:left; width:calc(20% - 60px); margin:0 30px 60px;} .newsletter-list-item .newsletter-inner-box{transition:all 0.3s ease-in-out;} .newsletter-list-item .newsletter-thumb-con{position:relative; height:0; padding-top:133.33%;} .newsletter-list-item .newsletter-thumb-con .newsletter-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#000; } .newsletter-list-item .newsletter-thumb-con .newsletter-thumb img{opacity:0.8} .newsletter-list-item .newsletter-year-month{position:absolute; top:1.0417vw; left:1.0417vw; color:#fff; transition:all 0.3s; } .newsletter-list-item .newsletter-year-month .year{display:block; font-size:1.33em; font-weight:500; margin-bottom:0.4em;} .newsletter-list-item .newsletter-year-month .month{display:block; font-size:2.66em; font-weight:500;} .newsletter-list-item .newsletter-over-con{position:absolute; top:0px; left:0px; width:100%; height:100%; background:#000; text-align:center; background-color:rgba(0,0,0,0.8); color:#fff; box-sizing:border-box; padding:2.0833vw 0; opacity:0; visibility:hidden; transition:all 0.3s;} .newsletter-list-item .newsletter-over-con .newsletter-over-tit, .newsletter-list-item .newsletter-over-con .newsltter-view-list-con{transition:all 0.3s; transform:translateY(10px)} .newsletter-list-item .newsletter-over-con .newsletter-over-tit{font-weight:600; font-size: 0.933em; display:block; margin-bottom:1.42em;} .newsletter-list-item .newsletter-over-con .newsletter-over-tit i{display:block; font-size:1.42em; margin-bottom:0.4em;} .newsletter-list-item .newsletter-over-con .newsltter-view-list-con{max-width:130px; margin:0px auto;} .newsletter-list-item .newsletter-over-con .newsltter-view-list-con li{margin-bottom:5px;} .newsletter-list-item .newsletter-over-con .newsltter-view-list-con li a{display:block; text-align:center; justify-content:center; height:30px; display:flex; width:100%; align-items:center; box-sizing:border-box; border:1px solid rgba(255,255,255,0.15); border-radius:30px; color:rgba(255,255,255,0.8); font-weight:600; transition:all 0.3s} .newsletter-list-item .newsletter-over-con .newsltter-view-list-con li a:hover{background-color:#92d050; border-color:#92d050; color:#fff;} .newsletter-list-item .news-letter-info-con{display:flex; align-items:center; justify-content:space-between; margin-top:1em;} .newsletter-list-item .news-letter-info-con .newsletter-day{color:#000; letter-spacing:-0.3px; font-size:1.33em; font-weight:500; } .newsletter-list-item .news-letter-info-con .newsletter-vol{letter-spacing:-0.2px; font-size:1.0666em;} .newsletter-list-item .news-letter-info-con .newsletter-pdf-download{height:30px; line-height:31px; border:1px solid #ebebeb; color:rgba(37,37,37,0.3); font-size:1em; padding:0 1.1em; border-radius:30px; letter-spacing:-0.3px; transition:all 0.3s} .newsletter-list-item .news-letter-info-con .newsletter-pdf-download i{position:relative; top:1px; margin-right:0.2em} .newsletter-list-item .news-letter-info-con .newsletter-pdf-download:hover{background-color:#92d050; border-color:#92d050; color:#fff;} .newsletter-list-item:hover .newsletter-inner-box{transform:translate(0, -5px); } .newsletter-list-item:hover .newsletter-thumb-con{box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.28);} .newsletter-list-item:hover .newsletter-year-month{opacity:0;} .newsletter-list-item:hover .newsletter-over-con{opacity:1.0; visibility:visible; } .newsletter-list-item:hover .newsletter-over-con .newsletter-over-tit, .newsletter-list-item:hover .newsletter-over-con .newsltter-view-list-con{transform:translateY(0px)} /* ****************** ABOUT :: NEWSLETTER :: VIEW ********************** */ #newsletterViewContainer{position:relative; max-width:calc(900px + 8.2083vw ); margin:50px auto; max-height:calc(100vh - 100px); padding-right:5.2083vw; box-sizing:border-box; font-size:15px; background-color:#fff;} .newsletter-view-container{box-sizing:border-box; height:100%; } .newsletter-view-inner-container{position:relative; display:flex; height:calc(100vh - 100px - 6.25vw); background-color:#fff; overflow-y:auto; overflow-x:hidden; } .newsletter-view-inner-container::-webkit-scrollbar{width: 5px;} .newsletter-view-inner-container::-webkit-scrollbar-thumb{background-color:#333;border-radius:5px;transition:all 0.5s;} .newsletter-view-inner-container::-webkit-scrollbar-track{background-color:#eee; border-radius:5px;} .newsletter-view-inner-con{padding:1.5vw; color:#252525; } .newsletter-view-inner-con .newsletter-tit-con{display:flex; align-items:center; justify-content:space-between; margin-bottom:2em;} .newsletter-view-inner-con .name{font-size:2em; letter-spacing:-0.03em; margin-right:0.5em; line-height:1.2; font-weight:600;} .newsletter-view-inner-con .lang{display:inline-block; width:60px; text-align:center; font-size:1em; letter-spacing:-0.01em; color:#888; font-weight:400; padding:0.4em 0.7em 0.3em; border:1px solid #ebebeb; color:rgba(37,37,37,0.3); border-radius:30px; } .newsletter-view-inner-con .newsletter-html-con{padding-bottom:1.5vw;} .newsletter-view-inner-con img{max-width:100%;} /* ****************** ABOUT :: NEWSLETTER :: 구독신청 ********************** */ /* 뉴스레터 구독신청 :: 레이아웃,타이틀 */ .newsletter-aplicaiton-modal-con{position:relative; max-width:730px; font-size:20px; margin:50px auto;} .newsletter-aplicaiton-modal-con .newsletter-application-modal-inner{background-color:#fff; padding:5.2083vw; border-radius:20px;} .newsletter-aplicaiton-modal-con .modal-close-btn{color:#000; font-size:1.2em; top:2.0833vw; right:2.0833vw;} .newsletter-aplicaiton-modal-con .modal-close-btn:hover{color:#92d050; } .newsletter-aplicaiton-modal-con .modal-close-btn i{font-size:1em; color:inherit;} .news-letter-application-tit-con{text-align:center; margin-bottom:5em;} .news-letter-application-tit-con .category{color:#92d050; font-size:1em; } .news-letter-application-tit-con h1{color:#222; font-size:2.5em; letter-spacing:-0.01em; font-weight:900; margin:0.4em 0;} .news-letter-application-tit-con .applicate-tit-txt{color:#aaa; font-size:1em; } /* 뉴스레터 구독신청 :: 폼 */ .news-letter-application-form{margin-bottom:4em} .news-letter-application-form-item{position:relative; margin-top:1.5em;} .news-letter-application-form-item:first-child{margin-top:0;} .news-letter-application-form-item .application-form-input{height:56px; width:100%; border:0; border-bottom:2px solid #000; font-size:1em; color:#222;} .news-letter-application-form-item .custom-select-trigger{height:56px; border:0; border:0; border-bottom:2px solid #000; padding:0; font-size:1em; color:#222;} .news-letter-application-form-item .custom-select-trigger:after{font-size:1em;} .news-letter-application-form-item .custom-option-drop-list{border:2px solid #000; border-top:0;} .news-letter-application-form-item .custom-option-drop-list .custom-option-item{font-size:1em;} /* 뉴스레터 구독신청 :: 동의 */ .news-letter-application-agree-con{margin-bottom:3.25em} .news-letter-application-agree-con .agree-txt{font-size:1em; letter-spacing:-0.15px; color:#000; text-align:center;} .news-letter-application-agree-con .agree-txt label:before{font-family:"xeicon"; content:""; content: "\e92c"; position:relative; top:2px;margin-right:0.5em; font-size:1.1em;} .news-letter-application-agree-con .agree-txt input{position:absolute; top:0px; left:-9999px;} .news-letter-application-agree-con .agree-txt i{} .news-letter-application-agree-con .agree-txt .privacy-open-btn{font-size:1em; color:inherit; border-bottom:2px solid #000;} .news-letter-application-agree-con .agree-txt input:checked + label{color:#92d050} .news-letter-application-agree-con .agree-txt input:checked + label:before{content: "\e92b";} .news-letter-application-agree-con .agree-txt input:checked + label .privacy-open-btn{border-bottom-color:#92d050} .news-letter-application-agree-con .privacy-hiden-con{display:none; border:1px solid #000; height:100px; overflow-y:scroll; margin-top:1em; padding:0.5em; line-height:1.2; font-size:0.85em} /* 뉴스레터 구독신청 :: 버튼 */ .news-letter-application-subscribe-con{text-align:center;} .news-letter-application-subscribe-con .appliction-modal-btn{display:inline-block; width:280px; height:80px; line-height:80px; background-color:#92d050; border-radius:50px; border:1px solid #92d050; text-align:center; color:#fff; font-size:1em;} .news-letter-application-subscribe-con .appliction-modal-btn:hover{color:#92d050; } /* ======================================================== * ABOUT :: PR :: Social Hub ======================================================== */ /* ****************** ABOUT :: PR :: Social Hub ********************** */ #socialHubContent{padding:80px 0; } /* -------- PR :: Social Hub :: 공통 -------- */ /* SNS 아이콘 */ .social-hub-sns-icon{display:flex; align-items:flex-end; justify-content:center; position:absolute; top:0px; left:1.0417vw; width:2.666em; height:4.666em; line-height:3.066em; text-align:center; background:#000; border-radius:0 0 30px 30px} .social-hub-sns-icon.insta{ background: rgb(89,94,212); background: -moz-linear-gradient(top, rgba(89,94,212,1) 0%, rgba(187,46,159,1) 50%, rgba(248,158,92,1) 100%); background: -webkit-linear-gradient(top, rgba(89,94,212,1) 0%,rgba(187,46,159,1) 50%,rgba(248,158,92,1) 100%); background: linear-gradient(to bottom, rgba(89,94,212,1) 0%,rgba(187,46,159,1) 50%,rgba(248,158,92,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595ed4', endColorstr='#f89e5c',GradientType=0 ); } .social-hub-sns-icon.pinterest{background-color:#cd1f28;} .social-hub-sns-icon.youtube{background-color:#ff0000;} .social-hub-sns-icon i{font-size: 1.6em; letter-spacing:-0.5px; color:#fff;} /* -------- PR :: Social Hub :: Latest -------- */ #socialHubLatestContent{background-color:#f7f7f7; padding:60px 0;} /* Latest :: 상단 */ .social-hub-latest-tit-con{display:flex; align-items:center; justify-content:space-between; margin-bottom:50px;} .social-hub-sns-link li{float:left; margin-left:10px;} .social-hub-sns-link li:first-child{margin-left:0;} .social-hub-sns-link li a{display:block; height:50px; line-height:50px; color:#fff; font-size:1.33333em; font-weight:300; padding:0 1.25em 0 0.75em; border-radius:30px; transition:all 0.3s; box-sizing:border-box;} .social-hub-sns-link li a i{position:relative; top:3px; font-size:1.1em; margin-right:0.66em; } .social-hub-sns-link li a em{display:inline-block; position:relative; top:0px; transition:all 0.3s; font-weight:300; } .social-hub-sns-link li.instagram a{ background: rgb(89,94,212); background: -moz-linear-gradient(top, rgba(89,94,212,1) 0%, rgba(187,46,159,1) 51%, rgba(248,158,92,1) 100%); background: -webkit-linear-gradient(top, rgba(89,94,212,1) 0%,rgba(187,46,159,1) 51%,rgba(248,158,92,1) 100%); background: linear-gradient(to bottom, rgba(89,94,212,1) 0%,rgba(187,46,159,1) 51%,rgba(248,158,92,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595ed4', endColorstr='#f89e5c',GradientType=0 ); } .social-hub-sns-link li.youtube a{background-color:#ff0000;} .social-hub-sns-link li.pinterest a{background-color:#cd1f28;} /* -------- PR :: Social Hub :: Sort / Filter / Search 영역 -------- */ #socialHubListCon{/* overflow:hidden; */ margin:60px auto 0; padding-bottom:60px;} /* 그림자잘리는문제로 overflow-hidden 주석 */ #socialHubListSortCon{display:flex; align-items:center; justify-content:space-between; margin-bottom:60px;} .social-hub-sort-filter-con{display:flex; align-items:center; } /* Sort / Filter :: Filter */ .social-hub-filter-list .custom-check-item{margin-left:2em;} .social-hub-filter-list .custom-check-item:first-child{margin-left:0;} /* Sort / Filter :: Search */ .social-hub-search-con{width:480px;} /* -------- PR :: Social Hub :: List -------- */ .social-hub-list-con{margin:0 -10px;} .social-hub-list-con .social-hub-item{float:left; width:calc(25% - 20px); margin:0 10px 30px; } .social-hub-list-con .social-hub-item a{display:block; box-shadow: 4px 3px 15px 0px rgba(0, 0, 0, 0.1); transition:all 0.3s ease-in-out; } .social-hub-list-con .social-hub-item .social-hub-thumb-con{position:relative; overflow:hidden; } .social-hub-list-con .social-hub-item .social-hub-thumb-con .social-hub-thumb{display:block; position:relative; height:0; padding-top:100%; } .social-hub-list-con .social-hub-item .social-hub-thumb-con img{position:absolute; top:0px; left:0px; width:100%; height:100%;} .social-hub-list-con .social-hub-item .social-hub-info-con{padding:1.333em; background-color:#fff; box-sizing:border-box;} .social-hub-list-con .social-hub-item .social-hub-info-con .social-hub-tit, .social-hub-list-con .social-hub-item .social-hub-info-con .social-hub-txt{display:block; height:1.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1} .social-hub-list-con .social-hub-item .social-hub-info-con .social-hub-tit{color:#252525; font-size:1.6em; font-weight:500; /* margin-bottom:0.46em; */; display:none;} .social-hub-list-con .social-hub-item .social-hub-info-con .social-hub-txt{color:#888; font-size:1.333em; font-weight:300; /* margin-top:0.55em */} .social-hub-list-con .social-hub-item a:hover{transform:translate(0, -5px)} /* ======================================================== * ABOUT :: PR :: Culture ======================================================== */ /* ****************** ABOUT :: culture :: 리스트 ********************** */ /* -------- PR Culture :: 리스트 :: 검색 -------- */ #cultureSearchBox{position:relative; z-index:1; display:flex; border-bottom:1px solid #e5e5e5; margin:-40px 0 72px; padding-bottom:18px;} /* PR Culture :: 검색 :: 왼 */ .culture-search-select-con{display:flex; justify-content:space-between; width:480px; } .culture-search-select{width:46.8%; } /* PR Culture :: 검색 :: 우 */ .culture-search-input-con{width:calc(100% - 480px); margin-left:27px; max-width:480px;} /* -------- PR Culture :: 리스트 -------- */ .culture-list-con{margin:-7px;} .culture-list-con * { box-sizing: border-box; } .culture-list-con .culture-list-item{ width:calc(25% - 14px); margin:0 7px 14px; } .culture-list-item a{display:block; position:relative; overflow:hidden; transition:all 0.3s ease-in-out; } .culture-list-item .culture-thumb-con{position:relative; overflow:hidden; padding-top:80%; height:0; background-color:#000} .culture-list-item .culture-thumb-con:after{ position:absolute; top:0px; left:0; width:100%; height:100%; content:""; z-index:1; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); opacity:0.3; } .culture-list-item .culture-thumb-con img{ position:absolute; top:0px; left:0px; height:100%; width:100%; -webkit-transition: all .5s ease; transition: all .5s ease; opacity:0.8; } .culture-list-item a:hover .culture-thumb-con img{ transform:scale(1.05); -webkit-filter: blur(2px); filter: blur(2px); } .culture-list-item .culture-info-con{position:absolute; top:0px; left:0px; width:100%; height:100%; box-sizing:border-box; padding:1.5625vw; color:#fff; transition:all 0.3s ease-in-out; z-index:2;} .culture-list-item .culture-tit{height:4.0em; font-size:1.333em; letter-spacing:-0.4px; line-height:1.33; font-weight:500;} .culture-list-item .culture-date{position:absolute; bottom:1.5625vw; letter-spacing:-0.25px; font-size:12px; font-weight:500; line-height:1.4} .culture-list-item .list-more-plus-icon{position:absolute; right:1.6vw; bottom:0px; padding-top:1.76em; transform:translateY(100%); transition:all 0.5s;} .culture-list-item .list-more-plus-icon:before{display:block; width:5px; height:0px; background-color:#fff; content:""; transition:height 0.35s 0.1s} .culture-list-item .list-more-plus-icon i{position:absolute; top:0px; left:50%; font-size:1.3em; margin-left:-0.5em; transition:all 0.5s; color:#fff;} /* hover */ .culture-list-item a:hover{transform:translate(0, -5px); box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.28);} .culture-list-item a:hover .culture-thumb-con:before{opacity:1.0; visibility:visible;} .culture-list-item a:hover .list-more-plus-icon{transform:translateY(0)} .culture-list-item a:hover .list-more-plus-icon:before{height:40px;} .culture-list-item a:hover .list-more-plus-icon i{transform:rotate(180deg)} /* ======================================================== * ABOUT :: HR :: 채용정보 ======================================================== */ #recruitContent{padding:80px 0 172px;} .recruit-cm-tit{font-size:4em; font-weight:800; letter-spacing:-0.01em; word-spacing:-.016em; } /* -------- HR :: 채용정보 :: 3HR -------- */ #recruitHumanContent{display:flex; margin-top:-10px; margin-bottom:137px;} /* 3HR :: 왼쪽 */ .recruit-human-tit-con{width:500px} .recruit-human-tit-con .recruit-human-tit{color:#252525; line-height:1.4; margin-bottom:0.48em} .recruit-human-tit-con .recruit-human-tit .mark{display:inline-block; position:relative; } .recruit-human-tit-con .recruit-human-tit .mark:after{position:absolute; bottom:-3px; left:0px; width:100%; height:0.5em; background-color:#d4e8c3; content:""; z-index:-1} .recruit-human-tit-con .recruit-human-txt{font-size:1.3333em; letter-spacing:-0.2px; font-weight:400; line-height:1.6} .recruit-human-tit-con .recruit-human-txt span{display:block;} /* 3HR :: 오른쪽 */ .recruit-human-3HR-con{position:relative; width:calc(100% - 500px)} .recruit-human-3HR-con .human-3HR-bg{display:block; color:#000; font-size:20em; letter-spacing:-0.4px; opacity:0.1; font-weight:600; line-height:0.8;} .human-3HR-detail-item{display:flex; align-items:center;} .human-3HR-detail-item:first-child{margin-bottom:5em;} .human-3HR-detail-item .human-3HR-spelling{width:8.3333vw; font-size:12.5vw; font-weight:600; line-height:0.8; color:#92d050; } .human-3HR-detail-item .human-3HR-mean{width:400px; margin-left:4em;} .human-3HR-detail-item .human-3HR-mean li{margin-top:20px;} .human-3HR-detail-item .human-3HR-mean li:first-child{margin-top:0px;} .human-3HR-detail-item .human-3HR-mean li dl{display:flex; font-size:1.2em; line-height:1.1; letter-spacing:-0.2px; } .human-3HR-detail-item .human-3HR-mean li dl dt{width:100px; color:#92d050; font-weight:500;} .human-3HR-detail-item .human-3HR-mean li dl dd{width:calc(100% - 100px);} .human-3HR-detail-item.R-item .human-3HR-spelling, .human-3HR-detail-item.R-item .human-3HR-mean li dl dt{color:#ff8400;} /* -------- HR :: 채용정보 :: 희림 입사 과정 -------- */ #recruitProcessContent{position:relative; margin-bottom:160px; } /* 입사과정 :: 타이틀 및 지원버튼 */ .recruit-process-tit{color:#252525; font-size:3.2em; letter-spacing:-0.025em; font-weight:800; margin-bottom:0.79em;} .recruit-process-txt{font-size:1.3333em; letter-spacing:-0.01em; font-weight:300; line-height:1.6;} .recruit-inquiry-mail-con{position:absolute; top:0px; right:0px; text-align:right;} .recruit-inquiry-mail-con dt{color:#252525; font-size:1.33em; letter-spacing:-0.01em; margin-bottom:1.4em;} .recruit-inquiry-mail-con .recruit-inquiry-btn{display:inline-block; width:290px; height:60px; line-height:60px; background-color:#ff8400; border-radius:30px; border:1px solid #ff8400; text-align:center; color:#fff; font-size:1.333em;} .recruit-inquiry-mail-con .recruit-inquiry-btn:after{position:absolute; top:0px; right:30px; transform:translateX(-10px); opacity:0; font-family:"xeicon"; content: "\ea0b"; color:#ff8400; font-size:1.25em; transition:all 0.3s 0s} .recruit-inquiry-mail-con .recruit-inquiry-btn i{position:absolute; top:50%; left:30px; transform:translateY(-50%); font-size:1.25em; transition:all 0.3s} .recruit-inquiry-mail-con .recruit-inquiry-btn .mail{position:absolute; top:50%; right:30px; transform:translateY(-50%); transition:all 0.3s} .recruit-inquiry-mail-con .recruit-inquiry-btn:hover{color:#ff8400; } .recruit-inquiry-mail-con .recruit-inquiry-btn:hover:after{transform:translateX(0px); opacity:1.0; transition-delay:0.2s} .recruit-inquiry-mail-con .recruit-inquiry-btn:hover .mail{right:70px} .recruit-inquiry-mail-con .recruit-inquiry-btn:hover i{opacity:0;} /* 입사과정 :: 리스트 */ .recruit-process-list-con{display:flex; align-items:center; justify-content:space-between; margin-top:104px;} .recruit-process-list-con li{position:relative; width:16.66%;} .recruit-process-list-con li:before{position:absolute; top:50%; left:0; width:25%; margin-left:-25%; text-align:center; font-family:"xeicon"; content: "\e93e"; font-size:2em; color:#aaa; transform:translateY(-50%)} .recruit-process-list-con li:first-child:before{display:none;} .recruit-process-list-con li .recruit-process-inner{height:0; padding-top:100%; position:relative; background-color:#92d050; border-radius:50%;} .recruit-process-list-con li:nth-child(2) .recruit-process-inner{background-color:#5c9c2a} .recruit-process-list-con li:nth-child(3) .recruit-process-inner{background-color:#44781b} .recruit-process-list-con li:nth-child(4) .recruit-process-inner{background-color:#2f5e0c} .recruit-process-list-con li:nth-child(5) .recruit-process-inner{background-color:#1d4200} .recruit-process-list-con li .recruit-process-content{display:flex; align-items:center; justify-content:center; flex-direction: column; position:absolute; top:0px; left:0px; width:100%; height:100%;} .recruit-process-list-con li .recruit-process-icon{display:block; /* width:3.333em; height:3.333em; */ height:55px;} .recruit-process-list-con li .recruit-process-icon svg{width:100%; height:100%;} .recruit-process-list-con li .recruit-icon-group *{fill:none; stroke:#fff; stroke-miterlimit:10;stroke-width:3px;} .recruit-process-list-con li .recruit-process-content .recruit-process-mean{display:block; color:#fff; font-weight:700; font-size:1.46em; margin-top:1em;} /* -------- HR :: 채용정보 :: 게시판 영역 -------- */ /* 게시판영역 :: 상단 */ .recruit-board-top-container{position:relative; height:320px; margin-bottom:80px; } .recruit-board-top-container .recruit-board-top-bg{position:absolute; top:0px; left:0px; width:100%; height:100%; background:url(/images/content/recruit_top_bg.jpg) no-repeat 0% 50%; /*z-index:-1; */ transition:all 0.5s ease; width:0; } .recruit-board-tit-sort-box{padding-top:100px;} .recruit-board-tit-sort-box .recruit-board-tit{color:#252525; margin-bottom:0.66em;} .recruit-board-top-container .recruit-board-top-bg.animated{width:100%;} /* 게시판영역 :: 채용정보 게시판 */ .recruit-board-list{margin:0 -6.5px} .recruit-board-item{float:left; width:calc(25% - 13px); margin:0 6.5px 13px;} .recruit-board-item .recruit-board-inner{display:block; display:flex; height:275px; flex-direction:column; justify-content:space-between; border:1px solid #ebebeb; padding:2.0313vw 1.4583vw; letter-spacing:-0.25px; background-color:#fff; transition:all 0.3s ease-in-out; } .recruit-board-item .recruit-info-con{position:relative;} .recruit-board-item .recruit-info-con .recruit-type{display:block; font-size:1.2em; font-weight:400; color:#92d050; margin-bottom:1.38em;} .recruit-board-item .recruit-info-con .recruit-detail-con dt{color:#252525; font-size:1.6em; line-height:1em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; margin-bottom:0.79em; transition:all 0.3s} .recruit-board-item .recruit-info-con .recruit-detail-con dd{height:4.65em; color:#888; font-size:1.333em; line-height:1.55; } .recruit-board-item .recruit-info-con .recruit-dday{position:absolute; top:0px; right:0px; width:3.86em; height:2em; line-height:2em; text-align:center; background-color:#000; color:#fff; border-radius:50px; } .recruit-board-item .recruit-date-hash-con{color:#aaa;} .recruit-board-item .recruit-date-hash-con .recruit-date-term{margin-bottom:0.76em;} .recruit-board-item .recruit-date-hash-con .recruit-hash-txt .recruit-hash-item{display:inline-block; position:relative; margin:5px 2px; padding-left:9px;} .recruit-board-item .recruit-date-hash-con .recruit-hash-txt .recruit-hash-item:before{position:absolute; top:0px; left:0px; content:"#"; font-family:'NanumSquare','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;} .recruit-end-item .recruit-info-con .recruit-dday{background-color:#bbb;} .recruit-board-item .recruit-board-inner:hover{transform:translate(0, -5px); box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.08);} .recruit-board-item .recruit-board-inner:hover .recruit-info-con .recruit-detail-con dt{color:#92d050} @media all and (min-width:1025px){ .recruit-human-3HR-con .human-3HR-bg{font-size:41.667vw} .human-3HR-detail-con{position:absolute; top:50%; right:0px; transform:translateY(-50%); margin-top:-8px} } /* ======================================================== * ABOUT :: HR :: 사내문화&제도 ======================================================== */ #welfareContent{padding:80px 0 140px;} .welfare-cm-tit{color:#252525; font-size:4em; font-weight:800; letter-spacing:-0.01em; word-spacing:-.016em; line-height:1.4; margin-bottom:0.48em} .welfare-cm-tit-txt{font-size:1.333em; letter-spacing:-0.01em; font-weight:400; line-height:1.6; } .welfare-cm-tit-txt span{display:block;} /* -------- HR :: 사내문화&제도 :: 상단영역 -------- */ #welfareTopContent{margin-bottom:160px;} /* 상단영역 :: 타이틀 */ .welfare-top-tit-con .welfare-cm-tit-txt{margin-bottom:4.27em} /* 상단영역 :: 상세항목 */ .welfare-detail-list-con{display:flex; flex-wrap:wrap;} .welfare-detail-list-con .welfare-detail-item{width:50%; box-sizing:border-box; display:flex; border-bottom:1px solid #e5e5e5; box-sizing:border-box; padding:3.33em 2.4em;} .welfare-detail-list-con .welfare-detail-item .icon{display:block; box-sizing:Border-box; width:48px; height:48px;} .welfare-detail-list-con .welfare-detail-item dl{width:calc(100% - 48px - 2.4em); margin-left:2.4em;} .welfare-detail-list-con .welfare-detail-item dl dt{color:#252525; font-weight:700; font-size:2em; margin-bottom:0.83em;} .welfare-detail-list-con .welfare-detail-item dl dd{color:#666; font-size:1.3333em; letter-spacing:-0.25px; word-spacing:-0.5px; line-height:1.6;} .welfare-detail-list-con .welfare-detail-item .welfare-icon-group *{fill:none; stroke:#505050; stroke-miterlimit:10;stroke-width:3px;} .welfare-detail-list-con .welfare-detail-item .welfare-icon-group .stroke-green{stroke:#6fb638;} /* -------- HR :: 사내문화&제도 :: 직급체계 -------- */ #positionSystemContent{overflow:hidden; position:relative;} .position-system-container-bg{position:absolute; top:0; left:0; width:100%; height:100%; } .position-system-container-bg .bg-inner{width:100%; height:100%; background:url(/images/content/position_system_bg.jpg) no-repeat 0% 50%; width:0; transform-origin:0 0; transition:width 0.5s; } .animated .position-system-container-bg .bg-inner{width:100%;} .position-system-container{position:relative;} /* 직급체계 :: 타이틀영역 */ .position-system-tit-con{position:absolute; top:120px; left:0px; z-index:1;} .position-system-tit-con .welfare-cm-tit{color:#fff;} .position-system-tit-con .welfare-cm-tit-txt{color:#888;} /* 직급체계 :: 리스트 */ .position-system-list-con{overflow:hidden; padding:493px 0 287px;} .position-system-list-con ol{display:flex; } .position-system-list-con li{float:left; position:relative; width:20%; height:100%; text-align:center; } .position-system-list-con li .position-system-arrow{position:absolute; left:0; top:50%; width:60px; height:60px; border-radius:50%; font-size:2.4em; line-height:62px; color:#fff; border:1px solid rgba(255,255,255,0.2); transform:translate(-50%, -50%)} .position-system-list-con li .position-system-arrow:before{position:absolute; bottom:100%; left:50%; width:1px; top:-600px; background-color:rgba(255,255,255,0.12); content:"";} .position-system-list-con li .position-system-arrow:after{position:absolute; top:100%; left:50%; width:1px; bottom:-600px; background-color:rgba(255,255,255,0.12); content:"";} .position-system-list-con li .position-system-arrow i{position:relative; top:1px; left:1px;} .position-system-list-con li .position-name{color:#fff; font-size:2em; font-weight:700; letter-spacing:-0.25px;} /* -------- HR :: 사내문화&제도 :: 시스템제도 -------- */ #welfareSystemCotnent{margin:160px auto;} .welfare-system-container{display:flex; margin-bottom:120px; } .welfare-system-container:last-child{margin-bottom:0;} /* 시스템제도 :: 타이틀 */ .welfare-system-container .welfare-system-tit-con{width:480px} .welfare-system-container .welfare-system-tit-con .welfare-cm-tit{margin-bottom:0.25em} /* 시스템제도 :: 리스트 */ .welfare-system-list-con{width:calc(100% - 480px);} .welfare-system-list-con > ul{display:flex;} .welfare-system-list-con li{flex: 1;} .welfare-system-list-con li .welfare-system-inner{height:100%; border:1px solid #e5e5e5; border-left:0; padding:4em 3.33em; padding-right:1.5em; box-sizing:border-box;} .welfare-system-list-con li:first-child .welfare-system-inner{border-left:1px solid #e5e5e5} .welfare-system-list-con li .welfare-system-inner dl{letter-spacing:-0.25px;} .welfare-system-list-con li .welfare-system-inner dl dt{display:flex; align-items:center; justify-content:space-between; margin-bottom:2em;} .welfare-system-list-con li .welfare-system-inner dl dt .welfare-system-tit{color:#252525; font-size:2em; font-weight:700;} .welfare-system-list-con li .welfare-system-inner dl dt .welfare-system-icon{display:block; width:48px; height:48px; margin-right:1.7em } .welfare-system-list-con li .welfare-system-inner dl dt .welfare-icon-group *{fill:none; stroke:#505050; stroke-miterlimit:10;stroke-width:3px;} .welfare-system-list-con li .welfare-system-inner dl dt .welfare-icon-group .stroke-green{stroke:#6fb638;} .welfare-system-list-con li .welfare-system-inner dl dd{color:#888; font-size:1.3333em; line-height:1.6;} /* ======================================================== * ABOUT :: HR :: 이메일지원 ======================================================== */ #hrMailContent{padding:240px 0 370px; background-color:#f7f7f7; color:#222; font-size:2em; letter-spacing:-0.00833em; } .hr-mail-container p{line-height:1.6; margin-bottom:3em} .hr-mail-btn{display:inline-block; } .hr-mail-btn dl{display:flex; height:2.666em; padding:0 3em 0 1.16em; background-color:#fff; color:#222; border-radius:50px; justify-content:center; align-items:center; transition:all 0.3s} .hr-mail-btn dl dt{position:relative; width:127px; margin-right:40px;} .hr-mail-btn dl dt:after{position:absolute; left:100%; top:50%; transform:translateY(-50%); content:""; background-color:#e5e5e5; width:1px; height:40px;} .hr-mail-btn dl dd a{color:inherit;} .hr-mail-btn:hover dl{box-shadow:3px 3px 10px rgb(0 0 0 / 12%); background-color:#92d050; color:#fff; } /* ======================================================== * 프로젝트 리스트 ======================================================== */ .project-tit-con .project-cm-tit{overflow:hidden; font-size:2em; color:#252525; letter-spacing:-0.25px; line-height:1.1; text-transform:capitalize; margin-bottom:1em;} .project-tit-con .project-cm-tit .hidden-txt{display:inline-block; opacity:0;} /* ****************** 프로젝트 리스트 :: 상단 검색 및 필터 ********************** */ #projectFilterSortContent{/* font-size:15px; */ border-bottom:1px solid #e5e5e5; margin-top:-10px; } /* -------- 프로젝트 리스트 :: 검색영역 -------- */ #projectFilterContent{background-color:#f7f7f7; min-height:45px; padding:10px 30px;/* margin-bottom:40px; */ margin-top:40px; box-sizing:border-box;} /* 필터 :: 검색영역 :: Layout */ .project-filter-search-con{position:relative; display:flex; align-items:center;} .project-filter-tit{display:flex; flex:0 0 auto; align-items:center; position:relative; width:120px; line-height:40px; color:#252525; font-size:1.466em; } .project-filter-tit:after{position:absolute; top:5px; bottom:5px; right:0px; width:1px; background-color:#444; content:""; } .project-filter-tit i{position:relative; font-size:1.2em; margin-right:0.35em;} /* 필터 :: 검색영역 :: 체크 검색어 */ .project-filter-word-con{display:flex; align-items:center; width:calc(100% - 120px); box-sizing:border-box; padding:0 20px; flex:0 auto;} .project-filter-word-list{min-height:45px; margin:0 -5px;} .project-filter-word-list li{float:left; position:relative; margin:2.5px 5px} .project-filter-word-list li .filter-word-delete-btn{display:block; display:flex; align-items:center; justify-content:center; height:40px; color:#252525; font-size:1.2em; letter-spacing:-0.15px; padding:0 1em; background-color:#fff; border-radius:30px;} .project-filter-word-list li i{/* position:absolute; top:50%; right:5px; width:30px; transform:translateY(-50%); */ width:0.8em; font-size:1.5em; color:#252525; } .project-filter-word-list li .filter-word-delete-btn:hover i{color:#6fb638} /* 필터 :: 검색영역 :: 검색버튼영역 */ .project-word-search-box{position:relative; position:absolute; right:10px; top:10px; flex: 0 0 auto; overflow:hidden; width:300px; } .project-word-search-box .project-filter-search-btn{position:absolute; right:0px; margin-right:60px; color:#252525; font-size:1.6em;} .project-word-search-box .project-filter-reset-btn{color:#252525; font-size:1.6em; } .project-word-search-box .project-filter-reset-box{padding-left:0.7em; position:relative;} .project-word-search-box .project-filter-reset-box:before{position:absolute; top:5px; bottom:7px; width:1px; left:0.2em; background-color:#eee; content:"";} .project-word-search-box .project-filter-reset-box i{transition:all 0.3s ease} .project-word-search-box .project-filter-reset-box .project-filter-reset-btn:hover i{transform:rotate(270deg)} .project-word-search-inner{position:relative; display:flex; align-items:center; transition:all 0.3s cubic-bezier(0, 1.01, 1, 1); } .project-word-search-inner .project-word-search-close-btn{position:absolute; top:1px; right:100%; width:50px; height:50px; text-align:center; color:#333; font-size:2em;} .project-word-search-inner .project-word-search-input{border:0; background-color:#f7f7f7; border-radius:30px; height:50px; width:calc(100% - 30px); padding:0 1.5em; padding-right:3.5em; box-sizing:border-box; font-size:1.06em; margin-right:0.5em} .project-word-search-inner .project-word-search-input:focus{outline:none;} .project-word-search-box.open .project-filter-search-btn{opacity:0;} .project-word-search-box.open .project-word-search-inner{width:230px; opacity:1.0; visibility:visible; transition:all 0.8s ease-in-out;} /* -------- 프로젝트 리스트 :: 타입 선택 영역 -------- */ #projectTypeSortContent{position:relative;} /* 타입 선택영역 :: 타입 선택 탭 */ .project-type-select-con{position:relative; } .project-type-select-con:before{position:absolute; bottom:0px; left:0px; right:0px; height:1px; background-color:#e5e5e5; content:"";} .project-type-select-list li{float:left; margin-left:-1px;} .project-type-select-list li:first-child{margin-left:0;} .project-type-select-list li a{position:relative; display:block; box-sizing:border-box; width:230px; height:70px; text-align:center; line-height:70px; background-color:#f7f7f7; border:1px solid #e5e5e5; color:#bbb; font-size: 1.73333em; transition:all 0.3s } .project-type-select-list li a em{font-weight:500; letter-spacing:-0.5px;} .project-type-select-list li a i{position:relative; top:3px; font-size:1em; margin-right:0.375em;} .project-type-select-list li a:hover{color:#000; } .project-type-select-list li.selected a{background-color:#fff; color:#000; border-bottom-color:#fff;} /* 타입 선택영역 :: 마이북 버튼 */ .project-my-book-btn{/* position:absolute; top:0px; right:0px; */ display:inline-block; display:inline-flex; justify-content:center; align-items:center; width:150px; height:44px; line-height:44px; margin-left:22px; text-align:center; background-color:#252525; border-radius:30px; color:#ffe345; font-size:1.2em; letter-spacing:-0.25px; font-weight:500; transition:all 0.3s} .project-my-book-btn i{position:relative; font-size:1.33em; margin-right:0.5em;} .project-my-book-btn:hover{background-color:#ffe345; color:#252525;} .project-my-book-btn .num{display:inline-block; font-size:0.65em; width:16px; height:16px; line-height:16px; border-radius:50%; background-color:#ffe345; color:#252525; font-weight:700; margin-left:0.5em} /* 타입 선택영역 :: Location 선택 */ #projectLocationSortContent{margin-top:46px;} .project-location-sort-left-con{float:left; width:360px; } /* 타입 선택영역 :: Location 선택 :: 국내/해외선택 */ .project-location-dome-over-select-con{display:flex; margin-bottom:120px;} .project-location-dome-over-select-con .custom-check-item label{font-size:1.2333em; letter-spacing:0px;} .project-location-dome-over-select-con .custom-check-item label:before {top:-1px} .project-location-domestic-con{width:130px;} .project-location-domestic-con .custom-check-item{margin-bottom:2em} .project-oversea-list-con{margin-left:2em;} .project-oversea-list-con li{float:none; display:block; margin:1.26em 0 0 0} .project-oversea-list-con li:first-child{margin-top:0;} .project-oversea-list-con li label{font-size:0.866em;} /* 타입 선택영역 :: Location 선택 :: Map 버튼 */ .project-loctaion-map-buttons .location-banner-map-btns{display:flex; margin:0 -12.5px} .project-loctaion-map-buttons .location-banner-map-btns li{width:calc(50% - 25px); margin:0 12.5px} .project-loctaion-map-buttons .location-banner-map-btns li a{display:block; position:relative; padding-top:93.20%; height:0; background:#fff; box-shadow:4px 3px 15px 0px rgba(0, 0, 0, 0.1); transition:all 0.3s; border:3px solid #92d050; border-radius:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .project-loctaion-map-buttons .location-banner-map-btns li .loaction-banner-map-inner{position:absolute; top:0px; left:0px; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; } .project-loctaion-map-buttons .location-banner-map-btns li .icon{display:block; height:48px; width: 51px; margin-bottom:16%; background-repeat:no-repeat; } .project-loctaion-map-buttons .location-banner-map-btns li .design-map-btn .icon{background-image:url(/images/icon/project_design_map_icon_off.png)} .project-loctaion-map-buttons .location-banner-map-btns li .cm-map-btn .icon{background-image:url(/images/icon/project_cm_map_icon_off.png)} .project-loctaion-map-buttons .location-banner-map-btns li .map-img-tit{color:#252525; font-size:1.46em; font-weight:700;} .project-loctaion-map-buttons .location-banner-map-btns li a:hover{background-color:#9bd45e;} .project-loctaion-map-buttons .location-banner-map-btns li a.design-map-btn:hover .icon{background-image:url(/images/icon/project_design_map_icon_on.png)} .project-loctaion-map-buttons .location-banner-map-btns li a.cm-map-btn:hover .icon{background-image:url(/images/icon/project_cm_map_icon_on.png)} .project-loctaion-map-buttons .location-banner-map-btns li a:hover .map-img-tit{color:#fff;} /* 타입 선택영역 :: Location 선택 :: 지도영역 */ .project-loctaion-map-con{float:left; width:calc(100% - 360px); box-sizing:border-box; padding:0 50px 0 80px} .project-loctaion-map-con path, .project-loctaion-map-con polygon{fill:#e0e0e0; stroke-width:0; cursor:pointer;} .project-loctaion-map-con text{font-size:1.33em; font-weight:700;} .project-loctaion-map-con .cls-2{fill:#d2d2d2} .project-loctaion-map-con .cls-3{fill:#eee } .project-loctaion-map-con .active{fill:#9bd45e} .project-loctaion-map-con .active * {fill:#9bd45e} /* 타입 선택영역 :: 카테고리 영역 */ #projectCategorySortContent{margin:26px 0 0 0} .project-category-list-con{display:flex; flex-wrap:wrap; margin:-0.74%;} .project-category-list-con li{position:relative; width:12.79%; margin:0.74%; border-radius:10px; overflow:hidden; box-shadow:4px 3px 15px 0px rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .project-category-list-con li input[type="checkbox"]{position:absolute; top:0px; left:0px; opacity:0; visibility:hidden; } .project-category-list-con li label{overflow:hidden; position:relative; display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content: center;text-align:center; height:175px; padding:0 10px; box-sizing:border-box; border: 3px solid #92d050; border-radius:10px; } .project-category-list-con li .category-icon {display:block; position:relative; padding-top:53.125%; width:100%; margin-bottom:7px; transition:all 0.4s;} .project-category-list-con li .category-icon > span {display:block; position:absolute; top:5px; left:5px; right:5px; bottom:5px;} .project-category-list-con li .category-icon.mb0 {margin-bottom:0;} .project-category-list-con li .category-icon svg {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%;} .project-category-list-con li .category-name {display:flex; align-items:center; min-height:2.18em; /* font-size:1.46em; */ font-size:1.16em; line-height:1.09em; color: #252525; transition: all 0.4s;} .project-category-list-con li .category-hover {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:0 10px; background-color:#fff; opacity:0; transition: all 0.4s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .project-category-list-con li .category-hover .category-name {margin-top:10px; transition: margin 0.3s;} /* hover */ .project-category-list-con li:hover .category-icon , .project-category-list-con li:hover label > .category-name { opacity:0;} .project-category-list-con li:hover .category-hover {opacity:1;} .project-category-list-con li:hover .category-hover .category-name {margin-top:0;} /* checked */ .project-category-list-con li input:checked + label {background-color: #92d050; } .project-category-list-con li input:checked + label .category-name {color: #fff; opacity:1;} .project-category-list-con li input:checked + label .category-icon {opacity:1;} .project-category-list-con li input:checked + label .category-icon .category-icon-line {stroke:#fff;} .project-category-list-con li input:checked + label .category-icon .category-icon-point {fill:none;} .project-category-list-con li input:checked + label .category-icon .category-icon-fill {fill:#fff;} .project-category-list-con li input:checked + label .category-hover {opacity:0;} /* .project-category-list-con li{position:relative; width:14.28%; margin-left:-1px; margin-top:-1px } .project-category-list-con li input[type="checkbox"]{position:absolute; top:0px; left:0px; opacity:0; visibility:hidden; } .project-category-list-con li label{position:relative; display:flex; align-items:center; justify-content:space-between; height:80px; padding:0 19px; border:1px solid #e5e5e5; box-sizing:border-box; } .project-category-list-con li .category-name{position:relative; width:calc(100% - 60px); font-size:1em; line-height:1.2em; color:#252525; letter-spacing:-0.1px; font-weight:500;} .project-category-list-con li .category-icon{position:relative; display:block; height:40px; width:40px; } .project-category-list-con li label:before{ position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; content:""; transition:transform 0.3s ease-in-out; transform:scalex(0); transform-origin: 100% 0% ; background: rgb(56,182,172); background: -moz-linear-gradient(left, rgba(56,182,172,1) 0%, rgba(135,207,80,1) 100%); background: -webkit-linear-gradient(left, rgba(56,182,172,1) 0%,rgba(135,207,80,1) 100%); background: linear-gradient(to right, rgba(56,182,172,1) 0%,rgba(135,207,80,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38b6ac', endColorstr='#87cf50',GradientType=1 ); } .project-category-list-con li input:checked + label:before{transform:scalex(1); transform-origin:0% 0%;} .project-category-list-con li input:checked + label .category-name{color:#fff;} */ /* 타입 선택영역 :: Year 선택 */ #projectYearSortContent{margin-top:65px;} .project-year-sort-list-con{display:flex; flex-wrap:wrap;} .project-year-sort-list-con li{float:left; position:relative; margin:5px 75px 5px 0; } /* -------- 프로젝트 리스트 :: 갯수 노출 영역 -------- */ #projectSortNumberContent{padding:50px 0 54px; } #projectSortNumberContent > ul{display:flex; align-items:center; justify-content:center;} .project-sort-total-item{display:flex; align-items:center; /* margin:0 38px; */ margin:0 20px;} .project-sort-total-item .icon {display:block; width:4.333em; height:4.333em; background-color:#f6f6f6; border-radius:50%; margin-right:1em} .project-sort-total-item .icon em {position:relative; display:block; transform:translate(-50%,-50%); top:50%; left:50%;} .project-sort-total-item .icon em svg { width:100%; height:100%; } .project-sort-total-item dt{height:1.2em; font-size:1.2em; font-weight:700; color:#ff8400; letter-spacing:-0.2px; margin-bottom:0.75em;} .project-sort-total-item dt small{display:block; margin-top:0.25em; font-size:0.666em} .project-sort-total-item dd{color:#252525; font-size:3em; font-weight:700; letter-spacing:-0.066em;} .project-sort-total-item dd .plus-icon{font-weight:400; font-style:normal; margin-left:-0.1em} .project-sort-total-item dd .unit{font-size:0.575em; letter-spacing:0px;} /* ****************** 프로젝트 리스트 :: 상단 정렬 컨트롤 영역 ********************** */ #projectListSortContent{/* height:73px; */ display:flex; align-items:center; justify-content:space-between; font-size:15px; padding:25px 0 17px; padding-bottom:25px} .project-sort-type-list-con {display:flex; align-items:center;} .project-sort-type-list-con li{float:left; margin-left:30px;} .project-sort-type-list-con li:first-child{margin-left:0;} .project-sort-type-list-con li button{display:block; font-size:24px; color:#bbb; letter-spacing:-0.35px; transition:all 0.3s} .project-sort-type-list-con li button i{position:relative; top:5px; font-size:1.28em; margin-left:0.35em; transition:all 0.3s} .project-sort-type-list-con li button:hover, .project-sort-type-list-con li button.is-checked{color:#9bd45e} .project-sort-type-list-con li button.is-checked i{transform:rotate(180deg)} .project-sort-num-list-con {display:flex; align-items:center;} .project-sort-num-list-con li{float:left; margin-left:40px;} .project-sort-num-list-con li:first-child{margin-left:0;} .project-sort-num-list-con li a{display:block; position:relative; color:#bbb; letter-spacing:-0.35px; transition:all 0.3s} .project-sort-num-list-con li a i{position:relative; top:2px; font-size:2.45em;} .project-sort-num-list-con li a:hover, .project-sort-num-list-con li.selected a{color:#9bd45e} .project-sort-num-list-con li.sort-list-num3 a:after{position:absolute; top:50%; left:50%; height:6px; background-color:#fff; content:""; width:9px; margin-left:2px; margin-top:-2px; } /* ****************** 프로젝트 리스트 :: 제품 리스트 ********************** */ #projectListContent{margin-bottom:120px;} /* -------- 제품 리스트 -------- */ .project-list-container{margin:-6.5px; } .project-list-container * { box-sizing: border-box; } .project-list-container .grid-item, .project-list-container .grid-sizer { width:calc(25% - 13px); margin:0 6.5px 15px; font-size:15px; } .project-list-item a{display:block; position:relative; overflow:hidden;} .project-list-item .project-thumb-con{position:relative; /* display:inline-block; */ overflow:hidden; vertical-align:top; height:0; /* padding-top:71.4285%; */ background:#000; } .project-list-item .project-thumb-con:after{ position:absolute; top:0px; left:0px; width:100%; height:100%; content:""; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 130px, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 130px,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 130px,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } .project-list-item .project-thumb-con img, .project-list-item .project-thumb-img img{ position:absolute; top:0px; left:0px; width:100%; height:100%; object-fit:cover; -webkit-transition: all .5s ease; transition: all .5s ease; } .project-list-item a:hover .project-thumb-con img{ transform:scale(1.05); -webkit-filter: blur(2px); filter: blur(2px); } .project-list-item a:hover .project-thumb-img img{ transform:scale(1.05); -webkit-filter: blur(1px); filter: blur(1px); } .project-list-item .project-mybook-icon{position:absolute; top:10px; right:10px; color:#fff; font-size:1.333em; z-index:12;} .project-list-item .project-mybook-icon:before, .project-list-item .project-mybook-icon:after{position:absolute; top:0; right:0px; transition:all 0.3s; font-family:"xeicon"; } .project-list-item .project-mybook-icon:before{content: "\ea16"; color:#fff; } /* off*/ .project-list-item .project-mybook-icon:after{content: "\ea0f"; color:#ffe345; opacity:0;} /*on*/ .project-list-item .project-mybook-icon.active:before{opacity:0;} .project-list-item .project-mybook-icon.active:after{opacity:1.0; animation: mybookAni 0.6s ease-out ; } @keyframes mybookAni { 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .project-list-item .project-info-con{position:absolute; bottom:30px; left:33px; right:33px;color:#fff; transition:all 1s} .project-list-item .project-region{display:block; font-size:1em; letter-spacing:-0.35px; margin-bottom:0.4em; word-break:break-word} .project-list-item .project-name{display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; letter-spacing:-0.016em; font-size:1.6em; line-height:1.2; word-break:break-word;} /* 제품 리스트 :: 정보 */ .project-over-info-con{position:absolute; top:0px; left:0px; bottom:0px; right:0px; z-index:11; color:#fff;background-color:rgba(0,0,0,0.55); box-sizing:border-box; padding:0 31px; opacity:0; visibility:hidden; transition:opacity 0.35s, visibility 0.35s } .project-over-info-con:before{position:absolute; top:0px; left:31px; width:5px; height:0px; background-color:#ff8400; content:""; transition:height 0.35s 0.1s} .project-over-info-con .project-over-info-box{display:flex; display:flex; align-items:center; height:100%;} .project-over-info-con .project-over-inner{/* padding-top:1.2vw; */ padding-top:20px; width:100%; transform:translatex(-30px); opacity:0; transition:all 1s 0.2s} .project-over-info-con .project-detail-info{color:rgba(255,255,255,0.5); font-size:0.8em; margin-top:1.41em;} .project-over-info-con .project-detail-info dl{display:flex; align-items:center; margin-bottom:1.17em;} .project-over-info-con .project-detail-info dl dt{width:80px;} .project-over-info-con .project-more-plus-icon{position:absolute; right:31px; bottom:0px; padding-top:1.76em;} .project-over-info-con .project-more-plus-icon:before{display:block; width:5px; height:0px; background-color:#6fb638; content:""; transition:height 0.35s 0.1s} .project-over-info-con .project-more-plus-icon i{position:absolute; top:0px; left:50%; font-size:1.6em; margin-left:-0.5em; transition:all 0.5s} /* 제품 리스트 :: hover */ .project-list-container:not(.project-list-container-type2) .project-list-item a:hover .project-info-con{transform:translateY(200px); } .project-list-container.project-list-container-type2 .project-list-item a:hover .project-info-con{transform:translateY(0); } .project-list-item a:hover .project-over-info-con{opacity:1.0; visibility:visible; } .project-list-item a:hover .project-over-info-con:before{height:40px;} .project-list-item a:hover .project-over-info-con .project-over-inner{transform:translatex(0%); opacity:1;} .project-list-item a:hover .project-more-plus-icon:before{height:40px;} .project-over-info-con .project-more-plus-icon i:hover{transform:rotate(180deg)} /* 제품 리스트 :: Type */ .project-list-item.project-listy-type1x1 .project-thumb-con{padding-top:71.4285%; padding-top:250px;} .project-list-item.project-listy-type1x2 .project-thumb-con{padding-top:147.1428%; padding-top:515px;} .project-list-item.project-listy-type2x1{width:calc(50% - 13px);} .project-list-item.project-listy-type2x1 .project-thumb-con{padding-top:35.0631%; padding-top:250px;} .project-list-item.project-listy-type2x2{width:calc(50% - 13px);} .project-list-item.project-listy-type2x2 .project-thumb-con{padding-top:72.23001%; padding-top:515px;} .project-list-item.project-listy-type3x2{width:calc(75% - 13px);} .project-list-item.project-listy-type3x2 .project-thumb-con{padding-top:47.6851%; padding-top:515px;} /* -------- 제품 리스트 :: type2(리스트형) -------- */ .project-list-container-type2{margin:-7px; } .project-list-container-type2 .grid-item, .project-list-container-type2 .grid-sizer { width:calc(50% - 14px); margin:0 7px 15px; } .project-list-container-type2 .project-list-item a{background-color:#f7f7f7; display:flex; align-items:center;} .project-list-container-type2 .project-list-item .project-thumb-box{/* width:49%; */ width:140px; height:120px; position:relative; } .project-list-container-type2 .project-list-item .project-thumb-box .project-thumb-img{display:block; position:relative; width:100%; height:0; padding-top:120px; overflow:hidden;} .project-list-container-type2 .project-list-item .project-info-box{width:calc(100% - 140px); padding:0 5%; box-sizing:border-box;} .project-list-container-type2 .project-list-item .project-info-box .project-info-con{position:static; color:#252525;} .project-list-container-type2 .project-list-item a .project-region, .project-list-container-type2 .project-list-item a .project-name{transition:all 0.3s} .project-list-container-type2 .project-list-item .project-name{height:2.4em; font-size:1.3333em; font-weight:500; white-space:initial; text-overflow:unset; margin-bottom:0.5em; display:-webkit-box;} .project-list-container-type2 .project-list-item .project-sub-txt{font-size:1em; letter-spacing:-0.0166em; line-height:1.666; display:none;} .project-list-container-type2 .project-list-item .project-sub-detail{font-size:0.8em; letter-spacing:-0.0166em; color:#aaa;} .project-list-container-type2 .project-list-item a:hover .project-region, .project-list-container-type2 .project-list-item a:hover .project-name{color:#9bd45e} .project-list-container-type2 .project-list-item .project-mybook-icon{right:auto; margin-left:-10px; left:140px} .project-list-container-type2 .project-list-item .project-detail-info{display:none;} /* -------- 제품 리스트 :: type3(작은썸네일형) -------- */ .project-list-container-type3{margin:-6px; } .project-list-container-type3 .grid-item, .project-list-container-type3 .grid-sizer { width:calc(16.666% - 12px); margin:0 6px 12px; } .project-list-container-type3 .project-list-item a{background-color:#000;} .project-list-container-type3 .project-list-item .project-thumb-con{display:block; position:relative; height:0; padding-top:100%;} .project-list-container-type3 .project-list-item .project-list-type3-info{position:absolute; overflow:hidden; top:0px; left:0px; /* display:flex; align-items:flex-end; */ width:100%; height:100%; padding:1.5em; box-sizing:Border-box; font-size:12px; color:#fff;} .project-list-container-type3 .project-list-item .project-list-type3-info:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.6); transform:translateY(130%) skewY(20deg); content:""; transition:transform 0.6s cubic-bezier(0.7, 0, 0.3, 1) 0ms;} .project-list-container-type3 .project-list-item .project-list-type3-info > dl{position:absolute; bottom:20px; left:20px; right:20px; transform:translateY(150%); transition:transform 0.6s cubic-bezier(0.7, 0, 0.3, 1) .1s;} .project-list-container-type3 .project-list-item .project-list-type3-info .project-detail-info{display:none;} /* hover */ .project-list-container-type3 .project-list-item a:hover .project-list-type3-info:before{transform:translateY(0%) skewY(0deg)} .project-list-container-type3 .project-list-item a:hover .project-list-type3-info > dl{transform:translateY(0%);} /* ======================================================== * 프로젝트 뷰 ======================================================== */ /* ****************** 프로젝트 뷰 :: 공통 ********************** */ .project-view-container .project-region{display:block; font-size:30px; font-weight:300; letter-spacing:-0.5px; margin-bottom:0.5em; line-height:1.1; word-break:break-word} .project-view-container .project-name{font-size:90px; font-weight:700; letter-spacing:-0.02em; margin-left:-2px; line-height:1.2; word-break:break-word} /* ****************** 프로젝트 뷰 :: Select Work Cover ********************** */ #projectViewContent.cover-active{height:100vh; overflow:hidden;} .project-view-top-cover{ position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 15; overflow:hidden; } .project-view-top-cover > .punch-svg { position: absolute; left: -1px; top: -1px; z-index: 10; width: 100.5%; will-change: transform; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .project-view-top-cover .punch-svg text { /* font-size: 8.0729vw; */ font-size:6.7708vw; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; font-weight:900 } .project-view-top-cover .punch-svg rect { fill: #fff; position: relative; -webkit-mask: url(#mask); mask: url(#mask); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .project-view-top-cover .punch-svg text.line2-1{transform:translateY(-4vw)} .project-view-top-cover .punch-svg text.line2-2{transform:translateY(4vw)} .project-view-top-cover .punch-svg text.line3-1{transform:translateY(-8vw)} .project-view-top-cover .punch-svg text.line3-3{transform:translateY(8vw)} @media all and (min-width:1921px){ .project-view-top-cover .punch-svg text{font-size:130px;} .project-view-top-cover .punch-svg text.line2-1 { transform: translateY(-96px); } .project-view-top-cover .punch-svg text.line2-2 { transform: translateY(96px); } .project-view-top-cover .punch-svg text.line3-1 { transform: translateY(-155px); } .project-view-top-cover .punch-svg text.line3-3 { transform: translateY(155px); } } /* ****************** 프로젝트 뷰 :: 최상단영역 ********************** */ #projectViewTopCon{position:relative; height:100vh; overflow:visible;} .project-view-top-container .project-view-top-bg{overflow:hidden; position:relative; width:100%; height:100vh; /*transform:scale(1.2); transition:all 1.5s ease; */ position:fixed; top:0px; left:0px;} .project-view-top-container .project-view-top-bg .project-view-inner{width:100%; height:100%;} .project-view-top-container .project-view-top-bg .project-view-bg{display:block; width:100%; height:100%; opacity:0; background-size:cover !important; } .project-view-top-container .project-view-top-bg .project-view-bg:after{ position:absolute; top:0px; left:0px; content:""; width:100%; height:100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 1%, rgba(0,0,0,0) 120px, rgba(0,0,0,0) 66%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.35) 1%,rgba(0,0,0,0) 120px,rgba(0,0,0,0) 66%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.35) 1%,rgba(0,0,0,0) 120px,rgba(0,0,0,0) 66%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 ); } .animated.project-view-top-container .project-view-top-bg{opacity:1; transform:scale(1);} .project-view-top-container .project-view-prev-next-controls a{position:absolute; top:50%; color:#fff; z-index:1; font-size:96px; margin-top:-0.5em; opacity:0; /* transition:all 0.6s cubic-bezier(0.76, 0.21, 0.29, 0.99) */} .project-view-top-container .project-view-prev-next-controls .project-prev-view-btn{left:52px;} .project-view-top-container .project-view-prev-next-controls .project-next-view-btn{right:52px;} .project-view-top-container .project-view-tit-con{position:absolute; bottom:97px; left:0; right:0; color:#fff; z-index:2;} .project-view-top-container .project-view-tit-con .project-region, .project-view-top-container .project-view-tit-con .project-name{overflow:hidden;} .project-view-top-container .project-view-tit-con em{display:inline-block; font-weight:inherit; opacity:0;} .project-view-top-container .cm-scroll-icon{z-index:1} /* ****************** 프로젝트 뷰 :: 중간 상세설명 ********************** */ #projectViewWrap{position:relative; z-index:1; background-color:#fff;} #projectViewDetailCon{padding:100px 0; margin:0 auto; color:#252525;} /* 중간 상세설명 :: 타이틀영역 */ .project-view-detail-tit-con{position:relative; margin-bottom:132px; padding-right:195px;} .project-view-container .project-view-detail-tit-con .project-region{font-weight:400;} .project-view-detail-tit-con .page-share-controls{bottom:0px; top:auto;} .project-view-detail-tit-con .project-sub-category{margin-top:2em; } .project-view-detail-tit-con .project-scheme{display:inline-block; position:relative; height:24px; padding:6px 15px 5px; color:#fff; font-size:14px; box-sizing:border-box; margin-right:0.5em } .project-view-detail-tit-con .project-scheme:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#92d050; content:""; transform:scaleX(0); transition:transform 0.5s; transform-origin:0 0;} .project-view-detail-tit-con .project-scheme em{position:relative; font-weight:inherit; color:inherit; opacity:0; transition:opacity 0.3s 0.4s} .project-view-detail-tit-con .project-scheme.animated:before{transform:scaleX(1);} .project-view-detail-tit-con .project-scheme.animated em{opacity:1;} .project-view-detail-tit-con .project-dcm:before{background-color:#ff8500;} .project-view-detail-tit-con .project-cm:before{background-color:#234785 ;} .project-view-detail-tit-con .project-design{color:#252525; font-weight:500;} .project-view-detail-tit-con .project-design:before{background-color:#ffe345;} /* 중간 상세설명 :: 스펙영역 */ .project-view-detail-con{display:flex;} .project-view-detail-spec-con{width:360px; margin-right:120px; } .project-view-detail-spec-con dl{margin-bottom:55px; font-size:1.86666em;} .project-view-detail-spec-con dl:last-child{margin-bottom:0;} .project-view-detail-spec-con dt{color:#59ca47 ; font-weight:500; /* font-size:1.333em; */ letter-spacing:-0.0089em; /* margin-bottom:0.945em; */ margin-bottom:0.5em} .project-view-detail-spec-con dd{font-weight:900; letter-spacing:-.035em; line-height:1.3; word-break:break-word} /* 중간 상세설명 :: 상세설명영역 */ .project-view-detail-inner-con{width:calc(100% - 480px);} .project-view-detail-inner-con .project-view-detail-item{display:flex; line-height:1.55em; font-size:1.333em; margin-bottom:3em;} .project-view-detail-inner-con .project-view-detail-item:last-child{margin-bottom:0;} .project-view-detail-inner-con .project-view-detail-item dt{/* width:120px; */ width:160px; color:#59ca47 ; font-weight:500; } .project-view-detail-inner-con .project-view-detail-item dd{/* width:calc(100% - 120px); */ width:calc(100% - 160px); font-weight:400; color:#252525;} .project-view-detail-inner-con .project-view-detail-item .hash-tag{line-height:40px;} .project-hashtag-list-con{margin:0 -5px;} .project-hashtag-list-con .hashtag-item{float:left; display:flex; align-items:center; height:40px; padding:0 20px; margin:0 5px 5px; background-color:#ffe6cb; border-radius:20px;} /* ****************** 프로젝트 뷰 :: 하단 사진 영역 ********************** */ #projectViewPhotoCon{padding-bottom:120px;} /* -------- 하단 사진 영역 :: 공통 -------- */ .project-photo-item .photo-item-inner{display:block; position:relative;} .project-photo-item a{display:block; overflow:hidden;} .project-photo-item .photo-thumb{overflow:hidden; display:block; position:relative; height:0; } .project-photo-item .photo-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; object-fit:cover;} ul:not(.project-view-grid-02) .project-photo-item .photo-thumb{ overflow:hidden; display:block; position:relative; height:0; -webkit-transition:transform 1.5s ease-out; -moz-transition:transform 1.5s ease-out; -o-transition:transform 1.5s ease-out; -ms-transition:transform 1.5s ease-out; transition:transform 1.5s ease-out } ul:not(.project-view-grid-02) .project-photo-item a:hover .photo-thumb{ -ms-transform: scale(1.05) rotate(0.002deg); -o-transform: scale(1.05) rotate(0.002deg); -moz-transform: scale(1.05) rotate(0.002deg); -webkit-transform: scale(1.05) rotate(0.002deg); transform: scale(1.05) rotate(0.002deg); } .project-photo-item .photo-zoom-icon{position:absolute; bottom:0px; right:0px; z-index:1; width:60px; height:60px; text-align:center; background-color:#000; background-color:rgba(0,0,0,0.6);} .project-photo-item .photo-zoom-icon i{line-height:60px; font-size:25px; color:#fff; } /* -------- 하단 사진 영역 :: style 01 -------- */ .project-view-photo-list-01{position:relative; margin:-15px;} .project-view-photo-list-01 .grid-sizer, .project-view-photo-list-01 .grid-item{width: 33.333%;} .project-view-photo-list-01 .grid-item{box-sizing:border-box; padding:15px; } .project-view-photo-list-01 .photo-item-inner{overflow:hidden;} .project-view-photo-list-01 .photo-thumb{padding-top:100%; background-color:#000} .project-view-photo-list-01 .photo-thumb-inner{ display:block; position:absolute;top:0px; left:0px; width:100%; height:100%; -webkit-transition:transform 1.5s ease-out; -moz-transition:transform 1.5s ease-out; -o-transition:transform 1.5s ease-out; -ms-transition:transform 1.5s ease-out; transition:transform 1.5s ease-out } .project-view-photo-list-01 .project-photo-item a:hover .photo-thumb-inner{ -ms-transform: scale(1.05) rotate(0.002deg); -o-transform: scale(1.05) rotate(0.002deg); -moz-transform: scale(1.05) rotate(0.002deg); -webkit-transform: scale(1.05) rotate(0.002deg); transform: scale(1.05) rotate(0.002deg); } .project-view-photo-list-01 .project-photo-item-01, .project-view-photo-list-01 .project-photo-item-07, .project-view-photo-list-01 .project-photo-item-08{width:66.666%;} .project-view-photo-list-01 .project-photo-item-01 .photo-thumb, .project-view-photo-list-01 .project-photo-item-07 .photo-thumb, .project-view-photo-list-01 .project-photo-item-08 .photo-thumb{padding-top:71.57%;} .project-view-photo-list-01 .project-photo-item-02 .photo-item-inner, .project-view-photo-list-01 .project-photo-item-06 .photo-item-inner{padding-top:186.95%} .project-view-photo-list-01 .project-photo-item-02 .photo-thumb{position:absolute; bottom:0px; width:100%; } .project-view-photo-list-01 .project-photo-item-02 .photo-thumb, .project-view-photo-list-01 .project-photo-item-06 .photo-thumb{padding-top:147.82%;} .project-view-photo-list-01 .project-photo-item-03 .photo-item-inner, .project-view-photo-list-01 .project-photo-item-05 .photo-item-inner, .project-view-photo-list-01 .project-photo-item-09 .photo-item-inner{position:relative; height:0; padding-top:108.69%; padding-left:21.73%; } .project-view-photo-list-01 .project-photo-item-03 .photo-thumb, .project-view-photo-list-01 .project-photo-item-05 .photo-thumb, .project-view-photo-list-01 .project-photo-item-09 .photo-thumb{position:absolute; top:0px; right:0px; width:78.26%; padding-top:78.26%;} .project-view-photo-list-01 .project-photo-item-04 .photo-thumb{padding-top:147.82%} .project-view-photo-list-01 .project-photo-item-05 .photo-thumb, .project-view-photo-list-01 .project-photo-item-09 .photo-thumb{right:auto; left:0;} .project-view-photo-list-01 .project-photo-item-06 .photo-thumb{position:absolute; top:0px; width:100%; } .project-view-photo-list-01 .grid-item img{width:100%;} /* -------- 하단 사진 영역 :: style 02 -------- */ .project-view-photo-list-02{margin:-15px; margin-bottom:0;} .project-view-photo-list-02 .project-photo-item{float:left; width:calc(50% - 30px); margin:15px; } .project-view-photo-list-02 .project-photo-item .photo-thumb{padding-top:71.6312%;} .project-view-photo-list-02 .project-photo-item.wide-thumb{width:calc(100% - 30px); } .project-view-photo-list-02 .project-photo-item.wide-thumb .photo-thumb{padding-top:70.1388%;} .project-view-photo-list-02 .project-photo-item.long-thumb .photo-thumb{padding-top:147.517%;} /* -------- 하단 사진 영역 :: style 03 -------- */ .project-view-photo-list-03{margin:-15px; margin-bottom:0;} .project-view-photo-list-03 .project-photo-item{float:left; width:calc(33.33% - 30px); margin:15px; } .project-view-photo-list-03 .project-photo-item .photo-thumb{padding-top:100%;} .project-view-photo-list-03.list-col-04, .project-view-photo-list-03.list-col-05{margin:-6.5px} .project-view-photo-list-03.list-col-04 .project-photo-item{width:calc(25% - 13px); margin:6.5px} .project-view-photo-list-03.list-col-05 .project-photo-item{width:calc(20% - 13px); margin:6.5px} .project-view-photo-list-03 .project-photo-item .photo-thumb img{object-fit:cover;} /* ****************** 프로젝트 뷰 :: 하단 관련프로젝트 영역 ********************** */ #projectRelatedCon{background-color:#f7f7f7;} #projectRelatedCon .project-related-tit{color:#59ca47 ; font-size:2em; letter-spacing:-0.013em; font-weight:300; margin-bottom:1.43em;} .project-related-list-container{position:relative;} .project-related-list-container .related-project-list-con{padding-bottom:55px;} .related-project-list-con .related-project-item{float:left; width:230px; margin-right:12px;} .related-project-list-con .related-project-item a{display:block; background-color:#000; } .related-project-list-con .related-project-item .related-project-thumb{display:block; position:relative; height:0; padding-top:100%;} .related-project-list-con .related-project-item .related-project-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; object-fit: cover;} .related-project-list-con .related-project-item .related-project-info{position:absolute; overflow:hidden; top:0px; left:0px; /* display:flex; align-items:flex-end; */ width:100%; height:100%; padding:1.5em; box-sizing:Border-box; font-size:12px; color:#fff;} .related-project-list-con .related-project-item .related-project-info:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.6); transform:translateY(130%) skewY(20deg); content:""; transition:transform 0.6s cubic-bezier(0.7, 0, 0.3, 1) 0ms;} .related-project-list-con .related-project-item .related-project-info > dl{position:absolute; bottom:20px; left:20px; right:20px; transform:translateY(150%); transition:transform 0.6s cubic-bezier(0.7, 0, 0.3, 1) .1s;} .related-project-list-con .related-project-item .related-project-info .related-project-name{display:block; font-size:1.66em; letter-spacing:-0.5px; font-weight:500; line-height:1.2; margin-top:0.5em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .related-project-list-con.swiper-container-horizontal > .swiper-scrollbar{left:0; right:0; width:auto; border-radius:0; background-color:#ddd;} .related-project-list-con .swiper-scrollbar-drag{background-color:#000; } /* arrow */ .related-project-prev-btn, .related-project-next-btn{position:absolute; top:50%; z-index:1; width:120px; color:#000; font-size:48px; margin-top:-24px; } .related-project-prev-btn{left:-135px; text-align:left;} .related-project-next-btn{right:-135px; text-align:right;} .related-project-prev-btn.swiper-button-disabled, .related-project-next-btn.swiper-button-disabled{color:#ccc} /* hover */ .related-project-item a:hover .related-project-info:before{transform:translateY(0%) skewY(0deg)} .related-project-item a:hover .related-project-info > dl{transform:translateY(0%);} /* ======================================================== * EXPERTISE :: Services & Markets ======================================================== */ #servisesContent, #marketsContent {background-color:#f7f7f7;} #servisesContent .area , #marketsContent .area {max-width:1150px; margin:0 auto;} /* connect list */ .connect-con {overflow:hidden; } .connect-con .connect-list {display:flex; flex-wrap:wrap; /* justify-content: center; */ margin:0 0 -3.92%;} .connect-con .connect-list > li {position:relative; width:20%; margin: 0 0 3.92%; } .connect-con .connect-list > li dl {cursor:pointer; } .connect-con .connect-list > li dt {max-width:200px; margin:0 auto; padding:15px; max-width:150px;} .connect-con .connect-list > li dt .icon {display:block; position:relative; padding-top:100%; background-color:#ececec; border-radius:50%; box-shadow:5px 5px 15px rgba(0, 0, 0, .25); transition: all 0.4s;} .connect-con .connect-list > li dt .icon span {position:absolute; top:12.5%; left:12.5%; right:12.5%; bottom:12.5%; } .connect-con .connect-list > li dt .icon svg {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;} .connect-con .connect-list > li dt .icon svg .svg-icon-group > * {stroke: #c7c7c7;} .connect-con .connect-list > li dt .icon svg .svg-icon-group .svg-icon-fill {fill: #c7c7c7; stroke:none;} .connect-con .connect-list > li dd {font-size:1.66em; line-height:1.3; min-height:2.6em; color: #808080; text-align:center; font-size:1.2em;} .connect-con .connect-list > li dt .icon:hover{transform:translate(0,-5px)} /* connect view */ .connect-view-container { display:none; width:100vw; max-width:1440px; margin:35px 0 17px; max-width:1150px;} .connect-view-con { position:relative; padding:80px 120px 96px; background-color:#fff; z-index:99; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .connect-view-con .close-btn {position:absolute; right:60px; top:60px; font-size: 3.2em; z-index:99; color:#808080} .connect-view-con .top-box {position:relative; display:flex; justify-content:space-between; align-items:center; } .connect-view-con .tit-box {position:relative; z-index:2;} .connect-view-con .tit-box b{font-size:1.6em; letter-spacing: -0.00625em; color: #59ca47;} .connect-view-con .tit-box .tit {display:block; font-size:5.33em; line-height:1.05em; min-height:2.1em; letter-spacing: -0.025em; color: #000; margin-top:0.1em} .connect-view-con .tit-box .tit span {display:block; font-size:0.2971em; line-height:1; font-weight:500; letter-spacing:0px;} .connect-view-con .tit-box .kr-tit{display:block; font-size:1.33em; margin-top:1em; color:#aaa; letter-spacing:-0.008em; ;} .connect-view-con .icon-box {position:absolute; right:0; top:0; padding: 0 20px; z-index:1;} .connect-view-con .icon-box svg {width:100%;} .connect-view-con .icon-box svg .svg-icon-group > * {stroke:#eff8e5;} .connect-view-con .icon-box svg .svg-icon-group .svg-icon-fill {fill:#eff8e5} .connect-view-con .con-box {position:relative; display:table; width:100%; table-layout:fixed; margin-top:80px; z-index:9;} .connect-view-con .slide-box {display:table-cell; vertical-align:top; width:50%; padding-right:80px; padding-top:7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .connect-view-con .slide-box .connect-slide {margin:0 -10px; } .connect-view-con .slide-box .connect-slide .slide-item {margin:0 10px; width:160px;} .connect-view-con .slide-box .connect-slide .slide-item .img-wrap {display:block; position:relative; padding-top:100%;} .connect-view-con .slide-box .connect-slide .slide-item .img-wrap img{object-fit:cover;} .connect-view-con .slide-box .connect-slide .slick-arrow {position:absolute; top:50%; margin-top:-21.5px; font-size:43px; color: #59ca47;} .connect-view-con .slide-box .connect-slide .slick-arrow i {line-height:1;} .connect-view-con .slide-box .connect-slide .slick-arrow.slick-prev {left:-45px; transform:rotate(-180deg); margin-top:-30px;} .connect-view-con .slide-box .connect-slide .slick-arrow.slick-next {right:-45px;} .connect-view-con .txt-box {display:table-cell; vertical-align:top; width:50%; padding-left:4.75%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .connect-view-con .txt-box .txt { font-size:1.33em; line-height:1.6; color: #4f4f4f; font-weight:300;} .connect-view-con .txt-box .connect-view-btn{display:inline-block; height:38px; line-height:38px; padding:0 17px; color:#92d050; font-size:1.22em; background-color:#fff; border:1px solid #92d050; border-radius:50px; transition:all 0.3s; margin-top:1em} .connect-view-con .txt-box .connect-view-btn:hover{background-color:#92d050; color:#fff;} /* 비활성화 & 활성화 */ .connect-con .connect-list > li:not(.off) dd {color: #323232;} .connect-con .connect-list > li:not(.off) dt .icon {background-color: #59ca47; } .connect-con .connect-list > li:not(.off) dt .icon svg {filter:drop-shadow( 3px 3px 2px rgba(0, 0, 0,0.2));} .connect-con .connect-list > li:not(.off) dt .icon svg .svg-icon-group > * {stroke: #fff; } .connect-con .connect-list > li:not(.off) dt .icon svg .svg-icon-group .svg-icon-fill {fill:#fff; stroke:none;} .connect-con .connect-list > li.off dt .svg-icon-group > * {stroke:#eff8e5;} .connect-con .connect-list > li.off dt .svg-icon-group .svg-icon-fill {fill:#eff8e5} .connect-con .connect-list > li.open {z-index:99;} /* ----------------- markets ----------------- */ #marketsContent .connect-con .connect-list > li dt {/* max-width:190px; */} #marketsContent .connect-view-con .tit-box b , #marketsContent .connect-view-con .slide-box .connect-slide .slick-arrow {color: #ff9636;} #marketsContent .connect-view-con .icon-box svg .svg-icon-group > * {stroke:#ffefe1;} #marketsContent .connect-view-con .icon-box svg .svg-icon-group .svg-icon-fill {fill:#ffefe1} #marketsContent .connect-con .connect-list > li:not(.off) dt .icon {background-color: #ffe144; } #marketsContent .connect-con .connect-list > li:not(.off) dt .icon svg { filter:none;} #marketsContent .connect-con .connect-list > li:not(.off) dt .icon svg .svg-icon-group > * {stroke: #404040;} #marketsContent .connect-con .connect-list > li:not(.off) dt .icon svg .svg-icon-group .svg-icon-fill {fill:#404040; } /* ======================================================== * EXPERTISE :: Research & Idea ======================================================== */ /* ****************** Research & Idea :: List ********************** */ #rniListContent {background-color:#f7f7f7;} #rniListContent .cm-sub-con-tit {line-height:1.125em;} .rni-list-box {margin-top:50px;} .rni-list li {margin-top:40px; background-color:#fff; } .rni-list li:first-child {margin-top:0;} .rni-list li:nth-child(8n+1) {background-color: #92d051;} /* 연두색 */ .rni-list li:nth-child(8n+3) {background-color: #ffe345;} /* 노랑색 */ .rni-list li:nth-child(8n+5) {background-color: #ff8500;} /* 주황색 */ .rni-list li:nth-child(8n+7) {background-color: #234785;} /* 파랑색 */ .rni-list li:nth-child(8n+1) a .txt-box .category, .rni-list li:nth-child(8n+1) a .txt-box .tit , .rni-list li:nth-child(8n+5) a .txt-box .category, .rni-list li:nth-child(8n+5) a .txt-box .tit, .rni-list li:nth-child(8n+7) a .txt-box .category, .rni-list li:nth-child(8n+7) a .txt-box .tit {color: #fff;} .rni-list li:nth-child(8n+1) a .rni-more-btn em, .rni-list li:nth-child(8n+5) a .rni-more-btn em , .rni-list li:nth-child(8n+7) a .rni-more-btn em {background-color:#fff;} .rni-list li:nth-child(8n+3) a .txt-box .category {color: #252525;} .rni-list li a {display:block; position:relative; padding:0 83px; transition:all 0.3s ease-in-out;} .rni-list li a .inner-box {display:table; width:100%; height:330px;} .rni-list li a .img-box {display:table-cell; vertical-align:bottom; width:383px;} .rni-list li a .img-box .img-wrap {display:block; position:relative; padding-top:69.19%; box-shadow:7px -3px 17px 0px rgb(0 0 0 / 0.1); background-color:#fff;} .rni-list li a .img-box .img-wrap span {display:block; position:absolute; top:15px; left:16.5px; right:16.5px; bottom:0; background-color:#fff;} .rni-list li a .img-box .img-wrap img {position:absolute; top:0; left:0; width:100%; height:100%;} .rni-list li a .txt-box {display:table-cell; vertical-align:middle; width:calc(100% - 383px); padding:0 17.26% 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .rni-list li a .txt-box .category {display:block; font-size:1em; letter-spacing:-0.0111em; line-height:1.388em; color: #92d050; margin-bottom:10px;} .rni-list li a .txt-box .tit {font-size:2.4em; letter-spacing:-0.0111em; line-height:1.388em; color: #252525; font-weight:500;} .rni-list .rni-more-btn{position:absolute; top:50%; right:35px; width:32px; height:100px; transform:translateY(-50%) } .rni-list .rni-more-btn em{display:block; width:60px; height:3px; background-color:#aaa; position:absolute; top:50%; right:0; transition:all 0.3s} .rni-list .rni-more-btn .top-line{transform:rotate(55deg); transform-origin:100% 100%} .rni-list .rni-more-btn .bottom-line{transform:rotate(-55deg); transform-origin:100% 100%; margin-top:-1px; right:-2px;} /* ****************** Research & Idea :: View ********************** */ #boardDetailContent{margin:0px auto 120px;} #boardInnerCon{max-width:960px; margin:0px auto;} .board-detail-tit-con{margin-bottom:80px} .board-detail-tit{color:#222; font-size:5em; letter-spacing:-0.04em; line-height:1.2; font-weight:700;} .board-detail-category{display:block; font-size:1.333em; font-weight:700; margin-bottom:1.75em; color:#92d050} .board-detail-date{display:block; font-size:3.666em; font-weight:900; color:#3b3b3b; letter-spacing:-0.05em; margin-top:0.72em} .board-attach-download-box{display:flex; justify-content:flex-end;} .news-detail-sub-tit + .board-attach-download-box{margin-top:1em} .board-attach-download-btn{display:flex; align-items:center; justify-content:space-between; width:150px; height:50px; text-align:left; line-height:50px; background-color:#eee; border-radius:30px; padding:0 25px; font-size:1.06em; color:#222 !important;; transition:all 0.3s} .board-attach-download-btn:hover{background-color:#92d050; color:#fff !important;} .board-attach-download-btn i{color:inherit !important;} /* -------- Detail :: 상단이미지 -------- */ .board-detail-photo-con{margin-bottom:4.66em;} .board-large-photo-con{margin-bottom:1.33em;} .board-large-photo-con .board-large-item{} .board-large-photo-con .board-large-item span{display:block; padding-top:70.83%; height:0; position:relative;} .board-large-photo-con .board-large-item span img{position:absolute; top:0px; left:0px; right:0px; bottom:0px; max-width:100%; max-height:100%; margin:auto; } /* Small Thumb */ .board-small-photo-container{position:relative; margin:0 120px;} .board-small-photo-con .board-small-item{position:relative; margin:0 10px; background-color:#000; cursor:pointer; } .board-small-photo-con .board-small-item:after{position:absolute; top:0px; left:0px; right:0; bottom:0px; border:0px solid #93d051; content:""; transition:all 0.1s} .board-small-photo-con .board-small-item span{position:relative; display:block; width:100%; height:0; padding-top:56.36%} .board-small-photo-con .board-small-item img{position:absolute; top:0px; left:0px; width:100%; height:100%; object-fit:cover; opacity:0.4; transition:opacity 0.5s} .board-small-photo-con .board-small-item.slick-current:after{border-width:2px} .board-small-photo-con .board-small-item.slick-current img{opacity:1.0;} .board-small-photo-container .board-photo-controls{position:absolute; top:0; bottom:0; left:-120px; right:-120px; display:flex; align-items:center; justify-content:space-between; } .board-small-photo-container .board-photo-controls .slick-hidden{display:block; cursor:default;} .board-small-photo-container .board-photo-controls .slick-hidden .cm-arrow-btn-icon{color:#ccc;} /* -------- Detail :: 비디오 -------- */ .board-detail-video-con{margin-bottom:2.4em;} .board-detail-video-con .detail-video-wrapper{position:relative; width:100%; height:0; padding-top:56.25%;} .board-detail-video-con .detail-video-wrapper iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;} /* -------- Detail :: Contents -------- */ .board-detail-txt-con{min-height:400px; color:#252525; font-size:1.3333em; line-height:1.6;} .board-detail-txt-con .board-detail-txt{margin-top:35px;} .board-detail-txt-con .board-detail-txt:first-of-type{margin-top:0;} .board-detail-txt-con .board-detail-txt.green{color:#92d050; } .board-detail-inner-con{border-top:1px solid #e5e5e5; padding-top:2.4em; margin-top:2.4em} /* -------- Detail :: Bottom Controls -------- */ .board-bottom-controls{display:flex; align-items:center; justify-content:space-between; padding-top:1.33em; border-top:1px solid #252525; margin-top:80px} .board-bottom-controls.align-right{justify-content:flex-end;} .board-bottom-controls .to-list-btn{width:120px; position:relative; height:50px; padding:0 1.33em; color:#252525; display:flex; align-items:center; justify-content:space-between; border:1px solid #252525; box-sizing:border-box; transition:all 0.3s ease;} .board-bottom-controls .to-list-btn:hover{box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.18)} .board-bottom-controls .to-list-btn i{font-size:1.6em;} .board-bottom-controls .to-list-btn .txt{font-weight:700;} .board-prev-next-controls{position:relative;} .board-prev-next-controls:before{position:absolute; top:0px; bottom:0px; left:50%; width:1px; background-color:#d9d9d9; background-color:rgba(200,200,200,0.2); content:"";} .board-prev-next-controls a{color:#252525; font-weight:700; transition:all 0.3s} .board-prev-next-controls .board-next-btn{margin-left:4.33em;} .board-prev-next-controls a i{vertical-align:middle; font-size:1.6em; transition:transform 0.3s; position:relative; top:-2px;} .board-prev-next-controls .board-prev-btn i{margin-right:0.4em} .board-prev-next-controls .board-next-btn i{margin-left:0.4em} .board-prev-next-controls a.board-prev-btn:hover i{transform:translateX(-5px)} .board-prev-next-controls a.board-next-btn:hover i{transform:translateX(5px)} .board-prev-next-controls a[href="#none"]{color:#ccc; cursor:default;} @media all and (min-width:1281px){ /* ****************** Research & Idea :: List ********************** */ .rni-list a:hover .rni-more-btn em{color:#222; } .rni-list a:hover .rni-more-btn .top-line{transform:rotate(35deg)} .rni-list a:hover .rni-more-btn .bottom-line{transform:rotate(-35deg)} .rni-list a:hover{box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.18);} } /* ======================================================== * EXPERTISE :: VR/AR ======================================================== */ #vrContent .sub-visual-txt-container .sub-visual-tit-con{margin-bottom:37px} /* -------- VR/AR :: 상단영역 -------- */ .vr-object-container{} .vr-object-container iframe{width:100%; height:1000px;} .vr-ar-full-btn-box{text-align:right; margin:10px 0;} .vr-ar-full-btn{display:inline-block; max-width:200px; height:50px; line-height:50px; padding:0 1.25em; background-color:#252525; color:#fff; border-radius:30px; margin-top:10px; font-size:1.33em; letter-spacing:-0.01em; font-weight:300;} .vr-ar-full-btn:first-child{margin-top:0;} .vr-ar-full-btn i{font-size:1.1em; margin-right:0.5em; position:relative; top:3.5px;} /* -------- VR/AR :: 검색 영역 -------- */ #vrListContent{margin:60px auto;} #vrListSortCon{display:flex; align-items:center; justify-content:space-between; margin-bottom:40px;} /* Sort / Filter :: Search */ .vr-search-con{width:480px;} /* -------- VR/AR :: 리스트 영역 -------- */ .vr-list-item{width:100%; border-top:1px solid #e9e9e9;} .vr-list-item:last-child{border-bottom:1px solid #e9e9e9; } .vr-list-item a{display:block; } .vr-list-item .vr-project-inner{display:flex; width:100%; align-items:center; padding:2.666em 0;} .vr-list-item .vr-project-thumb-con{width:480px; transition:all 0.3s ease-in-out;} .vr-list-item .vr-project-thumb-con .vr-project-thumb{display:block; position:relative; height:0; padding-top:66.66%;} .vr-list-item .vr-project-thumb-con .vr-project-thumb:after{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); content:"\ea3f"; font-family:"xeicon"; font-size:4em; color:#fff; } .vr-list-item .vr-project-info-con{width:calc(100% - 530px); /* max-width:670px; */ margin-left:50px; padding-right:100px; box-sizing:border-box;} .vr-list-item .vr-project-info-con .vr-project-info-txt{color:#252525; font-size:1.3333em; font-weight:300; margin-bottom:1.3em} .vr-list-item .vr-project-info-con .vr-project-info-txt .project-area{position:relative; top:-2px; display:inline-block; height:25px; padding:0 13px; line-height:25px; border-radius:30px; font-size:0.75em; color:#fff; letter-spacing:-0.2px; background-color:#93d34e; margin-right:5px;} .vr-list-item .vr-project-info-con .vr-project-info-tit{font-size:2.4em; font-weight:500; color:#252525; line-height:1.38; letter-spacing:-1px;} .vr-list-item .vr-more-btn{position:absolute; top:50%; right:35px; width:32px; height:100px; transform:translateY(-50%) } .vr-list-item .vr-more-btn em{display:block; width:60px; height:1px; background-color:#aaa; position:absolute; top:50%; right:0; margin-top:-1px; transition:all 0.3s} .vr-list-item .vr-more-btn .top-line{transform:rotate(55deg); transform-origin:100% 100%} .vr-list-item .vr-more-btn .bottom-line{transform:rotate(-55deg); transform-origin:100% 100%; } .vr-list-con + .cm-list-more-btn-box{margin-top:60px;} @media all and (min-width:1281px){ .vr-list-item a:hover .vr-project-thumb-con{box-shadow:6px 5px 15px 0px rgb(0, 0, 0, 0.28);} .vr-list-item a:hover .vr-more-btn em{color:#222; } .vr-list-item a:hover .vr-more-btn .top-line{transform:rotate(35deg)} .vr-list-item a:hover .vr-more-btn .bottom-line{transform:rotate(-35deg)} } /* ======================================================== * IR ======================================================== */ /* -------- IR :: 공통 -------- */ #irContent{/* background-color:#f7f7f7;*/ } body.ie-browser #financeChartCon{display:none;} #irContent .finance-tit{color:#59ca47; font-size:2em; letter-spacing:-1px; font-weight:700; margin-bottom:1.83em} .finance-wrapper{margin-top:60px;} .finance-wrapper:first-child{margin-top:0;} /* -------- IR :: Finance -------- */ .finance-state-highlight-con{background-color:#fff; display:flex; justify-content:space-between; padding:40px;} .highlight-inner-con{width:640px;} .highlight-inner-con .finance-highlight-tit{color:#222; font-size:1.33em; margin-bottom:2em; font-weight:500; letter-spacing:-0.015em;} .highlight-inner-con .finance-highlight-chart-con{position:relative; padding:0 20px 0; height:350px; box-sizing:border-box; } .highlight-inner-con .finance-highlight-chart-con:after{position:absolute; top:0px; left:0px; width:100%; height:100%; content:"";} .highlight-inner-con .finance-highlight-unit{position:absolute; top:-55px; right:30px; font-size:13px; color:#aaa;} /* -------- Finance :: Statements -------- */ #financeStatementCon{padding-bottom:120px;} #financeStatementCon .finance-tit{margin-bottom:0.95em;} .financial-statement-list-con{display:flex; flex-wrap:wrap; margin:0 -6.5px;} .financial-state-item{width:calc(25% - 13px); margin:6.5px;} .financial-state-item .financial-state-inner{height:348px; border:1px solid #ebebeb; background-color:#fff; box-sizing:border-box; padding:39px;} .financial-state-item .financial-state-lang{color:#222; font-size:1.13em; font-weight:600; letter-spacing:-.25px;} .financial-state-item .financial-tit{margin-bottom:4.5em} .financial-state-item .financial-tit .year{font-size:3.333em; font-weight:700; letter-spacing:-0.25px; color:#92d050; margin-top:1em } .financial-state-item .financial-tit .tit{color:#222; font-weight:400; font-size:1.33em; margin-top:1em; letter-spacing:-0.25px;} .financial-state-item .financial-down-btn{display:block; width:200px; height:50px; display:flex; align-items:center; justify-content:space-between; border:1px solid #e5e5e5; padding:0 25px; font-size:1.06em; letter-spacing:-0.2px; color:#222; box-sizing:border-box; border-radius:30px; transition:all 0.3s} .financial-state-item .financial-down-btn:hover{background-color:#92d050; color:#fff; border-color:#92d050} .financial-state-item .financial-down-btn i{position:relative; top:1px; font-size:1.375em} /* ======================================================== * MYBOOK ======================================================== */ #mybookList{margin-bottom:200px;} .mybook-tit-con{display:flex; align-items:center; justify-content:space-between; padding-bottom:27px; border-bottom:1px solid #252525; margin-bottom:45px;} .mybook-tit-con > h3{color:#252525; font-size:2em; font-weight:700;} .mybook-tit-con .mybook-reset-btn{display:flex; align-items:center; color:#252525; font-size:1em; font-weight:700; transition:all 0.3s } .mybook-tit-con .mybook-reset-btn i{font-size:1.6em; margin-left:0.5em; transition:all 0.3s} .mybook-tit-con .mybook-reset-btn:hover{color:#92d050} .mybook-tit-con .mybook-reset-btn:hover i{transform:rotate(180deg)} .mybook-tit-txt{color:#252525; font-size:1.333em; letter-spacing:-0.0125em; line-height:1.6em; margin-bottom:1.8em;} .mybook-tit-txt small{display:block; opacity:0.5; font-size:1.0em} .mybook-pdf-list-con{display:flex; flex-wrap:wrap; margin-right:-7px} .mybook-pdf-item{width:16.666%; margin:-1px 0 0 -1px; } .mybook-pdf-item .mybook-inner-con{border:1px solid #eee; height:100%; box-sizing:border-box;background-color:#fff; } .mybook-pdf-item.ui-sortable-helper .mybook-inner-con{border-color:#000} /* Fixed Item */ .mybook-pdf-item.fixed-item{position:relative; z-index:1;} .mybook-pdf-item.fixed-item .mybook-inner-con{border-color:#252525} .mybook-pdf-item.fixed-item img{width:100%;} .mybook-pdf-item .myproject-list-con{display:flex; align-items:center; overflow:hidden; padding:20px 25px;} .mybook-pdf-item .myproject-list-con dl{width:100%; overflow:hidden;} .mybook-pdf-item .myproject-list-con dl dt{color:#252525; letter-spacing:-0.25px; font-size:1em; font-weight:700; margin-bottom:2em;} .mybook-pdf-item .myproject-list-con dl dd.list-over:after{display:block; font-family:"xeicon"; content: "\e949"; margin:10px auto; text-align:center; font-size:1.2em; color:#aaa;} .mybook-pdf-item .myproject-list-con dl dd p{color:#aaa; font-size:0.86em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1em} .mybook-pdf-item .myproject-list-con dl dd p:first-child{margin-top:0;} /* Checkbox Item */ .mybook-pdf-item .mybook-inner-con input[type="checkbox"]{position:absolute; left:-9999px; top:0; opacity:0; display:none;} .mybook-pdf-item .mybook-label-con{position:relative; display:block; height:100%; box-sizing:border-box; padding-top:20%; } .mybook-pdf-item .mybook-label-con:after{position:absolute; top:10px; right:10px;font-family:"xeicon"; content: "\e9c6"; font-size:1.333em; color:#ccc;} .mybook-pdf-item .mybook-inner-con input[type="checkbox"]:checked + .mybook-label-con:after{color:#252525; content: "\e92b";} .mybook-pdf-item .mybook-label-con .project-thumb{display:block; position:relative; height:0; padding-top:70.8333%; } .mybook-pdf-item .mybook-label-con .project-thumb img{object-fit:cover;} .mybook-pdf-item .pdf-info-box{padding:20px 15px; font-size:1.333em; color:#252525} .mybook-pdf-item .pdf-info-box span, .mybook-pdf-item .pdf-info-box strong{display:block;} .mybook-pdf-item .pdf-info-box .project-area{font-size:0.65em ; letter-spacing:-0.25px; margin-bottom:1em} .mybook-pdf-item .pdf-info-box .project-tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.4px; line-height:1.2} /* Empty Item */ .mybook-empty{padding:11% 0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#252525; font-size:1.333em; border-top:1px solid #252525;} .mybook-empty i{font-size:1.5em; margin-bottom:1em} .mybook-empty + .board-bottom-controls{margin-top:0} /* PDF Download Controls */ .mybook-pdf-controls{display:flex; } .mybook-pdf-controls button{display:flex; align-items:center; height:50px; padding:0 20px; font-size:1.2em; letter-spacing:-0.5px; color:#fff; margin-left:0.55em; transition:all 0.3s } .mybook-pdf-controls button i{font-size:1.333em; margin-right:1em;} .mybook-pdf-controls .mybook-total-check-btn input{display:none;} .mybook-pdf-controls .mybook-total-check-btn label{display:flex; align-items:center; } .mybook-pdf-controls .mybook-total-check-btn label:before{content:""; font-family:"xeicon"; content: "\e92c"; font-size:1.333em; margin-right:0.2em} .mybook-pdf-controls .mybook-total-check-btn input:checked + label:before{content: "\e92b";} .mybook-pdf-controls .mybook-download-btn{background-color:#000; border:1px solid #000;} .mybook-pdf-controls .mybook-delete-btn, .mybook-pdf-controls .mybook-total-check-btn{background-color:#bbb; border:1px solid #bbb;} .mybook-pdf-controls .mybook-download-btn:hover{background-color:#fff; color:#000;} .mybook-pdf-controls .mybook-total-check-btn:hover, .mybook-pdf-controls .mybook-delete-btn:hover{background-color:#fff; color:#bbb;} /* Social Hub 타이틀 숨김처리 2023-05-12 MJ */ .social-hub-list-con .social-hub-item a{margin-bottom:1.333em;} .social-hub-list-con .social-hub-item .social-hub-info-con{display: none;} .social-hub-list-con .social-hub-item .social-hub-info-con .social-hub-txt{display: none;}