@charset "utf-8";/* CSS Document */ .box0 { padding:0 5vw } .box1 { width:1280px; margin:0 auto; max-width:90% } .box2 { width:1400px; margin:0 auto; max-width:90% } .PC {display: block;} .PHONE {display: none;} .db600 {display: none;} .dn600 {display: block;} .gnb li.m_hide { display:none } body:not(.pop) { display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); position:relative } .page_con { padding: 3em 0 0 6em; } .page_con.conP2 { padding: 0em 0 0 3em; } /* #header { position:fixed; left:0; top:0; width:100%; z-index:1000; color:#fff; transition: transform 1s; border-bottom:1px solid rgba(255,255,255,.2) } #header .top_wrap { position:relative } #header .top_wrap .wrapH, #header .top_wrap .gnb_wrap .dp1 { height:var(--headerT) } .headerT { padding-top:var(--headerT) } #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 } #header .top_wrap .logo > a { display:block; height:3em; overflow:hidden } #header .top_wrap .logo > a .in { display:block; height:100% } #header .top_wrap .logo > a img { height:100%; display:block } #header .top_wrap .gnb_wrap { flex:1 1 0%; min-width:0; max-width:60% } #header .top_wrap .gnb_wrap .gnb { justify-content:space-around } #header .top_wrap .gnb_wrap .gnb > li { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va .tt { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after { content:""; position:absolute; left:100%; bottom:100%; width:1em; height:1em; transform:translate(-60%,60%); border-radius:50%; background:#fff; opacity:0; transition:.3s } #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after, #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after { opacity:.5 } #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight:600; font-size:1.25em } */ .headT { padding-top:var(--headerT); } .headH, #header .gnb_wrap .gnb > li, #header .gnb_wrap .gnb > li .dp1 { height:var(--headerT); transition:height .2s, background .2s; box-sizing:border-box; align-items: center; } #header { z-index:999; position:fixed; top:0; left:0; width:100%; transition: .25s; } .sub #header { transition: transform 1s } /* :not(.allGnbOn) #header:hover { background: #fff !important; filter: none; } */ /* :not(.allGnbOn) #header { filter: var(--crWhitefil) } */ #header.bgN { background:none } #header .wrapIn { height:var(--headerT) } .headerT { padding-top:var(--headerT) } #header .wrapIn { display:flex; gap:2vw } #header > .inner { align-items: center; } #header .wrapIn .menu_wrap { gap: 4em; } #header .wrapIn .logo { filter: var(--crWhitefil); } #header .logo > a { } #header .logo > .in { transform-origin:left center; transition:.2s; } #header .logo > .in img { display: block; height: 3.8em; margin-bottom: 0.2em; } #header .gnb_wrap { color:#fff; } #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 { padding-top: 0.5em; font-weight:600; font-size:1.25em; letter-spacing: -0.02em; position:relative; } #header .gnb_wrap .gnb > li .dp1 .tt:after { content:""; display:block; width: 1em; height: 1em; opacity: 0; background: var(--crBlack); border-radius: 50%; position:absolute; right: -10px; top: 0; 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: block; position: absolute; top: 80%; left: 50%; width: 11em; padding: 0 1.5em; background: #2e3b80; box-shadow: 0 2px .625em rgba(0, 0, 0, .1); border-radius: 1em; color: #fff; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: padding .2s; } #header .gnb_wrap .gnb > li .dp2 > li > a { padding:.5em 0; justify-content: center; transition:.2s; } #header .gnb_wrap .gnb > li .dp2 > li > a:hover { background: rgba(0,0,0,.2); } #header .gnb_wrap .gnb > li .dp2 > li > a .tt { position:relative; font-size: 1em; color: #fff; font-weight:500; opacity: .95; transition: .2s; } #header .gnb_wrap .gnb > li.act { overflow:visible; } #header .gnb_wrap .gnb > li.act .dp2 { padding-top:1.5em; padding-bottom:1.5em; opacity:1; visibility:visible; } #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 .gnb_wrap .gnb > li .layer { display: none; } #header .top_wrap .etc_wrap { display:flex; align-items:center; gap:0 4vw } #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:2.25em } #header .top_wrap .etc_wrap .link { display:flex; align-items:center; gap:0 2em } #header .top_wrap .etc_wrap .link > li > a { display:flex; align-items:center; gap:0 .5em; opacity:.7 } #header .top_wrap .etc_wrap .link > li > a .ico { font-size:1.25em } #header .top_wrap .etc_wrap .link > li > a .tt { font-weight:500; text-transform:uppercase } #header .util_wrap { gap:0 1.5vw; padding-right: 2vw; } /* Language Button */ #header .util_wrap .lang_wrap .lang {position: relative;} #header .util_wrap .lang_wrap .lang .lang_btn {color:#fff;} #header .util_wrap .lang_wrap .lang .lang_btn .tt {font-weight: 500;} #header .util_wrap .lang_wrap .lang .lang_btn .xi {font-size: 1rem;} #header .util_wrap .lang_wrap .lang .drop {position: absolute; top: calc(100% + 0.5em); left: 0; width: 100%; height: 0; transition: 0.3s; overflow: hidden; background: rgba(255, 255, 255, .2); border-radius: 5px;} #header.active .util_wrap .lang_wrap.on .lang .drop, #header.gnbOpen .util_wrap .lang_wrap.on .lang .drop, #header .util_wrap .lang_wrap.on .lang .drop:hover {background: var(--crWhite); border: 1px solid #eee;} #header .util_wrap .lang_wrap.on .lang .drop {height: fit-content;} #header .util_wrap .lang_wrap .lang .drop > li {} #header .util_wrap .lang_wrap .lang .drop > li > a { padding: 0.5em; display: inline-block;} #header .util_wrap .lang_wrap .lang .drop > li:hover > a {background: var(--crGray2);} #header .util_wrap .lang_wrap .lang .drop > li > a .tt {font-size: 0.875rem;} #header .all_wrap { } #header .all_wrap .all { } #header .all_wrap .all_btn { position:relative; display:block; width:2.5em; height:1em; } #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:3px; background:rgba(255, 255, 255, .8); transition:.2s; } #header .all_wrap .all_btn .ham { background: var(--siteC2); } #header .all_wrap .all .ham:before { width:50%; } #header .all_wrap .all .ham:after { width:80%; } #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%); } #header .all_wrap .all_btn .ham:after { top:calc(100%); } #header .all_wrap .all_btn:hover .ham:before, #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:3em; padding:4em 3em; } #header .all_wrap .all_layer .wrap_in { position:absolute; top:0; right:0; width:100%; height:100%; background:#fff; color:#000; } #header .all_wrap .all_layer .wrap_in .scrollst { height:100%; } #header .all_wrap .all_layer .all_img { position:relative; width:25%; height:100%; } #header .all_wrap .all_layer .all_img:after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3; } #header .all_wrap .all_layer .all_img ~ .scrollst { flex:1; } #header .all_wrap .all_layer .allconWrap { padding:8vh 4vw 4vh; } #header .all_wrap .all_layer .all_top .tit_in { margin-bottom:2em; } #header .all_wrap .all_layer .all_top .tit_in .tt { font-size:3.000em; color:#222; } #header .all_wrap .all_layer .all_gnb .gnb { flex-wrap: wrap; } #header .all_wrap .all_layer .all_gnb .gnb .flex { display:block; text-align:left !important; } #header .all_wrap .all_layer .all_gnb .gnb > li { flex:0 0 calc(100% / 3); /* max-width: 45%; */ padding:1em 1em 1.5em 1em; box-sizing: border-box; } #header .all_wrap .all_layer .all_gnb .gnb > li ~ li { border-left:1px solid #e5e5e5; } #header .all_wrap .all_layer .all_gnb .gnb > li:nth-child(4) { border-left: none; } #header .all_wrap .all_layer .all_gnb .gnb > li a { padding:.8em 1em; transition:.1s; text-align: left; } #header .all_wrap .all_layer .all_gnb .gnb > li.more .dp1.link { display: none; } #header .all_wrap .all_layer .all_gnb .gnb > li:not(.more) .dp1.layer { display: none; } #header .all_wrap .all_layer .all_gnb .gnb > li .dp1:before { content:""; display:inline-block; vertical-align:top; margin-right:.375em; width:.438em; height:.438em; background: var(--siteC); border-radius:50%; } #header .all_wrap .all_layer .all_gnb .gnb > li .dp1 .tt { font-size:1.375em; font-weight:600; } #header .all_wrap .all_layer .all_gnb .gnb > li .dp1 > li #header .all_wrap .all_layer .all_gnb .gnb > li .dp2 { padding:2.5em 0 0 .875em; } #header .all_wrap .all_layer .all_gnb .gnb > li .dp2 > li > a { opacity:.6; } #header .all_wrap .all_layer .all_gnb .gnb > li .dp2 > li > a .tt { font-size:1.063em; } #header .all_wrap .all_layer .all_gnb .gnb > li:hover .dp1 { color:var(--siteC); } #header .all_wrap .all_layer .all_gnb .gnb > li .dp2 > li:hover > a { opacity:1; } #header .all_wrap .all_layer .all_gnb .gnb .dp3 { background:var(--crGray2); display: none; } #header .all_wrap .all_layer .all_gnb .gnb .dp3 > li > a { padding: .8em 1em; color:#444; } #header .all_wrap .all_layer .all_gnb .gnb .dp3 > li + li > a { border-top:1px dashed #ddd; } #header .all_wrap .all_layer .all_gnb .gnb .dp3 > li.act > a .tt, #header .all_wrap .all_layer .all_gnb .gnb .dp3 > li.on > a .tt { text-decoration:underline; } #header .all_wrap .all_layer .all_gnb .gnb .dp2 li.on .dp3 { display: block; } #header .all_wrap .all_layer .all_gnb .gnb > li .dp2 > li.on > a { opacity: 1; } #header .all_wrap .all_layer .all_gnb .gnb .dp2 > li.on .link, #header .all_wrap .all_layer .all_gnb .gnb .dp2 > li.on .layer { background-color: var(--siteC2); color:#fff; } #header .all_wrap .all_layer .all_gnb .gnb .dp2 li.more .link { display: none; } #header .all_wrap .all_layer .all_gnb .gnb .dp2 li:not(.more) .layer { display: none; } #header .all_wrap .all_layer .all_gnb .gnb li.more > a.layer { position: relative; } #header .all_wrap .all_layer .all_gnb .gnb li.more > a.layer .arrow { position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em; } #header .all_wrap .all_layer .all_gnb .gnb li.more > a.layer .arrow:before { content:"\e943"; font-size:1.250em; font-weight: 600; display:block; transition:.2s; } #header .all_wrap .all_layer .all_gnb .gnb li.more.on > a.layer .arrow:before { transform: rotate(180deg); } .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(--crBlackfil) !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; } #header.active { background: #fff; } #header.active .wrapIn .logo { filter: none; } #header.active .gnb_wrap { color:#111; } #header.active .all_wrap .all_btn .ham:before, #header.active .all_wrap .all_btn .ham:after { background: #111; } .scroll.up #header { background:#fff; } .scroll.up #header .wrapIn .logo { filter: none; } .scroll.up #header .gnb_wrap { color:#111; } .scroll.up #header .all_wrap .all_btn .ham:before, .scroll.up #header .all_wrap .all_btn .ham:after { background: #111; } .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) } .scroll.up #header .util_wrap .lang_wrap .lang .lang_btn, #header.active .util_wrap .lang_wrap .lang .lang_btn {color:#000;} .scroll:not(.up) #header { transform:translateY(-100%) } .scroll #quickSite { background:var(--mainBg) } #footer { z-index:1; 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_wrap { display:flex; align-items:center; justify-content:space-between; gap:4em } #footer .logo img { height:2.5em } #footer .menu_wrap { margin-right: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 } #footer .info_wrap { display:flex; justify-content:space-between; align-items:flex-start; margin-top:3em } #footer .info { overflow:hidden; flex:1 1 0%; min-width:0 } #footer .info > li { float:left; margin-right:2em; 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 .info > li.copyright { font-size:.875em; opacity:.5; margin-top:1em; text-transform:uppercase } #footer .site_wrap { margin-left:auto; background:#333; width:14em; font-size:.875em; position:relative } #footer .site_wrap .siteBtn { display:flex; align-items:center; padding:1em; font-weight:500; transition:.3s } #footer .site_wrap .siteBtn .arrow { margin-left:auto; transition:.3s } #footer .site_wrap .list { position:absolute; left:0; bottom:100%; width:100%; background:inherit; visibility:hidden; opacity:0; transform:translateY(1em); transition:.3s } #footer .site_wrap .list > li > a { display:block; padding:1em; padding-right:3em; border-bottom:1px solid rgba(255,255,255,.1); position:relative; transition:.3s } #footer .site_wrap .list > li > a:after { content:"\e980"; font-family:xeicon; position:absolute; right:1em; top:50%; transform:translateY(-50%); opacity:0; transition:.3s } #footer .site_wrap .list > li > a:hover { background:rgba(255,255,255,.1) } #footer .site_wrap .list > li > a:hover:after { opacity:1 } #footer .site_wrap .siteBtn:hover, #footer .site_wrap.on .siteBtn { background:rgba(0,0,0,.2) } #footer .site_wrap.on .siteBtn .arrow { transform:rotate(180deg) } #footer .site_wrap.on .list { visibility:visible; opacity:1; transform:translateY(0) } .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 } .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 } /*컨텐츠 back241216*/ /* #contents { } #contents .doc { padding: 4em 0 8em 0; } #contents .doc.pt0 { padding: 0 0 8em 0; } #contents .doc.pb0 { padding: 4em 0 0 0; } #contents { } #contents .sub_top_wrap { box-sizing:border-box; display:flex; flex-direction:column } #contents .sub_top_wrap .visual_wrap { height:30em; 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 .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; transform: scale(1.1); } #contents .sub_top_wrap .visual_wrap .bg:before { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .215); content: ''; } #contents .sub_top_wrap .visual_wrap .con_wrap { position: absolute; bottom: 11em; left: 50%; color: #fff; transform: translateX(-50%); text-align: center; } #contents .sub_top_wrap .visual_wrap .con_wrap .t2 { margin-bottom: 1em; font-size: 1.5em; font-weight: 500; transition: 1.5s; transform: translateY(2em); opacity: 0; } #contents .sub_top_wrap .visual_wrap .con_wrap .t1 { font-size: 3.75em; font-weight: 600; line-height: 1; transition: 1.5s; transform: translateY(1em); opacity: 0; } .load #contents .sub_top_wrap .visual_wrap .con_wrap .t1 { transform: translateY(0); opacity: 1; } .load #contents .sub_top_wrap .visual_wrap .con_wrap .t2 { transform: translateY(0); opacity: .5; } #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 } #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; padding: 0 4vw; } .load #contents .sub_top_wrap .visual_wrap .bg { animation: 2.5s subVisual cubic-bezier(0.39, 0.58, 0.57, 1) forwards; } @keyframes subVisual { to { transform: scale(1); } } #contents .sub_top_wrap .tit_wrap { } #contents .sub_top_wrap .tit_wrap .wrapIn { display:flex; justify-content:space-between; align-items:center; margin-top: 3em; padding-left: 1em; } #contents .sub_top_wrap .tit_wrap .tit .t1 { font-size:2.415em; font-weight:800 } #contents .sub_top_wrap .nav { display:flex; align-items:center; color: #999; } #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 { } #contents .sub_top_wrap .nav > li.home > a { } #contents .sub_top_wrap .nav > li.home > a .xi { } #contents .sub_top_wrap .sub_tab { position: absolute; border-top: 2px solid rgba(255,255,255, .1); background-color: rgba(0,0,0, .25); bottom: 0; width:100%; backdrop-filter: blur(5px); } #contents .sub_top_wrap .sub_tab .gnb > li { width:100% } #contents .sub_top_wrap .sub_tab .gnb .dp2 { } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li { position: relative; flex: 1; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:after { position: absolute; top: 0; width: 100%; transform: scaleX(0); height: 3px; background: #fff; content: ''; transition: .5s; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:hover:after, #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on:after { transform: scaleX(1); } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:last-of-type:before { display: none; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a { display:flex; align-items:center; letter-spacing: .03em; justify-content:center; color: #fff; opacity: .75; height:4.515em; padding:0 .5em; transition: .15s; position:relative } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a:hover { opacity: 1; transition: .15s; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a .va { font-weight:600; font-size:1.125em; opacity:.85; position:relative; z-index:1 } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a .tt { font-weight: 500; font-size: 1.125em; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a { color:#fff; opacity: 1; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; } #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; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > .layer { display: none; } #contents .sub_top_wrap .con_menu { } #contents .sub_top_wrap .con_menu ul:not(.dp3) { display:block; } #contents .sub_top_wrap .con_menu .gnb .dp4 { display:none; } #contents .sub_top_wrap .con_menu .gnb .dp3 { flex-wrap: wrap; gap: 1em .5em; } #contents .sub_top_wrap .con_menu .gnb .dp3 > li { width:auto; } #contents .sub_top_wrap .con_menu .gnb .dp3 > li > a { height:4em; padding:0 2em; border: 1px solid #ddd; border-radius:6em; color:#777; transition:.2s; } #contents .sub_top_wrap .con_menu .gnb .dp3 > li > a .tt { font-weight: 600; font-size:1.125em; } #contents .sub_top_wrap .con_menu .gnb .dp3 > li.act > a { color:#000; } #contents .sub_top_wrap .con_menu .gnb .dp3 > li.on > a { background:var(--siteC); color:#fff; font-weight:500; } */ /*contents*/ #contents { } #contents .sub_page_top { box-sizing:border-box; display:flex; flex-direction:column; position: relative; } #contents .sub_page_top .visual_wrap { width: 100%; height: 100%; position:absolute; left: 0; top: 0; z-index: -1; overflow:hidden; transition:.5s } #contents .sub_page_top .visual_wrap::before { content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); position: absolute; left: 0; top: 0; z-index: 1; } html:not(.scroll) #contents .sub_page_top .visual_wrap { padding:0; } #contents .sub_page_top .visual_wrap .wrapIn { position:relative; height:100% } #contents .sub_page_top .visual_wrap .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity: 1; /*transform: translateX(4.5em); */ transition:.3s; } #contents .sub_page_top .visual_wrap .bg:before { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: ''; } .load #contents .sub_page_top .visual_wrap .bg { } #contents .sub_page_top .tit_wrap { } #contents .sub_page_top .tit_wrap .wrapIn { display:flex; flex-direction: column; justify-content: center; align-items: center; gap:2em; height: 18em; position: relative; } #contents .sub_page_top .tit_wrap .wrapIn .tit { } #contents .sub_page_top .tit_wrap .tit .t1 { font-size:3.5em; font-weight:800; color:#fff; } #contents .sub_page_top .nav { display:flex; align-items:center; margin-bottom: 1em; /* position: absolute; right: 0; bottom: 0; */ zoom: .8; opacity: .65; } #contents .sub_page_top .nav > li { position:relative; text-transform:uppercase; font-weight: 600; color: #eee; font-size: 1.4em; } #contents .sub_page_top .nav > li:not(.home):before { content: ''; display: inline-block; vertical-align: middle; margin: 0 10px; width: 16px; height: 2px; background: #DDDDDD; border-radius: 10px; transform: rotateZ(110deg); } #contents .sub_page_top .nav > li:last-of-type { color: #fff; font-weight: 800; } #contents .sub_page_top .nav > li.home { } #contents .sub_page_top .nav > li.home > a { width:1.5em; height:1.5em; border-radius:50%; display:flex; align-items:center; justify-content:center } #contents .sub_page_top .nav > li.home > a .xi { font-size:1.45em } #contents .sub_page_top .sub_tab { position: absolute; bottom: 0; width:100%; background: rgba(0,0,0, .2); backdrop-filter: blur(2px); box-shadow: 6px 0 18px rgba(0,0,0,.05); } #contents .sub_page_top .sub_tab .gnb > li { width:100% } #contents .sub_page_top .sub_tab .gnb .dp2 { justify-content:center } #contents .sub_page_top .sub_tab .gnb .dp2 > li { position: relative; flex: 1; max-width: 20%; } #contents .sub_page_top .sub_tab .gnb .dp2 > li.on:after { position: absolute; top: 0; width: 100%; height: 3px; background: #fff; content: ''; } #contents .sub_page_top .sub_tab .gnb .dp2 > li:last-of-type:before { display: none; } #contents .sub_page_top .sub_tab .gnb .dp2 > li:before { position: absolute; right: 0; width: 1px; height: 20px; background: rgba(255,255,255, .35); content: ''; top: 50%; transform: translateY(-50%); } #contents .sub_page_top .sub_tab .gnb .dp2 > li > a { display:flex; align-items:center; letter-spacing: .03em; justify-content:center; font-size: 1.25em; font-weight: 500; color: #fff; opacity: .65; height:4.25em; padding:0 .5em; transition: .15s; position:relative } #contents .sub_page_top .sub_tab .gnb .dp2 > li > a:hover { opacity: 1; transition: .15s; } #contents .sub_page_top .sub_tab .gnb .dp2 > li > a .va { font-weight:600; font-size:1.125em; opacity:.7; position:relative; z-index:1 } #contents .sub_page_top .sub_tab .gnb .dp2 > li.on > a { color:#fff; opacity: 1; } #contents .sub_page_top .sub_tab .gnb .dp2 > li.on > a:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; } #contents .sub_page_top .sub_tab .gnb .dp2 > li:hover > a .va, #contents .sub_page_top .sub_tab .gnb .dp2 > li.on > a .va { opacity:1; } #contents .sub_page_top .sub_tab .gnb .dp2 > li > .layer { display: none; } #contents .sub_page_top .tit_wrap .wrapIn:has(.busiPageTit) { height: 22em; } #contents .sub_page_top .busiPageTit { height: 100%; margin-bottom: 2em; padding-bottom: 2em; color:#fff; } #contents .sub_page_top .busiPageTit .t1 { font-weight: 600; font-size: 5em; } #contents .sub_page_top .busiPageTit .t1 i {font-family:SUIT,sans-serif;} #contents .sub_page_menu { background: rgba(0, 0, 0, .5); position: relative; } #contents .sub_page_menu .wrap_in { padding: 0 5vw; box-sizing: border-box; } #contents .sub_page_menu .gnb { display:block; } #contents .sub_page_menu .gnb .dp2 { justify-content: center; } #contents .sub_page_menu .gnb .dp2 > li { flex:1; max-width: calc(100% / 4); } #contents .sub_page_menu .gnb .dp2 > li > a { display: flex; justify-content: center; align-items: center; height: 2.5em; padding:1em 1.5em; color:#fff; position: relative; opacity: .8; } #contents .sub_page_menu .gnb .dp2 > li > a .tt { font-size:1.250em; font-weight:500; } #contents .sub_page_menu .gnb .dp2 > li > a .in { position:relative; padding:0 .5em; } #contents .sub_page_menu .gnb .dp2 > li > a:after { content:""; position:absolute; left:0; bottom:1px; width:100%; height:3px; background: #fff; transform:scaleX(0); transition:transform .3s; } #contents .sub_page_menu .gnb .dp2 > li.act > a .in, #contents .sub_page_menu .gnb .dp2 > li.on > a .in { color:#fff; } #contents .sub_page_menu .gnb .dp2 > li.act > a:after, #contents .sub_page_menu .gnb .dp2 > li.on > a:after { transform:scaleX(1); } #contents .sub_page_menu .gnb .dp3 { display: none; } #contents .sub_page_menu .gnb .dp2 > li > a.layer { display: none; } #contents .sub_con_menu {margin-top: 3em;} #contents .sub_con_menu .gnb {justify-content: center;} #contents .sub_con_menu .gnb .dp3 {background: #f4f4f4; border-radius: 3em; overflow: hidden; width: 100%; height: 100%; justify-content: center; align-items: center;} #contents .sub_con_menu .gnb .dp3 > li {width: 30em; height: 100%; text-align: center;} #contents .sub_con_menu .gnb .dp3 > li > a {padding: 1em; justify-content: center; height: 100%; box-sizing: border-box; width: 100%; align-items: center;} #contents .sub_con_menu .gnb .dp3 > li > a .tt {font-size: 1.63em; font-weight: 500;} #contents .sub_con_menu .gnb .dp3 > li.on, #contents .sub_con_menu .gnb .dp3 > li:hover {background: var(--siteC); color: #fff;} /* */ #contents .sub_page_con { padding:3em 0 0; text-align:center; } #contents .sub_page_con .con_tit { } #contents .sub_page_con .con_tit .tt { display:block; font-size:3.000em; font-weight:700; } #contents .doc { padding:6em 0 10em; } #contents .doc.s2 { padding:2em 0 10em; } /****** SUB ***********/ /* 공통 */ .page_tt { font-size:1em; word-break:keep-all; line-height:1.4; } .page_tt > .tt + .tt { margin-top:1.25em; } .page_tt.o1 { opacity:.7; } .page_tt.o2 { opacity:.1; } .page_tt.s1 { font-size:0.938em } .page_tt.s2 { font-size:1.063em } .page_tt.s3 { font-size:1.125em } .page_tt.s4 { font-size:1.250em } .page_tt.s5 { font-size:1.313em } .page_tt.s6 { font-size:1.500em } .page_tt.s7 { font-size:1.625em } .page_tt.s8 { font-size:1.875em } .page_tt.s9 { font-size:2.375em } .page_tt.s10 { font-size:2.750em } .page_tt.s11 { font-size:3.250em } .page_tt.s12 { font-size:4.000em; } .page_tt.s13 { font-size:4.500em; } .page_tt.s14 { font-size:5.250em; } .page_tt.s15 { font-size:1.700em; } .lh4 {line-height: 1.4;} .lh5 {line-height: 1.5;} .lh6 {line-height: 1.6;} .sub_tt.tit { text-align: center; font-size: 1.5em; /*letter-spacing: .375em !important; */ line-height: 1.6; text-transform: uppercase; font-weight: 600; } .sub_tt.tit2 { text-align: center; font-size: 2em; font-weight: 700; line-height: 1.4em; } .sub_tt.t1 { line-height: 1.6; padding-bottom: 1em; font-size: 1.1em; } .sub_tt.t1:last-of-type { padding-bottom: 0; } .page_con {padding: 0 0 6em;} .page_con + .page_con {padding: 6em 0;} .page_con.p2 {padding: 6em 0 10em;} .page_con.bg {background: #f4f4f4;} .tline{ background: var(--siteC);} .tline.w{ width: 2em; height: 1px; margin: 1.5em 0 2em;} .tline.h{ width: 1px; height: 2em; margin:1.5em auto 1em} /*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 .fst1 > li { flex: 1 1 100%; max-width: 100%; } .flex_box .fst1 > li > .in { margin: 0 0 1em 1em; } .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 34.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; } .flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } .flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst6 > li { flex: 1 1 16.66%; max-width: 16.66%; } .flex_box .fst6 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst10 > li { flex: 1 1 10%; max-width: 10%; } .flex_box .fst10 > li > .in { margin: 0 0 1em 1em; } .flex_box li > a { display: block; } /* company-ceo인사말 */ .greet_wrap { } .greet_wrap .greet-top { margin-bottom: 1em; } .greet_wrap .greet-top .t2 { margin-top: 10px; line-height: 1.2; } .greet_wrap .greet-con { gap:4.5em; /* padding: 0 3em; */ } .greet_wrap .greet-con .img_wrap { width: 40%; } .greet_wrap .greet-con .img_wrap .img {width: 100%; margin-top: -5em; padding-bottom: 120%;} /* .greet_wrap .greet-con .img_wrap .img { width: 100%; margin-top: -4em; padding-bottom: 120%; border:1px solid #ddd; border-radius: 1em; box-shadow: -3px 3px 15px rgba(0,0,0,.1); } */ .greet_wrap .greet-con .txt_wrap { order: -1; flex:1; padding-top: 1em; } .greet_wrap .greet-con .txt_wrap .page_tt { color:#333; } .greet_wrap .greet-con .txt_wrap .page_tt + .page_tt { margin-top: 1em; } .greet_wrap .greet-con .txt_wrap p.ceo { margin-top: 1em; font-size: 1.25em; text-align: right; } .greet_wrap .greet-con .txt_wrap p.ceo strong { padding-left: 1em; font-weight: 600; font-size: 1.5rem; } /* 비전&미션 */ .vision_wrap {gap: 2em;} .vision_wrap .vision_img {width:100%; padding-bottom: 60%;} .vision_wrap .vision { position: relative; flex: 1;} .vision_wrap .vision:last-of-type { margin-right: 0; } .vision_wrap .vision:before{ content:""; position:absolute; z-index:1; left:0; right:0; top:0; bottom:0; background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.5) 100%); width:100%;} .vision_wrap .vision:after { content:""; position:absolute; z-index:2; left:0; right:0; top:0; bottom:0; background:var(--siteC); box-shadow:2px 2px .75em rgba(0,0,0,.3); opacity:0; visibility:hidden; transition:.2s; width:100;} .vision_wrap .vision.st2:after { background:var(--siteC2);} .vision_wrap .vision:hover:after { opacity: .8; visibility: visible; } .vision_wrap .vision .vision_tt { z-index: 3; position: absolute; width: 100%; bottom: 20%; padding: 2em 4em; box-sizing: border-box; height: 13em; text-align:center; } .vision_wrap .vision .vision_tt .t1 { color: #fff; font-size: 3em; font-weight: 800; margin-bottom: 10px;} .vision_wrap .vision .vision_tt .t2 { color: #fff; font-size: 1.2em; line-height: 1.5; } .valueCircle_wrap{ position: relative;} .valueCircle_wrap .tit_bg{ width: 689px; height: 634px; margin:0 auto;} .valueCircle_wrap .tit_bg span{padding-bottom: 1.5em;font-weight: 800;font-size: 2em;color:var(--siteC);text-transform: uppercase;} .valueCircle_wrap .cont_list{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .valueCircle_wrap .cont_list > li{max-width: 25vw;position: absolute;} .valueCircle_wrap .cont_list > li:nth-child(odd){ text-align: right; } .valueCircle_wrap .cont_list > li:nth-child(1){ right:50%; top:1em; transform:translateX(-19em)} .valueCircle_wrap .cont_list > li:nth-child(2){ left:50%; top:1em; transform:translateX(19em)} .valueCircle_wrap .cont_list > li:nth-child(3){ right:50%; top:25em; transform:translateX(-23em)} .valueCircle_wrap .cont_list > li:nth-child(4){ left:50%; top:25em; transform:translateX(23em)} .valueCircle_wrap .cont_list > li:nth-child(5){ text-align: center; left: 50%; bottom:-4em; transform: translateX(-50%);} .valueCircle_wrap .cont_list > li .t1{font-weight: 800;font-size: 1.375em;color:var(--siteC)} .valueCircle_wrap .cont_list > li .t2{margin-top: .5em;font-weight: 600;font-size: 1.125em;color: #555;} .valueCircle_wrap .icon_list{width: 689px;height: 634px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} .valueCircle_wrap .icon_list > li .icon{width: 3.25em; height: 3.25em; position: absolute;} .valueCircle_wrap .icon_list > li:nth-child(1) .icon{right: 50%; top: 106px; transform: translateX(-95px);} .valueCircle_wrap .icon_list > li:nth-child(2) .icon{left: 50%; top: 106px; transform: translateX(95px);} .valueCircle_wrap .icon_list > li:nth-child(3) .icon{right: 50%;top: 320px;transform: translateX(-167px);} .valueCircle_wrap .icon_list > li:nth-child(4) .icon{left: 50%; top: 320px; transform: translateX(167px);} .valueCircle_wrap .icon_list > li:nth-child(5) .icon{ left: 50%; bottom: 115px; transform: translateX(-50%);} /* company-연혁 */ /* 연혁 */ .history-con .history-inner { transform: scale(1); /* height: 100vh; */ margin-bottom: 5em; } .history-con .history-inner:last-child { margin-bottom: 0; } .history-con .history-inner.reverse { flex-direction: row-reverse; } .history-con .history-inner.reverse .history-left .img-wrap { margin-right: 0; margin-left: 3em; } .history-con .history-left .img-wrap { margin-right:3em; width: 48vw; margin-left: -22vw; position: sticky; top:10em; } .history-con .history-left .img-wrap .imgfix { overflow: hidden; border-radius: 2em; height:calc(100vh - 15em) } .history-con .history-inner .history-right { flex:1; padding-left: 5em; box-sizing: border-box; } .history-con .history-inner .history-right .item { margin-bottom:2em;} .history-con .history-inner .history-right .item .years-title h2 { display: inline-block; } /* .history-con .history-inner .history-right .item .years-title h2::after { content: "'"; margin-left: -10px; font-style: italic; } */ .history-con .history-inner .history-right .item .info-text { flex-direction: column; gap: 2em;} .history-con .history-inner .history-right .item .year_wrap { width: 100%; } .history-con .history-inner .history-right .item .year_wrap h3.year { font-weight: 600; position: relative; } .history-con .history-inner .history-right .item .year_wrap h3.year::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--siteC); position: absolute; left: -8px; top: 2px; opacity: .15; } .history-con .history-inner .history-right .item .year_wrap .info_list { padding: .5em .5em .5em 1em; box-sizing: border-box; } .history-con .history-inner .history-right .item .info_list > li { display: flex; gap: 1em; } .history-con .history-inner .history-right .item .info_list > li + li { margin-top:1em; } .history-con .history-inner .history-right .item .month { min-width: 6.5em; color:#666 } .history-con .history-inner .history-right .item .info { } /* company-오시는길 */ .mapWrap {border: 1px solid #000;} .mapWrap .root_daum_roughmap .wrap_controllers { display: none; } .mapInfoWrap { } .mapInfoWrap .in { gap:1em; } .mapInfo { flex:1; padding: 2em 2.5em; background: #f4f4f4; border:1px solid #ddd; position: relative; } .mapInfo .tit_wrap { margin-bottom: 1.5em; } .mapInfo .info { } .mapInfo .info p + p { margin-top: 0.8em; } .mapInfo .icon { width: 3em; height: 3em; border-radius: 50%; } .mapInfo.info01 .icon { background:var(--siteC) } .mapInfo.info02 .icon { background:#555 } .mapInfo .xi { color:#fff; } .mapInfo_list {border-top: 1px solid #000; margin-top: 1em; border-bottom: 1px solid #000; padding: 1em 0; gap: 1em;} .mapInfo_list li {width: 50%; gap: 3em; border-right: 1px solid #ddd; padding: 0 1em;} .mapInfo_list li:last-child {border-right: unset;} .mapInfo_list li .left_icon {width: 10%; text-align: center; font-size: 1.25em;} .mapInfo_list li .right_info {flex: 1;} .mapInfo_list li .right_info .tit {font-size: 1.25em; font-weight: 600; margin-bottom: .5em;} .mapInfo_list li .right_info .bus_con {} .mapInfo_list li .right_info .bus_con.flex {gap: 0.7em 1em; flex-wrap: wrap;} .mapInfo_list li .right_info .bus_con .tt {font-size: 1em;} .mapInfo_list li .right_info .bus_con .tt span.st1 {color: #fff; width: 2em; height: 2em; text-align: center; line-height: 2em; border-radius: 50%;} .mapInfo_list li .right_info .bus_con .tt span.st2 {color: #fff; border-radius: .8em; padding: .3em .7em; font-size: .9em;} .mapInfo_list li .right_info .bus_con .tt2 {position: relative; font-size: 1.125em;} .mapInfo_list li .right_info .bus_con .tt2::before {position: absolute; top: 0; right: -9px; content: ''; background: #ddd; width: 1px; height: 100%;} .mapInfo_list li .right_info .bus_con .tt2:last-child:before {display: none;} .st1.subw_1 {background: #0052A4;} .st1.subw_4 {background: #2c9ede;} .st2.bus_1 {background: #0068b7;} .st2.bus_2 {background: #53b332;} .st2.bus_3 {background: #0068b7;} .st2.bus_4 {background: #53b332;} .st2.bus_5 {background: #e60012;} .mapInfo_list2 { } .mapInfo_list2 { gap: 1em 1em; margin: 4em auto 1em; width: 90%;} .mapInfo_list2 > li { flex: 1; text-align: center; } .mapInfo_list2 > li .in { flex: 1; } .mapInfo_list2 > li + li .in { padding-left: 1em; border-left: 1px solid #ddd; } /* 사업영역 - index */ .doc.busiPage { background: #e9f6fe; } .busiPage_tit { margin-bottom: 1em; padding-bottom: 1.5em; position: relative; } .busiPage_tit::after { content: ''; width: 1px; height: 1.25em; background: var(--siteC2); position: absolute; left: 50%; bottom: 0; transform: translateX(-1px); } .busiCateList_wrap { } .busiCateList { gap:2em } .busiCateList > li { flex: 1 0 calc((100% - 4em) / 3); border-radius: .5em; box-shadow: 2px 3px 10px rgba(0, 0, 0, .1); overflow: hidden; } .busiCateList > li .in { display: block; } .busiCateList > li .in .img_wrap { overflow: hidden; } .busiCateList > li .in .img_wrap .img { display: block; width: 100%; padding-bottom: 20em; height: 100%; transition: all .3s; } .busiCateList > li .in .txt_wrap { padding: 1em; background: #fff; } .busiCateList > li .in .txt_wrap .tit { font-weight: 600; font-size: 1.25em; } .busiCateList > li .in .txt_wrap .xi { color:var(--siteC) } .busiCateList > li:hover .in .img_wrap .img { transform: scale(1.1); } .sub_business_wrap {position: relative;} .sub_business_wrap::before {content: ''; background: url(../images/sub/business/section_deco.png ) no-repeat; position: absolute; left: 0; bottom: 0; width: 1400px; height: 463px;} .solution-slide {margin-top: 3rem !important; width: calc(1260px + 4em); overflow: visible !important;margin-left: 0 !important;} .solution-slide .proc-list{gap: 2em;/* overflow-x: scroll; */} .solution-slide .swiper-slide.item1 {display: flex;justify-content: flex-end;} .proc-list.st2 > li .img-area {height: 350px;} .solution-slide .proc-list > li{flex: 0 0 420px; /* min-width: 420px; */} .solution-slide .proc-list > li > a {display: block;} .solution-slide .proc-list > li .img-area {overflow: hidden; border-radius: 1em; height: 350px;} .solution-slide .proc-list > li .txt-area {text-align: center; margin-top: 1.5em; padding: 0 0.5em;} .solution-slide .proc-list > li .txt-area > p {} .solution-slide .proc-list > li:hover .img-area img {transform: scale(1.2); transition: .6s;} .solution-slide .proc-list > li:hover .txt-area > p {color: var(--siteC);} /* rnd - 핵심역량 */ .rnd_img_box {} .rnd_img_box .img {} .rnd_img_box .img:nth-child(2) {margin-top: 2em;} .vision_logo {width: 22%; margin: 0 auto;} .vision_con {gap: 2em;} .vision_con .vision_top {position: relative; z-index: 1; width: 40%;} .vision_con .vision_top .logo {background: linear-gradient(45deg, #065c94 0%, #079790 100%); width: 15em; height: 15em; z-index: 10; border-radius: 50%; text-align: center; margin: 0 auto;} .vision_con .vision_top .logo img { filter: var(--crWhitefil); width: 11em;} .circle { border-radius: 50%; position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); z-index: -1; border: 1px solid #f4f4f4;} .circle.st1 { transition: all 0.5s; opacity: 0; animation: circle 3s 1s infinite forwards; width: 25em; height: 25em; background: rgb(211 216 226 / 20%); } .circle.st2 {transition: all 0.5s; opacity: 0; animation: circle 3s 1.5s infinite forwards; left: 67%; width: 35em; height: 35em; background: rgb(211 216 226 / 20%); } @keyframes circle{ 0%{ opacity: 0;} 50%{ opacity: 1; } 100%{ opacity: 0; } } .vision_list li .tt {font-size: 1.05em; font-weight: 600; margin-top: 1em;} .vision_con .vision_list {gap: 1em; z-index: 1; position: relative; width: 40%;} .vision_con .vision_list li {flex: 1; border-radius: 1em; overflow: hidden; background: #fff; border: 1px solid #ddd; padding: 1em; margin-bottom: .5em;} .vision_con .vision_list li:last-child {margin-bottom: 0;} .vision_con .vision_list li .inn {padding-bottom: 66.6%; position: relative;} .vision_con .vision_list .tbox {text-align: left;} .vision_con .vision_list .tbox .title {font-size: 1.125em; font-weight: 600; margin-bottom: 0.5em;} .vision_con .vision_list .tbox .tx {position: relative; font-size: .96em; padding-left: 1rem; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: .3em;} .vision_con .vision_list .tbox .tx::before {content: ""; position: absolute; left: 0; top: .43em; width: .313rem; height: .313rem; background: var(--siteC); border-radius: 50%;} .vision_con .vision_list .tbox .tx:last-child {margin-bottom: unset;} /* rnd - 인증현황 */ .page_certificate { } .page_certificate .list { gap: 4.5em 2em; } .page_certificate .list > li { position: relative; flex: 0 0 calc(25% - 2em); cursor: pointer; } .page_certificate .list > li .img-area { position: relative; padding: 2.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } .page_certificate .list > li .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.5em; height: 2.5em; border: 3px solid var(--siteC); border-radius: 50%; color: var(--crWhite); background: var(--siteC); opacity: 0; visibility: hidden; transition: 0.3s; display: flex; align-items: center; justify-content: center; } .page_certificate .list > li:hover .xi { opacity: 1; visibility: visible; } .page_certificate .list > li:hover .img-area { border-color: var(--siteC); } .page_certificate .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 210px; height: 310px; margin: 0 auto; } .page_certificate .list > li .txt { margin-top: 1.5em; text-align: center; } .page_certificate .list > li .txt > p { font-size: 1.125rem; } .page_certificate .list > li .txt > span { display: inline-block; font-size: 1rem; color: var(--crGray3); margin-top: 10px; } .page_certificate.st2 .list { gap: 2em 2em; } .page_certificate.st2 .list > li .img-area { position: relative; padding: 1.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } .page_certificate.st2 .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 272px; height: 100px; background: #fff; text-align: center; } .page_certificate.st2 .list > li .img-area .imgfix img { width: 14em; max-height: 45px; height: 45px; object-fit: contain; padding-top: 1.5em; } .page_certificate.st_main { background: #fff; flex: 1 100%; padding: 3em; border-radius: 1.5em; box-shadow: 0 0 10px rgba(0, 0, 0, .05); } .page_certificate.st_main .list { gap: 1em; } .page_certificate.st_main .list > li { flex: 0 0 calc(20% - 1em); } html.pop .popWrap.img { width: 25vw; opacity: 0; transform: scale(0.5); transition: 0.75s; left: 50%;transform: translateX(-52%);} html.pop .popWrap.img.ani { opacity: 1; transform: scale(1); } html.pop .popWrap.img .popTit { background: transparent; padding: 0; justify-content: flex-end; } html.pop .popWrap.img .popTit .popClose .xi { color: #fff; text-align: right; } html.pop .popWrap.img .tit .t1 { display: inline-block; font-size: 1.125rem; color: #fff; font-weight: 600; margin-top: 1rem; } html.pop .popWrap.img .imgarea { width: 25vw; } /* esg */ .wrap_idx { } .wrap_idx .sub-tab { display: flex; } .wrap_idx .sub-tab.pd_w{ padding-bottom: 3em;} .wrap_idx .sub-tab>li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 3em; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; } .wrap_idx .sub-tab>li{ flex: 1 1 33.33%; max-width: 33.33%;} .wrap_idx .sub-tab>li:nth-child(n+3) > .tab_btn{ margin-top: -3px;} .wrap_idx .sub-tab>li > .tab_btn{ padding: 0 1vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 1px solid #ddd; color: #444; transition: .3s; text-align:center; line-height:1.1; word-break:keep-all} .wrap_idx .sub-tab>li.on > .tab_btn { background-color: var(--siteC); border: 1px solid var(--siteC); color: #fff; } .proAll { display: flex; gap: 3em; } .proAll .Tleft { position: sticky; top: 10em; height: 100%; } .proAll .Tleft:after { } .proAll .Tright { width: 100%; border-left: 1px solid #eee; padding-left: 4em; } .proAll .Tright .sub_tit { position: relative; padding-left: .75em; margin-bottom: 1em; } .proAll .Tright .sub_tit:before { position: absolute; left: 0; width: 5px; height: 60%; top: 50%; transform: translateY(-50%); background: var(--siteC); content: ''; } .proAll .Tright .sub_tit .tt { font-size: 1.215em; font-weight: 600; margin-top: 1em; letter-spacing: -0.03em; } .sTn_wrap { position: relative; width: 16.5em; } .sTn_wrap .sideB li {margin-bottom: .5em;} .sTn_wrap .sTn { position: relative; display: flex; align-items: center; justify-content: center; border-radius: .5em; height: 4em; padding: .65em 1.5em; box-sizing: border-box; background: #f2f2f2; color: #111; transition: .3s; width: 14.5em; } .sTn_wrap .sTn:before { position: absolute; top: 50%; right: 2em; transform: translateY(-50%); font-family: 'xeicon'; content: '\e907'; color: #444; font-size: 1.65em; opacity: 0; transition: .3s; } .sTn_wrap .sTn .tt { font-size: 1.0515em; font-weight: 600; text-align: center; letter-spacing: -0.03em; } .sTn_wrap li .sTn.on { width: 19em; background: var(--siteC); justify-content: space-between; text-align: left; color: #fff; padding: .65em 2em; } .sTn_wrap li .sTn.on:before { opacity: 1; right: 1em; } .sTn_wrap li .sTn.on:before { color: #fff; } .sTn_wrap .pimg { padding: 1.5em; box-sizing: border-box; text-align: center; } .sTn_wrap.st2 li.on .sTn { width: 17em; background: var(--siteC); justify-content: space-between; text-align: left; color: #fff; padding: .65em 2em; } .sTn_wrap.st2 li.on .sTn:before { opacity: 1; right: 1em; } .sTn_wrap.st2 li.on .sTn:before { color: #fff;} .pledge-paper{max-width:80rem; padding:3rem; border-radius: 20px; margin:0 auto; background:#eaf2fc; position:relative; overflow:hidden;} .pledge-paper .paper-inner{padding:4rem 4rem 4rem; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.03); background: #fff;} .pledge-paper .paper-inner:before,.pledge-paper .paper-inner:after{content:""; display:block; width:400px; height:38px; background:var(--siteC); position:absolute; transform:rotate(45deg)} .pledge-paper .paper-inner:before{top:0; right:-72px;} .pledge-paper .paper-inner:after{left:-72px; bottom:0;} .pledge-paper .paper-header{margin-bottom:2rem;} .pledge-paper .paper-header .stamp{margin-bottom:1.5rem; width: 11em;} .pledge-paper .paper-header .paper-title{font-size:2rem; font-weight: 800; color:#222; text-align: center;} .pledge-paper .paper-body *{font-size:1.04em; word-break: keep-all; line-height: 1.6;} .pledge-paper .paper-body .name {font-weight: 700; margin-top: 2em;} .pledge-paper .paper-body .tit {font-size: 1.3em;} .pledge-paper .num-list {margin:1.6em 0 2em;} .pledge-paper .num-list .list-item{width:100%; margin-right:0; border:none; padding:.5em 0; background:none;} .pledge-paper .num-list .item-content{color:#555; padding-left:0.5em; display: block;} .pledge-paper .num-list .item-num{font-family: 'Pretendard', sans-serif; font-weight: 800; color: #666;} /*** 견적문의 s ***/ /* customer - inquiry */ .dp1_inquiry #contents .sub_top_wrap .tit_wrap { display: none; } .page_col { gap:2em 6em; } .page_col.gp1 { } .page_col > li { } .page_col > li.w1 { width:45%; } .page_col > li.w2 { width: 25%; } .page_col + .page_col { margin-top:8em; } .page_col > li .p1 { padding:4em 0 5em 0; } .page_col > li .p2 { padding:3em 0 2em 0; } .page_col > li .round { border-radius:1.25em; overflow:hidden; } .page_col > li.inImg:not(.flex) .wrap_img:not(.resize) { position:relative; height:100%; } .page_col > li.inImg.flex .wrap_img { flex:1; } .page_col > li .stkH1 { height:var(--maxHeight); } .page_col > li .stkH1 .wrap_img { flex:1; } .page_col .gsimgFix { } .page_col .gsimgFix .posImg { position:relative; height:100%; min-height:70vh; } .page_col .gsimgFix .posImg img { position:absolute; bottom:0; width:100%;} .page_col .gsimgFix.st2 .posImg { height:30em; min-height:auto; } .page_col .gsimgFix.st2 .posImg img { height:150%; } .inquiry-con { } .inquiry-con .form_wrap { } .inquiry-con .form_wrap .form { gap: 1em; font-size: 1.063em; } .inquiry-con .form_wrap .form > li { } .inquiry-con .form_wrap .form > li.w100 { width: 100%; } .inquiry-con .form_wrap .form > li:not(.w100) { width: calc(50% - .5em); } .inquiry-con .form_wrap .form > li .inp_wrap { position: relative; } .inquiry-con .form_wrap .form > li .inp_wrap.st1{ border-bottom: 1px solid; padding-bottom: 1.2em;} .inquiry-con .form_wrap .form > li .inp_wrap .tit, .inquiry-con .form_wrap .form > li .inp_wrap .input_st:not(textarea) { height: 4em; border-radius: 0; } .inquiry-con .form_wrap .form > li .inp_wrap .tit { position: absolute; top: 0; left: 0; padding-left: 0.625rem; z-index: 100;} .inquiry-con .form_wrap .form > li .inp_wrap .tit:not(.col_none){ position: static; height: 2em; } .inquiry-con .form_wrap .form > li .inp_wrap .tit .tt { font-weight: 600; } .inquiry-con .form_wrap .form > li .inp_wrap .input_st:focus { border-bottom: 1px solid var(--siteC2); } .inquiry-con .form_wrap .form > li .inp_wrap .input_st:not(textarea) { width: 100%} .inquiry-con .form_wrap .form > li .inp_wrap .input_st.st1{ padding-left: 10em; position: relative; } .inquiry-con .form_wrap .form > li .inp_wrap .input_st:not(.input_st.st1){ height: 3em;} .inquiry-con .form_wrap .form > li .inp_wrap textarea.input_st {padding-left: 0.625rem; border-radius: 0; height: 12em !important; resize: none; } .inquiry-con .form_wrap .form > li .inp_wrap .input_st { border: none; border-bottom: 1px solid #111; } .inquiry-con .form_wrap .form_chk { margin-top: 2em; gap: 2.5em;} .inquiry-con .form_wrap .form_chk .chk { gap: 1em; } .inquiry-con .form_wrap .form_chk .chk .input_st.c3{width: auto;} .inquiry-con .form_wrap .form_chk .btn .input_st { width: 100%; } .form_chk .label_st { gap:.25em } .form_chk .label_st input[type=checkbox], .form_chk .label_st input[type=radio] { width: auto; height: auto; overflow: visible; margin-bottom: auto; position: relative; z-index: 1; } .inquiry-con .inquiry-bg-wrap { position: relative;} .inquiry-con .inquiry-bg-wrap .img-area { position: absolute; width: 50vw; height: inherit; overflow: hidden; border-radius: 1em 0 0 1em; } .inquiry-con .form_wrap .form > li .inp_wrap input[type=file] { padding-top: 1em; } .upload-name { border: none;} .custom_file_btn { display: inline-block; /* position: absolute; left: 120px; top: 50%; transform: translateY(-50%); */ padding: 8px 16px; background-color: #007bff; color: #fff; font-size: 14px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } .custom_file_btn:hover { background-color: #0056b3; } /*** 견적문의 e ***/ /****** SUB end ***********/ /****** MAIN ***********/ /**/ .vod_wrap { position:relative } .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% } .visualSlide_wrap { width:100%; position:relative; /* position:fixed; left:0; top:0; */ } .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 .bg::after { content: ''; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .1)); position: absolute; left: 0; top: 0; } .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 } .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:7s; transform:scale(1) rotate(.001deg) } .visualSlide .el:nth-child(3n - 2) .bg { height:110%; transform:scale(1) } .visualSlide .el.swiper-slide-active:nth-child(3n - 2) .bg, .visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 2) .bg { transform:translateY(-9.0909%) rotate(.001deg) } .visualSlide .el:nth-child(3n - 1) .bg { width:110%; transform:scale(1); left:auto; right:0 } .visualSlide .el.swiper-slide-active:nth-child(3n - 1) .bg, .visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 1) .bg { transform:translateX(9.0909%) rotate(.001deg) } .visualSlideSlogan_wrap { position:absolute; right:0; width:calc(100% - var(--headerL)); bottom:var(--mainBottomH); box-sizing:border-box; z-index:10; color:#fff; padding-bottom:10vh } .visualSlideSlogan_wrap .wrapIn { display:flex; flex-direction:column } .visualSlideSlogan_wrap .wrapIn .visual_con { flex:1 1 0%; min-height:0; display:flex; flex-direction:column; gap:3em } .visualSlide_wrap .slogan { box-sizing:border-box; display:flex; flex-direction:column; gap:1em } .visualSlide_wrap .slogan .t1 { font-size:1.5em; font-weight:700 } .visualSlide_wrap .slogan .t2 { font-size:4em; font-weight:800; margin:0 0 .375em 0 } .visualSlide_wrap .slogan .t3 { font-size:1.375em; line-height:1.6 } .visualSlide_wrap .slogan .tLogo { height:6em; margin:1.5em 0 2.5em 0 } .visualSlide_wrap .slogan .tLogo path { fill:#fff } .visualSlide_wrap .slogan .ani { overflow:hidden } .visualSlide_wrap .slogan .ani > i { transform:translateY(200%); } .load .visualSlide_wrap .slogan .ani > i { transform:translateY(0); transition:1s } .load .visualSlide_wrap .slogan .ani.d1 > i { transition-delay:.5s } .load .visualSlide_wrap .slogan .ani.d2 > i { transition-delay:1s } .load .visualSlide_wrap .slogan .ani.d3 > i { transition-delay:1.5s } .visualSlide_control { position:absolute; right:0; top:100vh; transform:translateY(-100%); width:calc(100% - var(--headerL)); z-index:2; color:#fff } .visualSlide_control .wrapIn { display:flex; align-items:center; height:var(--mainBottomH) } .visualSlide_control .control { gap:1em; margin-left:auto } .visualSlide_control .paging { width:5em; text-align:center; } .visualSlide_control .paging .swiper-pagination-current { font-weight:700 } .scroll .visualSlide_control { opacity:0 } .mainScroll { color:#fff; display:flex; align-items:center } .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:flex; align-items:center; font-size:.875em } .mainScroll .tt .xi { font-size:1.5em; margin-right:.25em } .mainScroll .arrow { margin-left:1em } .mainScroll .arrow .xi { font-size:1em } .main_wrap { overflow:hidden; background:var(--mainBg); position:relative; /* padding-bottom:8em */ } .main_top { background:var(--mainBg); position:relative; margin-top:100vh; z-index:1 } .main_top:after { content:""; position:absolute; left:0; bottom:100%; width:100%; height:20vh; background: linear-gradient(0deg, var(--mainBg) 0%, rgba(0,0,0,0) 100%); } .main_box { padding:5em 0; overflow:hidden } .main_box.p1 { padding:20vh 0 } .mainWrapBg { position:absolute; left:0; top:0; width:100%; height:100%; background:#000 } .mainWrapBg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(0deg, var(--mainBg) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.3) 50%, var(--mainBg) 100%); } .mainWrapBg .vod_wrap { height:100% } .main_tit { margin-bottom:5em; display:flex; flex-direction:column; align-items:flex-start; gap:2em } .main_tit.hc { align-items:center; text-align:center } .main_tit.g1 { gap:2em } .main_tit.m1 { margin-bottom:3em } .main_tit .tit0 { font-family: "Oxanium", sans-serif; font-weight:600; font-size:2em; word-spacing:.1em } .main_tit .tit0 > i { position:relative; padding:0 1em } /* .main_tit .tit0 > i:before, .main_tit .tit0 > i:after { content:""; position:absolute; top:50%; width:1em; height:1px; background:#fff } .main_tit .tit0 > i:before { right:100% } .main_tit .tit0 > i:after { left:100% } */ .main_tit .tit1 { font-size:2.5em; font-weight:700; letter-spacing:-.025em; word-spacing:.125em } .main_tit .tit1.s1 { font-size:3em } .main_tit .tit2 { font-size:1.75em; font-weight:500; line-height:1.5 } .main_tit .tt1 { font-size:1.25em; line-height:1.6; opacity:.7 } .main_tit .tt1.point { opacity:1; font-weight:700 } .main_tit .noW { padding:.5em 1.5em; border:1px solid rgba(255,255,255,.5); border-radius:3em; margin:.5em 0; display:inline-flex; align-items:center; font-size:.938em } .main_tit .noW .no { font-weight:900; margin:0 .5em 0 .25em } .main_tit .line { position:relative; padding:0 .25em; box-sizing:border-box; width:auto } .main_tit .line > * { position:relative } .main_tit .line:before { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; height:35%; background:var(--siteC); opacity:.1 } .main_tit.white { color:#fff } .main_more { width:3em; height:3em; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; } .main_more .arrow:before { content:"\e907" } .main_more.s1 { font-size:.875em } .main_more.c1 { background:var(--mainBg); color:#fff; border-color:transparent } /* main 사업분야 */ .main_box { position: relative; } .main_box .wrapBg { position:absolute; left:0; bottom:0; width:100%; height:100% } .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 } .main_tit2 { margin-bottom:2em; display:flex; flex-direction:column; align-items:flex-start; gap:1em 0 } .main_tit2 .tit .t1 { /* font-weight:900; */ font-size:4.5em; letter-spacing:-.025em; word-spacing:.075em } .main_tit2 .tit .t1.s1 { font-size:3.75em } .main_tit2 .tt .t1 { font-size:1.313em; line-height:1.5 } .main_tit2 .main_more2 { margin-top:2em } .main_tit2.white { color:#fff; } .main_tit2.hc { margin-left:auto; margin-right:auto } .main_tit2.vc { margin-top:auto; margin-bottom:auto } .main_more2 { padding:.75em 1.5em; border:1px solid #111; display:inline-flex; align-items:center; gap:1em } .main_more2:after { content:"+" } .main_more2 .t1 { font-size:1.063em } .main_more2.white { border-color:#fff; color:#fff } .main_brand { padding:10em 0; /* margin-top:100vh; */ background:#061631; position:relative; overflow:unset } /* .main_brand::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: 20vh; background: linear-gradient(0deg, var(--mainBg) 0%, rgba(0, 0, 0, 0) 100%); } */ .main_brand .list { display:flex; flex-direction:column } .main_brand .list > li { width:50% } .main_brand .list > li:nth-child(odd) { margin-left:auto } .main_brand .list > li .wrap_in .imgW { overflow:hidden; border-radius:50%; position:relative } .main_brand .list > li .wrap_in .imgW:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2 } .main_brand .list > li .wrap_in .imgW .resize { padding-bottom:100% } .main_brand .list > li .wrap_in .imgW .resize .vod { object-fit: cover; width:100%; height:100% } .main_brand .list > li .wrap_in .conW { color:#fff; position:relative; padding:2em 0 } .main_brand .list > li .wrap_in .conW .tit { position:absolute; left:0; bottom:100%; display:inline-flex } .main_brand .list > li .wrap_in .conW .tit .t1 { font-size:3em; font-weight:700; letter-spacing:-1px; } .main_brand .list > li .wrap_in .conW .tt { position:relative; padding-left:1.5em } .main_brand .list > li .wrap_in .conW .tt:before { content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:#fff } .main_brand .list > li .wrap_in .conW .tt .t1 { font-size:1.125em; line-height:1.4 } /* */ .main_prod { padding:8em 0; background-attachment:fixed; /* overflow:hidden; */ position:relative } .main_prod #horizontal { display:inline-flex; flex-direction:column; box-sizing:border-box; height:100vh } .main_prod #horizontal .list { /* flex:1 1 0%; */ min-height:0; margin-top: 3em; display:inline-flex; gap:0 2em } .main_prod #horizontal .panel { width:20vw; box-sizing:border-box; display:flex; align-items:center } .main_prod .list .wrap_in { text-align:center; box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center } .main_prod .list .wrap_in .img_wrap { box-sizing:border-box; background:#ddd; border-radius:1em; overflow:hidden; box-shadow:0 0 2em rgba(0,0,0,.1) } .main_prod .list .wrap_in .con_wrap { padding:2em 1em 1em; text-align:left; box-sizing:border-box; display:flex; flex-direction:column; gap:3em 0; text-align:center } .main_prod .list .wrap_in .con_wrap .tit { font-weight:700; font-size:1.25em; line-height:1em; overflow:hidden } .main_prod .main_tit { padding-top:5em } .mainBusinessSlide { } .mainBusinessSlide .swiper-wrapper { align-items:stretch } .mainBusinessSlide .el { width:30%; height: auto } .mainBusinessSlide .el .wrapIn, .mainBusinessSlide .el .wrapIn .img_wrap, .mainBusinessSlide .el .wrapIn .img_wrap .resize { height:100% } .mainBusinessSlide .el .img_wrap { position:relative; overflow:hidden; border-radius:1em; border-bottom-left-radius:10em } .mainBusinessSlide .el .img_wrap .resize { filter:blur(1em) } .mainBusinessSlide .el .img_wrap .con { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; padding:5em 3em; color:#fff; display:flex; align-items:flex-end } .mainBusinessSlide .el .img_wrap .con .conIn { display:flex; gap:4em } .mainBusinessSlide .el .img_wrap .con .twrap { flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:1em } .mainBusinessSlide .el .img_wrap .con .twrap .t1 { font-size:2.125em; font-weight:700 } .mainBusinessSlide .el .img_wrap .con .twrap .t2 { font-size:1.125em; opacity:.8; line-height:1.5; height:3em; word-break:keep-all } .mainBusinessSlide .el .img_wrap .con .main_more { display:none } .mainBusinessSlide .el.swiper-slide-active { width:calc(70% - 40px) } .mainBusinessSlide .el.swiper-slide-active .img_wrap { border-bottom-right-radius:10em; border-bottom-left-radius:1em } .mainBusinessSlide .el.swiper-slide-active .img_wrap .resize { padding-bottom:56.25%; height:0; filter:blur(0); transition:filter 1s } .mainBusinessSlide .el.swiper-slide-active .img_wrap .con .main_more { display:flex } .main_about { padding: 8em 0; } .main_count { display:flex; gap:1em } .main_count > li { flex:1 } .main_count > li .wrap_in { padding-bottom:50% } .main_count > li:not(:last-child) .wrap_in { border-right:1px solid rgba(255,255,255,.1) } .main_count > li .wrap_in .re { color:#fff; border-radius:1em; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; padding:1em 2em } .main_count > li .wrap_in .tit { display:flex; flex-direction:column; align-items:center; color:var(--siteC3) } .main_count > li .wrap_in .tit .ico { font-size:2em; } .main_count > li .wrap_in .tit .t1 { font-size:1.25em; font-weight:700 } .main_count > li .wrap_in .no { display:flex; align-items:baseline; justify-content:flex-end; gap:.5em; margin-top:auto } .main_count > li .wrap_in .no .t1 { font-size:2.5em; font-weight:900; letter-spacing:-.0375em } .main_count > li .wrap_in .no .t2 { font-size:1.125em } .main_busiDiv { position:relative } .main_busiDiv .list { display:flex; gap:1.5em; position:relative } .main_busiDiv .list > li { flex:1; } .main_busiDiv .list > li > a { display:flex; flex-direction:column; gap:1em; box-sizing:border-box; padding:2em; color:#fff; height:16em; border-radius:1em; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); backdrop-filter:blur(.5em) } .main_busiDiv .list > li > a .t1 { font-weight:700; font-size:1.5em } .main_busiDiv .list > li > a .t2 { font-size:1.063em; line-height:1.4; opacity:.8 } .main_busiDiv .list > li > a .more { margin:auto 0 0 auto; padding:.5em 1em; display:flex; align-items:center; background:var(--siteC); gap:.25em; border-radius:1em } .main_busiDiv .list > li > a .more .xi { font-size:1em; } .main_busiDiv .list > li > a .more .xi.ico:before { content:"\eb8f" } .main_busiDiv .list > li > a .more .xi.arrow:before { content:"\e907"; font-size:.875em; margin-left:.5em } .main_busiDiv .list > li > a .more .tt { font-size:.875em } .main_busiDiv .mainWrapBg .vod { opacity:.95 } .main_service .list { border-radius:1em; position:relative; overflow:hidden; display:flex; flex-wrap:wrap; color:#fff; border:1px solid rgba(255,255,255,.1) } .main_service .list:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.05) } .main_service .list > li { position:relative; width:25% } .main_service .list > li > a { display:flex; flex-direction:column; gap:1.5em; padding:3em 2em; box-sizing:border-box; align-items:center; position:relative; height:100%; text-align:center } .main_service .list > li > a:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(255,255,255,.1); border-top:none; border-left:none } .main_service .list > li > a .ico { width:4em; height:4em; font-size:1em; border-radius:1em; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2) } .main_service .list > li > a .ico:before { font-size:1.75em } .main_service .list > li:nth-child(4n-3) > a .ico { color: #0C9 } .main_service .list > li:nth-child(4n-2) > a .ico { color: #69F } .main_service .list > li:nth-child(4n-1) > a .ico { color: #0CF } .main_service .list > li:nth-child(4n) > a .ico { color: #6C6 } .main_service .list > li > a .t1 { font-weight:700; font-size:1.5em } .main_service .list > li > a .t2 { opacity:.7 } .main_service .list > li > a .more { margin-top:auto; padding-top:1em; opacity:.5 } .main_service .list > li > a .more .tt { font-size:.875em } .main_partner { position:relative } .main_partner .mainWrapBg { height:40vh; top:auto; bottom:0 } .mainPartnerSlide .swiper-wrapper { transition-timing-function: linear } .mainPartnerSlide .el { width:calc(14.44% - 18px) } .mainPartnerSlide .el .img_wrap { padding:2em } .mainPartnerSlide .el .img_wrap .resize { padding-bottom:50% } .main_cs { display:flex; gap:4em; color:#fff } .main_cs .csW { display:flex; flex:1 1 0%; min-width:0; border-radius:1em; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.2); } .main_cs .csW .img, .main_cs .csW .con { width:50%; height:100%; box-sizing:border-box } .main_cs .csW .img { opacity:.8 } .main_cs .csW .con { padding:3em; display:flex; flex-direction:column; gap:1em } .main_cs .csW .con .ico .xi { font-size:3em; line-height:1; opacity:.2 } .main_cs .csW .con .t1 { font-weight:700; font-size:1.375em } .main_cs .csW .con .t2 { font-size:.938em; opacity:.8 } .main_cs .csW .con .no { margin:auto 0 0 auto; font-size:2em; color:var(--siteC) } .main_cs .csW .con .no .xi { font-size:1em; margin-right:.25em } .main_cs .csW .con .no .tt { font-weight:900 } .main_cs .linkW { width:50%; display:flex; flex-wrap:wrap; position:relative; overflow:hidden; border-radius:1em } .main_cs .linkW:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(255,255,255,.1); border-radius:1em } .main_cs .linkW > li { width:50%; position:relative } .main_cs .linkW > li > a { display:block; box-sizing:border-box; padding:2em; position:relative; height:12em } .main_cs .linkW > li > a:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-top:none; border-left:none } .main_cs .linkW > li > a .in { position:relative; display:flex; flex-direction:column; gap:1em; box-sizing:border-box; height:100% } .main_cs .linkW > li > a .in .tit { display:flex; align-items:center; gap:.5em } .main_cs .linkW > li > a .in .tit .ico { font-size:1em; border-radius:.5em; width:2em; height:2em; display:flex; align-items:center; justify-content:center } .main_cs .linkW > li > a .in .tit .ico:before { font-size:1.25em } .main_cs .linkW > li:nth-child(4n-3) > a .in .tit .ico { background: #C30 } .main_cs .linkW > li:nth-child(4n-2) > a .in .tit .ico { background: #F39 } .main_cs .linkW > li:nth-child(4n-1) > a .in .tit .ico { background: #63F } .main_cs .linkW > li:nth-child(4n) > a .in .tit .ico { background: #F60 } .main_cs .linkW > li > a .in .tit .t1 { font-weight:700; font-size:1.25em } .main_cs .linkW > li > a .in .t2 { opacity:.8; font-size:.938em } .main_cs .linkW > li > a .in .main_more { margin:auto 0 0 auto } .main_news { } .main_news .wrapTit { flex-direction: row; justify-content: space-between; align-items: flex-end; } .main_news .wrapTit .txt { } .main_news .wrapTit .tab_btns { gap: 1em; padding-right: 1em; } .main_news .wrapTit .tab_btns > li { } .main_news .wrapTit .tab_btns > li + li { padding-left: 1em; position: relative; } .main_news .wrapTit .tab_btns > li + li::before { content: '/'; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); } .main_news .wrapTit .tab_btns > li .tt { font-weight: 500; font-size: 1.5em; opacity: .6; } .main_news .wrapTit .tab_btns > li.on .tt { opacity: 1; } .main_news .newsList { gap: 1em; } .main_news .newsList > li { width: calc((100% - 3em) / 4); } .main_news .newsList > li .in { gap:5em; padding: 2.5em 2em 2em; box-sizing: border-box; border:5px solid #fff; background:#fff; border-radius: .5em; transition: all .3s; } .main_news .newsList > li .in .txt { display: flex; flex-direction: column; gap: .5em; } .main_news .newsList > li .in .txt .cate { color:var(--siteC); } .main_news .newsList > li .in .txt .tit { font-weight: 600; font-size: 1.5em; color: #111; } .main_news .newsList > li .in .txt .desc { font-size: 1.125em; line-height: 1.5; } .main_news .newsList > li .in .date { } .main_news .newsList > li .in .date span { font-size: .9375em; color: #666; } .main_news .newsList > li:hover .in, .main_news .newsList > li:focus .in { border-color:var(--siteC2); } .main_inquiry { padding-bottom: 10em; position:relative } .main_inquiry .mainFlex { z-index: 1; } .main_inquiry .mainFlex .wrapTit { padding-top: 3em; } .main_inquiry .formSt { display:flex; flex-wrap:wrap; gap:1em; padding:0 4em } .main_inquiry .formSt > li { width:100% } .main_inquiry .formSt > li.w1 { width:calc(50% - .5em) } .main_inquiry .formSt .wrap_in { display:flex; align-items:center; gap:1em } .main_inquiry .formSt .wrap_in > * { flex:1 1 0%; min-width:0 } .main_inquiry .formSt .wrap_in .filebox { flex: none; width: 100%; } .main_inquiry .formSt .wrap_in .filebox label { background-color: unset; border: 1px solid rgba(255, 255, 255, .3); border-radius: .3em; } .main_inquiry .formSt .input_st { border-color:rgba(255, 255, 255, .3); background-color:unset; color:#fff } .main_inquiry .formSt select option { color:#000;} .main_inquiry .formSt .btnW > * { flex:0 0 auto; filter: var(--crWhitefil);} .main_inquiry .formSt .btnW .link { padding:.25em 1.25em; border-radius:2em; border:1px solid rgba(255, 255, 255, .3); font-size:.875em; font-weight:500; display: flex; align-content: center; align-items: center;} .main_inquiry .formSt .btnW .btn { margin-left:auto; border-width:3px } .main_inquiry::after { content:''; width: 100%; height: 100%; background: linear-gradient(180deg, var(--mainBg), transparent); position: absolute; left: 0; top: 0; } /* .main_inquiry::after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(180deg, var(--mainBg)3%, rgba(0, 0, 0, .65), var(--mainBg)); } */ /**** SUB PAGE **********/ /*문의하기*/ .table_form_wrap { } .table_form_wrap .form_tit { padding:1em 0 } .table_form_wrap .form_tit .t1 { font-weight:700; font-size:1.375em } .table_form_wrap .form_tit .t2 { font-weight:700; font-size:1.625em } .table_form_wrap .form_tit .t3 { font-weight:500; font-size:1.125em } .table_form > li { border-bottom:1px solid #ddd; padding:.75em 0 } .table_form > li:first-child { border-top:1px solid #111 } .table_form > li.bd0 { border-bottom:none !important } .table_form > li.bd1 { border-top:none !important } .table_form > li.p1 { padding:1.5em 0; } .table_form .wrap_in { display:flex; align-items:center } .table_form .wrap_in .ti_wrap, .table_form .wrap_in .con_wrap { min-height:3em; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; } .table_form .wrap_in .tit_wrap { width:12em; gap:.5em 0; padding:0 1.25em; } .table_form .wrap_in .ti_wrap { width:12em; gap:.5em 0; padding:0 1.25em; } .table_form .wrap_in .tit1 { font-size:1.125em; font-weight:600; } .table_form .wrap_in .tit2 { font-size:1.063em; font-weight:600; } .table_form .wrap_in .tit3 { font-size:1.000em; font-weight:500; line-height:1.2; } .table_form .wrap_in .con_wrap { flex:1 1 0%; min-width:0; gap:.25em; font-size:1.063em; } .table_form .wrap_in .con_wrap > * { flex:1 1 0%; min-width:0 } .table_form .wrap_in .con_wrap .inp_tt { flex:0 0 auto; font-size:.938em; color:#666; } .table_form .wrap_in .con_wrap .input_st { width:100% } .table_form .wrap_in .con_wrap .line { padding-top:.75em; margin-top:.75em; border-top:1px solid #ddd } .table_form .wrap_in .con_wrap .w1 { flex:0 0 auto; width:3em } .table_form .wrap_in .con_wrap .w2 { flex:0 0 auto; width:9em } .table_form .wrap_in .con_wrap .w50 { flex:0 0 auto; width:50% } .table_form .wrap_in .con_wrap .w100 { flex:0 0 auto; width:100% } .table_form .wrap_in .con_wrap .w_auto { flex:0 0 auto } .table_form .wrap_in .con_wrap .max1 { max-width:27em } .table_form .wrap_in .con_wrap .max2 { max-width:8.375em } .table_form .wrap_in .con_wrap .max3 { max-width:23.5em } .table_form .wrap_in .con_wrap .min1 { min-width:23.5em } .table_form .wrap_in.col { flex-direction:column } .table_form .wrap_in.col > * { flex:0 0 auto; width:100% } .table_form .wrap_in.col .tit_wrap { padding:0 0; } .filebox label { padding: 10px 20px; color: #fff; background-color: #999; cursor: pointer; margin-left: 10px; display: flex; align-items: center; justify-content: center; width: 7.25em; min-width: 6.25em; } .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } .contact_wrap { gap: 6em; } .contact_wrap .qna_wrap { flex: 1 1 30%; height: 100%; } .contact_wrap .form_wrap { flex: 1 1 70%; } .qna_wrap .symbol { margin-bottom: .5em; } .qna_wrap .symbol > img { width: 3em; } .agree_box { transition:.2s; } .agree_box:hover, .agree_box:focus { border-color:#000; } .agree_box .agree_wrap { overflow-y:scroll !important; } .agree_box .agree_wrap.st2 { height:16em; border: 1px solid #ddd; margin-top: 1em; padding: 2em 2.5em; border-radius: 0.5em; overflow: hidden; box-sizing: border-box; } .agree_box .tit { font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em } .agree_box .tit:first-child { margin-top:0 } .agree_box .con { font-size:.875em; color:#666; line-height:1.6 } .agree_box .con.hSt { overflow-y:scroll; height:10em; } .agree_box .con > * { padding-top:.5em; } .agree_box .check { padding: 1em 2em; text-align: center; background: #f5f5f5; } .agree_box .check .sub_tt { font-size: 1.125em; font-weight: 600; } .agree_box .label_st .xi { border: 1px solid var(--siteC); } .agree_box_pop { border-radius: .5em; border: 1px solid #ddd; padding: 1.5em 2em; color: #555; line-height: 1.8; font-size: 1.05em; } /*RND*/ .rnd { padding: 100px 7rem } .hover_wide { display: flex; gap:20px; width: 100% } .hover_wide .box { width: 210px; height: 580px; overflow: hidden; border-radius: 20px; padding: 75px 65px; transition-duration: 1s; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; cursor: pointer } .hover_wide .box.open { width: calc(100% - 420px); transition-duration: 1s } .hover_wide .box.rnd01 { background: url('../images/sub/busiCate_img02.jpg'); background-size: cover } .hover_wide .box.rnd02 { background: url('../images/sub/busiCate_img03.jpg'); background-size: cover } .hover_wide .box.rnd03 { background: url('../images/sub/busiCate_img04.jpg'); background-size: cover } .rnd_txt { visibility: hidden; opacity: 0; transition-duration: 1s } .rnd_txt p { font-size: 20px; color: #d9d9d9 } .rnd_txt h2 { color: #fff; font-size: 30px; font-weight: 600; margin-top: 20px; word-break: keep-all } .hover_wide .box.open .rnd_txt { visibility:visible; opacity: 1; transition-duration: 1s; transition-delay: .5s } .rnd .last_p { font-size: 22px; color: #000; line-height: 38px; font-weight: 400; margin-top: 60px; text-align: center } .tlb { } .tlb table { width: 100%; border-spacing: 0 } .tlb table th { text-align: center; color: #fff; font-size: 22px; background: #0F87C6; padding:35px 20px; border-left: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF } .tlb table th:first-child { border-left: 0px } .tlb table td { text-align: center; color: #000; font-size: 20px; background: #fff; padding:35px 20px; border-left: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF } .tlb table td:first-child { border-left: 0px } .tlb table td.gray { background: #FBFBFB; } .tlb table td img { margin: 0 auto } .tlb.w50 table td { width: 50% } .tlb.w30 table td { width: 33.33% } /* prod_view */ .prodView_page { } .prodView_intro { gap:4em; margin-bottom: 4em; padding: 0 3px; } .prodView_intro .prodView_img { width:45%; padding: 1em; box-sizing: border-box; border:1px solid #ddd; box-shadow:0 0 5px rgba(0, 0, 0, .1); } /* .prodView_intro .prodView_img .img { width: 100%; } .prodView_intro .prodView_img .img img { width: 100%; } */ .prodView_intro .prodView_img .prdimgSlide { overflow: hidden; } .prodView_intro .prodView_img .prdimgSlide .swiper-wrapper { } .prodView_intro .prodView_img .prdimgSlide .el { } .prodView_intro .prodView_img .prdimgSlide .el .img { width: 100%; height: 0; padding-bottom: 80%; position: relative; } .prodView_intro .prodView_img .prdimgSlide .el .img img { width: 100%; height: 100%; object-fit: contain; position: absolute; left: 0; top: 0; } .prodView_intro .prodView_img .prdimgSlide .swiperBtn { display: flex; justify-content: center; align-items: center; width: 2.5em; height: 2.5em; border:none; background: rgba(0, 0, 0, .15); color:#fff; } .prodView_intro .prodView_img .prdimgSlide .swiperBtn::before { font-size: 1.125em; } .prodView_intro .prodView_img .prdimgSlideThumb { background: #f8f8f8; overflow: hidden; } .prodView_intro .prodView_img .prdimgSlideThumb .swiper-wrapper { } .prodView_intro .prodView_img .prdimgSlideThumb .el { box-sizing: border-box; } .prodView_intro .prodView_img .prdimgSlideThumb .el .img { width: 100%; height: 100%; } .prodView_intro .prodView_img .prdimgSlideThumb .el .img img { width: 100%; height: 100%; object-fit: cover; } .prodView_intro .prodView_img .prdimgSlide .swiperBtn.next { position: absolute!important; right: 0; } .prodView_intro .prodView_img .prdimgSlide .swiperBtn.prev { position: absolute!important; left: 0; } .prodView_intro .prodView_info { flex:1; padding: 1em 0; position:relative; border-bottom: 1px solid #ddd;} .prodView_intro .prodView_info .prod_tit { border-bottom:2px solid var(--siteC2); padding:.5em .5em .5em 0em; } .prodView_intro .prodView_info .prod_tit .t1 { font-size:1.45em; color:var(--siteC); font-weight:800; } .prodView_intro .prodView_info .prod_tit .t2 { font-size:1.1em; color:#555; padding-top:.625em; } .prodView_intro .prodView_info .prod_tit .t3 { font-size:1.1em; color:#333; padding-top:.625em; } .info_list {padding: 1em 1em; box-sizing: border-box;} .info_list > li { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px dashed #ddd;} .info_list > li:last-child {margin-bottom: unset; border-bottom: unset; padding-bottom: unset;} .info_list1 {} .info_list1 .tt {font-size: 1.1em; font-weight: 600; line-height: 1.5;} .info_list2 {} .info_list2 .tit {margin-bottom: .5em;} .info_list2 > ul {background: #f4f4f4; padding: 1em;} .info_list2 > ul > li {margin-bottom: .7em;} .info_list2 > ul > li:last-child {margin-bottom: unset;} .info_list2 > ul > li .tt {font-size: 1em; position: relative; padding-left: 1em;} .info_list2 > ul > li .tt::before {content: ""; position: absolute; left: 0; top: .5em; width: .313em; height: .313em; background: var(--siteC); border-radius: 50%;} .prodView_intro .prodView_info .table_st .w_form_tit { width:12em; } .prodView_intro .prodView_info .table_st th, .prodView_intro .prodView_info .table_st td { height: 1.875em; padding:1em 1.5em; text-align-last: left; } .prodView_intro .prodView_info .table_st tr:not(:last-child) th, .prodView_intro .prodView_info .table_st tr:not(:last-child) td { border-bottom:1px solid #ddd } .prodView_intro .prodView_info .table_st th { background-color:#f6f6f6; } .prodView_intro .prodView_info .table_st.prod_info { border-bottom:2px solid #333; } .prodView_intro .prodView_info .table_st.prod_info .tt { font-size:1.1em; color:#111; } .prodView_intro .prodView_info .table_st.prod_info .td { font-size:1.1em; color:#555; } .prodView_intro .prodView_btn { gap:.2em; } .prodView_intro .prodView_btn > li { flex:1; } .prodView_intro .prodView_btn > li * { transition:.3s } .prodView_intro .prodView_btn > li.st1 { } .prodView_intro .prodView_btn > li.st2 { } .prodView_intro .prodView_btn > li.st3 { } .prodView_intro .prodView_btn > li.st4 { } .prodView_intro .prodView_btn > li .btn { display:block; line-height:3.5em; text-align:center; font-size:1.063em; font-weight:500; border:1px solid transparent; position:relative; } .prodView_intro .prodView_btn > li .btn * { vertical-align:top; } .prodView_intro .prodView_btn > li .btn .icon { font-size:1.5em; padding-right:10px } .prodView_intro .prodView_btn > li.st1 .btn { background:var(--siteC2); color:#fff } .prodView_intro .prodView_btn > li.st2 .btn { background:#333; color:#fff } .prodView_intro .prodView_btn > li.st3 .btn { background:#fff; border-color:#333; color:#333 } .prodView_intro .prodView_btn > li.st4 .btn { background:#844890; color:#fff } .prodView_intro .prodView_btn > li .btn .arrow { font-size:1em; width:0; overflow:hidden } .prodView_intro .prodView_btn > li .btn .arrow:after { content:"\e93f"; padding-left:3px } .prodView_intro .prodView_btn > li:hover .btn .arrow { width:20px } .prodView_spec { width: 100%; } /* .prodView_spec .list_tab { display: flex; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .prodView_spec .list_tab > li { flex:1; height: 3.5em; border-top:1px solid #ddd; border-bottom: 2px solid #111; background: #fff; transition: border-color .3s; } .prodView_spec .list_tab > li:not(.on) + li { border-left: 1px solid #ddd;; } .prodView_spec .list_tab > li .tab_tt { font-size: 1.125em; color:#333; text-align: center; line-height: 3.5rem; } .prodView_spec .list_tab > li.on { border:2px solid #111!important; border-bottom: none!important; } */ /* line style */ .prodView_spec .list_tab { display: flex; } .prodView_spec .list_tab > li { flex:1; height: 3.5em; background: #f4f4f4; transition: all .3s; } .prodView_spec .list_tab > li:not(.on) + li { border-left: 1px solid #ddd; } .prodView_spec .list_tab > li .tab_tt { font-size: 1.125em; color:#777; text-align: center; line-height: 3.5rem; } .prodView_spec .list_tab > li.on { background: var(--siteC2); } .prodView_spec .list_tab > li.on .tab_tt { color:#fff; } .prodView_spec .con_idx { border-top:1px solid #ddd; } .prodView_spec .con_idx .idx { } .prodView_spec .con_idx .idx .tab_con { } .prodView_spec .con_idx .idx .tab_con { } .prodView_spec .con_idx .idx .tab_con .tab_Wrap { padding: 3em 0.3em; box-sizing: border-box; height: 100%; width: 100%; } .prodView_spec .con_idx .idx .tab_con .tab_Wrap .page_tit { border-bottom: 3px solid var(--siteC); padding-bottom: .5em; } .imgW{padding: 2em 0; box-sizing: border-box;} .imgW.bbL { width: 100%; border-bottom: 1px solid #333; margin-bottom: .5em; } .in.inB { border: 1px solid #ddd; display: flex ; flex-direction: column; align-items: center; justify-content: center; } .in .txtbox { width: 100%; background: var(--siteC); height: 3em; text-align: center; line-height: 3em; } .in .txtbox p{color: #fff; font-weight: 700; } .prodView_spec .spec_wrap { margin-top:2em; padding: 0 1em; box-sizing: border-box; } /* .prodView_spec .spec_wrap + .spec_wrap { margin-top:2em; } */ .prodView_spec .spec_wrap .spec_tit { border-bottom: 1px solid #111; padding: 0.75em 0; } .prodView_spec .spec_wrap .spec_tit .t1 { font-weight: 600; font-size: 1.5em; color:#333; } .prodView_spec .spec_wrap .spec_con { padding:3em 1em; } .prodView_spec .spec_wrap .spec_con.spec { padding:2em 1.5em; } .prodView_spec .spec_wrap .spec_con.as { padding:2em 3em; } .prodView_spec .spec_wrap .spec_con.bg { background-color:#f6f6f6; } .prodView_spec .spec_wrap .spec_con.bg .inner { padding:2.5em 1.5em; border-radius:.5em; background-color:#fff; } .prodView_spec .spec_wrap .spec_con.spec .inner > p { font-size:1.125em; line-height: 1.4; color:#333; word-break:keep-all; } .prodView_spec .spec_wrap .spec_con.spec .inner > p + p { margin-top:2em; } .prodView_spec .spec_wrap .spec_con.spec .inner > p strong { font-weight: 600; color:var(--siteC2); } .prodView_spec .spec_wrap .spec_con.spec .inner table { margin:0 auto } .prodView_spec .spec_wrap .spec_con.spec .inner img { max-width: 100%; } .prodView_photo {} .prodView_photo .tit {font-size: 1.6em; font-weight: 600; border-bottom: 1px solid var(--siteC); margin-bottom: 1em; padding-bottom: .5em;} .prodView_photo .photo_tab {background: #f4f4f4; border-radius: .5em; margin-bottom: 2em; overflow: hidden;} .prodView_photo .photo_tab li {flex: 1; border: 2px solid #f4f4f4;} .prodView_photo .photo_tab li .in {padding: 1em; display: block; text-align: center;} .prodView_photo .photo_tab li.on, .prodView_photo .photo_tab li:hover { border-color: var(--siteC);} .prodView_photo .photo_tab li.on .in {background: var(--siteC); color: #fff; font-weight: 500; height: 100%;} .prodView_photo .photo_tab li .in .tab_tt {font-size: 1.125em;} .relprod_wrap { padding:0 1.55em; box-sizing:border-box; position: relative; } .relprod_wrap .relprod_slide { overflow:hidden; } .relprod_wrap .relprod_slide .swiper-slide { } .relprod_wrap .relprod_slide .prod { } .relprod_wrap .relprod_slide .swiperBtn.next { position: absolute!important; right: 0; } .relprod_wrap .relprod_slide .swiperBtn.prev { position: absolute!important; left: 0; } .prod_cate_wrap { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; margin-bottom:2em; margin-left:1em; margin-right:1em; margin-top:1em; } .prod_cate_wrap .list { display: flex; border: 1px solid #ddd; border-radius: 3em; overflow: hidden; width: 50%; } .prod_cate_wrap .list > li { display:inline-block; flex: 1 25%; border-right: 1px solid #ddd; } .prod_cate_wrap .list > li > a { font-size:1.188em; color:#777; position:relative; transition:.3s; display:block;; background: #ddd; padding:.5em; box-sizing: border-box; } /* .prod_cate_wrap .list > li > a:after { content:""; position:absolute; left:50%; bottom:-3px; width:30px; height:5px; background:#0c61b5; margin-left:-15px; opacity:0; } */ .prod_cate_wrap .list > li.on > a, .prod_cate_wrap .list > li:hover > a { background-color:#0c61b5; color: #fff; } .prod_cate_wrap .list > li.on > a:after { opacity:1 } .popup { display: none; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); padding: 10px; border-radius: 10px; } .popup img { width: 300px; height: auto; border-radius: 5px; }