@charset "utf-8"; /* CSS Document */ .box0{ padding:0 4vw} .box1{ width:1200px; margin:0 auto; max-width:94%} .box2{ width:1400px; margin:0 auto; max-width:94%} .gnb li.m_hide{ display:none} body:not(.pop){ display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)} #header{ position:fixed; left:0; top:0; width:100%; z-index:1000; color:#fff; transition:transform .5s} #header .top_wrap{ position:relative} #header .top_wrap .wrapH, #header .top_wrap .gnb_wrap .gnb > li .dp1{ height:5em} .headerT{ padding-top:5em} .scrollMg{scroll-margin-top: 15em} #header .top_wrap .wrapIn{ display:flex; align-items:center; justify-content:space-between; gap:0 4vw} #header .top_wrap .wrapIn > *{ position:relative; z-index:2; height:100%} #header .top_wrap .logo{ display:flex; align-items:center} #header .top_wrap .logo > a{ display:block; height:3em; overflow:hidden;} #header .top_wrap .logo > a .in{ display:block; height:100%; transform:translateY(-100%)} #header .top_wrap .logo > a img{ height:100%; display:block} #header .top_wrap .gnb_wrap{ position:absolute; left:0; top:0; width:100%; z-index:1; height:auto} #header .top_wrap .gnb_wrap .gnb{ justify-content:center} #header .top_wrap .gnb_wrap .gnb > li{ position:relative;} #header .top_wrap .gnb_wrap .gnb > li .dp1{ padding:0 3vw} #header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ position:relative; text-transform:uppercase; } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:before{ position: absolute; bottom: -.5em; transform:scaleX(0); left:.01em; right:.01em; height: 2px; background: var(--siteC); trnasition: .3s; content: '';} #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:before, #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:before{ transform:scaleX(1); transition: .3s;} #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ content:""; position:absolute; left:100%; bottom:100%; width:.5em; height:.5em; transform:rotate(20deg) translate(50%, 0); background:var(--siteC); transition:.3s; opacity:0} #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after, #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after{opacity:1} #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:700; font-size:1.125em} #header .top_wrap .gnb_wrap .gnb > li .dp2{ display:none; flex-direction:column; padding:1.5em 0} #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em} #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ position:relative} #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .va:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--siteC)} #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover .va:after{ width:100%; transition:.5s} #header .top_wrap .gnb_wrap .gnb > li .dp3, #header .top_wrap .gnb_wrap .gnb > li .mLink{ display:none} #header .top_wrap .etc_wrap{ display:flex; align-items:center; gap:0 3em} #header .top_wrap .etc_wrap .langWrap{ position:relative} #header .top_wrap .etc_wrap .langWrap .ico{ font-size:1em} #header .top_wrap .etc_wrap .langWrap .ico:before{ content:"\e9d1"} #header .top_wrap .etc_wrap .langList{ display:flex; align-items:center; gap:0 2em} #header .top_wrap .etc_wrap .langList > li{ opacity:.5} #header .top_wrap .etc_wrap .langList > li > a{ display:flex; align-items:center; gap:0 .25em; position:relative} #header .top_wrap .etc_wrap .langList > li > a .ico{ font-size:1em; display:none} #header .top_wrap .etc_wrap .langList > li > a .t1{ font-weight:900; font-size:.875em; position:relative; padding:.25em 0} #header .top_wrap .etc_wrap .langList > li.on{ order:-1; opacity:1} #header .top_wrap .etc_wrap .langList > li.on > a .ico{ display:block} #header .top_wrap .etc_wrap .langList > li.on > a .t1:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff} #header .top_wrap .etc_wrap .etcBtn{ display:flex; align-items:center; justify-content:center; width:2em; height:2em} #header .top_wrap .etc_wrap .etcBtn .ico{ font-size:2em} #header .top_wrap .etc_wrap .etcBtn.s1 .ico{ font-size:1.5em} /* .scroll:not(.up) #header{ /*transform:translateY(-100%)} .scroll.up #header:not(:hover){ color:#111} .scroll.up #header:not(:hover) .gnb_wrap{ background:#fff;} .scroll.up #header:not(:hover) .top_wrap .logo > a .in{ transform:translateY(0)} .scroll.up #header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC)} .scroll.up #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ background:var(--siteC)} */ .intro_wrap{ height:100vh; background:#111; width: 100%; text-align:center; display: flex; align-items: center; justify-content: center; } .intro_wrap .tt{ font-weight:500; color:#fff; font-size:1.75em; word-spacing:.25em; letter-spacing:0; display:inline-block; position:relative; opacity:0; transform:scaleY(0); transform-origin:left bottom; transition:2.5s; margin-top: 1em;} .intro_wrap .tt:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#111; transform-origin:right top; transition:3s} .intro_wrap .logo-intro{ display: flex; flex-direction: column; align-items: center;} .intro_wrap .logo-intro > img{ width: 15em;} .load .intro_wrap .tt{ opacity:1; transform:scaleY(1)} .load .intro_wrap .tt:after{ transform:scaleX(0)} #header:hover .gnb_wrap:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.25); backdrop-filter:blur(1em)} #header .gnb_wrap .gnb > li{ min-width:12em; transition:min-width .5s} .load #header .gnb_wrap:not(:hover) .gnb > li{min-width:0} #header .gnb_wrap:hover .gnb > li .dp2{ display:block} #header .gnb_wrap:hover .gnb > li:hover, #header .gnb_wrap:hover .gnb > li:hover .dp1{ /*background:rgba(0,0,0,.1)*/} #header .all_wrap{ color:#000;} #header .all_wrap .all{ width:4.5em;} #header .all_wrap .all_btn{ position:relative; display:block; width:2.5em; height:1.125em; margin-left:auto;} #header .all_wrap .all_btn .ham, #header .all_wrap .all_btn .ham:before, #header .all_wrap .all_btn .ham:after { display:block; width:100%; height:2px; background:#000; transition:.2s, background 0s;} #header .all_wrap .all_btn .ham:before, #header .all_wrap .all_btn .ham:after { content:""; position:absolute; left:0;} #header .all_wrap .all_btn .ham:before{ top:calc(50% - 1px); width:100%;} #header .all_wrap .all_btn .ham:after { top:calc(100% - 2px); width:100%;} #header .all_wrap .all_btn:hover .ham:before{ width:100%;} #header .all_wrap .all_btn:hover .ham:after { width:100%;} #header .all_wrap .all_layer{ position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden;} #header .all_wrap .all_layer .all_close{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; backdrop-filter:blur(.75em);} #header .all_wrap .all_layer .all_inner{ position:absolute; top:0; right:0; width:30em; max-width:100%; height:100%; background:#fff; box-shadow:-1em 0 1em rgba(0,0,0,.1); transform:translateX(100%);} #header .all_wrap .all_layer .all_inner > .wrap_in{ gap:2em; padding:3em 3em;} #header .all_wrap .all_layer .wrap_top a{ transition:.2s;} #header .all_wrap .all_layer .wrap_top .all_logo{} #header .all_wrap .all_layer .wrap_top .all_logo .in{ display:block; width:6em;} #header .all_wrap .all_layer .wrap_top .all_logo .in img{ width:100%;} #header .all_wrap .all_layer .wrap_top .all_mem{ gap:.25em; padding:1em 0;} #header .all_wrap .all_layer .wrap_top .all_mem > li .in{ height:2.25em; padding:0 1em; border:1px solid #ddd; border-radius:.25em; line-height:normal;} #header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt{ font-size:.938em; font-weight:500;} #header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff;} #header .all_wrap .all_layer .wrap_middle{} #header .all_wrap .all_layer .wrap_middle .gnb{ flex-wrap:wrap;} #header .all_wrap .all_layer .wrap_middle .gnb > li{ flex:1 1 100%;} #header .all_wrap .all_layer .wrap_middle .gnb > li.m_mypage{ display:block;} #header .all_wrap .all_layer .wrap_middle .gnb ul.flex{ display:block;} #header .all_wrap .all_layer .wrap_middle .gnb a{ position:relative; justify-content:flex-start; text-align:left !important; font-weight:500; transition:.2s;} #header .all_wrap .all_layer .wrap_middle .gnb li.more{} #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.link{ display:none;} #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer{ display:flex !important; padding-right:2.5em;} #header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow{ position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em;} #header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow:before{ content:"\e943"; font-size:1.250em; display:block; transition:.2s;} #header .all_wrap .all_layer .wrap_middle .gnb li.more > ul{ display:none;} #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > a .arrow:before{ transform:rotate(-180deg);} #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > ul{ display:block;} #header .all_wrap .all_layer .wrap_middle .gnb ul{ padding:1em 1em;} #header .all_wrap .all_layer .wrap_middle .gnb ul li > a{ padding:.875em .5em;} #header .all_wrap .all_layer .wrap_middle .gnb ul li.more .arrow{ right:.5em;} #header .all_wrap .all_layer .wrap_middle .gnb > li{} #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1{ height:4em; padding:0 1.5em; border-bottom: 1px solid #ccc;} #header .all_wrap .all_layer .wrap_middle .gnb > li:first-of-type .dp1{ border-top: 1px solid #ccc;} #header .all_wrap .all_layer .wrap_middle .gnb > li:hover .dp1{ background: var(--siteC); color: #fff; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{ font-size:1.188em;} #header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1, #header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1{ background: var(--siteC); color:#fff;} #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a{ padding-left:1.5em;} #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before{ content:""; position:absolute; left:.75em; top:50%; width:.313em; height:.313em; background:var(--siteC); border-radius:50%; transform:translateY(-50%);} #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .tt{ font-size:1.063em;} #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.act > a{ background:var(--siteC);} #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.on > a{ color:var(--siteC); font-weight:600;} #header .all_wrap .all_layer .wrap_middle .gnb .dp3{ background:var(--siteC);} #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a{ color:#444;} #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a{ border-top:1px dashed #ddd;} #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.act > a .tt, #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.on > a .tt{ text-decoration:underline;} .allGnbOn{ overflow-y:hidden} .allGnbOn body{ overflow-y:scroll} .allGnbOn #header .all_wrap .all_btn{ z-index:999; position:fixed; top:1em; right:1vw; width:3em; height:3em; filter:var(--siteC) !important;} .allGnbOn #header .all_wrap .all_btn .ham{ background:transparent !important; transition:0s;} .allGnbOn #header .all_wrap .all_btn .ham:before, .allGnbOn #header .all_wrap .all_btn .ham:after { width:100% !important; top:50% !important; height:2px;} .allGnbOn #header .all_wrap .all_btn .ham:before{ transform:rotate(45deg);} .allGnbOn #header .all_wrap .all_btn .ham:after { transform:rotate(-45deg);} .allGnbOn #header .all_wrap .all_layer{ z-index:99; opacity:1; visibility:visible;} .allGnbOn #header .all_wrap .all_layer .all_close{ opacity:1; transition:.4s;} .allGnbOn #header .all_wrap .all_layer .all_inner{ transform:translateX(0); transition:.4s;} #footer{ z-index:10; color:#fff; background:#111; padding:4em 0 5em 0} #footer .goTop{ position:fixed; right:0; bottom:0; width:3.5em; line-height:3.5em; text-align:center; background:var(--siteC); color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s} #footer .goTop .xi{ font-size:1.5em; transition:.3s} #footer .goTop:hover .xi{ transform:translateY(-.25em)} .scroll #footer .goTop{ opacity:1; transform:translateY(0)} #footer .logo img{ height:3em} #footer .info_wrap{ margin-top:2em} #footer .info{ overflow:hidden} #footer .info > li{ float:left; margin-right:2em; margin-bottom:.375em; opacity:.8; position:relative} #footer .info > li:before{ content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2} #footer .info > li.point{ font-weight:600} #footer .info > li.br{ clear:left} #footer .copyright{ font-size:.813em; opacity:.6; text-transform:uppercase; margin-top:1em} #footer .cs_wrap{ display:flex; gap:0 4em} #footer .cs_wrap .wrap_in{ position:relative} #footer .cs_wrap .wrap_in:not(:first-child):after{ content:""; position:absolute; left:-2em; top:0; width:1px; height:100%; background:#fff; opacity:.2} #footer .cs_wrap .t1{ opacity:.7; font-weight:500; margin-bottom:.5em} #footer .cs_wrap .t2{ font-weight:700; font-size:1.25em} #footer .menu_wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:1em 0} #footer .menu{ display:flex; flex-direction:column; gap:1em 0} #footer .menu > li{ width:100%;} #footer .menu > li > a{ display:block; padding-right:2em;position:relative; font-weight:500; color:#fff} #footer .menu > li > a:after{ content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg)} #footer .menu > li > a.point{ opacity:1; font-weight:700; color:var(--siteC)} .sns_st{ display:flex; gap:.5em} .sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; color:#fff; border-radius:50%; transition:.3s} .sns_st > li > a:hover{ background:#fff; color:#111} #contents{ flex:1; min-height:0; box-sizing:border-box} #contents .sub_top_wrap{ box-sizing:border-box; display:flex; flex-direction:column} #contents .sub_top_wrap .visual_wrap{ height:60vh; position:relative; overflow:hidden; transition:.5s} html:not(.scroll) #contents .sub_top_wrap .visual_wrap{ padding:0} #contents .sub_top_wrap .visual_wrap .wrapIn{ position:relative; height:100%} #contents .sub_top_wrap .visual_wrap .wrapIn:before{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1); content: ''; z-index: 1;} #contents .sub_top_wrap .visual_wrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; transition:.3s;} #contents .sub_top_wrap .visual_wrap .bg:before, #contents .sub_top_wrap .visual_wrap .bg:after{ /*content:""; position:absolute; left:0; top:0; width:50%; height:100%; background:#fff; transition:.8s*/} #contents .sub_top_wrap .visual_wrap .bg:after{ left:auto; right:0} #contents .sub_top_wrap .visual_wrap .con_wrap{ height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; box-sizing:border-box} #contents .sub_top_wrap .visual_wrap .slogan{ position:relative; flex:1 1 0%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2em 0; z-index: 2;} #contents .sub_top_wrap .visual_wrap .slogan .t1{ font-weight:700; font-size:3em; text-transform:uppercase; letter-spacing:-.025em; padding-left:.025em; line-height:1} #contents .sub_top_wrap .visual_wrap .slogan .sub-slogan{ font-size: 1.45em; font-weight: 500;} #contents .sub_top_wrap .nav-Wrap{ padding: 1em 0;} #contents .sub_top_wrap .nav{ display:inline-flex; align-items:center; opacity:0; padding:.25em 1em; border-radius:2em; background: rgba(0,0,0, .45);} #contents .sub_top_wrap .nav > li{ text-transform:uppercase} #contents .sub_top_wrap .nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; margin:0 .5em} #contents .sub_top_wrap .nav > li.home{ color:var(--siteC)} #contents .sub_top_wrap .nav > li.home > a{ width:1.5em; height:1.5em; border-radius:50%; color:#111; display:flex; align-items:center; justify-content:center} #contents .sub_top_wrap .nav > li.home > a .xi{ font-size:1.25em; color: #fff;} #contents .sub_top_wrap .sub_tab{ position:relative; width:100%; z-index: 2;} #contents .sub_top_wrap .sub_tab .gnb > li{ width:100%} #contents .sub_top_wrap .sub_tab .gnb .dp2{backdrop-filter:blur(1em); justify-content:center} #contents .sub_top_wrap .sub_tab .gnb .dp2 > li{ flex:1 1 1%; max-width:33.33%} #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a{ display:flex; align-items:center; justify-content:center; height:4em; padding:0 1em; background:rgba(0,0,0,.25); position:relative} #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a .va{ font-weight:600; font-size:1.125em; opacity:.7; position:relative; z-index:1} #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a{ color:#111} #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background:#fff} #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:hover > a .va, #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a .va{ opacity:1} .load #contents .sub_top_wrap .visual_wrap .bg:before, .load #contents .sub_top_wrap .visual_wrap .bg:after{ width:0; opacity:1} .load #contents .sub_top_wrap .nav{ opacity:1; transition:2s} #contents .sub_top_wrap .tit_wrap{} #contents .sub_top_wrap .tit_wrap .wrapIn{ display:flex; justify-content:space-between; align-items:center; flex-direction:column; padding: 1em 0 4em 0; gap:2em} #contents .sub_top_wrap .tit_wrap .tit .t1{ font-size:2.5em; font-weight:500} .dp1_project .sub_top_wrap .tit_wrap{ display: none;} .dp1on .gnb .dp2{ display:none!important} .dp2on .gnb > li, .dp2on .gnb > li .dp1, .dp2on .gnb > li .dp3{ display:none!important} .dp2on .gnb > li.on{ display:block!important} .dp3on .gnb > li, .dp3on .gnb > li .dp1, .dp3on .gnb > li .dp2 > li, .dp3on .gnb > li .dp2 > li > a{ display:none!important} .dp3on .gnb > li.on, .dp3on .gnb > li .dp2 > li.on{ display:block!important} #contents .doc{ padding:4em 0 10em 0} #contents .doc.pn{ padding: 0em;} .dp1_project #contents .doc{ padding: 4em 0 10em 0;} /**/ .vod_wrap{ position:relative} .vod_wrap .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover} .visualSlide_wrap{position: fixed; left:0; top:0; width:100%; margin:0;} .scroll div.visualSlide{ z-index:-1} .visualSlide .el{ position: relative; overflow:hidden; height:100vh; background:#fff} .visualSlide .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2)} .visualSlide .el .mask{ -webkit-mask-image: url(../images/main/visual_mask.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; -webkit-mask-position: right bottom;} .visualSlide .el .vod_wrap{ position:relative; height:100%} .visualSlide .el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:1} .visualSlide .el.swiper-slide-active .vod_wrap:after, .visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after{ transition:2s; opacity:.2} .visualSlide .el.swiper-slide-active .bg, .visualSlide .el.swiper-slide-duplicate-active .bg{ transition:5s; transform:scale(1) rotate(.001deg)} .visualSlideSlogan_wrap{ position:absolute; left:50%; transform:translateX(-50%); width:100%; bottom:0; box-sizing:border-box; z-index:10; color:#fff; display:flex; flex-direction:column} .visualSlide_wrap .titW{ position:absolute; left:0; top:10em; width:100%; z-index:10; color:#fff; text-align:right} .visualSlide_wrap .titW .in{ display:inline-flex; flex-direction:column; gap:.25em; position:relative; /*padding:1em 2em*/} .visualSlide_wrap .titW .in:before{ /*content:""; position:absolute; left:0; top:0; height:40%; width:100%; border:1px solid #fff; border-bottom:none; transform:scaleX(0); opacity:0*/} .visualSlide_wrap .titW .t1{ font-size:1.05em; font-weight:700; opacity:0} .visualSlide_wrap .titW .t1 > i{ animation-name: splitAni; animation-duration: 1s; animation-play-state: paused;} .visualSlide_wrap .el.swiper-slide-active .titW .in:before{/* transform:scaleX(1);*/ width: 100%; opacity:1; transition:1s} .visualSlide_wrap .el.swiper-slide-active .titW .t1{ opacity:1} .visualSlide_wrap .el.swiper-slide-active .titW .t1 > i{ animation-play-state: running;} .visualSlide_wrap .slogan .wrap_in{ display:flex; flex-direction:column; text-align:left; gap:.25em 0} .visualSlide_wrap .slogan .t1{ font-size:4em; text-transform:uppercase; font-weight:800} .visualSlide_wrap .slogan .t2{ font-size:2em; text-transform:uppercase; font-weight:500; margin:.25em 0 0 .25em} .visualSlide_wrap .slogan .ani{ overflow:hidden; line-height:1;} .visualSlide_wrap .slogan .ani > i{ transform:translateY(100%);} .load .visualSlide_wrap .slogan .ani > i{ transform:translateY(0); transition:1s; transition-delay:.2s} .load .visualSlide_wrap .slogan .ani.d1 > i{transition-delay:.7s} .visualSlide_control{ margin-top:2em; display:flex; align-items:flex-end} .visualSlide_control .paging{ width:5em; text-align:center;} .visualSlide_control .paging .swiper-pagination-current{ font-weight:700} .siteTag{ vertical-align:top} .siteTag i{ vertical-align:top} .siteTag i:nth-child(4){ color:var(--siteC)} .mainScroll{ margin-left:auto; z-index:100; color:#fff} .mainScroll .line{ position:relative;display:block; height:4em; overflow:hidden} .mainScroll .line:before{ content:""; position:absolute; left:50%; top:0; height:100%; width:1px; background:#fff;} .mainScroll .dot{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:.5em; height:.5em; background:#fff; border-radius:50%} .mainScroll .tt{ display:block; transform:rotate(90deg); font-size:.75em; margin:0 0 2.5em 0} .mainScroll .tt .xi{ font-size:1.5em; margin-right:.25em} .main_contents{ overflow:hidden} .main_box{ /*padding:6em 0 7em 0*/ padding: 10em 0 11em 0;} .main_box.bg1{ padding:5em 0 6em 0; background:#f5f5f5} .main_tit{ margin-bottom:2em} .main_tit.col{ display:flex; flex-direction:column; gap:.75em 0} .main_tit .t1{ font-weight:900; font-size:3.75em; letter-spacing:-.025em} .main_tit .t1.s1{ font-size:2.5em} .main_tit .t2{ font-weight:700; font-size:2.25em} .main_tit .t3{ font-weight:500; font-size:1.5em} .main_tit .tt{ font-weight:500; font-size:1.25em; opacity:.8} .main_tit.white{ color:#fff} .main_fix{ margin-top:100vh; background: #fff; position:relative; z-index:1; box-shadow:0 -1em 1em rgba(0,0,0,.1)} .main_about .main_tit{ position:relative; z-index:1} .main_about .aboutW{ position:relative} .main_about .aboutW .wrapIn{ display:flex; align-items:center} .main_about .aboutW .bg{ width:50%; position:relative; height:22em} .main_about .aboutW .bg .in{ position:absolute; right:0; top:0; height:100%; width:50vw; background-attachment:fixed} .main_about .aboutW .conW{ width:50%; margin-left:auto; box-sizing:border-box; padding:2em} .main_about .aboutW .count{ display:flex; justify-content:center; align-items:center; position:relative} .main_about .aboutW .count > li{ flex:1 1 1%; box-sizing:border-box; padding:.5em; position:relative} .main_about .aboutW .count > li .wrap_in{ padding-bottom:100%; position:relative} .main_about .aboutW .count > li .wrap_in:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; box-shadow:0 0 1em rgba(0,0,0,.1)} .main_about .aboutW .count > li .in{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1em} .main_about .aboutW .count > li .in .ico{ height:3em} .main_about .aboutW .count > li .in .con{ width:100%; box-sizing:border-box; text-align:center} .main_about .aboutW .count > li .in .con .t1{ font-weight:700; font-size:1.75em; color:var(--siteC); letter-spacing:-.063em} .main_about .aboutW .count > li .in .con .t2{ font-weight:500; opacity:.6} .main_about .aboutW .count > li:first-child{ z-index:1} .main_about .aboutW .count > li:first-child .wrap_in{ color:#fff} .main_about .aboutW .count > li:first-child .wrap_in:before{ background:var(--siteC); transition:.3s} .main_about .aboutW .count > li:first-child .in .t1{ color:#fff} .main_about .aboutW .count > li:first-child .in .ico{ filter:brightness(0) invert(1)} .gsAbout .gs1{ transform:translateX(100vw)} .gsAbout .gs2{ width:0} .main_business .list{ display:flex; gap:3em} .main_business .list > li{ flex:1 1 1%} .main_business .list > li .in{ padding-bottom:150%; overflow:hidden; background:#000} .main_business .list > li .in .bg{ transition:1s} .main_business .list > li .in .con{ box-sizing:border-box; padding:3em;color:#fff} .main_business .list > li .in .con .t1{ display:block; font-weight:700; font-size:1.5em} .main_business .list > li .in .con .more{ font-size:.938em; padding:.5em 1em; border:1px solid #fff; display:inline-flex; margin:1em 0} .main_business .list > li .in:hover .bg{ transform:scale(1.1); opacity:.5} .main_business .list > li .in:hover .con .more{ background:var(--siteC); border-color:transparent;} .mainCateSlide{ overflow:visible !important} .mainCateSlide .el{ width:47vw; position:relative; margin: auto;} .mainCateSlide .el .bg{ padding-bottom:45%; filter:grayscale(1) brightness(2)} .mainCateSlide .el.swiper-slide-active .bg{ padding-bottom:56.25%;} .mainCateSlide .el .con{ position:absolute; right:0; bottom:-1px; width:50%; /*background: #f5f5f5;*/ background: rgba(255,255,255,.8); box-sizing:border-box; padding:2em; padding-right:0; opacity:0; transform:translateY(50%); display:flex; align-items:center} .mainCateSlide .el .con .t1{ font-weight:700; font-size:1.5em} .mainCateSlide .el .con .more{ margin-left:auto; color:var(--siteC); position:relative; display:flex; align-items:center} .mainCateSlide .el .con .more:before{ content:""; order:1; background:var(--siteC); border-radius:50%; width:.5em; height:.5em} .mainCateSlide .el .con .more:after{ content:"";width:1.5em; height:1px; background:var(--siteC); transition:.3s} .mainCateSlide .el .con .more .tt{ font-size:.875em; font-weight:500; margin-right:.5em} .mainCateSlide .el:hover .con .more:after{ padding-left:1em} .mainCateSlide .el.swiper-slide-active .bg{ filter:grayscale(0); /*transition:.2s*/} .mainCateSlide .el.swiper-slide-active .con{ opacity:1; transform:translateY(0); transition:transform 1s} .mainNewsSlide{ overflow:visible !important} .mainNewsSlide .wrap_in .img_wrap{ overflow:hidden; position:relative} .mainNewsSlide .wrap_in .con_wrap{ box-sizing:border-box; padding:1.5em 0; display:flex; flex-direction:column; gap:.75em 0} .mainNewsSlide .wrap_in .con_wrap .cate{ font-weight:700; text-transform:uppercase; font-size:.938em} .mainNewsSlide .wrap_in .con_wrap .tit{ font-size:1.375em; font-weight:700; display:flex; align-items:center} .mainNewsSlide .wrap_in .con_wrap .tit .more{ font-size:1em; color:var(--siteC); transition:.3s; opacity:0} .mainNewsSlide .wrap_in .con_wrap .tt{ font-size:1.063em; font-weight:500; line-height:1.4; opacity:.6} .mainNewsSlide .wrap_in:hover .con_wrap .tit .more{ opacity:1; transform:translateX(.5em)} .mainNewsSlide .wrap_in:hover .img_wrap .bg{ transform:scale(1.1); transition:1s} .main_contact{ position:relative; text-align:center} .main_contact .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;} .main_contact .wrap_bg .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-attachment:fixed} .main_contact .vod_wrap{ background:var(--siteC)} .main_contact .vod_wrap .vod{ mix-blend-mode:hard-light} .main_contact .vod_wrap:before{ content:""; position:absolute; width:100%; left:0; top:0; height:100%; background:#000; opacity:.4; z-index:2} .main_contact .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); mix-blend-mode:hue; z-index:1} .main_contact .wrap_in{ position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; z-index:3; height:12em; color:#fff} .main_contact .more{ background:var(--siteC); color:#fff; padding:1em 2em; display:flex; gap:0 .25em; align-items:center} .main_contact .more .tt{ font-size:1.125em; font-weight:500} .gsSplit > i{ min-width:.375em; animation-name: splitAni; animation-duration: 1s} @keyframes splitAni{ 50% { transform:translateX(1em); opacity:0} 100% {transform:translateX(0); opacity:1} } .gsSplit.up > i{ animation-name: splitAniUp} @keyframes splitAniUp{ 50% { transform:translateY(.5em); opacity:0} 100% {transform:translateY(0); opacity:1} } /* sub 공통 */ .txt_con .txt { font-size: 1em; } .txt_con .txt span { vertical-align: baseline; } .txt_con .txt.w { color: #fff !important; } .txt_con .txt.g { color: #666 !important; } .txt_con .txt.b { color: #246baa !important; } .txt_con .txt.b2 { color: #111 !important; } .txt_con .txt.line{ width: 2em; height: 1px; display: block; margin: 1em auto; background: #fff; } .txt_con .txt.t1 { line-height:1.35; font-size:1.8em; color:#222; font-weight:500; } .txt_con .txt.t1 span { color:#093168; font-weight:700; vertical-align:baseline; font-size:1.375em; } .txt_con .txt.t1 span img { width:7em;} .txt_con .txt.t2 { font-size: 1.05em; color:#555; line-height:1.6; padding-bottom:1em; } .txt_con .txt.t3 { font-size: 1.188em; margin-left:1em; color:#222; } .txt_con .txt.t4 { font-size: 1.6em; font-weight: 600; } .txt_con .txt.t5 { font-size: 2em; font-weight: 600; } .txt_con .txt.t6 { position: relative; font-size: 1.1em; padding: 0 0 .3em 1.3em; line-height: 1.6; margin-top: .3em; } .txt_con .txt.t6:before { position: absolute; content: ""; width: .4em; height: .4em; background: #093168; top: 9px; left: 6px; } .txt_con .txt.t6:last-of-type { padding-bottom: 0; } .txt_con .txt.t7 { font-size: .91em; color: #777; line-height: 1.6; } .txt_con .txt.t8 { position: relative; display: block; font-size: .91em; padding: 0 0 0 1em; line-height: 1.6; } .txt_con .txt.t8:before { position: absolute; content: ""; width: .4em; height: 1px; background: #093168; top: 11px; left: 0; } .txt_con .txt.t8:last-of-type { padding-bottom: 0; } .txt_con .txt.t9 { color: #093168; font-weight: 600; font-size: 1.5em; margin-bottom: 0.7em; } .txt_con .txt.t10 { font-size: 1.263em; font-weight: 500; } .txt_con .txt.t11 { position: relative; font-size: 1.1em; padding: 0 0 .3em 1.2em; line-height: 1.6; margin-top: .3em; } .txt_con .txt.t11:before { position: absolute; content: "Q."; color: #c82e27; left: 0; } .txt_con .txt.t12 { position: relative; font-size: 1.1em; padding: 0 0 1em 1.2em; line-height: 1.6; } .txt_con .txt.t12:before { position: absolute; content: "A."; color: #093168; left: 0; } .txt_con .txt.t12:last-of-type { padding-bottom: 0; } .txt_con .txt.t13 { text-align: center; font-size: 1.345em; letter-spacing: .375em !important; color: #246baa; line-height: 1.6; margin: 1em; } .txt_con .txt.t14 { font-size: 1.7em; font-weight: 600; margin-bottom: .3em; } .txt_con .txt.t15 { position: relative; font-size: 1.1em; padding: 0 0 .3em 1.3em; margin-top: .2em; } .txt_con .txt.t15:before { position: absolute; content: ""; width: .3em; height: .3em; background: #093168; top: 9px; left: 6px; } .txt_con .txt.t15:last-of-type { padding-bottom: 0; } .txt_con .txt.t16 { font-size: 1.3em; font-weight: 500; margin-bottom: .3em; } .txt_con .txt.t17 { font-size: .91em; } .txt_con .txt.t18 { font-size: 1.263em; } .txt_con .txt.t19 { position: relative; font-size: .9em; padding: 0 0 .3em 1.3em; margin-top: .2em; } .txt_con .txt.t19:before { position: absolute; content: ""; width: .3em; height: .3em; background: #093168; top: 9px; left: 6px; } .txt_con .txt.t19:last-of-type { padding-bottom: 0; } .underLine {position: relative; font-weight:700; margin-bottom: 0.15em;} .underLine:before {position: absolute;content: "";width: 105%;height: 0.7em;background: #1f5aa7;border-radius: 1em;top: 0.7em;left: -2.5%;z-index: -1;opacity: .15;} .underLine.none:before {display:none} .con_idx{ position:relative} .con_idx > .idx{ position:absolute; left:0; top:0; width:100%; visibility:hidden;filter:alpha(opacity=0);opacity:0; display: none;} .con_idx > .idx.on{ position:relative; visibility: visible; filter:alpha(opacity=100);opacity:1; display: block;} .gsClass.opacity{ opacity:0} .gsClass.opacity.on{ opacity:1} .gsClass.tShow{ overflow:hidden} .gsClass.tShow .el{ transform:translateY(100%); transition:1s} .gsClass.tShow.on .el{transform:translateY(0)} .gsClass.imgShow{overflow:hidden; background:rgba(0,0,0,.05);} .gsClass.imgShow .el{ transition:1s;} .gsClass.imgShow.left .el{ transform:translateX(-100%)} .gsClass.imgShow.right .el{ transform:translateX(100%)} .gsClass.imgShow.top .el{ transform:translateY(-100%)} .gsClass.imgShow.bottom .el{ transform:translateY(100%)} .gsClass.imgShow.on .el{transform:translate(0)} .gsClass.listShow .el{ transform:translateY(50%); opacity:0; transition:.3s} .gsClass.listShow.on .el{ transform:translateY(0); opacity:1} .gsClass.listShow.on .el:nth-child(1){ transition-delay:.2s} .gsClass.listShow.on .el:nth-child(2){ transition-delay:.4s} .gsClass.listShow.on .el:nth-child(3){ transition-delay:.6s} .gsClass.listShow.on .el:nth-child(4){ transition-delay:.8s} .gsClass.listShow.on .el:nth-child(5){ transition-delay:1s} .gsClass.listShow.on .el:nth-child(6){ transition-delay:1.2s} .gsClass.listShow.on .el:nth-child(7){ transition-delay:1.4s} .gsClass.listShow.on .el:nth-child(8){ transition-delay:1.6s} .gsClass.listShow.on .el:nth-child(9){ transition-delay:1.8s} .gsClass.listShow.on .el:nth-child(10){ transition-delay:2s} .gsClass.listShow.rotate .el{ transform:rotate(10deg)} .gsClass.listShow.rotate.on .el{ transform:rotate(0)} .gsClass.accordion .el{} .gsClass.accordion .el:nth-child(2){ transform:translateX(-100%); transition:.5s} .gsClass.accordion .el:nth-child(3){ transform:translateX(-200%); transition:1s} .gsClass.accordion .el:nth-child(4){ transform:translateX(-300%); transition:1.5s} .gsClass.accordion.on .el{ transform:translateX(0)} .base{ vertical-align: baseline;} .bg_gray{ background: #f9f9f9;} .sp_inner{ padding: 6em 0;} .before-gray{ position:relative;} .before-gray:before{ position: absolute; top: 200px; left: 0; width: 100%; height: 100%; background: #f9f9f9; content: ''; z-index: -1;} .tupper{ text-transform: uppercase;} .fs12{ font-size:.75em !important} .fs13{ font-size:.813em !important} .fs14{ font-size:.875em !important} .fs15{ font-size:.938em !important} .fs16{ font-size:1em !important} .fs17{ font-size:1.063em !important} .fs18{ font-size:1.125em !important} .fs19{ font-size:1.188em !important} .fs20{ font-size:1.25em !important} .fs21{ font-size:1.313em !important} .fs22{ font-size:1.375em !important} .fs23{ font-size:1.438em !important} .fs24{ font-size:1.5em !important} .fs25{ font-size:1.563em !important} .fs26{ font-size:1.615em !important} .fs27{ font-size:1.688em !important} .fs28{ font-size:1.75em !important} .fs29{ font-size:1.813em !important} .fs30{ font-size:1.875em !important} .fs31{ font-size:1.938em !important} .fs32{ font-size:2em !important} .page-tt.s1{ font-size: 4.5em;} .page-tt.s2{ font-size: 4em;} .page-tt.s3{ font-size: 3.5em;} .page-tt.s4{ font-size: 3em;} .page-tt.s5{ font-size: 2.1em;} .page-tt.s6{ font-size: 1.8em;} .page-tt.s7{ font-size: 1.65em} .page-tt.s8{ font-size: 1.35em;} .page-tt.s9{ font-size: 1.15em;} .page-tt.s10{ font-size: 1em;} .page-tt.s11{ font-size: .95em;} .page-tt.s12{ font-size: 1.28em;} .lh01{ line-height: 1;} .lh02{ line-height: 1.2;} .lh03{ line-height: 1.3;} .lh04{ line-height: 1.4;} .lh05{ line-height: 1.5;} .lh06{ line-height: 1.6;} .fw500{ font-weight: 500} .fw600{ font-weight: 600} .fw700{ font-weight: 700} .fw800{ font-weight: 800} .fw900{ font-weight: 900} .img-sizing{ width: 100%; height: 100%; object-fit: cover;} .stickyT{ position: sticky; height: 100%; top: 8em;} /**/ /* 인사말 */ .greetings_wrap { } .greetings_wrap .greetings_con{ margin-top: 4em; } .greetings_wrap .greetings_text { width: 52%; padding: 1em 0 1em 4.5em; box-sizing: border-box; } .greetings_wrap .greetings_img { width: 48%;position:relative; height: 30em;} .greetings_wrap .greetings_img:before {position:absolute; content: ""; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%)} .greetings_wrap .greetings_list { position: relative; margin: 2em 0 4em; padding: 6em 0 4em 0; border-bottom: 1px dashed #ddd; } .greetings_wrap .greetings_list:before { position: absolute; content: ""; width: 1px; height: 2.5em; background: #999; top: 0; } .greetings_wrap .greetings_list .list {width: 15em; height: 15em; border-radius: 50%; margin-right: 3em; } .greetings_wrap .greetings_list .list:nth-of-type(1) { background: var(--siteC); } .greetings_wrap .greetings_list .list:nth-of-type(2) { background: #5e5d5c; } .greetings_wrap .greetings_list .list:nth-of-type(3) { background: #660; margin-right: 0; } /* 임원 */ .membersN_wrap{ overflow:hidden} .membersN_aniTit{ position:relative} .membersN_aniTit.m1{ margin-top:2em} .membersN_aniTit .tt{ position:absolute; left:0; width:100%; top:-.5em; white-space:nowrap; font-weight:700; line-height:1; opacity:.05; text-transform:uppercase} .membersN_aniTit .tt .t1{ font-size:7em} .membersN_aniTit .tt .t2{ font-size:5em} .membersN_tit{ margin-bottom:1em} .membersN_tit .t1{ font-weight:800; font-size:2.625em} .membersN_tit:not(:first-child){ margin-top:5em} .membersN{ display:flex; flex-wrap:wrap; position:relative; overflow:hidden; margin-bottom: 6em;} .membersN > li{ width:100%} .membersN > li .wrap_in{ position:relative} .membersN > li .wrap_in .img_wrap{ width:66.66%; overflow:hidden} .membersN > li .wrap_in .img_wrap .resize{ padding-bottom:71.66%} .membersN > li .wrap_in .img_wrap .resize[onclick]{ cursor:pointer} .membersN > li .wrap_in .img_wrap .resize[onclick]:after{ content:"\e97b"; font-family:xeicon; font-size:1.5em; width:2em; height:2em; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:50%; opacity:0} .membersN > li .wrap_in .img_wrap .resize[onclick]:hover{ box-shadow:0 0 5em rgba(0,0,0,.3) inset} .membersN > li .wrap_in .img_wrap .resize[onclick]:hover:after{ opacity:1; transform:translate(-50%, -50%) scale(1.2); transition:.3s} .membersN > li .wrap_in:not(.on) .img_wrap:hover .resize{ transform:scale(1.1); transition:1s} .membersN > li .wrap_in .con_wrap{ position:absolute; right:0; bottom:0; width:33.33%; max-height:100%; box-sizing:border-box; padding:3.75em 0 0 3.75em; display:flex; flex-direction:column; gap:2em 0} .membersN > li .wrap_in .con_wrap .grow{ flex:1 1 0%; min-height:0; display:flex; flex-direction:column} .membersN > li .wrap_in .con_wrap .scrollst{ padding:1.25em; background:#f5f5f5} .membersN > li .wrap_in .con_wrap .tit_wrap{ display:flex; flex-direction:column; gap:.5em} .membersN > li .wrap_in .con_wrap .name{ font-weight:700; font-size:2.5em; color:#093168} .membersN > li .wrap_in .con_wrap .subject{ color:#42454d; font-size:1.375em} .membersN > li .wrap_in .con_wrap .info{ position:relative} .membersN > li .wrap_in .con_wrap .info .tit{ font-size:1.25em; margin-bottom:.5em; padding:0 .5em} .membersN > li .wrap_in .con_wrap .info .list > li{ color:#555} .membersN > li .wrap_in .con_wrap .info .list > li:not(.point){ margin-bottom:.75em; position:relative; padding-left:.75em} .membersN > li .wrap_in .con_wrap .info .list > li:not(.point):before{ content:"·"; position:absolute; left:0; top:0} .membersN > li .wrap_in .con_wrap .info .list > li:last-child{ margin-bottom:0} .membersN > li .wrap_in .con_wrap .info .list > li.point{ margin-bottom:.75em; font-weight:700; font-size:1.063em} .member_con {} .member_con .member_wrap {} .member_con .member_wrap .member { gap: 6em 0em; justify-content: space-between;} .member_con .member_wrap .member > .list {width: calc(50% - 1em); position: relative; /*padding-bottom:1em;*/ border-bottom:1px solid #aaa; transition:.35s;} .member_con .member_wrap .member > .list:hover {border-bottom: 1px solid; border-color:#0f6238;} .member_con .member_wrap .list_wrap { height: 95%;} .member_con .member_wrap .img_sizing {overflow:hidden; flex:1 1 30%; box-shadow: 0 0 10px rgb(0,0,0,0.1); height: 18em; margin-bottom: 2em;} .member_con .member_wrap .img_sizing > img {transition:.35s; object-fit:cover; width: 100%; height: 100%;} .member_con .member_wrap .txt_box { width: 100%; padding: 0 1em 1em 2em; box-sizing: border-box; transition:.35s; flex:1 1 55%; position: relative;} .member_con .member_wrap .txt_box .title {padding-bottom:.5em; border-bottom: 1px solid #aaa;} .member_con .member_wrap .txt_box .info {padding: 1em 0 0 2em; } /* .member_con .member_wrap .txt_box .info.list_scroll{ overflow-y: scroll; height: 280px;} */ .member_con .member_wrap .txt_box .info > li {position: relative; color:#555; margin: 1em 0;} .member_con .member_wrap .txt_box .info > li:nth-child(n+7) {display: none;} .member_con .member_wrap .txt_box .info.member > li:before{ position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #0f6238; top: 7px; left: -12px; content: '';} .member_con .member_wrap .list:hover .txt_box {} .member_con .member_wrap .txt_box .group {font-size: 1em; margin-bottom: .5em; opacity: .8; color: #0f6238} .member_con .member_wrap .txt_box .name {font-size: 1.5em; position: relative; color:#888;} .member_con .member_wrap .txt_box .name b {color: #222; padding-right:10px; font-size:2rem;} .member_con .member_wrap .member > .list .view {position: absolute; right:10%; opacity: 0; visibility:hidden; transition:.35s; font-weight: 300; bottom:0; color: #0f6238;} .member_con .member_wrap .member > .list .view .txt {font-size: 1em; font-weight:500;} .member_con .member_wrap .member > .list .view .xi {font-size: 1em;} .member_con .member_wrap .member > .list:hover .view { opacity: 1; visibility:visible; right:0;} .member_con .member_wrap .member > .list:hover .img_sizing > img {transform:scale(1.05)} /*오는 길*/ .location-con .map-info { background: #f9f9f9; padding: 3em; box-shadow: 0 5px 10px rgba(0,0,0,.1); margin-top: 1em; border: 1px solid #eee;} .location-con .map-info .add-list { gap: 0 3em;} .location-con .map-info .add-list > li { margin-bottom: 1em;} .location-con .map-info .add-list > li:first-child { flex: 1 1 100%; margin-bottom: 2em;} .location-con .map-info .add-list > li:last-child { margin-bottom: 0;} .location-con .map-info .add-list > li .add-wrap { width: 100%; padding-left: 1em;} .location-con .map-info .add-list > li .add-wrap > p { display: flex; margin-bottom: .5em;} .location-con .map-info .add-list > li .add-wrap > p:last-child { margin-bottom: 0;} .location-con .map-info .add-list > li .add-wrap b { font-size: 1.25em; color: #111;} .location-con .map-info .add-list > li .add-wrap .tt { flex: 1 1 92%;} .location-con .map-info .add-list > li > p { display: flex; align-items: center;} .location-con .map-info .xi { background: #fff; color: var(--siteC); border-radius: 50%; width: 1.8em; height: 1.8em;line-height: 1.8em; text-align: center;} .location-con .map-info .tt { font-size: 1.25em;font-weight: 500; padding-left: 1em; color: #111 !important;} .location-con .map-info .tt a:link{ color: #111;} .sub_w{ width: 1.5em; height: 1.5em; color: #fff; text-align: center; line-height: 1.5; font-size: .8em; border-radius: 50%; margin-right: .3em;} .sub_w.sub_1{ background: #b2a284;} .bus_w{ padding: .3em .6em; border-radius: .3em; text-align: center; font-size: .8em; color: #fff; margin-right: .3em;} .bus_w.bus_1{ background: #b2a284;} .history_wrap{ display:flex; align-items:flex-start; position:relative; padding:4em 0 1em 0} .history_wrap:before{ content:""; position:absolute; top:0; width:1px; height:calc(100% - 3em); background:#ddd} .history_wrap:before, .history_wrap .tabLink{ left:27em} .history_wrap .wrap_tab{ width:27em; padding:1em 0; padding:0 6em 0 3em; box-sizing:border-box} .history_wrap .wrap_tab > li > a{ margin:2em 0; color:#111; position:relative; filter:grayscale(1); transition:.3s} .history_wrap .wrap_tab > li > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.5)} .history_wrap .wrap_tab > li > a .t1{ font-weight:700; font-size:1.75em} .history_wrap .wrap_tab > li.on > a, .history_wrap .wrap_tab > li > a:hover, .history_wrap .wrap_tab > li > a:focus{ filter:grayscale(0); color:#fff} .history_wrap .wrap_tab > li.on > a:before, .history_wrap .wrap_tab > li > a:hover:before, .history_wrap .wrap_tab > li > a:focus:before{ width:100%; height:100%; background:rgba(0,0,0,.2)} .history_wrap .wrap_tab > li.on > a{ border-color:#111; box-shadow:0 0 .5em rgba(0,0,0,.1)} .history_wrap .wrap_tab > li.on > a:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; border:.25em solid var(--siteC)} .history_wrap .wrap_con{ flex:1 1 0%; min-width:0; box-sizing:border-box; padding:2em 0; padding-right:6em} .history_wrap .tabLink{ width:5em; height:3em; position:absolute; bottom:0; transform:translatex(-50%)} .fadeAni{ animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite} .history_wrap .tabLink .xi{ font-size:3em; position:absolute; left:0; top:0; width:100%; text-align:center;color:#ddd; margin-left:1px; animation-duration: 3s; animation-iteration-count: infinite} .history_wrap .tabLink .xi:before{content:"\e943"} .history_wrap .tabLink.tab1 .xi:before{content:"\e946"} .history_wrap .tabLink .xi:nth-child(1){ transform:translateY(-.188em) scale(.6); animation-name: angleAni1} .history_wrap .tabLink .xi:nth-child(2){ transform:scale(.8); animation-name: angleAni2} .history_wrap .tabLink .xi:nth-child(3){ transform:translateY(.188em); animation-name: angleAni3} .history_wrap .tabLink.tab1 .xi:nth-child(1) { transform:translateY(-.188em) scale(1); animation-name: angleAni3} .history_wrap .tabLink.tab1 .xi:nth-child(3) { transform:translateY(.188em) scale(.6); animation-name: angleAni1} .history_wrap .tabLink:hover .xi, .history_wrap .tabLink:focus .xi{animation-name: none; color:var(--siteC)} @keyframes angleAni1{ 0% {color: #ddd} 10% {color: #0063ba} 20% {color: #ddd} } @keyframes angleAni2{ 10% {color: #ddd} 20% {color: #0063ba} 30% {color: #ddd} } @keyframes angleAni3{ 20% {color: #ddd} 30% {color: #0063ba} 40% {color: #ddd} } .history > li{ padding:0 0 4em 4em; position:relative} .history > li:before{ content:""; position:absolute; left:0; top:1.25em; width:3em; height:1px; background:#ddd} .history > li .dot{ position:absolute; left:0; top:1.25em; transform:translate(-50%,-50%); width:1.5em; height:1.5em} .history > li .dot:before, .history > li .dot:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:50%} .history > li .dot:before{ background:none; } .history > li .dot:after{ background:#ccc; width:40%; height:40%} .history > li .year .t1{ font-weight:700; font-size:1.75em; letter-spacing:-.063em} .history > li .list{ padding:1em 0} .history > li .list > li{ display:flex; padding:.5em .125em; align-items: center;} .history > li .list > li .month{ width:4em; margin-right:1em} .history > li .list > li .con{ flex:1 1 0%; min-width:0; padding:.125em 0; color:#666} .history > li .list > li .con .t1{ font-size:1.063em} .history > li .month .t1{ font-weight:500; font-size:1.125em;} .history > li.on .year, .history > li.on .list > li .month{ color:var(--siteC)} .history > li.on .list > li .con{ color:#111; font-weight:500} .history > li.on .dot:before{ background:var(--siteC); opacity:.4; animation-name: scaleAni; animation-duration: 2s; animation-iteration-count: infinite} .history > li.on .dot:after{ background:var(--siteC)} @keyframes scaleAni{ 100% { opacity:0; width:150%; height:150%} } .page_twrap_img{ position:relative; padding-bottom:7em} .page_twrap_img .wrap_con{ width:70%; background:#fff; position:relative; z-index:1; box-sizing:border-box; padding:3em; padding-bottom:4em} .page_twrap_img .wrap_con:before{ content:""; position:absolute; left:0; top:0; width:2em; height:2em; border:.25em solid var(--siteC); border-right:none; border-bottom:none} .page_twrap_img .wrap_img{ position:absolute; left:0; bottom:0; width:100%; height:70%} .page_twrap_img .wrap_img .img{ height:100%} .page_twrap_img.st1{ padding-bottom:5em} .page_twrap_img.st1 .wrap_con{ width:80%; margin:0 auto; text-align:center; padding:3em; border-top:1px solid #111} .page_twrap_img.st1 .wrap_con:before{ display:none} .page_twrap_img.st1 .wrap_img{ height:80%} .page_tit{ font-size:1.5em; font-weight:700; margin-bottom:.5em} .page_tit.s1{ font-size:1.688em} .page_tit.s2{ font-size:1.813em} .page_tit.s3{ font-size:2em} /* Tab 공통 스타일 */ .tab_menu {margin:0 0 2em 0;} .sub-tab-wrapper-style{position:relative; height:75px; } .sub-tab-list-style ul{display:flex; justify-content: center; width:100%; height:100%; text-align: center; margin: 0 0 -.5em -.5em;} .sub-tab-list-style ul:after{display:none} .sub-tab-list-style ul .selected { display:inline-block; vertical-align:middle; position:relative; width:18%; /*background-color:#eee;*/} .sub-tab-list-style ul .selected:hover a {background-color: var(--siteC);} .sub-tab-list-style ul .selected:hover a em{color: #fff;} .sub-tab-list-style ul .selected a{ height:60px; margin: 0 0 .5em .5em; background: #eee; transition: 0.35s; cursor: pointer;} .sub-tab-list-style ul .selected a em{ color:#888; font-size:1.25em; letter-spacing:-0.25px; text-align:center;} .sub-tab-list-style ul .selected.on{z-index:1; } .sub-tab-list-style ul .selected.on a{background-color:var(--siteC)} .sub-tab-list-style ul .selected.on a em{color:#fff; font-weight: 600} /* Tab Fixed Move*/ .sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:75px; z-index: 1;} /* Mobile Tab Drop Menu */ .sub-drop-open-btn-style{display:none} /* -------- 회사연혁 -------- */ /* 컨텐츠01 :: 타이틀박스 */ .history-page .history-tit-box{margin-bottom: 70px} /* 컨텐츠02 :: 연혁 */ .history-tit-img{height: 18em; background: url("../images/sub/v_project_0003.jpg") bottom center no-repeat;} .history-con-wrap{} .history-con .sub-tab-list-style.top-fixed{top: 0} .history-con .sub-tab-wrapper-style{ margin-bottom: 30px;} .history-con .sub-tab-list-style ul li{position: relative} .history-con .sub-tab-list-style ul li:after{content:""; position: absolute; top: 50%; margin-top: -7px; right: 0; width: 1px; height: 15px; background-color: #ccc} /*위원회 소개*/ .cont_gallery_list > ul > li{position:relative; /*flex: 1 1 20%;*/} .cont_gallery_list > ul > li .cont_gallery_list_box{height:100%;overflow:hidden; border:1px solid rgba(0,0,0,0.1); margin:0; background:#fff; position:relative;} .cont_gallery_list2 > ul > li .cont_gallery_list_box{border:0; box-shadow:2px 2px 8px 0px rgba(0,0,0,0.1);} .cont_gallery_list3 > ul > li .cont_gallery_list_box{border-radius:0;} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_text_box{ padding: 1em; box-sizing: border-box;} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_gallery_list_img{position:relative; overflow:hidden;} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_gallery_list_img_height{height:0; padding-top:100%;} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_gallery_list_img_height2{padding-top:75%;} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_gallery_list_img_height img{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_gallery_list_img_height2 img{top:0; -webkit-transform:translate(-50%,0); -ms-transform:translate(-50%,0); transform:translate(-50%,0); object-fit:cover; width:100%; height:100%;} .cont_gallery_list > ul > li .cont_gallery_list_box .cont_gallery_list_img img{transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease;} .cont_gallery_list > ul > li:hover .cont_gallery_list_box .cont_gallery_list_img img{-webkit-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05);} .cont_gallery_list > ul > li:hover .cont_gallery_list_box .cont_gallery_list_img_height img{-webkit-transform:translate(-50%,-50%) scale(1.05); -ms-transform:translate(-50%,-50%) scale(1.05); transform: translate(-50%,-50%)scale(1.05);} .cont_gallery_list > ul > li:hover .cont_gallery_list_box .cont_gallery_list_img_height2 img{-webkit-transform:translate(-50%,0) scale(1.05); -ms-transform:translate(-50%,0) scale(1.05); transform: translate(-50%,0)scale(1.05);} .cont_gallery_list_hidden > ul > li .cont_gallery_list_box .cont_text_box{padding:0; position:absolute; top:100%; background:#fff; height:100%; transition:All 0.4s ease; -webkit-transition:All 0.4s ease; -moz-transition:All 0.4s ease; -o-transition:All 0.4s ease;} .cont_gallery_list_hidden > ul > li:hover .cont_gallery_list_box .cont_text_box{top:0; margin:0;} .cont_gallery_list_hidden > ul > li .cont_gallery_list_box .cont_text_boxs:first-child{background:#f4f6f8;} .cont_gallery_list_hidden > ul > li .cont_gallery_list_box .cont_text_boxs{padding:30px;} /* cont */ .cont_box{padding:100px 0px; width:100%; margin:0 auto; position:relative; overflow:hidden;} .cont_box:nth-child(2n-1){background:#f4f6f8;} .cont_boxs{width:100%; max-width:1440px; margin:0 auto; margin-bottom:50px; padding-bottom:50px; border-bottom:1px solid rgba(0,0,0,0.1);} .cont_boxs:last-child{margin-bottom:0; padding-bottom:0; border-bottom:0;} .cont_head{text-align:center; background:#242424 !important; color:#fff !important; z-index:1; padding:150px 30px; padding-bottom:100px;} .cont_head:before{content:""; position:absolute; width:100%; height:100%; left:0; top:0; opacity:0.1;} .cont_head .cont_boxs{position:relative;} .cont_head .cont_text_wrap{opacity:0.7; margin:30px 0;} .cont_banner{background:#212121 !important; color:#ccc !important; padding:50px 0 !important;} .cont_title_wrap{font-size:20px; margin-bottom:40px; position:relative;} .cont_title_wrap:last-child{margin-bottom:0;} .cont_title{font-size:1.4em; line-height:1.2; letter-spacing:-3px;} .cont_title h1{font-size:1.6em; text-transform:uppercase;} .cont_title h2{font-size:1.4em;} .cont_title h3{font-size:1.2em;} .cont_title_info{margin:10px 0; display:inline-block !important;} .cont_title_info:first-child{margin-top:0;} .cont_title_info:last-child{margin-bottom:0;} .cont_title_wrap_design{position:relative; padding-bottom:30px; margin-bottom:30px;} .cont_title_wrap_design:before{content:""; background:rgba(0,0,0,0.5); width:50%; max-width:50px; height:2px; position:absolute; bottom:0; left:0;} .cont_more{text-align:right;} .cont_text_bg{position:relative; z-index:1;} .cont_text_bg:before{transition: All 0.4s ease; -webkit-transition: All 0.4s ease; -moz-transition: All 0.4s ease; -o-transition: All 0.4s ease; content:""; position:absolute; background:#c3e3ff; padding:0px; width:100%; height:50%; z-index:-1; top:75%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .cont_text_wrap{margin:40px 0;} .cont_text_wrap:first-child{margin-top:0;} .cont_text_wrap:last-child{margin-bottom:0;} .cont_text_box{margin-bottom:20px;} .cont_text_box:last-child{margin-bottom:0;} .cont_text_title{font-size:1.2em; display: flex; gap: .3em; align-items: flex-end;} .cont_text_title > h2{ font-size: 1.3em; font-weight: 600;} .cont_text{margin:20px 0;} .cont_text:first-child{margin-top:0;} .cont_text:last-child{margin-bottom:0;} .cont_text_inner{margin:5px 0;} .cont_text_inner:first-child{margin-top:0 !important;} .cont_text_inner:last-child{margin-bottom:0 !important;} .cont_text_info{font-size:0.9em; opacity:0.7;} .cont_text_label{background:#000; color:#fff; font-size:0.6em; padding:2px 8px; border-radius:5px; vertical-align:middle;} .cont_img{border-radius:10px; overflow:hidden;} .cont_list > ul{display:flex; width:100%; gap: 2em; flex-wrap: wrap;} .cont_list_width > ul{display:table; width:auto; margin:0 auto; text-align:center;} .cont_list_width > ul > li{float:none !important;} .cont_list_align > ul{margin:0;} .cont_list_content_align > ul{align-items:center;} .cont_list_content > ul > li{margin-right:50px !important; margin-top:0 !important; width:calc(1 / 2 * 100% - (1 - 1 / 2) * 50px) !important;} .cont_list_content > ul > li:nth-child(2n){margin-right:0 !important;} .cont_list_content_search > ul > li:last-child .input_btn_wrap{float:right;} .cont_list > ul > li{display:inline-block; vertical-align:middle; /*margin-right:20px; margin-top:20px;*/} .cont_list1 > ul > li{width:100%; margin-right:0;} .cont_list1 > ul > li:first-child{margin-top:0;} .cont_list2 > ul > li{width:calc(1 / 2 * 100% - (1 - 1 / 2) * 20px);} .cont_list2 > ul > li:nth-child(-n+2) {margin-top:0;} .cont_list2 > ul > li:nth-child(2n){margin-right:0;} .cont_list3 > ul > li{width:calc(1 / 3 * 100% - (1 - 1 / 3) * 20px);} .cont_list3 > ul > li:nth-child(-n+3) {margin-top:0;} .cont_list3 > ul > li:nth-child(3n){margin-right:0;} .cont_list4 > ul > li{width: 23%;} .cont_list4 > ul > li:nth-child(-n+4) {margin-top:0;} .cont_list4 > ul > li:nth-child(4n){margin-right:0;} .cont_list5 > ul > li{width:calc(1 / 5 * 100% - (1 - 1 / 5) * 20px);} .cont_list5 > ul > li:nth-child(-n+5) {margin-top:0;} .cont_list5 > ul > li:nth-child(5n){margin-right:0;} .cont_list2_1 > ul > li{width:calc(100% - 75% - (1 - 1 / 2) * 20px);} .cont_list2_1 > ul > li.cont_list2_1_box{width:calc(100% - 25% - (1 - 1 / 2) * 20px);} .cont_list2_2 > ul > li{width:calc(100% - 60% - (1 - 1 / 2) * 20px);} .cont_list2_2 > ul > li.cont_list2_2_box{width:calc(100% - 40% - (1 - 1 / 2) * 20px);} .cont_list_small > ul > li{display:inline-block; float:left; margin-right:10px; margin-top:10px;} .cont_list_small1 > ul > li{width:100%; margin-right:0;} .cont_list_small1 > ul > li:first-child{margin-top:0;} .cont_list_small2 > ul > li{width:calc(1 / 2 * 100% - (1 - 1 / 2) * 10px);} .cont_list_small2 > ul > li:nth-child(-n+2) {margin-top:0;} .cont_list_small2 > ul > li:nth-child(2n){margin-right:0;} .cont_list_small3 > ul > li{width:calc(1 / 3 * 100% - (1 - 1 / 3) * 10px);} .cont_list_small3 > ul > li:nth-child(-n+3) {margin-top:0;} .cont_list_small3 > ul > li:nth-child(3n){margin-right:0;} .cont_list_small4 > ul > li{width:calc(1 / 4 * 100% - (1 - 1 / 4) * 10px);} .cont_list_small4 > ul > li:nth-child(-n+4) {margin-top:0;} .cont_list_small4 > ul > li:nth-child(4n){margin-right:0;} .cont_list_small5 > ul > li{width:calc(1 / 5 * 100% - (1 - 1 / 5) * 10px);} .cont_list_small5 > ul > li:nth-child(-n+5) {margin-top:0;} .cont_list_small5 > ul > li:nth-child(5n){margin-right:0;} .cont_list_map > ul > li{position:relative; display:inline-block; padding:0 15px;} .cont_list_map > ul > li:first-child{padding-left:0;} .cont_list_map > ul > li:last-child{padding-right:0;} .cont_list_map > ul > li:before{height:8px; width:8px; position:absolute; top:55%; right:-5px; margin:0; border:solid rgba(255,255,255,0.5); border-width:0 0 1px 1px; content:""; display:inline-block; transition:All 0.2s ease; -webkit-transition:All 0.2s ease; -moz-transition:All 0.2s ease; -o-transition:All 0.2s ease; -webkit-transform:translate(0,-50%) rotate(-135deg); -ms-transform:translate(0,-50%) rotate(-135deg); transform:translate(0,-50%) rotate(-135deg);} .cont_list_map > ul > li:last-child:before{display:none;} .m_info_middle::-webkit-scrollbar { width: 10px; } .m_info_middle::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } .cont_info_wrap{background:#f4f6f8; padding:20px;} .cont_info{} .cont_info:first-child{margin-top:0;} .cont_info:last-child{margin-bottom:0;} .cont_info > ul{border:0;} .cont_info > ul > li{margin:10px 0; padding-left:10px; position:relative; border-top:0;} .cont_info2 > ul > li{margin:20px 0;} .cont_info > ul > li:first-child{padding-top:0; margin-top:0;} .cont_info > ul > li:last-child{padding-bottom:0; margin-bottom:0;} .cont_info > ul > li:after{content:""; position:absolute; top:0.5em; left:0; width:6px; height:1px; background:var(--siteC);} .cont_info_num > ul{counter-reset:list-number;} .cont_info_num > ul > li{margin-left:1em; padding-left:1em;} .cont_info_num > ul > li:before{position:absolute; left:-1em; text-align:center; counter-increment:list-number; content:counters(list-number, ""); background:var(--siteC); color:#fff; width:1.5em; height:1.5em; line-height:1.5em; border-radius:4px; font-size:0.9em; font-weight:500;} .cont_info_num > ul > li:after{display:none;} .cont_tab{margin-bottom:30px; text-align:center;} .cont_tab ul{display:table; width:100%; background:#f4f6f8; border-top:1px solid rgba(0,0,0,0.1);} .cont_tab ul li{display:table-cell; width:10%; border-right:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1);} .cont_tab ul li:first-child{border-left:1px solid rgba(0,0,0,0.1);} .cont_tab ul li.check{background:#fff; border-bottom:0;} .cont_tab ul li a{display:block; width:100%; padding:15px 0;} .cont_tab2 ul li{display:inline-block; width:20%;} .cont_tab2 ul li:nth-child(5n+1){border-left:1px solid rgba(0,0,0,0.1);} .cont_step{max-width:1024px; margin:0 auto;} .cont_step ul{width:100%; text-align:center; font-size:15px; border:0 !important;} .cont_step ul li{text-align:center; padding:40px; background:#f4f6f8; border:1px solid rgba(0,0,0,0.1);} .cont_step ul li span{position:relative; font-size:1.5em; display:inline-block; margin-bottom:5px; border-radius:100%; border:1px solid rgba(0,0,0,0.1); width:4em; height:4em; line-height:4em;} .cont_step ul .check{color:var(--siteC); background:#fff;} .cont_step ul .check span{background:var(--siteC) !important; border:1px solid var(--siteC); color:#fff; font-weight:500;} /*건축설계*/ .const-Wrap{} .const-Wrap .top-t{ margin-bottom: 2.5em;} .const-Wrap .const-list{ margin: 0 0 -2em -2em;} .const-Wrap .const-list > li{ flex: 1 1 50%; max-width: 50%;} .const-Wrap .const-list > li > .inner{ position:relative; margin: 0 0 2em 2em; background: #fff; overflow: hidden; } .const-Wrap .const-list > li > .inner .in{ /*padding: 2.5em;*/} .const-Wrap .const-list > li > .inner .in .const-btm{ padding: 2em; background: #fff; box-sizing:border-box;} .const-Wrap .const-list > li > .inner .in .const-btm.ur{ height: 19em;} .const-Wrap .const-list > li > .inner .in .const-imgCon{ width: 100%; height: 22.5em;} .const-Wrap .const-list > li > .inner .num{ padding-bottom: 2em;} .const-Wrap .const-list > li > .inner .num.c1{ color: #FFA000;} .const-Wrap .const-list > li > .inner .num.c2{ color: #98CA3C;} .const-Wrap .const-list > li > .inner .num.c3{ color: #4980C2;} .const-Wrap .const-list > li > .inner .num.c4{ color: #005083;} .const-Wrap .const-list > li > .inner .inner-ttl{} .const-Wrap .const-list > li > .inner .inner-list{ margin-top: 1em;} .const-Wrap .const-list > li > .inner .inner-list > li{ position:relative; padding-left: 1.1em; margin-bottom: .5em; flex: 1 1 50%;} .const-Wrap .const-list > li > .inner .inner-list > li.pl_n{ padding-left: 0;} .const-Wrap .const-list > li > .inner .inner-list > li.dot:before{ position: absolute; top: 8px; left: 6px; width: 4px; height: 4px; background: #444; border-radius: 50%; content: '';} .const-Wrap .const-list > li > .inner .inner-list > li:last-of-type{ margin-bottom: 0em;} .const-Wrap .const-list > li > .inner .icon{ position: absolute; right: 0; bottom: 0; width: 35%; opacity: .15;} /*컨설팅*/ .consulting-Wrap{} .consulting-Wrap .cons-list{ margin: 0 0 -1em -1em;} .consulting-Wrap .cons-list > li{ flex: 1 1 33.33%; max-width: 33.33%;} .consulting-Wrap .cons-list > li > .inner{ margin: 0 0 2em 2em; box-sizing:border-box;} .consulting-Wrap .cons-list > li > .inner .img-con{ position:relative; width: 100%; height: 33em; overflow: hidden;} .consulting-Wrap .cons-list > li > .inner .img-con:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1); content: '';} .consulting-Wrap .cons-list > li > .inner .img-con .posi-N{ position: absolute; top: 0; left: 0; padding: 2em;} .consulting-Wrap .cons-list > li > .inner .img-con .posi-N > p{ opacity: .45; color: #fff; font-weight: 200;} .consulting-Wrap .cons-list > li > .inner .img-con .in-tt{ position: absolute; padding: 1.5em 2em; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0, .45); backdrop-filter: blur(2px); box-sizing:border-box;} /*임원소개*/ .member-Con{} .member-Con .member-list{ margin: 0 0 -50px -25px;} .member-Con .member-list.ceo{ justify-content: center; padding-bottom: 4.5em; margin: 0;} .member-Con .member-list.ceo > li{ max-width: 100%; padding: 2em 4em;} .member-Con .member-list.ceo > li > .inner{ margin: 0em;} .member-Con .member-list.ceo > li > .inner .mem-img{ width: 50%; height: 37.5em; border-radius: 0em;} .member-Con .member-list.ceo > li > .inner .ceo-infoWrap{ width: 50%; box-sizing: border-box; height: 37.5em; padding: 3.5em 3em 3em 3.75em; display: flex; flex-direction: column; gap: 2em 0; background: #f5f5f5;} .member-Con .member-list.ceo > li > .inner .ceo-infoWrap .ceo-infolist{ height: 17em; overflow: hidden;} .member-Con .member-list.ceo > li > .inner .ceo-infoWrap .ceo-infolist > li{ margin-bottom: .5em; color: #111; font-weight: 600;} .member-Con .member-list.ceo > li > .inner .ceo-infoWrap .ceo-infolist > li > p{ line-height: 1.75; text-overflow: ellipsis; word-break: break-word; -webkit-line-clamp: 9; -webkit-box-orient: vertical; display: -webkit-box; } .member-Con .member-list.ceo > li > .inner .ceo-infoWrap .ceo-infolist > li:last-of-type{ margin-bottom: 0em;} .member-Con .member-list.ceo > li > .inner .ceo-infoWrap .info-logo > img{ width: 5em;} .member-Con .member-list.ceo > li > .inner .info-Con .name{ text-align: left;} .member-Con .member-list.ceo > li > .inner .info-Con .border-box{ width: 50%;} .member-Con .member-list.ceo > li > .inner .info-Con .name > p{ font-size: 30px; font-weight: 700; color: #111;} .member-Con .member-list.ceo > li > .inner .info-ceo{ position: relative; height: 100%;} .member-Con .member-list.ceo > li > .inner .info-ceo:before{ content: ""; background: rgba(0,0,0,0.1); width: 1px; height: 100%; top: 0; left: 0; position: absolute;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-ttl{ position: relative; padding-left: 10px; border-left: 5px solid #70b748;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-ttl:before{} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-ttl > .record{ font-size: 1.45em; font-weight: 700; color: #111;} .member-Con .member-list.ceo > li > .inner .grow{ flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-infolist{ padding: 1.5em; background: #f9f9f9; height: 100%; overflow-y: scroll; margin: 1em .5em 0em 1.5em; box-shadow: 1px 0 3px rgba(0,0,0, .15);} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-infolist > li{ margin-bottom: 1em;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-infolist > li > .txt{ position: relative; font-size: 1em; color: #333; font-weight: 500; padding-left: 1em; padding-bottom: 0.2em;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-infolist > li > .txt:before{ position: absolute; content: '-'; left: 2px;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-infolist > li > .txt:last-of-type{ padding-bottom: 0em;} .member-Con .member-list.ceo > li > .inner .info-ceo .ceo-infolist > li > .date{ font-size: 1.07em; font-weight: 700; color: #333; padding-bottom: 0.25em;} .member-Con .member-list.ceo > li > .inner .more-view:before{ height: 8.5em;} .member-Con .member-list.director{ /*justify-content: center;*/ padding-bottom: 4.5em; padding-left: 10.5em;} /* width */ .career_info::-webkit-scrollbar { width: 3px; padding-right: .35em;} /* Track */ .career_info::-webkit-scrollbar-track {} /* Handle */ .career_info::-webkit-scrollbar-thumb { background: var(--siteC); border-radius: 20px;} .member-Con .member-list > li > .inner .mem-img:hover .hover{ opacity: 1;} .member-Con .member-list > li > .inner .mem-img:hover > img{ transform: scale(1.05); transition: .65s ease-out;} .member-Con .member-list > li > .inner:hover .info-Con .border-box{ background: #333; color: #fff; transition: .35s;} .member-Con .member-list > li > .inner:hover .info-Con .border-box > p{ color: #fff;} .member-Con .member-list > li{ flex: 1 1 33.33%; max-width: 33.33%;} .member-Con .member-list > li > .inner{ position:relative; margin: 0 0 50px 25px; overflow: hidden; cursor: pointer} .member-Con .member-list > li > .inner .mem-img{ position:relative; width: 100%; height: 21.5em; overflow: hidden; /*box-shadow: 1px 0 3px rgba(0,0,0, .15); */} .member-Con .member-list > li > .inner .mem-img > img{ object-fit: contain; padding: 2em; box-sizing: border-box;} .member-Con .member-list.ceo > li > .inner .mem-img .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); opacity: 0; transition: opacity .5s; z-index: 1;} .member-Con .member-list.ceo > li > .inner .mem-img > img{ padding: 9em;} .member-Con .member-list > li > .inner:hover .mem-img .hover{ opacity: 1;} .member-Con .member-list > li > .inner:hover .mem-img > img{ transform: scale(1.05); transition: .65s ease-out;} .member-Con .member-list > li > .inner:hover .info-Con .border-box{ background: #333; color: #fff; transition: .35s;} .member-Con .member-list > li > .inner:hover .info-Con .border-box > p{ color: #fff;} .member-Con .member-list > li > .inner .mem-img > img{ transition: .65s ease-out; filter: grayscale(1);} .member-Con .member-list > li > .inner .info-Con{ margin-top: 2.5em;} .member-Con .member-list > li > .inner .info-Con .name{ text-align: center; padding-bottom: .8em;} .member-Con .member-list > li > .inner .info-Con .name > p{ font-size: 28px; font-weight: 400; color: #444;} .member-Con .member-list > li > .inner .info-Con .border-box{ padding: 16px 0;background: #F6F6F6; text-align: center; transition: .35s;} .member-Con .member-list > li > .inner .info-Con .border-box > p{ color: #393E47; font-size: 14px; font-weight: 700;} .member-Con .member-list > li > .inner .more-view{ position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); border-radius: 3em; padding: 1em 2.5em; border: 1px solid #fff; opacity: 0; transition: .35s ease-out; z-index: 2;} .member-Con .member-list > li > .inner .more-view > p{ color: #fff;} .member-Con .member-list > li > .inner .more-view:before{ position: absolute; left: 50%; top: 100%; width: 1px; height: 6.5em; transform: translate(-50%, 0%); background: rgba(255,255,255, .65); content: '';} .member-Con .member-list > li > .inner .more-view .c-dot{ position: absolute; left: 50%; top: 102%; width: 8px; height: 8px; border-radius: 50%; background: #84d954; transform: translate(-50%, -50%);} .member-Con .member-list > li > .inner:hover .more-view{ opacity: 1; transition: .35s ease-out;} /*임원 정보*/ .member_infowrap{} .member_infowrap .mem_infocon{ gap: 4.5em;} .member_infowrap .mem_infocon .mem_img{ flex: 1 1 40%; border-radius: 2em; overflow: hidden; height: 35em; } .member_infowrap .mem_infocon .mem_img:before{ } .member_infowrap .mem_infocon .mem_img > img{ width: 100%; height: 100%; object-fit: cover;} .member_infowrap .mem_infocon .member_info{ flex: 1 1 60%;} .member_infowrap .mem_infocon .member_info .m_info_top{ padding-bottom: 2em;} .member_infowrap .mem_infocon .member_info .m_info_top .en_name{ font-size: 1.65em; font-weight: 500; color: #666; margin-bottom: .5em;} .member_infowrap .mem_infocon .member_info .m_info_top .mc{ align-items: flex-end; gap: 0.3em;} .member_infowrap .mem_infocon .member_info .m_info_top .mc .name{ font-size: 2.65em; font-weight: 700; color: #111;} .member_infowrap .mem_infocon .member_info .m_info_top .mc .company{ font-size: 1.65em; font-weight: 500; color: #333;} .member_infowrap .mem_infocon .member_info .m_info_top .mf_line{ margin-top: 2em; margin-bottom: 3em; width: 60px; height: 2px; background: #111;} .member_infowrap .mem_infocon .member_info .m_info_middle{} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap{ position:relative;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap:before{ content: ""; background: rgba(0,0,0,0.1); width: 1px; height: 100%; top: 0; left: 0; position: absolute;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_ttl{ position:relative; padding-left: 10px; border-left: 5px solid #70b748;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_ttl:before{ } .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_ttl .record{ font-size: 1.45em; font-weight: 700; color: #111;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list{padding: 1.5em; background: #f9f9f9; border-radius: 1em; margin: 1em 0 2em 1.5em; box-shadow: 2px 2px 6px rgba(0,0,0, .15);} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list > li{ margin-bottom: 1em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list > li > .date{ font-size: 1.07em; font-weight: 700; color: #333; padding-bottom: .25em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list > li > .txt{ position:relative; font-size: 1em; color: #333; font-weight: 500; padding-left: 1em; padding-bottom: .2em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list > li > .txt:last-of-type{ padding-bottom: 0em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list > li > .txt:before{ position: absolute; content: '-'; left: 2px;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .info_list > li:last-of-type{ margin-bottom: 0em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .contact{} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .contact > li{} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .contact > li > i{ background: #c9ab81; color: #fff; border-radius: 50%; width: 1.8em; height: 1.8em; line-height: 1.8em; text-align: center; font-size: 1.25em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .contact > li > .tt{ padding-left: .8em;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .link{} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .link > li{ position:relative;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .link > li > a{ color: #3b6ec6;} .member_infowrap .mem_infocon .member_info .m_info_middle .info_sec_wrap .link > li > a:hover{ text-decoration:underline;} /*프로젝트*/ .project-Wrap{ padding-top: 1.5em;} .projectList{ margin: 0 0 -2em -2em;} .projectList > li{ flex: 1 1 33.33%; max-width: 33.33%; } .projectList > li > .inner{ position:relative; margin: 0 0 2em 2em; border: 1px solid #ddd; cursor: pointer;} .projectList > li > .inner .mask .h-bg{ position: absolute; width: 100%; height: 100%; z-index: 3; opacity: 0.4; filter: grayscale(1);} .projectList > li > .inner .mask{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; background-color: #304886; overflow: hidden; transition: 0.3s;} .projectList > li > .inner .mask .h-ttl{ position: absolute; bottom: 3em; padding: 0 1.5em; z-index: 3;} .projectList > li > .inner .mask .h-ttl > i{ position:relative; left: 5px; padding: .75em; border: 1px solid #fff; color: #fff; margin-top: 2em; border-radius: 50%; min-width: 1.5em; min-height: 1.5em; text-align: center;} .projectList > li > .inner:hover .mask{ opacity: 1;} .projectList > li > .inner .pro-imgCon{ width: 100%; height: 16em; overflow: hidden;} .projectList > li > .inner:hover .pro-imgCon > img{ transform: scale(1.08); transition: .3s;} .projectList > li > .inner .pro-imgCon > img{ transition: .3s;} .projectList > li > .inner .inner-infoCon{ padding: 2.5em 2em; background: #fff;} .projectList > li > .inner .inner-infoCon .pro-ttl > p{ height: 60px; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .projectList > li > .inner .inner-infoCon .lnfo-list{ padding-top: 2em;} .projectList > li > .inner .inner-infoCon .lnfo-list > li{ margin-bottom: 1em; align-items: baseline;} .projectList > li > .inner .inner-infoCon .lnfo-list > li:last-of-type{ margin-bottom: 0em;} .projectList > li > .inner .inner-infoCon .lnfo-list > li .listL{ min-width: 5em;} .projectList > li > .inner .inner-infoCon .lnfo-list > li .listL > p{ font-size: 1em; font-weight: 600;} .projectList > li > .inner .inner-infoCon .lnfo-list > li .listR{} .projectList > li > .inner .inner-infoCon .lnfo-list > li .listR > p{ font-size: 1em; color: #444; font-weight: normal;} /*프로젝트 정본*/ .projectViewInfo{ padding-top: 4em;} .projectViewInfo .project-N{ padding-top: 2.5em; padding-bottom: 1.65em; padding-left: 3em;} .projectViewInfo .Btm-Con{ } .projectViewInfo .Btm-Con .Btm-list{ padding: 1.5em 2.5em; background: rgba(0,0,0, .6); backdrop-filter: blur(3px);} .projectViewInfo .Btm-Con .Btm-list > li{ margin-bottom: 1em;} .projectViewInfo .Btm-Con .Btm-list > li:last-of-type{ margin-bottom: 0em;} .projectViewInfo .Btm-Con .Btm-list > li .tl{ position:relative; flex: 1 1 20%; text-align:left; padding-left: 1.5em; min-width: 8em;} .projectViewInfo .Btm-Con .Btm-list > li .tl:before{ position: absolute; top: 10px; left: 9px; width: 5px; height: 5px; background: var(--siteC); border-radius: 50%; content: '';} .projectViewInfo .Btm-Con .Btm-list > li .tl > p{ position:relative; display: inline-block; font-size: 1.15em; font-weight: 400; color: #fff;} .projectViewInfo .Btm-Con .Btm-list > li .tx{ flex: 1 1 80%; color: #fff;} .projectViewInfo .Btm-Con .Btm-list > li .tx > p{ font-size: 1.05em; color: #fff; font-weight: 200;} .seching-box{ margin-bottom: 2em; margin-top: 2.5em; border-top: 1px solid #ddd;} .seching-box .prod-search-wrap {display: flex; align-items: center; justify-content: center; margin-top: 2.5em;} .seching-box .prod-search-wrap .wrap-in {width: 100%; display: flex; justify-content: center;} .seching-box .prod-search-wrap .wrap-in .prod-search {outline: none; border: none; background: #f5f5f5; padding: 1em; width: 25%; display: inline-block; font-size: 1em; } .seching-box .prod-search-wrap .wrap-in > button {outline: none; border: none; background: var(--siteC); color: #fff; padding: .6em; font-size: 1.1em;} .seching-box .prod-search-wrap .wrap-in > .more-prod {background: #fff; color: #333; border: 1px solid #d8d8d8; margin-left: .5em; font-weight: 700; transition: .35s;} .seching-box .prod-search-wrap .wrap-in > .more-prod:hover {border: 1px solid #ff6c31;} .seching-box .prod-search-wrap .wrap-in > .more-prod .xi {font-size: .938em; margin-left: .5em;} /*종합관리*/ .wrap-idx{} .wrap-idx .sub-tab{ display: flex; height: 4.15em; border-radius: 100px; background-color: #F5F5F5; margin-bottom: 2.5em;} .wrap-idx .sub-tab > li{ position: relative; display: flex; height: 100%; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; border: 2px solid transparent; border-radius: 100px; color: #BDBDBD; transition: .3s;} .wrap-idx .sub-tab > li.on{ background-color: #fff; color: #262932; border-color: #262932;} .license-Con{ margin-bottom: 6em;} .license-Con:last-of-type{ margin-bottom: 0em;} .license-Con .license-list{ margin: 0 0 -4em -2em;} .license-Con .license-list > li{ flex: 1 1 50%; max-width: 50%;} .license-Con .license-list > li .inner{ margin: 0 0 4em 2em;} .license-Con .license-list > li .inner .inner-left{ position: relative; flex: 1 1 50%; } .license-Con .license-list > li .inner .inner-left .license-img{ width: 100%; height: 25em; } .license-Con .license-list > li .inner .inner-left .license-img > img{} .license-Con .license-list > li .inner .inner-left:hover .plus-icon{ opacity: 1; transition: .25s;} .license-Con .license-list > li .inner .inner-left:hover:before{ opacity: 1; transition: .25s;} .license-Con .license-list > li .inner .inner-right{} .license-Con .license-list > li .inner .inner-right .star{ margin-top: 1em; padding: .5em 1em; background: #f9f9f9; gap: .3em;} .license-Con .license-list > li .inner .inner-right .star > i{ min-width: 1.3em;} .license-Con .license-list > li .inner .inner-right .star > p{ font-size: .9em;} .license-Con .license-list > li .inner .inner-right .info-list{} .license-Con .license-list > li .inner .inner-right .info-list > li{ border-bottom: 1px solid #ddd; padding: 1em 0; align-items: baseline;} .license-Con .license-list > li .inner .inner-right .info-list > li:first-of-type{ border-top: 1px solid #111;} .license-Con .license-list > li .inner .inner-right .t-ttl{ font-size: 1.45em; font-weight: 700; margin: 1.25em 0 1em 0;} .license-Con .license-list > li .inner .inner-right .info-list > li .l-ttl{ min-width: 6em; font-size: 1em; font-weight: 600;} .license-Con .license-list > li .inner .inner-right .info-list > li .l-icon{ min-width: 2em;} .license-Con .license-list > li .inner .inner-right .info-list > li .l-txt{ font-size: 1em;} .license-Con .T-img{ width: 100%; height: 25em; } .license-Con .work-topttl{ padding: 3em 0 2em 0;} .license-Con .work-List{} .license-Con .work-List > li{ margin-bottom: 3em; gap: 3em;} .license-Con .work-List > li:last-of-type{ margin-bottom: 0em;} .license-Con .work-List > li > .left-Con{ flex: 1 1 50%; width: 100%; height: 23.5em;} .license-Con .work-List > li > .left-Con > img{} .license-Con .work-List > li > .right-Con{ flex: 1 1 50%;} .license-Con .work-List > li > .right-Con .T-line{ width: 35px; height: 4px; background: var(--siteC); margin: .85em 0;} .license-Con .work-List > li > .right-Con .work-ttl{ padding-bottom: .85em;} .license-Con .work-List > li > .right-Con .work-inlist{ padding: 2em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .license-Con .work-List > li > .right-Con .work-inlist > li{ position:relative; flex: 1 1 50%; margin-bottom: .35em; padding-left: 1.5em;} .license-Con .work-List > li > .right-Con .work-inlist > li:before{ position: absolute; top: 8px; left: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); content: '';} .license-Con .work-List > li > .right-Con .work-inlist > li:last-of-type{ margin-bottom: 0em;} .viewSliderN{} .viewSliderN .swiper-wrapper{} .viewSliderN .workS{} .viewSliderN .workS .img{ position:relative; width: 100%; height: 100vh;} .viewSliderN .workS .img .text-con{ position: absolute;} /*오시는길*/ .organ-Wrap{} .organ-Wrap .organ-topbox{ padding: 2.5em; background: #f5f5f5; box-shadow: 3px 0 9px rgba(0,0,0, .25); text-align: center; margin-bottom: 2em;} .organ-Wrap .organ-topbox .organ-line{ margin: 1em auto; width: 30px; height: 1px; background: #111;} /*수정 css 240115*/ .scroll:not(.up) #header{ transform:translateY(0%)} #header:not(:hover) .top_wrap{ background: rgba(0,0,0, .3); backdrop-filter: blur(1em);} .visualSlide_control{ position:relative;} .visualSlide_wrap .titW{ top: unset; bottom: 4em; text-align:left;} .visualSlide_wrap .main_copy{ position: absolute; right: 4vw; bottom: 4em; opacity: .5; color: #fff; z-index: 9;} .visualSlide_wrap .titW .in:before{ position: absolute; bottom: -.5em; width: 0%; height: 1px; background: #fff; opacity:0; content: '';} .visualSlide_wrap .titW .in{ padding: unset;} .visualSlide_wrap .el.swiper-slide-active .titW .in:before{ /*transform:scaleX(1);*/ width: 100%;} .visualSlide_control .paging{ font-size: .9em;} #header .top_wrap .wrapH, #header .top_wrap .gnb_wrap .gnb > li .dp1{ height: 5.5em;} #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight: 500;} #header .top_wrap .gnb_wrap .gnb > li .dp1{ padding: 0 2vw;} #header .top_wrap .gnb_wrap .gnb > li .dp1.layer{ display: none;} #header .top_wrap .logo > a{ height: 4.5em;} #header .top_wrap .gnb_wrap .gnb > li .dp2{ display: none;} #contents .sub_top_wrap .visual_wrap{ padding: 0; height: 45vh;} .visualSlide_control{ justify-content: center; padding-bottom: 3em;} #header .gnb_wrap .gnb > li{ min-width: 9.5em;}