@charset "utf-8";/* CSS Document */ .box0 {padding: 0 6vw} .box1 {width: 1200px;margin: 0 auto} .box2 {width: 1600px;margin: 0 auto; } .box3 {width: 1400px;margin: 0 auto} .box4 {width: 1280px;margin: 0 auto; } .box5 {width: 1500px;margin: 0 auto; } .box6 {padding: 0 4rem 0 3rem;box-sizing: border-box; } .box7 {width: 100%; } .section {position: relative;overflow: hidden; } .PC {display: block !important} .PHONE {display: none !important} .gnb li.m_hide {display: none} body:not(.pop) {display: flex;flex-direction: column;min-height: 100vh;min-height: calc(var(--vh, 1vh) * 100)} .gnb li.m_hide {display: none} .gnb .layer {display: none !important; } .gnb .blank .arrow:before {content: "\e980"; } .fullH {height: calc(100vh);box-sizing: border-box; } .fullMH {min-height: calc(100vh) !important;box-sizing: border-box; } .filW {filter: var(--crWhitefil); } /*화이트*/ .filB {filter: var(--crBlackfil); } /*블랙*/ .filRE {filter: var(--crfilRE); } /*색상반전*/ /*header*/ .headT {padding-top: var(--headH); } .headH, #header .gnb_wrap .gnb > li, #header .gnb_wrap .gnb > li .dp1 {height: var(--headH);transition: height .2s, background .2s;box-sizing: border-box; } #header {z-index: 999;position: fixed;top: 0;left: 0;width: 100%;transition: transform 1s;color: #fff; } #header .inner {color: #fff; } #header .inner .gnb_wrap {/*padding-left: 8em; */} #header .logo {width: 18em; } #header .side_wrap { } #header .logo > .in img {display: block;width: 12em;transition: .2s;transform-origin: left center; } #header .logo img {width: 100%; } #header .all_wrap .allBtn {filter: var(--crWhitefil); } #header .all_wrap .allBtn > .xi {font-size: 2em; } #header .top_wrap .gnb_wrap {padding-left: 8vw; } #header .gnb_wrap .gnb > li {position: relative;overflow: hidden; } #header .gnb_wrap .gnb > li .dp3 {display: none; } #header .gnb_wrap .gnb > li .dp1 {position: relative;padding: 0 2.5em; } #header .gnb_wrap .gnb > li .dp1 .tt {position: relative;font-size: 1.250em;font-weight: 600; } #header .gnb_wrap .gnb > li .dp1 .tt:after {content: "";display: block;position: absolute;right: -10px;top: -6px;width: 6px;height: 6px;opacity: 0;background: var(--crBlack);border-radius: 50%;content: '';transition: .3s; } #header .gnb_wrap .gnb > li.on .dp1 .tt:after, #header .gnb_wrap .gnb > li.act .dp1 .tt:after {opacity: 1; } #header .gnb_wrap .gnb > li.act {z-index: 2;overflow: visible; } #header .gnb_wrap .gnb > li.act .dp1:after, #header .gnb_wrap .gnb > li.on .dp1:after {opacity: 1;transform: scaleX(.7); } html:not(.simple) #header:not(.active) .gnb_wrap .gnb > li .dp1:after {filter: var(--crWhitefil); } #header .gnb_wrap .gnb > li .dp2 {display: inline-block;opacity: 0;margin-top: -1em;position: absolute;padding: 0;top: 100%;left: 50%;width: 13em;background-color: var(--siteC);border-radius: .5em;color: #fff;transform: translateX(-50%);max-height: 0;overflow: auto;transition: max-height 1.25s, padding-top .3s, padding-bottom .3s; } #header .gnb_wrap .gnb > li .dp2:before {/* background-color: var(--siteC2); content: ''; */ /*content:""; display:block; position:absolute; top:0; left:50%; transform:translate(-50%,-100%); display: none; border-style:solid; border-color:transparent transparent var(--siteC2); border-width:0 7px 7px; */} #header .gnb_wrap .gnb > li .dp2 > li > a {padding: .35em 0;transition: .2s; } #header .gnb_wrap .gnb > li .dp2 > li > a .tt {position: relative;font-size: 1em;font-weight: 500;opacity: .95; } #header .gnb_wrap .gnb > li.act .dp2 {max-height: calc(100vh - 56px);overflow-y: hidden;opacity: 1;padding: 1em 0 1em 0; } #header .gnb_wrap .gnb > li .dp2 > li > a .in {position: relative; } #header .gnb_wrap .gnb > li .dp2 > li > a .in:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 1px;background: #fff; } #header .gnb_wrap .gnb > li .dp2 > li > a:hover .in:after {width: 100%;transition: .65s} #header .side_wrap { } #header .side_wrap .mem { } #header .side_wrap .mem > li { } #header .side_wrap .mem > li .in {gap: 0 .5em;padding: .5em 1em; } #header .side_wrap .mem > li .in:hover .tt {text-decoration: underline; } #header .all_wrap {color: #000; } #header .all_wrap .all {width: 4.5em; } #header .all_wrap .all_btn {position: relative;display: block;width: 1.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;right: 0; } #header .all_wrap .all_btn .ham:before {top: calc(50% - 1px);width: 100%; } #header .all_wrap .all_btn .ham:after {top: calc(100% - 1px);width: 100%; } #header .all_wrap .all_btn:hover .ham:before {width: 100%; } #header .all_wrap .all_btn:hover .ham:after {width: 100%; } .sub #header .all_wrap .all_btn {filter: brightness(0) invert(1); } .scroll .sub #header .all_wrap .all_btn {filter: none; } #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: 15em; } #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: solid var(--crGray);border-width: 1px 0;margin-bottom: -1px; } #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-image: var(--crGrad1);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(--siteC2);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(--crGray)} #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(--crGray2); } #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: 2vw;width: 2.5em;height: 3em;filter: brightness(0) invert(0) !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; } .scroll #header { } .scroll #header {background: #fff;color: var(--crBlack);box-shadow: 0 0 2em rgba(0, 0, 0, .1);transform: translateY(0em); } .scroll.up #header {background: #fff;color: #111} .scroll.up #header .top_wrap .wrapH, .scroll.up #header .top_wrap .gnb_wrap .dp1 {height: 4.5em} .scroll.up #header .top_wrap .etc_wrap .etcBtn {filter: brightness(0) invert(0); } .scroll.up .headerT {padding-top: 4em} .scroll.up #header .top_wrap .logo > a {filter: none} .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)} #header.menuOn, .scroll #header {border-color: rgba(0, 0, 0, .1);background: #fff;box-shadow: 0 3px 8px rgba(0, 0, 0, .15); } #header.menuOn .gnb_wrap .gnb > li > .dp1, .scroll #header .gnb_wrap .gnb > li > .dp1 {color: #111; } #header.menuOn .all_wrap .all_btn, .scroll #header .all_wrap .all_btn {filter: none; } #header.visual {background: transparent;color: #fff; } #header.visual .logo > .in img {filter: brightness(0) invert(1); } #header.visual .gnb_wrap .gnb > li .dp1 {color: #fff; } #header.visual .all_wrap .all_btn {filter: brightness(0) invert(1); } #header.menuOn {border-color: rgba(0, 0, 0, .1);background: #fff;box-shadow: 0 3px 8px rgba(0, 0, 0, .15); } #footer {z-index: 1;color: #fff;background: #111;padding: 1em 0 8em 0;border-top: 1px solid #e8e8e8; } #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: 4em;filter: brightness(0) invert(1); } #footer .info_wrap {margin-top: 2em; } #footer .info {overflow: hidden} #footer .info > li {float: left;margin-right: 1.5em;margin-bottom: .25em;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 { } #footer .cs_wrap .wrap_in {position: relative;text-align: right} #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;font-size: 1.25em; } #footer .cs_wrap .t2 {font-weight: 700;font-size: 1.515em;line-height: 1.4; } #footer .menu_wrap {margin-left: auto;display: flex;gap: 2em} #footer .menu_wrap > li > a {opacity: .6;font-weight: 500} #footer .menu_wrap > li.point > a {opacity: 1;font-weight: 700; } .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;background: var(--siteC); } .sns_st > li > a:hover {background: #fff;color: #111} /**********공통**********/ #contents .doc {padding: 4em 0 10em 0; } #contents .doc.pt0 {padding: 0em 0 10em 0; } #contents .doc.pb0 {padding: 4em 0 0em 0; } .Rlate {position: relative; } .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; } .wrap-idx { } .wrap-idx .sub-tab {display: flex;height: 3.85em;border-radius: 100px;background-color: #f0f4f7;margin: 0 auto 4.5em; } .wrap-idx .sub-tab.w1 {width: 800px; } .wrap-idx .sub-tab > li {position: relative;cursor: pointer;height: 100%;display: flex;align-items: center;justify-content: center;flex: 1;font-size: 1.15em;font-weight: 700;border: 2px solid transparent;border-radius: 100px;color: #444;transition: .3s; } .wrap-idx .sub-tab > li.on {background-color: var(--siteC);color: #fff; } /*그레이 박스*/ .grayB {padding: 3rem;box-sizing: border-box;border: 1px solid #e4e4e4;background: #f7f7f7; } .grayB.round {border-radius: 1em; } .grayB.gryN {background: transparent; } .grayB.Bgwihte {background: #fff; } .grayB > .img_con {text-align: center;width: 100%;height: 35em;max-height: 40em; } .grayB > .img_con > img {width: 100%;height: 100%;object-fit: contain; } /*버튼 공통*/ .btn-wrap {display: flex;gap: 10px; } .btn-wrap .btn {width: 160px;height: 50px;text-align: center;justify-content: center;border: 2px solid transparent;background: var(--siteC);color: #fff;display: flex;align-items: center;gap: 0.75rem;border-radius: 5px;text-align: center; } .btn-wrap .btn > i {font-size: 16px;line-height: 1;font-weight: 500; } .btn-wrap .btn > .xi {position: relative;top: 2px;font-size: 0.675rem;left: 10px; } .btn-wrap .btn.round {border-radius: 100px; } .btn-wrap .btn.s1 {width: 180px;height: 60px; } .btn-wrap .btn.s1 > i {font-size: 18px; } .btn-wrap .btn.border {background: transparent;border: 2px solid #fff;transition: .3s; } .btn-wrap .btn.border:hover {background: var(--siteC);border: 2px solid var(--siteC); } /*gary before*/ .begray {position: relative; } .begray:before {position: absolute;width: 100%;bottom: 0;top: 4.5em;background: #f9f9f9;content: ''; } /*gra line*/ .sub_line {width: 100%;height: 2px;background: linear-gradient(to right, #7fc31c, #00844a); } /*page_dot 공통*/ .page_dot_list {padding: 0 1.25em;margin-top: 1.25em; } .page_dot_list > li {position: relative;margin-bottom: .5em; } .page_dot_list > li > .txt {font-size: 1em; } .page_dot_list > li:before {position: absolute;left: -13px;top: 8px;width: 5px;height: 5px;border-radius: 50%;background: var(--siteC);content: ''; } .page_dot_list > li:last-of-type {margin-bottom: 0em; } .page_dot_list.s1 {margin-top: 0em; } .page_dot_list.s1 > li:before {width: none;height: none;background: none;top: unset;left: -15px;content: '-'; } /*page_line 공통*/ .page_line_list {margin-top: 1.25em; } .page_line_list > li {position: relative;padding: .65em 1.25em;border-bottom: 1px solid #e5e5e5; } .page_line_list > li > .txt {font-size: 1em; } .page_line_list > li:before {position: absolute;left: -13px;top: 8px;width: 5px;height: 5px;border-radius: 50%;background: var(--siteC);content: ''; } /*sub areaD*/ .page_con {position: relative;padding: 4em 0; } .page_con.bg1 {background: #f2f2f2; } /*버튼*/ .button-gradient {color: #fff;background-image: linear-gradient(48deg, #90fa3e, #21996c, #21996c, #63ff93);background-size: 300% 100%;background-position: 0%;border-color: transparent;transition: background ease .3s; } .button-gradient:hover {background-position: 15%; } .btn-round {border-radius: 50px; } .sub_btn .btn {padding-top: 18px;padding-bottom: 18px;width: 200px;text-align: center;font-size: 20px;font-weight: 700; } .sub_btn .btn > .xi {margin-left: .3em; } .sub_btn .btn.s1 {font-size: 16px;padding-bottom: 16px;padding-top: 16px;font-weight: 600;background: var(--siteC);color: #fff; } /*sub 타이틀 점*/ .dot-tit {position: relative;padding-left: 1em;font-size: 1.85em;font-weight: 800;color: #111;margin-bottom: 1.15em; } .dot-tit:before {content: '';position: absolute;top: -90%;left: 0;bottom: 0;margin: auto;width: 7px;height: 7px;border-radius: 50%;border: 4px solid var(--siteC); } .dot-tit2 {position: relative;padding-left: 1em;font-size: 1.85em;font-weight: 800;color: #111; } .dot-tit2:before {content: '';position: absolute;top: 0;left: 0;bottom: 0;margin: auto;width: 7px;height: 7px;border-radius: 50%;border: 4px solid var(--siteC); } .dot-tit3 {position: relative;padding-left: 1em;font-size: 1em;font-weight: 500;color: #111;display: inline-block; } .dot-tit3:before {content: '';position: absolute;top: 0;left: 0%;bottom: 0;margin: auto;width: 5px;height: 5px;border-radius: 50%;border: 3px solid var(--siteC);} /*sub 펼쳐짐 효과*/ .sub-wide {overflow: hidden;position: relative;clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1) .15s; } .sub-wide.on {clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);visibility: visible;opacity: 1;transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0s; } /*구분 de*/ .sub_diviC {gap: 6em;/*transform: translateY(2em); transition: 1s; opacity: 0; */} .sub_diviC.listShow.on {/*transform: translateY(0em); transition: 1s; opacity: 1; */} .sub_diviC .dvT {flex: 1 1 20%; } .sub_diviC .dvT .tit { } .sub_diviC .dvIF {flex: 1 1 80%; } .sub_diviC .dvIF .tt {font-size: 1.1em;line-height: 1.6;color: #444; } /*flex box*/ .flex_box { } .flex_box.s1 {margin: 0 0 -1em -1em; } .flex_box.s2 {margin: 0 0 -2em -2em; } .flex_box.s3 { } .flex_box.s4 { } .flex_box.s5 { } .flex_box .fst2 > li {flex: 1 1 50%;max-width: 50%; } .flex_box .fst2 > li > .in {margin: 0 0 1em 1em; } .flex_box .fst3 > li {flex: 1 1 33.33%;max-width: 33.33%; } .flex_box .fst3 > li > .in {margin: 0 0 1em 1em; } .flex_box .fst4 > li {flex: 1 1 25%;max-width: 25%; } .flex_box .fst4 > li > .in {margin: 0 0 1em 1em; } /*contents*/ #contents .sub_page_top {position: relative;height: 23em; } #contents .sub_page_top:before {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .25);content: '';z-index: 2; } #contents .sub_page_bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; } #contents .sub_page_bg > .bg {position: absolute;top: 0;right: 0;width: calc(100% + 3vw);height: 100%;transition: 3s; } #contents .sub_page_bg > .bg:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1)); } .load #contents .sub_page_bg > .bg {right: -1.5vw; } #contents .sub_page_tit {flex: 1 0 auto;position: relative;color: #fff;padding-bottom: 7.5em;z-index: 3; } #contents .sub_page_tit .sub_tit .tt {font-size: 3.65em;font-weight: 700; } #contents .sub_page_menu {position: relative;border-top: 1px solid rgba(255, 255, 255, .3);z-index: 9; } #contents .sub_page_menu .gnb {display: flex;margin: 0 8em 0 28em; } #contents .sub_page_menu .gnb > li {width: 100%; } #contents .sub_page_menu .gnb .dp3 {display: none; } #contents .sub_page_menu .gnb .dp2 {justify-content: center; } #contents .sub_page_menu .gnb .dp2 > li {position: relative; } #contents .sub_page_menu .gnb .dp2 > li:before {content: "";position: absolute;left: 0;bottom: 100%;width: 100%;height: 3px;background: #fff;transform: scaleX(0);transition: .3s; } #contents .sub_page_menu .gnb .dp2 > li > a {gap: .875em;height: 5em;padding: 0 2.5em;color: #fff;justify-content: flex-start; } #contents .sub_page_menu .gnb .dp2 > li > a .tt {font-size: 1.188em;opacity: .8; } #contents .sub_page_menu .gnb .dp2 > li.act > a .tt, #contents .sub_page_menu .gnb .dp2 > li.on > a .tt {opacity: 1; } #contents .sub_page_menu .gnb .dp2 > li.on > a .tt {font-weight: 600; } #contents .sub_page_menu .gnb .dp2 > li.act:before, #contents .sub_page_menu .gnb .dp2 > li.on:before {transform: scaleX(1); } #contents .sub_page_menu .nav {position: relative;right: 0px;bottom: 0; } #contents .sub_page_menu .nav > li { } #contents .sub_page_menu .nav > li .xi {width: 1.5em;height: 1.5em;border-radius: 50%;font-size: 1.25em;color: var(--crWhite);display: flex;align-items: center;justify-content: center; } #contents .sub_page_menu .nav > li .tt {vertical-align: middle;font-size: .938em;color: var(--crWhite); } #contents .sub_page_menu .nav > li + li:before {content: "\e940";font-family: xeicon;padding: 0 .5em;vertical-align: middle;opacity: .8;color: var(--crWhite); } #contents .sub_page_menu .nav > li:last-child .tt {font-weight: 600;text-decoration: underline; } #contents .sub_page_con {padding: 3.5em 0 0 0;text-align: center; } #contents .sub_page_con .con_tit { } #contents .sub_page_con .con_tit .tt {font-size: 3.000em;font-weight: 700; } #contents .sub_page_con .con_tit + .con_menu {margin-top: 3em; } #contents .sub_page_con .con_menu { } #contents .sub_page_con .con_menu ul:not(.dp3) {display: block; } #contents .sub_page_con .con_menu .gnb .dp4 {display: none; } #contents .sub_page_con .con_menu .gnb .dp3 {justify-content: center; } #contents .sub_page_con .con_menu .gnb .dp3 > li {width: 20%;background: var(--crGray); } #contents .sub_page_con .con_menu .gnb .dp3 > li:first-child {border-radius: 6em 0 0 6em; } #contents .sub_page_con .con_menu .gnb .dp3 > li:last-child {border-radius: 0 6em 6em 0; } #contents .sub_page_con .con_menu .gnb .dp3 > li > a {height: 4em;padding: 0 1em;border-radius: 6em;color: #777;transition: .2s; } #contents .sub_page_con .con_menu .gnb .dp3 > li > a .tt {font-size: 1.188em; } #contents .sub_page_con .con_menu .gnb .dp3 > li.act > a {color: #000; } #contents .sub_page_con .con_menu .gnb .dp3 > li.on > a {background: var(--siteC);color: #fff;font-weight: 500; } .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} /**/ .vod_wrap {position: relative;width: 100%;height: 100%; } .vod_wrap .vod {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover} .vod_wrap .layer {position: absolute;left: 0;top: 0;width: 100%;height: 100%} .mainScroll {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_con {padding: 6em 0; } .main_tit {/*padding:12em 0 2em 0; */ padding: 0 0 2em 0;text-align: center} .main_tit .t1 {font-weight: 600;color: #333;font-size: 2.5em;padding-bottom: .3em;letter-spacing: -.2px; } .main_tit .t2 {color: #666;font-size: 1.125em} .main_tit .t1.st {color: #fff !important; } .main_tit .t2.st {color: #fff !important; } .main_more { } .main_more .btn {position: relative;display: inline-block;min-width: 160px;width: auto;padding: 14px 24px;border-radius: 99px;font-size: 20px;letter-spacing: -0.03em;line-height: 1;color: #fff;text-align: center;vertical-align: middle;box-sizing: border-box;background-color: var(--siteC);overflow: hidden;transition: color 0.2s linear; } .main_more .btn.s1 {font-size: 18px; } .main_more .btn > .xi {margin-left: .5em; } .main_more .btn.line:before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;transition: bottom 0.2s linear;background-color: #fff; } .main_more .btn.line {border: 1px solid var(--siteC);color: var(--siteC);background-color: var(--siteC); } .main_more .btn.line:hover:before {bottom: 100%; } .main_more .btn.line:hover {color: #fff; } .main_more .btn > * {position: relative; } /*메인 서브 타이틀*/ .main_tit {position: relative; } .main_tit .icon:before {width: 3.15em;height: 1px;background: var(--siteC);content: ''; } .main_tit .icon.white:before {background: #fff; } .main_tit .main_subt {margin-bottom: 1em; } .main_tit .main_subt .tt {font-size: 1.65em;font-weight: 700; } .main_tit .main_subt .tt.ffEN {font-size: 2.15em;font-weight: 700; } .main_tit .icon {display: inline-flex;align-items: center;gap: 1em; } .mainFlex {display: flex;gap: 4em;align-items: flex-start;position: relative;box-sizing: border-box} .mainFlex .wrapTit {width: 30%;position: sticky;left: 0;top: 0;padding: 5em 0;box-sizing: border-box} .mainFlex .wrapCon {flex: 1 1 0%;min-width: 0} /**/ .mainNav_wrap {position: fixed;z-index: 2;right: 0;top: 0;height: 100%} #mainNav > li * {transition: .3s} #mainNav > li > a {display: block;text-align: right;margin: 10px 0} #mainNav > li > a .line, #mainNav > li > a .tt {display: inline-block;*display: inline;zoom: 1;vertical-align: middle} #mainNav > li > a .line {width: 1em;height: 2px;background: #fff;margin-left: .5em;margin-right: 2em;opacity: .5} #mainNav > li > a .line::before {display: none;} #mainNav > li > a .tt {font-family: Arial, Helvetica, sans-serif;color: #fff;font-size: .75em;opacity: 0;visibility: hidden;letter-spacing: 0} #mainNav > li.on > a .line {width: 3em;margin-right: 0;opacity: 1} #mainNav > li.on > a .tt {opacity: 1;visibility: visible} #mainNav > li:hover:not(.on) > a .tt {opacity: 1} #mainNav.white > li > a .line {background: #333} #mainNav.white > li > a .tt {color: #333} .mainSlider {position: relative} .mainSlider .el:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);content: '';z-index: 2; } .mainSlider .el {height: 100vh;position: relative;overflow: hidden} .mainSlider .el .bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center;background-size: cover;transform: scale(1.2, 1.2);transition-delay: 1s} .mainSlider .el .box1 {position: relative} .mainSlider .slogan {position: relative;top: 40vh;color: #fff;text-align: center;z-index: 9;text-align: left;left: -10em; } .mainSlider .slogan .icon {font-size: 4em;transform: translateY(1em);opacity: 0} .mainSlider .slogan .t0 {font-size: 1.250em;transform: translateY(1em);opacity: 0;letter-spacing: 2px;font-weight: 300} .mainSlider .slogan .t1 {font-size: 3.25em;font-weight: 700;transform: translateY(1em);opacity: 0; } .mainSlider .slogan .t1:after {content: "";display: block;width: 70%;border-bottom: 1px solid rgba(255, 255, 255, 0.5);margin: 10px auto;border-width: 1px;transform: translateX(-185px);} .mainSlider .slogan .t2 {font-size: 1.375em;transform: translateY(1em);opacity: 0;margin-top: 1em;line-height: 1.6} .mainSlider .slogan .line {position: relative;margin: 1.5em 0 3em 0} .mainSlider .slogan .line:before, .mainSlider .slogan .line:after {content: "";position: absolute;height: 2px;background: #fff;width: 0;opacity: 0} .mainSlider .slogan .line:before {left: 50%; } .mainSlider .slogan .line:after {right: 50%; } .mainSlider .el.swiper-slide-active .bg, .mainSlider .el.swiper-slide-duplicate-active .bg {transform: scale(1, 1);transition: 3s;transition-delay: 0;transition-timing-function: ease-in-out} .mainSlider .el.swiper-slide-active .slogan .icon {transform: translateY(0);opacity: 1;transition: 1s} .mainSlider .el.swiper-slide-active .slogan .t0 {transform: translateY(0);opacity: 1;transition: 1s} .mainSlider .el.swiper-slide-active .slogan .t1 {transform: translateY(0);opacity: 1;transition: 1s;transition-delay: .5s} .mainSlider .el.swiper-slide-active .slogan .t2 {transform: translateY(0);opacity: 1;transition: 1s;transition-delay: 1s} .mainSlider .el.swiper-slide-active .slogan .line:before, .mainSlider .el.swiper-slide-active .slogan .line:after {width: 2em;opacity: 1;transition: 2s;transition-delay: .5s} #mainV {position: relative; } #mainV .mainbox {position: absolute;z-index: 99;height: calc(100% - 80px);top: 80px;left: 0;width: 100%; } #mainV .mainbox_box1 { } #mainV .mainbox .mainbox_box1, #mainV .mainbox .mainv_list, #mainV .mainbox .mainv_list li {height: 100%; } #mainV .mainbox .mainv_list { } #mainV .mainbox .mainv_list li {float: left;width: 25%;box-sizing: border-box; } #mainV .mainbox .mainv_list li .in {border-right: 1px solid rgba(255, 255, 255, .3);height: 100%;transition: .7s; } #mainV .mainbox .mainv_list li:first-child .in {border-left: 1px solid rgba(255, 255, 255, .3)} #mainV .mainbox .mainv_list li .in .va {color: #fff;text-align: center;margin-top: -5em;position: relative;line-height: 1;width: 80%; } #mainV .mainbox .mainv_list li .in .va .icon {display: block;margin: 0 auto 25px;opacity: .8;font-size: .875em; } #mainV .mainbox .mainv_list li .in .va .m_bw {position: absolute;bottom: -10em;left: 0;width: 100%;display: none; } #mainV .mainbox .mainv_list li .in .va .m_bw .m_v {display: inline-block;text-align: left;font-weight: normal;padding-top: 3em;line-height: 1.3} #mainV .mainbox .mainv_list li .in .va .m_bw .m_v .goBtn {color: #fff;border-radius: 30px;border: 2px solid #fff;margin: 5px auto 0 auto;display: block;width: 160px;height: 46px;line-height: 46px; } #mainV .mainbox .mainv_list li .in .va .m_bw .m_v .xi {margin-left: 7px;font-size: .813em;vertical-align: baseline;transition: .3s} #mainV .mainbox .mainv_list li:nth-child(2) .in:hover {background: url(../images/main/main_visual_con01.jpg) no-repeat center;background-size: cover;transition: .7s; } #mainV .mainbox .mainv_list li:nth-child(3) .in:hover {background: url(../images/main/main_visual_con02.jpg) no-repeat center;background-size: cover;transition: .7s; } #mainV .mainbox .mainv_list li:nth-child(4) .in:hover {background: url(../images/main/main_visual_con03.jpg) no-repeat center;background-size: cover;transition: .7s; } #mainV .mainbox .mainv_list li .in:hover .m_bw {display: block;transition: .8s all; } #mainV .mainbox .mainv_list li .in:hover .m_bn {display: none;transition: .8s all; } #mainV .mainbox .mainv_list .v_con1 .in .va {font-size: 1rem; } #mainV .mainbox .mainv_list .v_con1 .in .tit {font-weight: 700;text-align: left;font-size: 3em;padding-bottom: 2em} #mainV .mainbox .mainv_list .v_con1 .in .txt {text-align: left;color: #fff;line-height: 1.6;font-size: 1em;font-weight: 300} #mainV .mainbox .mainv_list .v_con2 .in .va {transition: .8s all; } #mainV .mainbox .mainv_list .v_con2 .in .va .m_bn .tit {font-size: 2.25em;font-weight: 700;display: block} #mainV .mainbox .mainv_list .v_con2 .in .va .m_bn .en {padding-bottom: 1em;display: block} #mainV .mainbox .mainv_list .v_con2 .in .va .m_bn .num {font-size: 1.570em;font-weight: 700; } #mainV .mainbox .mainv_list .v_con2 .in .va .m_bw .num {font-size: 1em;font-weight: 500;display: block;text-align: left} #mainV .mainbox .mainv_list .v_con2 .in .va .m_bw .en {font-weight: 400;font-size: 1.063em;text-align: left;display: block} #mainV .mainbox .mainv_list .v_con2 .in .va .m_bw .tit {font-size: 1.570em;font-weight: 500;text-align: left;display: block;padding: 1em 0; } #mainV .mainbox .mainv_list .v_con2 .in .va .m_bw .txt {font-weight: 300;line-height: 1.6;text-align: left; } #mainV .mainbox .mainv_list .v_con2 .in .va .goBtn {color: #fff;border: 2px solid #fff;margin: 20px auto 0 auto;display: block;height: 2.8em;line-height: 2.8em;font-size: .875em} .mainControl {position: absolute;left: 0;bottom: 2em;width: 100%;z-index: 100} .mainControl .box0 {position: relative} .mainControl .mainSlider-btn {width: 3.25em;cursor: pointer;line-height: 2.5em;color: #fff;outline: none;text-align: center} .mainControl .mainSlider-btn .xi {font-size: 1.5em} .mainControl .mainSlider-btn:hover {color: #fff;opacity: 1} .mainControl .mainProgress {text-align: center;margin-right: 1em} .mainControl .mainPauseWrap {position: absolute;width: 4.375em;text-align: center;top: 0} .mainControl .mainPauseWrap .mainSlider-btn {line-height: 3.25em} .mainControl .mainPauseWrap .mainSlider-btn .xi {font-size: 1.5em; } .mainControl .mainPauseWrap .mainSlider-play {display: none} .mainControl .mainPauseWrap.pause .mainSlider-pause {display: none} .mainControl .mainPauseWrap.pause .mainSlider-play {display: block;opacity: 1;color: #fff} .mainControl .mainSlider-pagination {margin-top: 2em} .mainControl .mainSlider-pagination span {width: 1em;height: 1em;background: #fff;border-radius: 0;font-size: .625em;opacity: .7;margin: 0 .25em;transition: .3s} .mainControl .mainSlider-pagination span.swiper-pagination-bullet-active {width: 7em;opacity: 1; } #scrollAni {position: absolute;left: 50%;width: 6em;margin-left: -3em;text-align: center;bottom: 2em;opacity: 1;z-index: 100;text-decoration: none;animation-name: downAni;animation-duration: 3s;animation-iteration-count: infinite} #scrollAni .xi {vertical-align: middle} #scrollAni .xi-mouse {font-size: 3em;color: #fff;margin-right: -7px} #scrollAni .xi-scroll {font-size: 2em;color: #fff;margin-left: -7px} #scrollAni .tt {display: block;color: #fff;font-size: .75em;text-transform: uppercase;font-family: Arial, Helvetica, sans-serif;letter-spacing: 0} #scrollAni.hide {opacity: 0;z-index: -1} @keyframes downAni {60% {margin-bottom: 0} 80% {margin-bottom: -1em} 100% {margin-bottom: 0} } /**/ .main_con {padding-top: 180px;padding-bottom: 100px; } .main_brand .prodBg {position: absolute;top: 0;left: 0;width: 40%;height: 100%;background-image: url(../images/main/main_leftB.jpg);background-size: cover; } .main_brand .left {/* float:left; width:32%; */ margin-top: 120px;width: 35em; } .main_brand .right {/*float:left; width:45%; */ /* margin-left:10%; */ flex: 1;min-width: 0;margin: 0 4% 0 2%; } .main_brand .left .in {position: relative;padding-left: 20%;padding-top: 2.5em; } .main_brand .left .in:before {content: "";position: absolute;top: 0;left: 0;width: 130%;height: 1px;background: #fff;opacity: .4; } .main_brand .left .in .p1 {font-size: 50px;color: #fff;font-weight: 600; } .main_brand .left .in .p1 .st1 {display: block;margin-top: -10px;color: #fff;font-weight: 400;/* font-size:0.75em; */} .main_brand .left .in .p2 {color: #fff;font-size: 1.25em;margin-top: 1.3em;line-height: 1.5; } /*company*/ .con2_In {margin-top: 1em; } .con2_In .con2_list {margin: 2em 0 0 -1.5em; } .con2_In .con2_list > li {flex: 1; } .con2_In .con2_list > li .inner {margin: 0 0 0 1.5em;border: 1px solid rgba(255, 255, 255, .4);text-align: center;color: #fff;padding: 3em 2em;position: relative; } .con2_In .con2_list > li .inner:after {content: "";position: absolute;z-index: 2;left: 0;right: 0;top: 0;bottom: 0;background: #0077c0;box-shadow: 2px 2px .75em rgba(0, 0, 0, .4);transform: scale(1);opacity: 0;visibility: hidden;transition: .2s; } .con2_In .con2_list > li .inner .con {z-index: 3;position: relative; } .con2_In .con2_list > li .inner .icon { } .con2_In .con2_list > li .inner .icon > .xi {font-size: 4.25em; } .con2_In .con2_list > li .inner .t1 {font-size: 1.7em;font-weight: 500;padding: 1.3em 0; } .con2_In .con2_list > li .inner .t2 {font-size: .938em;line-height: 1.4;opacity: .9; } .con2_In .con2_list > li .inner:hover:after {transform: scale(1.12);opacity: 1;visibility: visible; } #section2 {position: relative; } #section2:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(4, 28, 74, .8);content: ''; } /**/ .main_perf {position: relative;z-index: -2; } .main_perf:before {content: '';display: block;width: 100%;height: 50%;position: absolute;left: 0;bottom: -50px;background: url(../new/main2/images/sian/con3_bg.jpg) no-repeat center/cover;box-shadow: 0px -5px 15px 0px rgba(50, 50, 50, 0.2);z-index: -1; } .con3_in .main_perf_ctt_wrap {margin-bottom: 3rem; } .con3_in .main_perf_ctt_wrap ul {margin-top: 3em; } .con3_in .main_perf_ctt_wrap ul > li {width: 49%;height: 350px;cursor: pointer; } .con3_in .main_perf_ctt_wrap ul > li > div {height: 100%;color: #fff;padding: 4.125rem;box-sizing: border-box;transition: .3s;background-repeat: no-repeat;background-position: center;background-size: 100%; } .con3_in .main_perf_ctt_wrap ul > li .main_perf_l {background-image: url(../new/main2/images/sian/con3_img01.jpg); } .con3_in .main_perf_ctt_wrap ul > li .main_perf_r {background-image: url(../new/main2/images/sian/con3_img02.jpg);margin-top: 80px; } .con3_in .main_perf_ctt_wrap ul > li:hover > div {background-size: 110%; } .con3_in .main_perf_ctt_wrap ul > li > div .main_perf_ctt_en {font-size: 1.1875em;font-weight: 500;margin-bottom: 1rem; } .con3_in .main_perf_ctt_wrap ul > li > div .main_perf_ctt_tit {font-weight: 500;font-size: 2.3em;margin-bottom: 1.875rem; } .con3_in .main_perf_ctt_wrap ul > li > div .main_perf_ctt_txt {margin-bottom: 2.5rem;font-weight: 300; } .con3_in .main_perf_ctt_wrap ul > li > div p:last-of-type .more_btn {display: inline-flex;width: 25px;height: 25px;justify-content: center;align-items: center;border-radius: 50%;border: 1px solid #fff;margin-left: 10px;transform: translateY(-2px);transition: .3s; } .con3_in .main_perf_ctt_wrap ul > li:hover > div p:last-of-type .more_btn {background: #fff; } .con3_in .main_perf_ctt_wrap ul > li > div p:last-of-type .more_btn i {font-size: 1.125em;transition: .3s;font-weight: bold; } .con3_in .main_perf_ctt_wrap ul > li:hover > div p:last-of-type .more_btn i {color: #1f2e66; } #section4.main_sec4 {background: #fff; } .con4_in { } .con4_in .con4_list {margin: 2em 0 0 -2em} .con4_in .con4_list > li {flex: 1; } .con4_in .con4_list > li .in {margin: 0 0 0 2em;background: #fff;border: 1px solid #ddd;border-top: 3px solid #0077c0;cursor: pointer; } .con4_in .con4_list > li .in .tit {text-align: center;padding: 1.5em 0; } .con4_in .con4_list > li .in .tit .tt {font-weight: 500;color: #222;font-size: 1.375em; } .con4_in .con4_list > li .in .imgw {position: relative; } .con4_in .con4_list > li .in .imgw:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .25);content: ''; } .con4_in .con4_list > li .in .imgw .resize {padding-bottom: 50.94736842105% !important; overflow: hidden;} .con4_in .con4_list > li .in .imgw .resize > .re {position: relative;width: 100%;height: 19em; } .con4_in .con4_list > li .in .imgw .more {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); } .con4_in .con4_list > li .in .imgw .more .xi {border-radius: 50%;width: 2em;line-height: 2em;border: 1px solid #fff;text-align: center;font-size: 2em;color: #fff} .con4_in .con4_list > li .in:hover .imgw .more .xi {background: #0077c0;border: 1px solid #0077c0;color: #fff;transform: rotate(180deg);transition: .3s; } .sub_v_slide .in_s_list {margin-right: -20px;padding-bottom: 20px;margin-top: 2em; } .sub_v_slide .in_s_list > li {width: 50%; } .sub_v_slide .in_s_list > li .in {display: block;transition: .3s;box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);cursor: pointer;overflow: hidden;margin: 0 15px;transition: .3s;background: #fff} .sub_v_slide .in_s_list > li .in .in_iz {height: 230px;background-size: cover;background-position: center; } .sub_v_slide .in_s_list > li .in .in_ix {box-sizing: border-box;padding: 2em;border-top: 1px solid #eee; } .sub_v_slide .in_s_list > li .in .in_itt {font-size: 1.313em;margin-bottom: 10px;font-weight: 500;letter-spacing: -.7px; } .sub_v_slide .in_s_list > li .in .in_itx {font-size: .875em;color: #444;font-weight: 400; } .sub_v_slide .in_s_list > li .in .img_wrap > .re {width: 100%;height: 17em;overflow: hidden; } .sub_v_slide .bus_control {margin-top: 1.5em;position: relative;margin-right: 15px; } .sub_v_slide .bus_control .paging {position: absolute;top: 18px;right: 6.5em; } .sub_v_slide .bus_control .paging .swiper-pagination-bullet {display: inline-block;width: 30px;height: 5px;background: #ccc;border-radius: 0;opacity: 1; } .sub_v_slide .bus_control .paging .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #3c4968; } .sub_v_slide .bus_control .btn {text-align: right;margin-bottom: 10px; } .sub_v_slide .bus_control .btn .in {width: 1.7em;line-height: 1.7em;font-size: 1.25em;border: 3px solid #ddd;color: #888;text-align: center;border-radius: 50%;margin: 0 2px;cursor: pointer;transition: .3s; } .sub_v_slide .in_s_list > li .in .img_wrap { } .sub_v_slide .in_s_list > li .in .img_wrap > .re > img {width: 100%;height: 100%;object-fit: cover;transition: .3s; } .sub_v_slide .in_s_list > li .in:hover .img_wrap > .re > img {transform: scale(1.05); } /*냉동고형 눈꽃빙삭기*/ .img_list { } .img_list > li { } .img_list > li > .in {margin: 0 0 2em 2em !important; } .img_list > li > .in > .img_con {width: 100%;height: 17em;border-radius: .5em;overflow: hidden; } .img_list > li > .in > .img_con > img {width: 100%;height: 100%;object-fit: cover; } .img_list > li > .in > .tt {text-align: center;margin-top: .75em;font-size: 1.215em;font-weight: 700; } .note_list {margin-bottom: 2em; } .note_list > li { } .note_list > li > .in {display: flex;height: 100%; } .note_list > li > .in > .con {background: #f5f5f5;border-radius: 1em;overflow: hidden;padding: 2.5em;box-sizing: border-box; } .note_list > li > .in > .con > .tit {font-size: 1.45em;font-weight: 700;color: var(--siteC); } .bu_charW { } .bu_charW .char_t {text-align: center;margin-bottom: 2em; } .bu_charW .char_t.al {text-align: left; } .bu_charW .char_t > .tx {font-size: 1.15em;color: var(--siteC);font-weight: 700;margin-bottom: 1em; } .bu_charW .char_t > .tt {font-size: 2.65em;font-weight: 800; } .bu_charW .bu_charList { } .bu_charW .bu_charList > li { } .bu_charW .bu_charList > li > .in {margin: 0 0 2em 2em !important; } .bu_charW .bu_charList > li > .in > .con {background: #fff;padding: 2.5em;border-radius: 1.5em; } .bu_charW .bu_charList > li > .in > .con > .tit {font-size: 1.85em;font-weight: 800; } .bu_charW .bu_charList > li > .in > .con > .txt {font-size: 1em;height: 2.15em;line-height: 1.5;color: #666;margin: 12px 0 37px;letter-spacing: -0.05em; } .bu_charW .bu_charList > li > .in > .con > .img_con {width: 100%;height: 15em; } .bu_charW .bu_charList > li > .in > .con > .img_con > img {width: 100%;height: 100%;object-fit: cover; } .his_tabwrap { } .wrap_idx {position: relative; } .wrap_idx .his_tab {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);padding-bottom: 3em;z-index: 2;width: 80%;text-align: center; } .his_bg {position: relative;width: 100%;height: 36.5em;border-radius: 2em 0 2em 0;box-shadow: 4px 0 12px rgba(0, 0, 0, .45);overflow: hidden;z-index: 2; } .his_bg:before {position: absolute;background: linear-gradient(180deg, rgba(0, 0, 0, .07), rgba(0 0, 0, .65));background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, .07), rgba(0 0, 0, .5));content: '';width: 100%;height: 100%;z-index: -1; } .his_bg .ttl_T {position: absolute;bottom: 5em;right: 5em;text-align: left; } .his_bg .ttl_T > .tt {font-size: 1.65em;color: #fff;font-weight: 700;line-height: 1.3; } .his_tabwrap .con_idx > .idx .his_bg {padding: 4em 6em;box-sizing: border-box;border-radius: 1.5em;box-shadow: 2px 2px 6px rgba(0, 0, 0, .15);overflow: hidden; } .charSlide .swiper-wrapper .swiper-slide-active .his_con .his_info_wrap {opacity: 1;display: block;transition: .35s; } .charSlide .swiper-wrapper .his_con .his_info_wrap {display: none;opacity: 0; } .swiper-container-horizontal > .swiper-pagination-bullets {height: 50px; } .charSlide .swiper-pagination.posi {display: flex;width: 90%;transform: translate(-50%, 0%);left: 50%;top: 10%; } .charSlide .swiper-pagination .swiper-pagination-bullet {flex: 1 1 25%;width: auto;height: 1.5em;margin-right: 6px !important;border-radius: 0;text-align: left;background-color: transparent;transition: all .3s;position: relative;opacity: .75; } .charSlide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity: 1; } .charSlide .swiper-pagination .swiper-pagination-bullet:last-child {margin-right: 0; } .charSlide .swiper-pagination .swiper-pagination-bullet span {position: relative;display: block;width: 100%;text-align: left;padding-bottom: .8em;box-sizing: border-box;font-weight: 600;color: #fff;font-size: 1.15em;border-bottom: 2px solid rgba(255, 255, 255, .65); } .charSlide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active span {border-bottom: 4px solid #2a9bf6; } .charSlide .swiper-pagination .swiper-pagination-bullet:hover span { } .charSlide .swiper-pagination .swiper-pagination-custom-bullet-active {background-color: teal;box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);border: 1px solid teal; } .charSlide .swiper-pagination .swiper-pagination-custom-bullet-active span {color: #fff; } .charSlide .swiper-pagination .swiper-pagination-custom-bullet-active:hover span {color: #fff; } .mid_tt {padding: 3em 0; display: flex; align-items: center; justify-content: center;} .mid_tt > .bu_txt {padding-left: 0%; text-align: center; } .mid_tt > .bu_txt > .tt {position: relative;font-size: 1.6em;line-height: 1.8;letter-spacing: -0.05em;color: #777; } .mid_tt > .bu_txt > .tt > i {color: #333;display: inline; } .mid_tt > .bu_txt > .tt:before {position: absolute;left: 3em;top: -.5em;width: 2em;height: 2em;background: #7dddff;border-radius: 50%;opacity: .25;content: '';z-index: -1; } .bu-wrap { } .bu-wrap .bu-tit {text-align: center;margin-bottom: 2.5em; } .bu-wrap .bu-tit > .tt {font-size: 3.15em;font-weight: 900;letter-spacing: -.063em;word-spacing: 0.125em; } .product_all .slicer {position: relative; } .product_all .slicer:before {position: absolute;top: 0;left: 0;width: 100%;height: 65em;background: #f2f2f2;content: '';z-index: -1; } .bu-wrap { } .bu-wrap .busi-bg {width: 100%;height: 800px; } .bu-wrap .busi-bg .imgfix {position: relative;height: 100%;overflow: hidden; } .bu-wrap .busi-bg .imgfix::before {content: '';position: absolute;width: 100%;height: 100%;background: radial-gradient(transparent, rgba(0, 0, 0, 0.1));z-index: 1; } .bu-wrap .busi-bg.over .imgfix::before {background: transparent; } .bu-wrap .busi-bg .posImg img {position: absolute;bottom: 0;width: 100%;height: 130%; } /* .btn2 { padding: .5em 1em; box-shadow: 3px 3px 5px #ddd; border-radius: .5em; background-color: #fafafa; transition: .5s; } .btn2:hover { background-color: #0e4194; color: #fff; } */ .video-box > .video > .v_wrap{max-width: 100%; height:auto;} .subSlider .el {position: relative;overflow: hidden;height: 100vh; } .subSlider .el .vod_wrap, .subSlider .el .img_wrap {height: 100vh; } .subSlider .el .vod, .subSlider .el .imgfix {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover; } .subSlider .el .vod_wrap:after, .subSlider .el .img_wrap:after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0, 0, 0, .6), transparent); } .subSlider .el .bg {position: absolute;left: 0;top: 0;width: calc(100% + 8em);height: 100%;opacity: 0;transition: 3s, opacity 5s; } .subSlider .el .bg:after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4); } .subSlider .el.swiper-slide-active .bg, .subSlider .el.swiper-slide-duplicate-active .bg {left: -4em;opacity: 1;transition: 5s, opacity 1s; } .subSlider_wrap {position: sticky;top: 0; } .subSlider_wrap .slogan {width: 100%;position: absolute;left: 0;top: 35vh;z-index: 10;color: #fff; } .subSlider_wrap .slogan .wrap_in { } .subSlider_wrap .slogan .tt.line {padding-bottom: 1.5em;margin-bottom: 1em;border-bottom: 1px solid rgba(255, 255, 255, .4); } .subSlider_wrap .slogan [txt-split] .word {display: flex !important;justify-content: space-between; } .subSlider_wrap .slogan .t1 {font-size: 3.500em;font-weight: 700;line-height: 1.2;text-transform: uppercase; } .subSlider_wrap .slogan .t2 {font-size: 1.75em;line-height: 1.2; } .subSlider_wrap .slogan .tt {opacity: 0;transform: translateY(4em);transition: 1s; } .subSlider_wrap .el.swiper-slide-active .slogan .tt {opacity: 1;transform: translateY(0);transition: 2s; } .subSlider_wrap .el.swiper-slide-active .slogan .tt:nth-child(1) {transition-delay: .2s; } .subSlider_wrap .el.swiper-slide-active .slogan .tt:nth-child(2) {transition-delay: .8s; } .subSlider_control {position: absolute;left: 0;bottom: 4vh;width: 100%;z-index: 10} .subSlider_control .swiperPG {margin-right: 2em; } .subSlider_control .swiperBtn { } /* 문의 */ /*agree*/ .agree_wrap {padding: 1.5em 0 1em;font-size: .938em;line-height: 2;border-top: 2px solid #333;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-left: 1px solid #ccc;/*padding:2em; */ /* background:#f9f9f9; */} .agree_wrap .agree.st strong {font-size: 1.2em;letter-spacing: .5px;line-height: 1.9;/*padding:1em 0; */ color: #222;font-weight: 500; } .agree_wrap .textarea_box {width: 100%;height: 200px;padding: 20px;box-sizing: border-box;overflow-y: auto;font-size: 14px;line-height: 1.4; } .agree_wrap .textarea_box h3 {color: #333;margin-bottom: 10px;font-size: 1.2rem;font-weight: 500} .code {display: inline-block;vertical-align: middle;height: 2.5em;line-height: 2.5em;background: #222;color: white;font-weight: 300;margin-right: 5px;padding: 0 1em;text-align: center} /* 오시는길 */ .map_Wrap { } .map_Wrap .map_con {overflow: hidden;border-radius: 1em; } .map_Wrap .map_infoCon {padding-top: 4.5em; } .map_Wrap .map_infoCon .contact_list {margin-top: 1em;gap: 4em; } .map_Wrap .map_infoCon .contact_list > li {position: relative; } .map_Wrap .map_infoCon .contact_list > li:before {position: absolute;top: 50%;right: -2rem;transform: translateY(-50%);width: 1px;height: 1.6rem;background-color: #888;content: ""; } .map_Wrap .map_infoCon .contact_list > li:last-of-type:before {content: none; } .map_Wrap .map_infoCon .contact_list > li > p {font-size: 1.4em; } .map_Wrap .map_infoCon .contact_list > li > p > span {color: #666;font-weight: 600; } .map_Wrap .map_infoCon .map_box {padding-bottom: 3.5em;margin-bottom: 3.5em;border-bottom: 1px solid #ddd; } .map_Wrap .map_infoCon .map_box:last-of-type {margin-bottom: 0em;padding-bottom: 0em;border: none; } .root_daum_roughmap .wrap_controllers {display: none; } .way_list { } .way_list li {border-bottom: 1px dashed #ddd; } .way_list li .left_icon {width: 20%;text-align: center; } .way_list li .left_icon > i {width: 3em;height: 3em;background: var(--siteC);line-height: 3em;color: #fff;border-radius: 50%;font-size: 1.6em; } .way_list li .right_info {flex: 1 100%;padding: 2em 0; } .way_list li .right_info .detail_ti {font-size: 1.3em;font-weight: 700;margin-bottom: 1em;color: var(--siteC); } .way_list li .right_info .detail_t {margin-bottom: .5em; } .way_list li .right_info .detail_t:last-child {margin-bottom: unset; } .way_list li .right_info .detail_t span {background: var(--gradC2);color: #fff;padding: .5em 1em;border-radius: 3em;margin-right: .5em; } .way_list li .right_info .detail_t span.c1 {background: #6585c3; } .way_list li .right_info .detail_t span.c2 {background: #3a77bc; } .way_list li .right_info .detail_t span.c3 {background: #5bb946; } .line {position: relative; } .line::before {content: "";position: absolute;top: -30px;left: 0;width: 100%;height: 2px;background-color: #ddd; } /* 인사말 */ .greeting_wrap {position: relative;gap: 5em; } .greeting_wrap .img_con {width: 40%;height: 75vh; } .greeting_wrap .img_con > img {width: 100%;height: 100%;object-fit: cover; } .greeting_wrap .greeting_txt {position: relative;width: 50%; } .greeting_wrap .greeting_txt > .sn {position: absolute;line-height: 1;color: #37383A;font-size: 3.75em;top: 1em;left: 0em;font-weight: 800;text-transform: uppercase; } .greeting_wrap .greeting_txt .info {padding-top: 10em; } .greeting_wrap .greeting_txt .info > strong {font-size: 1.85em;font-weight: 800;line-height: 1.4;margin-bottom: 1em; } .greeting_wrap .greeting_txt .info > strong > i {color: var(--siteC);font-size: 1.15em; } .greeting_wrap .greeting_txt .info > .tt {font-size: 1.35em;margin-bottom: 1.25em;line-height: 36px;color: #444; } .greeting_wrap .greeting_txt .info > .tt:last-of-type {margin-bottom: 0em; } .greeting_wrap .greeting_txt .info > .ceo {display: flex;align-items: baseline;font-size: 1.45em;font-weight: 800;margin-top: 1.5em; } .greeting_wrap .greeting_txt .info > .ceo > i {padding-left: .75em;font-size: 1.15em; } .greeting_wrap .loding_t {position: absolute;left: -4em;top: 0; } .greeting_wrap .loding_t > .txt {position: relative;text-transform: uppercase;font-size: 1.25em;font-weight: 700;writing-mode: tb;color: #aeaeae; } .greeting_wrap .loding_t > .pro {position: relative;width: 2px;height: 110px;margin: 0 auto;background: #E0E4E8;margin-top: 32px; } .greeting_wrap .loding_t > .pro:before {content: '';display: block;width: 100%;background: var(--siteC);position: absolute;top: 0;left: 0;animation: 3s pro infinite linear; } @keyframes pro {0% {height: 0} 100% {height: 100%} } .fst3 > li {width: calc(33% - 1em); } .fst3 > li > .in {margin: 0 0 1em 1em; } .example_list.fst3 {gap: 1em;} .example_list.fst3 >li {cursor: pointer} .example_list.fst3 >li .box-txt{transition: all .5s;} .example_list.fst3 >li:hover .box-txt {text-decoration: underline;} .r_box{width: 1.3em; height: 1.3em; background: var(--siteC);text-align: center; border-radius: 50%; color: #fff;} /*business*/ .w40{width:40% !important;} .w50{width:50% !important;} .w70{width:70% ;} .w100{width:100% !important;} .Dline{border: 1px dashed #ddd;} .gap2{gap: 2em;}